Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript slide-down search box

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #33969
    gromfy
    Member

    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.

    #85219
    jamygolden
    Moderator
    #85221
    gromfy
    Member

    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!

    #85222
    jamygolden
    Moderator

    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.

    #85243
    gromfy
    Member

    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?

    #85348
    gromfy
    Member

    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!

    #85524
    gromfy
    Member

    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?

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.