Floating Search Box With Jquery

by dibalik seo

HTML

<label id="search-label" title="Search">
  <svg viewBox="0 0 24 24">
    <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</label>


<div id="ddsearchcontainer">
<div class="search_wrapper">
    <form class="zoomIn" id="search" action='/search' method='get'>
    <input name='max-results' type='hidden' value='8'/>
    <input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms...">
    <div>Press Enter to Search</div>
    </form>
</div>
</div>

CSS

label#search-label {
    cursor: pointer;
}
label#search-label svg{
    width:24px;height:24px
}
label#search-label svg path{
    fill:#666
}
div#ddsearchcontainer div {
    padding: 5px;
    color: #efefef;
    text-align:center;
}

div#ddsearchcontainer form {
  display: none;
}

div#ddsearchcontainer form input[type="text"] {
    width: 100%;
    top: 0;
    left:0;
    z-index: 99;
    padding: 10px;
    border: none;
    border-bottom: 4px solid black;
    outline: none;
    font-size: 3em;
    background: #eee;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
html.opensearch div#ddsearchcontainer {
  position:fixed;
  top:0;
  width:100%;
  height:100%;
    left: 0;
    opacity: 1;
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;
    transition: transform .5s, opacity .5s, left 0s 0s;
    z-index:9999;
}
html.opensearch div#ddsearchcontainer .search_wrapper{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
    padding:10% 5% 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
html.opensearch div#ddsearchcontainer:before{
  content:"";
  background:rgba(0,0,0,.7);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
}
html.opensearch div#ddsearchcontainer form {
  display: block;
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity:...

JavaScript

var fixedsearchbox=function(e){var n,o,t,a=e(document.documentElement),r=null!=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),s=r?"touchstart":"click",c=100,i=27,u={init:function(){n=e("#ddsearchcontainer"),o=e("#search-terms"),t=e("#search-label"),t.on(s,function(e){n.css("top","px"),a.toggleClass("opensearch"),a.hasClass("opensearch")?(n.css("zIndex",c++),o.focus()):o.blur(),e.preventDefault(),e.stopPropagation()}),o.on(s,function(e){e.stopPropagation()}),e(document).on(s+" keyup",function(e){"keyup"==e.type&&e.keyCode!=i||(a.removeClass("opensearch"),o.blur())})}};return u}(jQuery);fixedsearchbox.init();