Quick click on nav menu causing fadeIn of multiple divs
I have a problem with a script (my first attempt at jQuery) I wrote to fade into divs using the nav menu. If the user quickly clicks on various buttons in the navbar, it loads both divs on top of each other.
Here is the code:
$(document).ready(function(){
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#friends-button").css({
opacity: 0.3
});
$("#gallery-button").css({
opacity: 0.3
});
$("#container div.button").click(function(){
$clicked = $(this);
if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
{
$clicked.animate({
opacity: 1,
}, 600 );
var idToLoad = $clicked.attr("id").split('-');
$("#content").find("div:visible").fadeOut("slow", function(){
$(this).parent().find("#"+idToLoad[0]).fadeIn("slow")
})
}
$clicked.siblings(".button").animate({
opacity: 0.3,
}, 600 );
});
});
Here are the styles for divs and buttons:
#container{
width: 996px;
height: 1050px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
position: relative;
background-position: center top;
margin: 0px auto 0px auto;
}
#navbar {
width: 150px;
height: 300px;
position: absolute;
top: 250px;
left: 100px;
z-index: 2;
visibility: visible;
}
#about {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
overflow: auto;
}
#footer {
top: 950px;
height: 80px;
position: absolute;
color: #ffffff;
padding: 10px;
width: 988px;
text-align: right;
}
#contact {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#friends {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none
}
#gallery {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#home {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:block;
overflow: auto;
padding-right: 10px;
}
#home-button {
opacity: 1.0;
}
#about-button {
opacity: 0.5;
}
#contact-button {
opacity: 0.5;
}
#friends-button {
opacity: 0.5;
}
#gallery-button {
opacity: 0.5;
}
.button{
cursor: pointer;
}
#header{
top: 150px;
position: absolute;
left: 115px;
visibility: visible;
height: 100px;
The HTML markup should be correct, there are no child divs in any of the content areas, and I have no other conflicts I can find.
Is there a way to disable menu clicks until the div is: visible? If anyone has an answer for this or another fix, I'd really love to see it! this is the only error that has been found so far with the site.
Thanks!
Without seeing the complete image, I see a syntax error for the selector on the following line:
if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
A "not animated" selector must include ":" as follows:
if($clicked.css("opacity") != "1" && $clicked.is(":not(:animated)"))
a source to share
It looks like the first action of your click function should be to unbind the click event from all divs, and the last action should be to restore the listener.
The way to do this is to include most of your code in your own function (which you put outside of $ (document) .ready () {})
Something like that
$(document).ready(function(){
$("#container div.button").click(makeVisible);
});
function makeVisible() {
$("#container div.button").unbind(click);
///your code to make the div visible
$("#container div.button").click(makeVisible);
}
a source to share
Since animations are queued, a better approach would be to use the stop () method to force all other animated divs other than the current target to stop animating. See the documentation at http://docs.jquery.com/Effects/stop#clearQueuegotoEnd for more information .
a source to share