jqueryclickjquery-hover

after clicking button should be displayed permanently


I am new in jQuery and I tried something. I created a container which holds a button. This button will be displayed if I am hovering the container. If I am hovering the button the css changed again and after a click a window occurred. This is working fine.

So here is the HTML:

<div class="holder">
    <div class="button"><span>Button</span></div>
    <div class="window"></div>
</div>

And the jQuery:

$(document).ready(function() {
    $('.holder').hover(function() {
        $('.button').css('display','block');
        $('.button').hover(function() {
            $(this).css('border','1px solid #999');
            $('.button span').css('color','#999');
        }, function() {
            $(this).css('border','1px solid #ccc');
            $('.button span').css('color','#ccc');
        });
    }, function() {
        $('.button').css('display','none');
    });
    $('.button').click(function() {
        $('.window').toggle();
        if ($('.window:visible').size() != 0) {
            return false;
        }
    });
    $(document).click(function() {
        $('.window').hide();
    });
    $('.window').click(function(e) {
        e.stopPropagation();
    });
});

And here is a DEMO: http://jsfiddle.net/9bf8f/15/

The problem is that the button has to be displayed permanently until the window is closed. Also when I leave the container (holder).

Thank you for helping.


Solution

  • I'm not sure I understand the question correctly, but if you would like to stop the button from being hidden if it have been clicked you could change this:

    $('.button').css('display', 'none');
    

    to

    $('.button:not(.active)').css('display', 'none');
    

    and add the following in the buttons click method:

    $(this).addClass('active');
    

    This simply adds a new class to the button once it's clicked and only hides the button if this class isn't set.

    Here is a jsfiddle

    If you only wan't to stop the button from hiding when the .window div is visible you could simply use toggleClass() instead of addClass():

    $(this).toggleClass('active');