SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reverse direction of jquery .slideToggle() - slideDown/slideUp behavior?

    Hi,

    I've been looking at jquery to replicate an effect I saw on the Drupal website (the advanced options of the search box). As I think trying this stuff out is the best way to learn I have built a demo.

    My demo

    However, I'm now trying to work out how to reverse this effect - so the hidden content is revealed by sliding up rather than down. Is there any way to reverse the default jquery slideDown/slideUp behavior?

    I found this tutorial but the css means that there is an existing "space" for the hidden content to move into. I would like the content to appear over the top of existing content.

    Any pointers?

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Explicitly call slideUp or slideDown instead of slideToggle.

    You make some element appear on top of another element by settings its CSS z-index property to a higher value. Make sure to also set a position property on that element.

  3. #3
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan but Im not sure I've explained it correctly.

    I would like to slide the box out in an upward direction — please see this diagram

  4. #4
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do I need to abandon the jquery slide functions and look into the animate function?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •