- This topic is empty.
August 19, 2011 at 12:05 am #33969
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.August 19, 2011 at 12:59 am #85219August 19, 2011 at 1:32 am #85221
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!August 19, 2011 at 2:27 am #85222jamygoldenMember
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.August 19, 2011 at 10:36 am #85243
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?August 21, 2011 at 1:19 pm #85348
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!August 23, 2011 at 12:32 pm #85524
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?