Grow your CSS skills. Land your dream job.

Disable second button onclick event, if first button is clicked.

  • # April 21, 2013 at 11:20 am

    I have two buttons performing two different things but in the same way. If i click the first button an animation happens and to undo the animation you must click the same button once more. But if the user clicks the second button instead of the first one, the other animation for that second button happens, without undoing the first animation and everything goes nuts. So if a user clicks the first button, how do i disable the second button from being clicked until the user clicks that same button once again to undo the animation, and then the second button click is re-enabled?

    EDIT: and of course this would need to happen both ways.

    # April 21, 2013 at 11:39 am

    I’d do something like (assuming jQuery):

    var current;
    $(‘.first’).click(function() {
    if (current == null) {
    current = this;
    // start animation
    } else if (current == this) {
    // undo animation
    current = null;
    }
    });
    // same with $(.second’)

    Storing the Element that was clicked as reference so you know what animation is ‘active’.

    # April 21, 2013 at 11:41 am

    Try this: http://codepen.io/srig99/pen/xEmec.

    # April 21, 2013 at 11:45 am

    crocodillon@ That didn’t work, not sure if i did it wrong or if it just doesn’t work :P

    # April 21, 2013 at 11:49 am

    Probably me, didn’t test it :P I’ll go do that now

    # April 21, 2013 at 11:49 am

    @srig99 That also didn;t work. I should have mentioned that it’s not an actual button

    it’s an image with an onclick event handler

    # April 21, 2013 at 11:58 am

    http://codepen.io/CrocoDillon/pen/LAwFl

    does work, should work with any element… just went with buttons because @srig99 did :P

    Note you can’t use jQuery objects to compare if the same element is clicked. `$(this) == $(this)` will return false.

    # April 21, 2013 at 12:01 pm

    @Jarolin Yeah, @CrocoDillon and my solution should work for you…I don’t understand how it shouldn’t…Can you please make a pen to demonstrate so we can help more?

    # April 21, 2013 at 12:15 pm

    Here you go. Sorry it’s so messy. One button should be unclickable when the other is clicked once, when i’ts clicked twice, the other should be clickable. Scroll down a bit to see the buttons. ;lkbjvk http://codepen.io/Jarolin/pen/agmkf

    EDIT: you can get a better view of what’s going on here http://reallycoolstuff.net/PROJECTS/harol/index.html in “About Me” section

    # April 21, 2013 at 12:24 pm

    have a go with this one http://codepen.io/anon/pen/txvAI

    # April 21, 2013 at 12:29 pm

    I would use some elements to emulate fake disabled buttons: http://www.codepen.io/senff/pen/FBkyA

    # April 21, 2013 at 12:39 pm

    None of these are working and i’m sure it’s because of idiot me.
    @pixelgrid What i did with your code was just replace the class names with my class names and not even that worked.

    @senff Your code confused me alittle, but it didn’t work either way.

    # April 21, 2013 at 12:47 pm

    Did you load the jQuery library on your page? I don’t see it anywhere on the page you gave us as an example (http://reallycoolstuff.net/PROJECTS/harol/index.html), and all solutions posted here require that to work.

    If you don’t have it, add this line in the HEAD section of your site and try again:

    # April 21, 2013 at 12:49 pm

    @Senff I have other jQuery code working fine so everything must be loading fine. I don’t understand why these don’t work.

    # April 21, 2013 at 12:52 pm

    Ok, then can you use one of the examples above (take @pixelgrid‘s latest one for example) and use it on an actual page so we can check what might be the problem?

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

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