How to add search box at bottom right side

No comments

 JavaScript, CSS code for add Search Box at bottom right side

When visitors come to your website, he can look his/her need of content available at that page, if not leave the site, cannot wait for look search links or menu items. For that problem, when attach fixed search box at right side, he may search for his requirements.

That search box also display only scroll page certain lines, auto display search box. So visitors easy stay some more time, and search his requirements. Finally more number of pages utilize. 



CSS code for Search box display at bottom right corner

Following code as CSS code can insert at <Head> section


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />

<style>
 * {
  box-sizing: border-box;
}

#mySrn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 10px;
  z-index: 99;
  color:darkblue;
  border: none;
  outline: none;
 
  cursor: pointer;

}

form.example1 input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.example1 button {
  float: right;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example1 button:hover {
  background: #0b7dda;
}

form.example1::after {
  content: "";
  clear: both;
  display: table;
}
</style>
In the above code CSS code for displaying search box styles like textbox and submit button code.

HTML Code for Search box at bottom right side

Following code shows HTML tags that add at <body> section


<div id="mySrn">
<form class="example1" action="/search/" method="get">
  <input type="text" placeholder="Search..Here" name="q" />
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

</div>

In the above example code to display search box with <div> id as mySrn  ,it will display search box as stylish decoration and add javascript code as follows , see the Search box only appear at scrolling of certain lines over.

JavaScript code for Search box at bottom right Side

Following code shows JavaScript runtime code works only when the page scrolls bottom , this code add immediate after HTML code


<script>
// When the user scrolls down 20px from the top of the document, show the Search box
window.onscroll = function() {scrollFunction()};


function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("mySrn").style.display = "block";

  } else {
     document.getElementById("mySrn").style.display = "none";

  }
}

</script>
In the above code ,see as observation- When the user scrolls down 20px from the top of the document, show the Search box
Other Wise cannot show Search box.

The Complete code for add Search Box at bottom right Side

See below code as complete example code for Search box display at right side


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />

<style>
 * {
  box-sizing: border-box;
}

#mySrn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 10px;
  z-index: 99;
  color:darkblue;
  border: none;
  outline: none;
 
  cursor: pointer;

}

form.example1 input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.example1 button {
  float: right;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example1 button:hover {
  background: #0b7dda;
}

form.example1::after {
  content: "";
  clear: both;
  display: table;
}
</style>

<div id="mySrn">
<form class="example1" action="/search/" method="get">
  <input type="text" placeholder="Search..Here" name="q" />
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

</div>

<script>
// When the user scrolls down 20px from the top of the document, show the Search box
window.onscroll = function() {scrollFunction()};


function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("mySrn").style.display = "block";

  } else {
     document.getElementById("mySrn").style.display = "none";

  }
}

</script>
See below as Output of Search box display

0 Comments:

Post a Comment


Subscribe to: Post Comments (Atom)