SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast demonDESIGN's Avatar
    Join Date
    Dec 2003
    Location
    Perth, WA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE seems to be incorrectly calcualting the length of an array

    Hi Guys,

    I'm using the Slideschow script from the Sitepoint JS Anthology book but am having issue with IE7 incorrectly calculating the array length.

    This is the JS code
    Code:
    // JavaScript Document
    
    // length of slideshow timer (seconds)
    var timer = 5;
    
    // array of photo names
    var mainURL = document.location.href;
    var splitURL = mainURL.substring(mainURL.lastIndexOf("/")+1,mainURL.length)
    var finalURL = splitURL.substring( 0 , splitURL.lastIndexOf(".") )
    
    switch (finalURL) {
    	case "frontpage":
    		var photos = [
    			['15', 'Alt for image number 1'],
    			['2', 'Alt for image number 1'],
    			['19', 'Alt for image number 1'],
    			['10', 'Alt for image number 1'],
    			['6', 'Alt for image number 1'],
    		];
    		break;
    		
    	case "releases":
    		var photos = [
    			['8', 'Alt for image number 1'],
    			['11', 'Alt for image number 1'],
    			['12', 'Alt for image number 1'],
    			['4', 'Alt for image number 1'],
    			['7', 'Alt for image number 1'],
    		];
    		break;
    
    	case "floorplans":
    		var photos = [
    			['14', 'Alt for image number 1'],
    			['16', 'Alt for image number 1'],
    			['17', 'Alt for image number 1'],
    			['6', 'Alt for image number 1'],
    			['19', 'Alt for image number 1'],
    		];
    		break;
    	
    	case "features":
    		var photos = [
    			['5', 'Alt for image number 1'],
    		  	['19', 'Alt for image number 1'],
    		  	['15', 'Alt for image number 1'],
    		  	['10', 'Alt for image number 1'],
    		  	['17', 'Alt for image number 1'],
    		];
    		break;
    
    	case "maps":
    		var photos = [
    			['18', 'Alt for image number 1'],
    		  	['14', 'Alt for image number 1'],
    		  	['17', 'Alt for image number 1'],
    		  	['2', 'Alt for image number 1'],
    		  	['11', 'Alt for image number 1'],
    		];
    		break;
    		
    	case "contact":
    		var photos = [
    			['4', 'Alt for image number 1'],
    		  	['13', 'Alt for image number 1'],
    		  	['15', 'Alt for image number 1'],
    		  	['6', 'Alt for image number 1'],
    		  	['8', 'Alt for image number 1'],
    		];
    		break;
    		
    	default:
    		var photos = [
    			['15', 'Alt for image number 1'],
    		  	['2', 'Alt for image number 1'],
    		  	['19', 'Alt for image number 1'],
    		  	['10', 'Alt for image number 1'],
    		  	['6', 'Alt for image number 1'],
    		];
    		break;
    }
    
    alert('length of array: '+ photos.length);
    var img, count = 1;
    
    function startSlideshow() {
    	img = document.getElementById('photo');
    	window.setTimeout('cueNextSlide()', timer * 1000);
    }
    
    function cueNextSlide() {
    	var next = new Image();
    	
    	next.onerror = function() {
    		alert('Failed to load next image');
    		//alert(finalURL);
    	}
    
    	next.onload = function() {
    		img.src = next.src;
    		img.alt = photos[count][1];
    		
    		if (++count == photos.length) { count = 0;}
    		
    		window.setTimeout('cueNextSlide()', timer * 1000);
    	}
    	alert(count);
    	alert('/images/headers/' + photos[count][0] + '.jpg');
    	next.src = '/images/headers/' + photos[count][0] + '.jpg';
    }
    addLoadEvent(startSlideshow);
    You can see a working version this at http://www.ningalooresort.com.au/frontpage.htm

    Using Firefox the first alert box the Length of the Array shows as 5, which is correct as you can see form above.

    However in IE (6 & 7) the Length of the Array shows as 6.

    The problem arises on the line below when it gets to the end of the array.
    Code:
    if (++count == photos.length) { count = 0;}
    IE trys to access photos[6] which doesn't exist.

    Hopefully someone can shed some light on it.

    I did make one change to the code to see if would make any difference (it didn't,...) which was to use >= instead of == on the IF statement.

    Thanks in advance
    --Neil

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    remove the comma after the last array item, i.e.

    Code:
            var photos = [
    			['15', 'Alt for image number 1'],
    			['2', 'Alt for image number 1'],
    			['19', 'Alt for image number 1'],
    			['10', 'Alt for image number 1'],
    			['6', 'Alt for image number 1'],
    		];
    to

    Code:
            var photos = [
    			['15', 'Alt for image number 1'],
    			['2', 'Alt for image number 1'],
    			['19', 'Alt for image number 1'],
    			['10', 'Alt for image number 1'],
    			['6', 'Alt for image number 1']
    		];

  3. #3
    SitePoint Enthusiast mrsmiley's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Taking a wild stab in the dark here, based on this comment:

    http://developer.mozilla.org/en/docs...aScript#Arrays
    Remember - the length of the array is one more than the highest index.
    Every single one of your photos arrays contains an extra comma at the end of the last item. It could be that IE is actually registering that as an empty element without actually creating it. Or its just creating an empty element that isn't an array (ie null)
    Code:
    var photos = [
    	['15', 'Alt for image number 1'],
      	['2', 'Alt for image number 1'],
      	['19', 'Alt for image number 1'],
      	['10', 'Alt for image number 1'],
      	['6', 'Alt for image number 1'],
    ];
    Change to ...

    Code:
    var photos = [
    	['15', 'Alt for image number 1'],
      	['2', 'Alt for image number 1'],
      	['19', 'Alt for image number 1'],
      	['10', 'Alt for image number 1'],
      	['6', 'Alt for image number 1']
    ];

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The last item in each array shouldn't have a trailing comma.

    Code JavaScript:
    var photos = [
    	['15', 'Alt for image number 1'],
      	['2', 'Alt for image number 1'],
      	['19', 'Alt for image number 1'],
      	['10', 'Alt for image number 1'],
     	['6', 'Alt for image number 1'],
    ];

    IE mistakenly thinks you're wanting another array item because of that naughty trailing comma

    The above code should be

    Code JavaScript:
    var photos = [
    	['15', 'Alt for image number 1'],
      	['2', 'Alt for image number 1'],
      	['19', 'Alt for image number 1'],
      	['10', 'Alt for image number 1'],
     	['6', 'Alt for image number 1']
    ];

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    I believe that we have a consensus. :-)

  6. #6
    SitePoint Enthusiast demonDESIGN's Avatar
    Join Date
    Dec 2003
    Location
    Perth, WA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sweet, thanks guys.
    Wood for the trees....


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
  •