slide-down search box

[gromfy]

I’m looking for some direction and inspiration for implementing a jquery slide/pull-down search box into my blog. I mean something like this site’s search box: http://ijustine.com/

Anyone know of a good tutorial or have suggestions on where to start? Thanks.

[jamygolden]

http://jsfiddle.net/jamygolden/veTUS/
You get the idea :p

[gromfy]

Ah. I get the idea. It’s basically just a jquery slider. The trick is to get it to “stay” down when the search form gets clicked and is in focus. And then have it slide back when/if clicked out. If there’s any chance could push this ahead one more step to include the “clicked” state, I can tinker from there: http://jsfiddle.net/veTUS/2/

Thanks!

[jamygolden]

http://jsfiddle.net/veTUS/4/

The second random function is when you hover off of the element.
If the if statement detects whether the #query has focus or not. If not, it won’t slide up.

[gromfy]

Thank you so much. I was toying with slide vs. repositioning the background or div, and the slide works well for this.

What I was hoping to do was combine this with the “pull down” rope menus you previously helped me with: http://jsfiddle.net/2RqmU/15/ This new version adds the search icon with a “pull down” search box. I can’t figure how to use the same “random” function to get it to “persist” on focus and “recede” when off.” Is there a simple fix, or does it mean revisiting this whole thing?

[gromfy]

So, I gave this a try a couple different ways:

(1) http://jsfiddle.net/veTUS/8/ This moves the search form into a div that slides down with the rest. I can’t get it to persist on focus, though.

(2) http://jsfiddle.net/veTUS/9/ This goes back to the original approach, with the hidden div static rather than sliding, but (a) puts the search div behind the image (making it un-clickable, despite the z-index monkeying) and (b) makes it reveal in an unnatural way, since one div is sliding and the other is static.

Any ideas on a different approach? Maybe something closing to background repositioning (a la the other icons here: http://jsfiddle.net/2RqmU/15/ )? Thanks!

[gromfy]

So, I kind of sort of hacked my way into making this work. Here’s the fiddle: http://jsfiddle.net/2RqmU/33/

I’m sure there were cleaner ways of accomplishing this (suggestions welcomed!), but it appears to get the job done.

I’m having trouble with the search animation/sliding queuing up actions, though, and a “.stop(true, false).” isn’t working as it does on the other items. Any suggestions on how to address that?

[Author]

Posts