Raible Designs

Added Google search to this theme

The idea hit me like a cold beer pouring down my throat on a hot summer day. Crisp, clean and exciting. I've been wanting to add a search form to this theme, but I didn't want to add another tab, and putting it anywhere in the header would conflict with the background image. And then I spotted the perfect spot. Right under the categories, in the banner of the first entry on this page. With a little love from the DOM, you can now search this site using this theme and Google. Here's the relevant code that I added to the bottom of this theme.

<div id="search" style="display:none; margin-top: -17px; text-align: right">
    <form id="searchForm" method="get" action="http://www.google.com/search"
        onsubmit="return search()" style="margin: 0; padding: 0">  
        <input type="text" id="q" name="q" size="20" maxlength="255"
            value="search this site" onclick="this.value=''" /> 
</div>
<script type="text/javascript">
    // get the first entry shown in the page and append the
    // hidden 'search' div from above
    document.getElementById("entries")
            .getElementsByTagName("div")[0]
            .appendChild(document.getElementById("search"));
    toggle("search");
    function search() {
        form = document.getElementById("searchForm");
        if (form.q.value == "search this site" || form.q.value == "") {
            alert("Please enter a search term to continue.");
            form.q.focus();
            return false;
        } else {
            form.q.value = form.q.value + " site:www.raibledesigns.com";
            form.submit();
        }
    }
</script>

Boy oh boy does the DOM make it easy to do web sites! Seems to work in all the browsers I use regularly (IE/Moz on Win, Camino/Safari on Mac). It doesn't work in Opera 6, but does in Opera 7. Now back to that cold beer - I'm gettin' thirsty...