Jump to content

help with jquery conditional statement


CyberShot

Recommended Posts

I built a slider with four links. when you click the next link, the next page slides up from the bottom. and the previous page gets hidden. All is good. Here is a code sample. All the pages are the same

 

$("#aboutPage").click(function(){
	$("#headerBottom p:eq(4)").hide();
	$("#content span").slideUp();
	$("#content span:eq(1)").slideDown(); 
	$("#headerBottom p").hide();
	$("#headerBottom p:eq(0)").show();
 });

  when you click the anchor link with the id of aboutPage, I first hide some text inside a P tag with the index of 4, then make any content inside the span tag slideUp to hide all previous content, then slideDown the content I want. In this example, it's the about content. Then I hide a message in the header and show a different one.

 

what I need is a conditional statement that says if I am already showing this content, then to unbind the click event so that they page doesn't slide every time you press the about link when you are on the about page.

 

Here is what I have been trying

if($("#content span:eq(1)").is(':visible'))
{
	$("#aboutPage").unbind("click");
}

 

Link to comment
Share on other sites

well, I got it partially figured out I think. My content is simple. about page, work page, social page, and contact page.  each page is in a div

 

div id="about"

div id="work"

div id="social

div id="contact"

 

I wrapped every div in a span so that I would not need  the exact id of the div in order to hide it. I could just do $(span).hide() and every div would be gone. So now I did this

 

 


$("#aboutPage").click(function(){
	if($("#content span:eq(1)").is(':visible'))
	{
	$("#aboutPage").unbind("click");
	} else {
	$("#headerBottom p:eq(4)").hide();
	$("#content span").slideUp();
	$("#content span:eq(1)").slideDown(); 
	$("#headerBottom p").hide();
	$("#headerBottom p:eq(0)").show();
	}
 });

 

when I click the about nav link that hs the id aboutPage, the page does not slide again, however, I can not go back to it once I leave it. everything works fine until i go back to the about page and click the about link a second time. I can go to any other page, just not the about page again.

 

http://www.creativeeventsdesign.com/vCard

 

try it out

Link to comment
Share on other sites

figured it out. changed to this

 


$("#aboutPage").click(function(){
	if($("#content span:eq(1)").is(':visible'))
	{
	$("#aboutPage").show();
	} else {
	$("#headerBottom p:eq(4)").hide();
	$("#content span").slideUp();
	$("#content span:eq(1)").slideDown(); 
	$("#headerBottom p").hide();
	$("#headerBottom p:eq(0)").show();
	}
 });

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.