SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slideshow thing - next, previous problem

    hi i have a slideshow with forward and previous buttons.
    I have this code inside a function , i post it as i think it is the relevant part.
    Code:
    function next(){
    		if(that.current>3){
    			that.current=0;
    		}
    		images[0].style.zIndex=1;
    		images[3].style.zIndex=1;
    		images[2].style.zIndex=1;
    		images[1].style.zIndex=1;
    		switch(that.current){
    			case 0:
    				if(that.repeat==0){
    				images[0].style.visibility="visible";
    				images[0].style.zIndex=6;
    				showInfo(info[0],0);
    				}else{
    				images[0].style.zIndex=5;
    				images[3].style.zIndex=6;
    				fadeOut(images[3],0,images[0]);
    				showInfo(info[0],0);
    				}
    				break;
    			case 1:
    				images[1].style.zIndex=5;
    				images[0].style.zIndex=6;
    				fadeOut(images[0],0,images[1]);
    				showInfo(info[1],0);
    				break;
    			case 2:
    				images[2].style.zIndex=5;
    				images[1].style.zIndex=6;
    				fadeOut(images[1],0,images[2]);
    				showInfo(info[2],0);
    				break;
    			case 3:
    				images[3].style.zIndex=5;
    				images[2].style.zIndex=6;
    				fadeOut(images[2],0,images[3]);
    				showInfo(info[3],0);
    				break;
    	
    		}
    		that.repeat=1; 
    	}
    	function previous(){
    		if(that.current<0){
    			that.current=3;
    		}
    		images[0].style.zIndex=1;
    		images[3].style.zIndex=1;
    		images[2].style.zIndex=1;
    		images[1].style.zIndex=1;
    		switch(that.current){
    			case 0:
    				images[0].style.zIndex=6;
    				images[3].style.zIndex=5;
    				fadeOut(images[0],0,images[3]);
    				showInfo(info[3],0);
    				break;
    			case 1:
    				images[1].style.zIndex=6;
    				images[0].style.zIndex=5;
    				fadeOut(images[1],0,images[0]);
    				showInfo(info[0],0);
    				break;
    			case 2:
    				images[2].style.zIndex=6;
    				images[1].style.zIndex=5;
    				fadeOut(images[2],0,images[1]);
    				showInfo(info[1],0);
    				break;
    			case 3:
    				images[3].style.zIndex=6;
    				images[2].style.zIndex=5;
    				fadeOut(images[3],0,images[2]);
    				showInfo(info[2],0);
    				break;
    	
    		}
    		that.repeat=1;
    	}
    	next();
    	that.loop=setInterval(function(){that.current++;next();},5000);
    	var linkNext=document.getElementById("next");
    	linkNext.onclick=function(){clearInterval(that.loop);that.current++;next();}
    	var linkPrev=document.getElementById("prev");
    	linkPrev.onclick=function(){that.previous=1;clearInterval(that.loop);that.current--;previous();}
    You can see the working script here http://web-in-a-box.co.cc/#
    The problems is that when first clicked previous decrements
    Code:
    that.current
    by 2, not by 1 as internded , for the first click. Next clicks are ok in the same function, but when you click next ,after you've clicked previous , next also increments by 2 .

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You have forgotten to return false from the next/previous link onclick events.

    Not returning false from those events causes a new page to load.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your reply.
    I've tried this:
    Code:
    linkPrev.onclick=function(){that.previous=1;clearInterval(that.loop);that.current--;previous();return false;}
    and the other way
    Code:
    linkPrev.addEventListener("click",function(){clearInterval(that.loop);that.current--;previous();},false);
    But nothing changes in the execution.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JohansonevR View Post
    But nothing changes in the execution.
    The web page with your code does not appear to have been updated yet.

    Use the first attempt that you posted before, and please for gods sake reformat the code so that it is more understandable, such as:

    Code javascript:
    linkPrev.onclick=function() {
        that.previous=1;
        clearInterval(that.loop);
        that.current--;
        previous();
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i've removed the statement that.previous=1;
    here is the code from the onclick events.
    Code:
    var linkNext=document.getElementById("next");
    	linkNext.onclick=function(){
    		clearInterval(that.loop);
    		that.current++;
                    next();
    	return false;
    	}
    var linkPrev=document.getElementById("prev");
    	linkPrev.onclick=function(){
    		clearInterval(that.loop);
    		that.current--;
    		previous();
    	return false;
    	}
    here is the updated site http://web-in-a-box.co.cc/
    Code:
    return false;
    doesn't do the trick.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JohansonevR View Post
    doesn't do the trick.
    That's one of the problems sorted out now.

    There are several other problems, but the main one is that the next function assumes that you're coming from a previous image.

    The standard technique here is to apply a setting to all images, and then to promote the chosen image in some way.

    What you are currently doing is to set a zindex of 5 to only one image, and then a zindex of 6 to the particular chosen image.

    Code javascript:
    case 1:
        images[1].style.zIndex=5;
        images[0].style.zIndex=6;
        fadeOut(images[0],0,images[1]);
        showInfo(info[1],0);
        break;

    What will be more effective, is to set all of the images to 5, then to promote your particular image.


    Code javascript:
    var i;
    for (i = 0; i < images.length; i += 1) {
        images[i].style.zIndex = 5;
    }
    ...
    case 1:
        images[0].style.zIndex=6;
        fadeOut(images[0],0,images[1]);
        showInfo(info[1],0);
        break;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for (i = 0; i < images.length; i += 1) {
    images[i].style.zIndex = 5;
    }
    for that one i agree.
    but for the other one i don't , because the z-index of the image i've choosed to promote, stays 6,
    Code:
    images[1].style.zIndex=6;
    				fadeOut(images[0],0,images[1]);
    				showInfo(info[1],0);
    if the loop is repeated(you click previous more than 4 times, all images receive zIndex 6. see what happens : http://web-in-a-box.co.cc/ try looping through the previous 2 or 3 times then click next. (and the other way around)
    I expect you have a solution for that as you've not stated all the reasons.
    Code:
    var next;
    var previous;
    ...
    that.next =function(){
    		if(that.current>3){
    			that.current=0;
    		}
    		for(var i=0;i<=3;i++){
    			images[i].style.zIndex=1;
    		}
    		switch(that.current){
    			case 0:
    				if(that.repeat==0){
    				images[0].style.visibility="visible";
    				images[0].style.zIndex=6;
    				showInfo(info[0],0);
    				}else{
    				images[3].style.zIndex=6;
    				fadeOut(images[3],0,images[0]);
    				showInfo(info[0],0);
    				}
    				break;
    			case 1:
    				images[0].style.zIndex=6;
    				fadeOut(images[0],0,images[1]);
    				showInfo(info[1],0);
    				break;
    			case 2:
    				images[1].style.zIndex=6;
    				fadeOut(images[1],0,images[2]);
    				showInfo(info[2],0);
    				break;
    			case 3:
    				images[2].style.zIndex=6;
    				fadeOut(images[2],0,images[3]);
    				showInfo(info[3],0);
    				break;
    	
    		}
    		that.repeat=1;
    	}
    	that.previous=function(){
    		if(that.current<0){
    			that.current=3;
    		}
    		for(var i=0;i<=3;i++){
    			images[i].style.zIndex=1; 
    		}
    		switch(that.current){
    			case 0:
    				images[0].style.zIndex=6;
    				fadeOut(images[0],0,images[3]);
    				showInfo(info[3],0);
    				break;
    			case 1:
    				images[1].style.zIndex=6;
    				fadeOut(images[1],0,images[0]);
    				showInfo(info[0],0);
    				break;
    			case 2:
    				images[2].style.zIndex=6;
    				fadeOut(images[2],0,images[1]);
    				showInfo(info[1],0);
    				break;
    			case 3:
    				images[3].style.zIndex=6;
    				fadeOut(images[3],0,images[2]);
    				showInfo(info[2],0);
    				break;
    	
    		}
    		that.repeat=1;
    	}
    	next();
    	that.loop=setInterval(function(){that.current++;next();},5000);
    var linkNext=document.getElementById("next");
    	linkNext.onclick=function(){
    		clearInterval(that.loop);
    		that.current++;next();
    	return false;
    	}
    var linkPrev=document.getElementById("prev");
    	linkPrev.onclick=function(){
    		clearInterval(that.loop);
    		that.current--;
    		previous();
    	return false;
    	}

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    There is also a logic problem.

    Consider this:

    The current index is 1, and you press the next button.
    * current index increases to 2
    * image 1 is faded out
    * image 2 (the current index) is shown

    Now you hit the previous button.
    * current index decreases to 1
    * image 1 (the current index) is faded out
    * image 0 is shown

    Why the problem exists is due to the current index being used to specify both the image to fade out (in the next function) and the image to show (in the previous function).

    The current index is currently wrongly used for two different purposes. Do you think that it's possible to fix that by ensuring that both the next function and the previous function use the same frame of reference for the current image number?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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