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
[email protected]
http://jquery.com/discuss/
