Grow your CSS skills. Land your dream job.

CSS positioning issue with jQuery

  • # August 18, 2012 at 12:45 pm

    Hi Guys

    Just wanted your help on a CSS Positioning issue. Here is the link to the code on code pen… http://codepen.io/anon/pen/FKdLq

    When you click on ‘Latest News’ the text slides in and out, however the actual button itself stays static. What I would like is for the ‘Latest News’ button to slide with the text when clicked but cannot figure it out :|

    The whole thing needs to be fixed to the browser window on the right.

    Any help would be appreciated.

    P.S. I am extremely new to jQuery, is my jQuery code ‘clean’? ;)

    # August 18, 2012 at 12:57 pm

    You might want to check the sizes etc, but the below should do the trick.

    Basically you needed to animate the H2 as well.

    http://codepen.io/anon/pen/asdxA

    # August 18, 2012 at 1:30 pm

    Andy your a star!

    That is spot on. I foolishly was thinking about the child-parent element but of course the latest news button was not a child, so your right, they both need to be animated.

    I have just done some messing about here made the button the child element, and of course, it now works that way also… http://codepen.io/anon/pen/Dapms

    Only problem with this though is I can’t see why z-index isn’t working on the button, so it is behind the grey .box and drop shadow.

    Do you see why thats not working? The main problem is already fixed, this is just out of curiosity.

    # August 18, 2012 at 5:07 pm

    Hmm, what browser are you using? Looks fine in Chrome on Mac.

    # August 18, 2012 at 8:06 pm

    just tried it in chrome and same problem, (was using safari on mac).

    The button should be behind the shadow. I removed the z-index on .box and applied a -1 z-index on .label, this now seems to work.

    Thanks though for your help with the main issue.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".