How My Search Box Works

You may not realize this, but there’s a search box hidden under the title of this page. You can’t see it, because the CSS for the search box has a “display: none;” tag on it.

There’s also a bit of javascript that makes the search box appear if you click on the “search” link in the navlinks bar.

Try it out…

The tumblr theme that I have on this blog right now is pretty fancy. I’m stealing a lot of tricks from it as I build my own design for this site. Since you could just right-click and select “View Source” and find this out, I feel free to share:

Want to make this fancy search box feature work on your own site? Here’s the CSS:

     #frmSearch {
        padding-top: 20px; 
        display: none;
     }

     #txtSearch {
        background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
        width: 225px;
        padding: 2px 0 0 20px;
        font: 12px/12px Georgia, "Times New Roman", Times, serif;
        color: #222;
        border: 0px;

}

And here’s the javascript:

<script>
     $(function() {
        var search = $("#txtSearch").val();
        var placeholder = "Search...";
        var fadeToOpacity = 0.4;
        $("#txtSearch").fadeTo("normal", fadeToOpacity);
        if (search == "") {
     $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").blur(function() {
        search = $("#txtSearch").val();
        if (!(search != "" && search != placeholder)) {
        $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").fadeTo("normal", fadeToOpacity);
     });
     $("#txtSearch").focus(function() {
        search = $("#txtSearch").val();
        if (search == placeholder) {
        $("#txtSearch").val("");
     }
     $("#txtSearch").fadeTo("normal", 1);
     });
     $("#btnSearch").click(function() {
     $("#frmSearch").slideToggle("normal");
     $(this).toggleClass("active");
 //  $("#txtSearch").focus();
     });
     });
</script>

David Croushore

2nd Jun 2011

How My Search Box Works