Slideshow/clicking through divs help!

**silentslumber** · 02-25-2010, 05:16 PM

Hi there

I'm pretty new to Javascript, and I have this tutorial/slideshow assignment due next week.

Basically we're supposed to include 8 separate divs on our html document, that have a photo and some text in them (explaining each step of the tutorial). All the divs need the same class name. Then we're to use javascript to hide all of the divs except the first step. Then we need next and previous buttons to click through the different steps.

He gave us two separate examples (using peoples names as variables) in class. One on how to hide/show divs with javascript, and the other to make a prev/next button work. I've tried to combine the two...but no luck

I can get it to click through some of the divs, but it won't hide them when you first load the page, and on the 6th div it keeps showing the numbers 0 through 7 for some reason.

I've been changing variables and trying to figure this out for days now...Here is the code I'm using. Any help would be appreciated!

HTML

HTML 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>How to Make Cookies</title>
    <script src="script2.js" type="text/javascript"></script>
    <style>
	
		body{
			background-color:#E7E4D3;
		}
		
		div{
			width:650px;	
		}
    	      p{	
			font:Tahoma, Geneva, sans-serif;
			border:1px solid #000;
			background-color:#C36;
			padding:10px;
			margin:5px;
		}
		span.btn{
			border:1px solid #333;
			padding:5px;
			margin:5px;
			cursor:pointer;
			background-color:#FCC;
		}
			
    </style>
</head>

<body>

    <span class="btn" id="prev">Previous</span>
    <span class="btn" id="next">Next</span>
    
    <div id="slide">
         
    <div class="output">
   <p>
    Step 1<br/>
    <img src="images/1.jpg" />
    </p>
    </div>
    
    <div class="output">
    <p>
    Step 2<br/>
    <img src="images/2.jpg" />
    </p>
    </div>
       
    <div class="output">
    <p>
    Step 3<br/>
    <img src="images/3.jpg" />
    </div>
    
    <div class="output">
    <p>
    Step 4<br/>
    <img src="images/4.jpg" />
    </p>
    </div>
    
    <div class="output">
    <p>
    Step 5<br/>
    <img src="images/5.jpg" />
    </p>
    </div>
    
    <div id="output">
    <p>
    Step 6<br/>
    <img src="images/6.jpg" />
    </p>
    </div>
    
       
</div>   
</body>
</html>

Javascript

Code:

var names = ["bob", "fred", "george", "marc", "emma", "carol", "nicole"];

		
var currentNum = 0;

window.onload = init;

var allDivs;

function init(){
	var div=document.getElementById("output");
	//find the div where we will be putting the paragraphs
	//loop through the array "names" and create a paragraph for each
	for(var jeff=0;jeff< names.length; jeff++){
	//0, 1, 2, 3, 4, 5, 6, 7	
	var p = document.createElement("div");
	var t = document.createTextNode(jeff + " " + names [jeff]);
	div.appendChild( t );
	div.appendChild( p );
	//hide all variables except the first one
	if( currentNum == jeff){
	div.style.display="block";
	}else{
		div.style.display="none";
		}
	}
	//add the onclick handlers to the buttons
	document.getElementById("next").onclick = goNext;
	document.getElementById("prev").onclick = goPrev;
	
		}
	
	
			
	for(var i=0; i<names.length; i++){
		if( names[i].className == "output"){
			names[i].className = "";
		
				
		}else{
			//hello[i].className = "output";
			//The above line adds the class "output" to the divs that do not have it
			names[i].style.display ="none";
		
		}
	}

	

function goNext(){
	currentNum++;
	if(currentNum>names.length - 1){
		currentNum=0;
		//if the number goes above 7, set to 0
	}
	//after we change the number we must change the displayed paragraph
	changeDisplay();
}

function goPrev(){
	currentNum--;
	if(currentNum<0){
		currentNum=names.length-1;
		//if the number goes below 0, then set to 7
	}
//after we change the number we must change the displayed paragraph
	changeDisplay();
}

function changeDisplay(){
	var ps = document.getElementById("slide").getElementsByTagName("div");
	//only get the paragraphs inside the div "slide"
	for(var jeff=0;jeff< ps.length; jeff++){
		if( currentNum == jeff){
			ps[jeff].style.display="block";
		}else{
			ps[jeff].style.display="none";
		}
	}
}

**JMRKER** · 02-25-2010, 08:35 PM

You had a number of errors including;
1. No actions to perform on the Prev/Next buttons
2. Invalid reference to 'names', which is never defined.
3. You never told it to start the process (Initialize)
4. You reference a 'local' variable that needed to be a 'global': currentNum;
5. ...

I don't know if the images show as you did not proved a link. Added 'alt=xxx' to see that the changes occur.

Remember to check the error console results if usig FF
or look for the yellow ! triagle if using MSIE.

Make sure you can explain all suggestions made to the professor or he may deduce you did not do all the work!

Good Luck!

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>How to Make Cookies</title>
    
<!-- script src="script2.js" type="text/javascript"></script -->
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=225371

var currentNum = 0;

function goNext() {
	var names = document.getElementById('slide').getElementsByTagName('div');
	currentNum++;
	if (currentNum>=names.length) { currentNum=0; }
//after we change the number we must change the displayed paragraph
	changeDisplay();
}

function goPrev() {
	var names = document.getElementById('slide').getElementsByTagName('div');
	currentNum--;
	if (currentNum<0) { currentNum=names.length-1; }
//after we change the number we must change the displayed paragraph
	changeDisplay();
}

function changeDisplay() {
	var ps = document.getElementById("slide").getElementsByTagName("div");
//only get the paragraphs inside the div "slide"
	for(var jeff=0;jeff< ps.length; jeff++){
		if( currentNum == jeff) { ps[jeff].style.display="block"; }
		                   else { ps[jeff].style.display="none"; }
	}
}
function Initialize() {
  var sel = document.getElementById('slide').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none';	}    	
  document.getElementById('s0').style.display = 'block';
}

</script>
<style>
	body{
		background-color:#E7E4D3;
	}
		
	div{
		width:650px;	
	}
    p{	
		font-family:Tahoma, Geneva, sans-serif;
		border:1px solid #000;
		background-color:#C36;
		padding:10px;
		margin:5px;
	}
	span.btn{
		border:1px solid #333;
		padding:5px;
		margin:5px;
		cursor:pointer;
		background-color:#FCC;
	}
</style>
</head>

<body onload="Initialize()">

    <span class="btn" id="prev" onclick="goPrev()">Previous</span>
    <span class="btn" id="next" onclick="goNext()">Next</span>
    
<div id="slide">
         
    <div id="s0" class="output">
    <p> Step 1<br/> <img src="images/1.jpg" alt="1.jpg" /> </p>
    </div>
    
    <div id="s1" class="output">
    <p> Step 2<br/> <img src="images/2.jpg" alt="2.jpg" /> </p>
    </div>
       
    <div id="s2" class="output">
    <p> Step 3<br/> <img src="images/3.jpg" alt="3.jpg" /> </p>
    </div>
    
    <div id="s3" class="output">
    <p> Step 4<br/> <img src="images/4.jpg" alt="4.jpg" /> </p>
    </div>
    
    <div id="s4" class="output">
    <p> Step 5<br/> <img src="images/5.jpg" alt="5.jpg" /> </p>
    </div>
    
    <div id="s5" id="output">
    <p> Step 6<br/> <img src="images/6.jpg" alt="6.jpg" /> </p>
    </div>
       
</div>   
</body>
</html>

**silentslumber** · 02-25-2010, 09:01 PM

Thank-you so much! Yeah, I figured there were many errors...I had pretty much no idea what I was doing :P

I will definitely use the error console now that I know about it, and I will look over your code, and see if I can understand more about where I went wrong with my code.

Thanks again!