Search box working in footer.html but not in index.html?

HTML-CSS
1

Hi

So I have made a search box in footer.html. And it seems to work when clicked in footer.html. But when the footer is loaded into index.html that same search box just sits there. And nothing happens when it is clicked. Perhaps you could tell me if I have put in the JQuery or JS strings in the wrong order or something.

Here is HTML of index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet.css">
    

   
    
    
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<title>Document</title>




</head>
<body>
    <div id="header"></div>
    <ul class="navbar" id="nav" id="exit"></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
    </ul>

    <div class="dummy-text">
        <h2>Welcome to a good clinic</h2>
      </div>

      
    <section class="Bigpost">
        <h1><img src="images.jpg" alt="server graphic">    
        </h1>
        
<div id="footer"></div>
</section>


   
   
   
    
   
    <script src="Javascript.js"></script>
</body>
</html>

Here is footer.html where the same animation works:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet.css">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
    <div class="footer-container">
        <div class="mainfooter">
            <div class="socials">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-dribbble"></i></a>
                <a href="#"><i class="fa fa-youtube"></i></a>
                <a href="#"><i class="fa fa-tumblr"></i></a>
                </div>
            <div class=footer 1>
                <h2>Adress</h2>
                <a href="#">Sagene Allé 30</a>
                <a href="#">43012 Oslo</a>
                <a href="#">(0047)56890</a>
            </div>
            <div class=footer 2>
                <h2>Contact</h2>
                <a href="#">Mail</a>
                <a href="#">About</a>
                <a href="#">Call us</a>
            </div>
            <div class=footer 3>

              <div class="search-box">
                <input type="text" placeholder="Type to search..">
                <div class="search-icon">
                  <i class="fas fa-search"></i>
                </div>
          <div class="cancel-icon">
                  <i class="fas fa-times"></i>
                </div>
          <div class="search-data">
          </div>
          </div>


            </div>
            
        </div>
    </div>

    <script src="Javascript.js"></script>
</body>
</html>```

Here is CSS for both the documents above:

.footer-container {
background-color: #000080;
display: flex;
position: relative;
width: 100%;
margin-bottom: 0px;
align-items: center;
padding-bottom: 4rem 0 4rem 0;

}

.mainfooter {
  width: 100%;
  height: 42vh;
  justify-content: center;
  display: flex;
  color: white;
  margin: 0 auto;
  align-items: center;
  background-color: #000080;
  position: absolute;
  margin-bottom: 0px;
}

.footer {
  display: flex;
  flex-direction: column;
  margin-right: 2rem;
    margin-top: 2rem;
}
.footer h2 {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.footer a {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.footer a:hover {
  cursor: pointer;
  color: greenyellow;
}

CSS for search box inserted in footer:

::selection{
  color: #fff;
  background: #664AFF;
}
.search-box{
  position: relative;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box.active{
  width: 350px;
}
.search-box input{
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50px;
  background: #fff;
  outline: none;
  padding: 0 60px 0 20px;
  font-size: 18px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box input.active{
  opacity: 1;
}
.search-box input::placeholder{
  color: #a6a6a6;
}
.search-box .search-icon{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 22px;
  color: #664AFF;
  cursor: pointer;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .search-icon.active{
  right: 5px;
  height: 50px;
  line-height: 50px;
  width: 50px;
  font-size: 20px;
  background: #664AFF;
  color: #fff;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: #fff;
  cursor: pointer;
  transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .cancel-icon.active{
  right: -40px;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .search-data{
  text-align: center;
  padding-top: 7px;
  color: #fff;
  font-size: 18px;
  word-wrap: break-word;
}
.search-box .search-data.active{
  display: none;
}
2

You forgot to post your Javascript.js, so I can’t help much. Do you get any errors in the console? Does the click event fire?

3

Hi :slight_smile:

This is in my Javascript-file:

$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
  $("#form").load("form.html"); 
});

  const searchBox = document.querySelector(".search-box");
      const searchBtn = document.querySelector(".search-icon");
      const cancelBtn = document.querySelector(".cancel-icon");
      const searchInput = document.querySelector("input");
      const searchData = document.querySelector(".search-data");
      searchBtn.onclick =()=>{
        searchBox.classList.add("active");
        searchBtn.classList.add("active");
        searchInput.classList.add("active");
        cancelBtn.classList.add("active");
        searchInput.focus();
        if(searchInput.value != ""){
          var values = searchInput.value;
          searchData.classList.remove("active");
          searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
        }else{
          searchData.textContent = "";
        }
      }
      cancelBtn.onclick =()=>{
        searchBox.classList.remove("active");
        searchBtn.classList.remove("active");
        searchInput.classList.remove("active");
        cancelBtn.classList.remove("active");
        searchData.classList.toggle("active");
        searchInput.value = "";
      }
4

Problem is that your Javascript.js runs before the footer is loaded. It looks for an element search-icon but that’s not in the document yet.

You’ll need separate scripts, one that loads your content, and a second one for the footer. The loader script goes into your index.html (doesn’t matter where), the footer script goes into footer.html, below all other elements. By the way the footer.html needs no DOCTYPE declaration or head, only the <div class="footer-container">.

You also don’t need two jQuery scripts, just load the first one (v 3.5.1).

You’ll get a deprecation warning in the console because this might not be the best way to handle dynamic loading of content, but I’ve little experience with this, and I have no clue what jQuery’s load method does, seems like it’s synchronous which blocks the site until the content is available. Maybe someone else has a better idea.

5

I changed it up a bit and then it worked.

6

Now I just wonder how I make it search for stuff? So if someone searches for “adress” it should give a few links to adress contact and stuff. But how to do that?

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.