Ultimately I am trying to make a link not work once it is pressed and has brought up the relevant div (I want the link to work again when the relevant div is not showing). Page does not reload, as the links merely change what divs are displaying.
I have four links ('linkSweaters', 'linkService', 'linkContact', and 'linkSeamstress') corresponding to four divs ('rightContentSweaters', 'rightContentService', 'rightContentContact', and 'rightContentSeamstress'). At any one time, only one div should be displayed whilst all the others divs should be css: 'display:none'. I also have a 'rightContentSpacer' div, which increases in height when I click on any one of the links - thereby overlapping the div that is displayed at that time, which once overlapped I can then make disappear - and then shrinks again to uncover the div corresponding to the link pushed (which I make appear when the 'rightContentSpacer' is overlapping the previous div, thereby enabling the transition from one div to another).
My issue: When I have clicked on a link (e.g.'linkSweaters'), I do not want clicking on that same link to subsequently activate the jQuery animation as the related div is already showing (i.e. 'rightContentSweaters') - i.e. when 'rightContentSweaters' is showing I want the 'linkSweaters' link to do nothing when clicked on.
As below (right at the bottom of the following jQuery code), in order to make clicking on the link do nothing I have tried ' $("#linkSweaters").noop();'; this being conditional on the three other divs ('rightContentService', 'rightContentContact', and 'rightContentSeamstress') not showing i.e. being css: 'display:none'. The idea is that if the other three divs are not displayed, then that means (as one div must be displayed at any one time) 'rightContentSweaters' must be displayed.
Nevetheless, in my original CSS, whereas three divs ('rightContentSweaters', 'rightContentSeamstress', and 'rightContentContact) begin as 'display:none' when the page originally loads; one div ('rightContentService') does not start as 'display:none', as it already displayed:
#rightContentService {
height: 90%;
width:650px;
margin:0 auto;
background-color: red;
position:absolute;
display:block;
}
#rightContentSweaters {
height: 90%;
width:650px;
margin:0 auto;
background-color: red;
position:absolute;
display:none;
}
Hence why I have added the bit of jQuery code right at the bottom (i.e. the bit with the delay function), so that once I have clicked on a different link from the original page, 'rightContentService' becomes 'display:none'; and then the condition of all three divs being 'display:none' will work.
My jQuery is as follows:
$("#linkSweaters").click(function(){
if ($('#rightContentService').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none'){
$("#rightContentSpacer").animate({
height: "100%",
},1000);
$("#rightContentContact").animate({
height: "0",
},1000);
$("#rightContentContact").hide({
});
$('#rightContentSweaters').delay(2000).slideDown(1000, function() {
});
$("#rightContentSpacer").delay(1000).animate({
height: "10%",
},1000);
} else if ($('#rightContentService').css('display') == 'none' && $('#rightContentContact').css('display') == 'none'){
$("#rightContentSpacer").animate({
height: "100%",
},1000);
$("#rightContentSeamstress").animate({
height: "0",
},1000);
$("#rightContentSeamstress").hide({
});
$('#rightContentSweaters').delay(2000).slideDown(1000, function() {
});
$("#rightContentSpacer").delay(1000).animate({
height: "10%",
},1000);
} else if ($('#rightContentContact').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none'){
$("#rightContentSpacer").animate({
height: "100%",
},1000);
$("#rightContentService").animate({
height: "0",
},1000);
$("#rightContentService").hide({
});
$('#rightContentSweaters').delay(2000).slideDown(1000, function() {
});
$("#rightContentSpacer").delay(1000).animate({
height: "10%",
},1000);
} else if ($('#rightContentContact').css('display') == 'none' && $('#rightContentSeamstress').css('display') == 'none' && $('#rightContentService').css('display') == 'none'){
$("#linkSweaters").noop();
}
$('#rightContentService').delay(1000).queue(function (next) {
$(this).css('display', 'none');
next();
});
});
It does not work - I can still click on 'linkSweaters' after having clicked on it already with 'rightContentSweaters' being displayed. So it appears either (A) 'noop' is not working, or (B) my tri-conditional (x && y && z) is not working.
What do you think?
That's not what the noop method does. What it does is actually absolutely nothing.
The noop method is intended to be used where you need a function to be called, but calling the function isn't supposed to do anything. Instead of creating a new empty function, i.e. function(){} you can just use $.noop.
If you want to remove the click event handler from the element, you can use the off method:
$("#linkSweaters").off('click');