Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    jquery toggle blind with negative margins

    This is probably best illustrated with an example, so: example

    (Click the "Information Architecture" header to fire the effect)

    The problem I have is this:

    The light grey content box, with the dark grey header inside it, should slide into and out of visibility - which it's doing.

    However, also I need the blue background image on the header bar to overlap the dark grey content header.

    The way I've got this at the moment, I've simply used a negative topmargin on the content box to move it up, and z-index on that and the header bar to move it underneath. This does the job while everything is static. But while the animation is... animating, the effect is lost - the dark grey is no longer visible underneath the blue header image.

    I'm not really sure what's causing this, whether its root is a CSS or JS issue. But I'd really appreciate any suggestions....

    Cheers.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    No worries, figured it out. Took out the negative topmargin and used relative positioning with top: -5px; instead.

    (doh )


  •  

    Posting Permissions

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