www.webdeveloper.com
Results 1 to 4 of 4

Thread: Slideshow/clicking through divs help!

  1. #1
    Join Date
    Feb 2010
    Posts
    2

    Unhappy Slideshow/clicking through divs help!

    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";
    		}
    	}
    }

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,262

    Lightbulb

    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>

  3. #3
    Join Date
    Feb 2010
    Posts
    2
    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!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,262
    You're welcome.
    Study hard, not hardly study.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles