help with slider

CyberShot · December 3, 2009

i need help with my code. I made a very very simple slider that does work. Here is the code

$("#headerBottom p").hide();
$("#logo").hide();

$("#headerBottom p:eq(4)").show();
$("#content span").hide();				 
    $("#content span:eq(0)").show();

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

   $("#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();
	}
 });
   
   $("#workPage").click(function(){
	if($("#content span:eq(2)").is(':visible'))
	{
		$("#workPage").show();
	} else {
	$("#content span").slideUp();
	$("#content span:eq(2)").slideDown();
	$("#headerBottom p").hide();
	$("#headerBottom p:eq(1)").show();
	}
 });

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

$("#contactPage").click(function(){
	if($("#content span:eq(4)").is(':visible'))
	{
		$("#contactPage").show();
	} else {

	$("#content span").slideUp();
	$("#content span:eq(4)").slideDown();
	$("#headerBottom p").hide();
	$("#headerBottom p:eq(3)").show();
	}
 });
});


my issue is that I am using the span tag as a hook. To say in the code...Find all span tags and hide their content. But the problem is that the span tag is an inline element and I am running into validation problems using a block element inside an inline element. So I need to re work this code. I thought instead. Maybe I could put my 4 divs into an array and call them that way or seperately. something like

var contentDiv = array [#about, #work, #social, #contact];

so then in my jquery above, instead of saying ("#content span").slideUp(); 

I could do ("contentDiv").slideUp();
("contentDiv:eq(1)").slideDown();

but not sure how to make the array. can you help

JustLikeIcarus · December 3, 2009

Is this what you meant regarding using an array?

var contentDiv = array ['about', 'work', 'social', 'contact'];

$.each(contentDiv. function(){
  $('#'+this).slideUp();
  $('#'+this+':eq(1)).slideDown();
});

CyberShot · December 3, 2009

what about the if statement in the code? would it be

if('#'+this+':eq(1)){

$(this).slidedown

} else {

rest of code here

}

JustLikeIcarus · December 3, 2009

Well looking at your original code it would be

if($('#'+this+':eq(1)').is(':visable')){

Right? Actually why is the if needed, and not just do

$('#'+this+':eq(1):visible').slideDown();

CyberShot · December 3, 2009

i didn't know you could do that. it does the same thing as the iff? I have been looking through the jquery, but sometimes the code examples they give are to confusing. so I tend to do things the long way around. I don't know javacript, learning it as I go along

JustLikeIcarus · December 3, 2009

Yeah im thinking that should do the same thing. jQuery is made of magicks haha. Its able to do a lot of neat things.

JustLikeIcarus · December 3, 2009

Is this the end result you are wanting?

http://jqueryfordesigners.com/coda-slider-effect/

CyberShot · December 3, 2009

i know of that slider, I have even used it. I was wanting to make my own to learn. I am going to try out your code right now and see if I can get it working on a test

CyberShot · December 3, 2009

I am getting a syntax error, this is my test code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
$(docuemtn).ready(function(){
var contentDiv = array ['about', 'work', 'social', 'contact'];

$.each(contentDiv. function(){  
$('#'+this+':eq(0)).hide();  
$('#'+this+':eq(1)).slideDown();
});

</script>

<style type="text/css">
#about {
width: 100px; height: 100px;
}

#work {
width: 100px; height: 100px;
}
#social {
width: 100px; height: 100px;
}
#contact {
width: 100px; height: 100px;
}
</style>
</head>

<body>

<div id="about">
about
</div>

<div id="work">
work
</div>

<div id="social">
social
</div>

<div id="contact">
contact
</div>
</body>
</html>

JustLikeIcarus · December 3, 2009

Your missing some single quotes after the eq()'s

CyberShot · December 3, 2009

ok, fixed that and also noticed that the funciton wasn't closed with the }); but still something is wrong

$(docuemtn).ready(function(){
var contentDiv = array ['about', 'work', 'social', 'contact'];

$.each(contentDiv .function(){  
$('#'+this+':eq(0)').hide();  
$('#'+this+':eq(1)').slideDown();
						});
					   });

Sign In

help with slider

Recommended Posts

CyberShot

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

CyberShot

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

CyberShot

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

CyberShot

Link to comment

Share on other sites

CyberShot

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

CyberShot

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information