[jQuery] Toggle and $(document).click()
Hi everyone,
I'm in the process of creating contextual help for various settings in a setup system. As you can see below, I use the toggle function to show an inline popup box with a help message. Problem is that I want to make the popup disappear if the user clicks anywhere else in the system as well as on the help/close image. When using the $(document).click (below), it makes the popup disappear and changes the image back to the help icon. However, the toggle function still thinks I've just executed the first half of the function so when I try to click the image icon again, it executes the second half of the function. If I click the third time, it works just as expected.
Anyone able to give me any insight into how to solve this problem in a graceful manner. Any help is appreciated!
Thanks,
Rune
Code:
$('img.toggleHelp').toggle(function(){
var pos = $(this).parent('td:first').offset({ scroll: false });
$(this).next('.setupHelpContext')
.css({
display: "block",
position: "absolute",
top: pos.top + 22 +"px",
left: pos.left +"px"
}).fadeIn("slow");
$(this).attr({src: "../images/button-close.gif", alt: "Close Helptext"});
},function(){
$(this).attr({src: "../images/button-help.gif", alt: "Show Helptext"});
$('.setupHelpContext').fadeOut("fast");
});
}
$(document).click(function(){
if( $('.setupHelpContext').size() > 0 ){
$('
img.toggleHelp').attr({src: "../images/help2.gif", alt: "Show Helptext"});
$('.setupHelpContext').fadeOut("fast");
}
});
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/