SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble changing CSS classes

    I'm trying to make a function that will change the classes of four images every 10 sec so that they rotate from foreground to background. I've tested the code with Firebug and it does not produce any errors. I've also placed a console.log inside of the loop so that I can confirm that the classes are being changed correctly. However, it simply does not seem to work. I think the problem might be in the JS where I concatenate "position" + i, but I'm not sure.

    Here's all the relevant code:


    HTML Code:
    <body>
    	<div id="page">
    
    	<div class="container">
    			<img src="images/one.jpg" class="position0" alt="" />
    	
    			<img src="images/two.jpg" class="position1" alt="" />
    		
    			<img src="images/three.jpg" class="position2" alt="" />
    	
    			<img src="images/four.jpg" alt="" class="position3" />
    		
    		</div>
    	
    	
    	</div> <!-- page -->
    	<script type="text/javascript" src="javascript/image-slider-test.js"></script>
    	</body>
    Code:
    body {
    	font-size: 100%;
    	background: #242929;
    }
    
    #page {
    	position: relative;
    	width: 900px;
    	margin: 100px auto 100px;
    	height: 500px;
    }
    
    .container {
    	position: relative;
    	width: 363px;
    	height: 256px;
    }
    
    .position0 {
    	position: absolute;
    	z-index: 4;
    }
    
    .position1 {
    	width: 90%;
    	height: 90%;
    	opacity: .75;
    	position: absolute;
    	right: -12px;
    	top: 5%;
    	z-index: 3;
    }
    
    .position2 {
    	width: 80%;
    	height: 80%;
    	opacity: .5;
    	position: absolute;
    	right: -24px;
    	top: 10%;
    	z-index: 2;
    }
    
    .position3 {
    	width: 70%;
    	height: 70%;
    	opacity: .25;
    	position: absolute;
    	right: -36px;
    	top: 15%;
    	z-index: 1;
    }
    Code:
    var change = function() {
    	var images = document.getElementsByTagName("img");
    	
    	for(i = 0; i < images.length; i++) {
    		images[i].className = "position" + i;
    		console.log(images[i].className);
    	}
    
    };
    
    // call change() every 10 sec
    setInterval(change, 10000);
    Thanks for helping!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    body {
    	font-size: 100%;
    	background: #242929;
    }
    
    #page {
    	position: relative;
    	width: 900px;
    	margin: 100px auto 100px;
    	height: 500px;
    }
    
    .container {
    	position: relative;
    	width: 363px;
    	height: 256px;
    }
    
    .position0 {
    	position: absolute;
    	z-index: 4;
    }
    
    .position1 {
    	width: 90%;
    	height: 90%;
    	opacity: .75;
    	position: absolute;
    	right: -12px;
    	top: 5%;
    	z-index: 3;
    }
    
    .position2 {
    	width: 80%;
    	height: 80%;
    	opacity: .5;
    	position: absolute;
    	right: -24px;
    	top: 10%;
    	z-index: 2;
    }
    
    .position3 {
    	width: 70%;
    	height: 70%;
    	opacity: .25;
    	position: absolute;
    	right: -36px;
    	top: 15%;
    	z-index: 1;
    }
    /*]]>*/
    </style>
    </head>
    
    <body>
    	<div id="page">
    
    	<div class="container">
    			<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" class="position0" alt="" />
    
    			<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" class="position1" alt="" />
    
    			<img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" class="position2" alt="" />
    
    			<img src="http://www.vicsjavascripts.org.uk/StdImages/4.gif" alt="" class="position3" />
    
    		</div>
    
    
    	</div>
    <script  type="text/javascript">
    /*<![CDATA[*/
    var change = function() {
    	var images = document.getElementsByTagName("img");
    
     	for(var ary=[],i = 0; i < images.length; i++) {
    		ary[i]=images[i]; // must put the images in an array to shuffle them
    	}
        ary=shuffle(ary); // radomises the array
        for(var i = 0; i < ary.length; i++) {
    		ary[i].className = "position" + i;
    	}
    
    
    };
    
    function shuffle(ary){
     for (var r,t,z0=0;z0<ary.length;z0++){
      r=Math.floor(Math.random()*ary.length);
      t=ary[z0];
      ary[z0]=ary[r];
      ary[r]=t;
     }
     return ary;
    }
    
    // call change() every 10 sec
    setInterval(change, 2000);
    /*]]>*/
    </script>
    </body>
    
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Location
    au2650
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattSanchez View Post
    However, it simply does not seem to work.
    It does work as it is written.
    what is happening the for loop did the same thing each time therefore each image had the same class as before.

    But that is not what you wanted

    Try an alternative to Vic's

    just replace your JavaScript file with this one.

    Code:
    var swap = (function () {
    	var imgs, ii, jj, len, time;
    	function change() {
    	    for (ii = 0; ii < len; ii += 1) {
    		    imgs[ii].className = 'position' + ((jj + ii) % 4);
    		}
    		jj += 1;
    	}
    	function init() {
    		imgs = document.getElementsByTagName('img');
    		jj = 1;
    		len = imgs.length;
    		time = setInterval(function () {change(); }, 1000);
    	}
    	return ({
    	    start: init
    	});
    }());
    window.onload = function () {
    	swap.start();
    };

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    http://trephine.org/t/index.php?titl..._loop_closures

    The setTimeout() examples are pretty similar. Or
    https://developer.mozilla.org/en-US/...Guide/Closures skip to "Creating closures in loops: A common mistake"

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Location
    au2650
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    http://trephine.org/t/index.php?titl..._loop_closures

    The setTimeout() examples are pretty similar. Or
    https://developer.mozilla.org/en-US/...Guide/Closures skip to "Creating closures in loops: A common mistake"
    you seem to focus on *Creating closures in loops* so I checked mine and Vic's for loops and no closures are included.

    Please can you be more assertive in what you are trying to tell me..


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
  •