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.
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');