I have a script here, and it works amazing, except for one small detail. It basically runs as click function that fades in and out certain DIVs on the click of a link.
The problem is, however, that when you click ANYWHERE on the page, it removes the DIV and leaves an empty content area until you click one of the links. Obviously this is a problem.
I can't use the exact code I'm using for NDA reasons, but here is same setup I am using with just some plain text in the divs.
Just click the links to see the functionality, and then click anywhere else on the page (in the div, in the white space, whatever) and watch the div just disappear. I'm know that that is what the javascript is calling, but I don't know how to disable the click in the divs so this doesn't happen. Also, how to do that so it doesn't disable the link that are within that div.
Any help is greatly appreciated. This website is a life saver.
This is the original code I got off of this site edited to show my very basic layout. Basically a bunch of links that are inline and when clicked, they change a section of DIVS to another section of divs:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
</head>
<body>
<div id="menubar">
<a href="#" onclick="return false;" class="toggle" id="toggle1" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle2" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle3" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle4" style="display: inline;">
text here</a>
<div class="toggleh" id="toggle1h">
some description in here I suppose
</div>
<div class="toggleh" id="toggle2h" style="display: none;">
some description in here I suppose #2dsfds sdfdsfa sdf
</div>
<div class="toggleh" id="toggle3h" style="display: none;">
some description in here I suppose #3dffdfasdfdsfdfasf
</div>
<div class="toggleh" id="toggle4h" style="display: none;">
some description in here I suppose #4 dfdafa
</div>
</div>
</body>
</html>
$('*').click(... sets up a click handler for ALL elements (*). You can remove this function.
ReplyDeleteThat's what this code does:
ReplyDelete$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
It selects all of the elements in the document (including html and head and body and attaches a click handler to it. When you click on the document, it compares the id, which likely is empty and then fades out the displayed div.
Demo without that code.
Not the real expert
ReplyDeleteBut this seems to be the faulty part
$('*').click(function(e) {...............}