Grow your CSS skills. Land your dream job.

jQuery: Select only the container, not the children?

  • # March 7, 2010 at 12:17 pm

    Hi

    I have a box that animates with jQuery when clicked. It has two text links within it.
    When either of these links are clicked, jQuery registers a click on the box and animates.
    I understand why it happens, my question is:
    Is there any way to prevent or disable the animation when it’s a link that’s clicked instead of the box itself?

    If the next page loads fast enough (very fast) it’s okay.
    But if not (most of the time) it just looks strange to see the animation happening just as you leaving the page.

    Thanks for any help.

    Rob
    # March 7, 2010 at 12:30 pm

    Do you have a live version so we can have a look?

    # March 7, 2010 at 3:10 pm

    There’s no live version online yet, but I’ve put together a stripped down example from what I’m working with.
    I can’t upload the file, so here’s the code, I used links to boards on this forum as the example.
    Thanks,

    Code:
    < !DOCTYPE HTML>


    Link 1

    23-02-2010:

    Link 2

    Lorem ipsum dolor sit amet
    Consectetur adipisicing elit…

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Link 3

    19-02-2010:

    Link 4

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




    # March 8, 2010 at 4:26 am

    Yes, there is a way, its called stopProgagation(). When you click the link, the links activate, but technically you clicked on the box as well, so that is why you are getting both reactions. Here’s an example on how to fix it:

    Code:
    $(“a.yourlink”).click(function(event){
    event.stopPropagation();
    });

    That should stop is from moving up and activating the box as well.

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

You must be logged in to reply to this topic.

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