Want to get Lullabot article, videocast, and podcast announcements delivered right to your in-box?
Let us know your email address (we won't share it) and we'll let you know when anything exciting happens.
The Bitchin' Search Box
June 9, 2007
We got an email today saying:
your search tab is bitchen'. how did you do it? Is there a mod?
I thought it might make a good quick article to explain how we're doing the (bitchin') search box on the new Lullabot site.
First off, the basis of this site is the Zengine theme engine, which basically just adds a bunch of default templates and variables to the PHPTemplate theme engine. The page.zen.php that we're using in the Lullabot theme is only a slightly modified version of the original page.zen.php included with Zengine (which you can see here).
I've moved the <?php print $search_box; ?> before the <div id="logo-title"> and used some CSS to position it absolutely flush against the top of the page. The simplified version of the CSS looks a bit like this:
#search {
padding: 0; /* make sure there's no space around it */
position: absolute; /* position it absolutely with its positioned parent (#page) */
right: 0; /* align its right edge with the right side of its enclosing div */
top: 0; /* align its top edge with the top of the page */
}So that's what browsers without Javascript will see. They'll get the search box flush against the top of the page; no animation. It's important to write your static CSS for non-Javascript browsers. When a browser has Javascript enabled, Drupal adds a class = "js" to the root html element of the page so a good trick is to do a separate declaration for Javascript capable browsers. This can prevent a flash of the original positioning while the Javascript (that is going to position the element) is being loaded. I didn't do this in my original script, but I might add something like this if I'm seeing the search box flash on the page while the page is loading:
html.js #search {
top: -100px; /* get it off the page while we're figuring out its position */
}Now let's take a look at the JQuery magic that's operating the animation:
if (Drupal.jsEnabled) {
// Drupal's JS "kill switch".
// Don't do anything if browser isn't compatible.
$(document).ready(function(){
// JQuery's trick for running scripts before
// the page has finished loading
shight = $("#search").height() + 28;
// get the height of the #search div
// and add 28px for padding
soffset = -1 * (shight - 12);
// offset is search height minus 12px for the tab
$('#search').css({top: soffset});
// move the #search div up so that only the tab is exposed
$('#search').hover(
// defines what happens when you hover over the #search div
function() {$(this).animate({top:0}, 'slow', "bounceout", function(){$('#edit-search-theme-form-keys').focus();})},
// on mouseover: animate the position to 0
// at slow speed using bounceout easing,
// cursor in textfield when done
function() {setTimeout("$('#search').animate({top:soffset}, 'normal', 'bounceout')", 300)}
// on mouseout, wait 300ms,
// then animate back up at normal speed
// using bounceout easing
);
});
}
// this next bit defines the easing
// this function was nicked from the Interface library:
// http://interface.eyecon.ro
// I've chosen to just include this with the script
// rather than including the entire
// interface.js file on every page
jQuery.easing.bounceout = function(p, n, firstNum, delta, duration) {
if ((n/=duration) < (1/2.75)) {
return delta*(7.5625*n*n) + firstNum;
} else if (n < (2/2.75)) {
return delta*(7.5625*(n-=(1.5/2.75))*n + .75) + firstNum;
} else if (n < (2.5/2.75)) {
return delta*(7.5625*(n-=(2.25/2.75))*n + .9375) + firstNum;
} else {
return delta*(7.5625*(n-=(2.625/2.75))*n + .984375) + firstNum;
}
};I've stuck a lot of comments in there to try to make things easier to read. And now that I'm typing this up, there are a few nips and tucks that I'd like to make. But you get the basic jist of things. And JQuery makes it super-easy. Excluding the easing function, the actual animation is about 6 lines of JQuery.
So there you have it: bitchin' search box explained.
Comments
Thanks
It IS bitchen'!
We didn't say so because we were afraid you would keep it to yourself. Great work as always.
what dos bitchin mean
what dos bitchin mean
Thanks for this -- you may
Thanks for this -- you may wanna mention that jQuery 1.1.2 is required -- I tried it a few times with no luck before comparing lullabot's misc/jquery.js with the default in drupal 5.1, after updating it, it's working.
Oh so many moving parts!
Yes, we've got JQuery 1.1.2 installed via the JQuery Update module. I never tested with JQ 1.0.x because we didn't have it installed.
Great and funky... but doesn't work
It may well look great and funky - and I thought it was too - until I tried to use it. Here's what happens:
1. Put mouse over a few times, does the funky drop down, go back up thing.
2. Click in search box, begin typing a sear...
3. Oops, box has disappered back up to top
4. Mouse over again (even though we didn't mouse out), continue typ...
5. Darn it!
6. Grrrr.....
Not good guys. And I'm using Firefox 2, not some exotic (read: rubbish) browser such as IE.
More likely to cause bitchin'
I experience the same weirdness with the search widget in FF2 (at least on my desktop, not on my laptop).
Anyway, even if it did work as advertised, why hide a consistently important part of the site's navigation when there's more than enough screen real estate in the design to accommodate one that doesn't bounce around or hide itself?
Not only that, the handle to make it appear is an image, and won't scale up for the poor of sight or even people who just prefer to run at very high screen resolutions.
No offense to Jeff, as Lullabot's substance is consistently great, but the search box on this site is a serious failure in both concept and execution -- the energy spent on writing about it would be better spent on fixing it.
I guess the temptation of
I guess the temptation of doing stuff with jQuery is so big, because jQuery makes JavaScript attractive for developers. Nonetheless I agree that the behavior of this search implementation is not really user friendly. Instead of using mouseover a click event would probably be less obstrusive.
bitchin'©
I was the only who wrote the note. First I'd like to thank you for covering my the answer to my question to completely. Second I'd like to assert my copy right on the term "bithcin'" you now owe me 35 cents. Thank you for your prompt payment.
The check is in the mail...
The check is in the mail... :-)
bitchin' in public domain....
Dudes....bitchin' was the word from the early 70's - used by us Southern Cal surfer types...
"Man, that was a bitchin ride". (Referring to have caught a good wave.)
Example conversation: Dude 1; "Hey, check it out, that's bitchin". Dude 2: "Bitchin"
I think "bitchin" is open source...
:-)
Doug
PS
The search tab is bitchin.
re
Thank you for another interesting post Jeff! btw. I like to read Your blog because, it's a place where I often find interesting information’s, news etc. and I want to tell You that Your blog is on my favorite blog list. That’s why I want to ask You this question: Can I add links on my blog to Your posts, please?, If I choose one of Your posts for: "one of the most interesting posts of the week" list (not more then 5 links), at the end of the month I will set up online vote system for "the most interesting post of the month". If You can, please write Your answer under this comment or send me a mail. I hope it’s not abuse of your comments policy. Thanks
Why Zengine?
I'm wondering why exactly Lullabot opted to use Zengine, which is still in development, for the new theme instead of the proven phptemplate. What functionality made you take the leap?
Why Zengine
Well for one, I'm the author of the Zengine theme engine and I thought it would be a good chance to put it through its paces and test it out on a real world site. It also made for quick theming with easy CSS classes and ids and a lot of 'starter' code like a layout.css file which manages 1, 2, and 3 column layout.
Also note that Zengine is based on (and does a PHP include() on) the PHPTemplate code, so it's not really delving into new unproven territory so much as adding a layer of variables and CSS-handling on top of PHPTemplate.
Usability anyone?
Great blog and nice articles, but as someone already pointed out above - totally pointless feature the sliding searchbox. I normally always move away my mouse from the search box - so I can see what I'm typing. Once I do this - there goes your search box and hides itself.
Why not just show the search box, there is enough room in the header anyway? Was there a specific reason to add this feature, other than have something sliding on the page?
Thanks
Maybe this nice feature can
Maybe this nice feature can be improved:
- on mouse-over -> slide search box down, but input field has no focus
- if input field hasn't focus, and mouse-out occured -> slide up search box
- if input field has focus -> NOT slide up search box (even mouse-out occured)
In this scenario, some "slide up" (or roll-up) button is missing (in case input field has focus, but you wish to slide-up search box)
Agree
Let me first state that I love the effect.
I agree on the added scripts to swoosh or not to swoosh.
Wait... we are voting here, aren't we? *wink*
BTW: I love the stretchy comment box too. A nice touch.
How to fix that
First, thanks for sharing the JavaScript code!
Second, an easy mod would be: don't hide the search box if it's focused even if the mouse goes away. Or even don't close it if it's not empty :)
I think it is a very nice search box, although you can't make everybody happy ;)
Small bug...
Again, regarding the disappearing search box if you move out.
If you move your mouse into the search tab, then out, then in before it disappears and place the mouse just under where the shrunk tab will be, the tab starts popping in & out by itself... quite a funky effect :)
Cameron
re
It is very cool, but more on the gnarly side.
just a little bit of code ...
really interesting post with a nice look "behind the scene". after i read it i have get some ideas for making more of it, i will test it. thanks for the little inspiration.
with best wishes,
Carmen from dmp|cda
other blocks?
I like this idea, I'm wondering if it can be used with other elements like blocks, that are maybe created with views.... specifically the view bookmark module.. it would allow my sites users to bookmark nodes, and reference the from a slick dropdown user specific/maintained menu...Hmm I love it.
cool codes,
i tried it, and it works fine, thanks a lot...
It degrades.. it's cool :-)
Nice work!
If you don't have javascript enabled it degrades gracefully.
Tha'ts to shut up all the people who wrote about usability issues.
The roll-over, roll-out "buggish" effect only happens if you move your mouse too quickly on and off it. So unless you're looking to find the bug, you won't notice it.
Thanks for posting your work and I am an avid listener of your podcasts :-)
cheers,
Bitchin:-
Urban Dictionary - Bitchin
uhm
not to be a dick, but if u put ur mouse over the bar, out again, over again, .... a couple times really fast, it'll keep popping out and in (like most jQuery things do when u stresstest them)
but then when u scroll down, coz ur done fooking with it, the page will continue to jump up to the top until the search box is done jumping around
Post new comment