SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE & Mysterious Javascript Error!

    You gotta love IE's js error reporting!

    I have this javascript that loads 4 images into 4 DOM img tags,
    with an offset so that everytime the bottom or top image is clicked
    the offset shifts so that the images shift up or down one and a new
    image is loaded above or below the image you clicked. This to make
    it possible to have more than 4 images in an image gallery without
    having more than 4 img tags.

    It works fine on pretty much every browser except for IE.
    IE gives the following error:

    Error: 'gallery_array[...].0' is null or not an object
    Line: 39
    And when you look at line 39 it says:

    Code:
    if( this.getProperty( 'rel' ) != gallery_array[0][0] )
    {
    With the opening { being line 39, so I'm assuming the error is in
    the line above. I can't find anything wrong with that though.

    What could this be? How do I fix/prevent this from happening?

    Here's the whole script:

    Code:
    <script src="mootools-release-1.11.js" type="text/javascript"></script>
    <script type="text/javascript">
    var offset = 0;
    {gallery_array}
    window.addEvent('domready', function() {	
    	for( i=1; i<5; i++ )
    	{
    		$('gallery_' + i).m = i;
    		$('gallery_' + i).addEvent( 'click', function(){
    			$('big_img').src = 'uploads/' + this.getProperty( 'rel' );
    			if( this.m == 4 )
    			{
    				if( this.getProperty( 'rel' ) != gallery_array[ ( gallery_array.length - 1 ) ][0] )
    				{
    					repopulate( 1 );
    				}
    			}
    			
    			if( this.m == 1 )
    			{
    				if( this.getProperty( 'rel' ) != gallery_array[0][0] )
    				{
    					repopulate( 0 );
    				}
    			}
    		})
    	}
    });
    
    
    function repopulate( m )
    {
    	if( m ==1 )
    	{
    		offset++;
    	}
    	else
    	{
    		offset--;
    	}
    	for( i=1; i<5; i++ )
    	{
    		o = ( i-1 ) + offset;
    		//alert( o );
    		//alert( gallery_array[ o ] );
    		$('gallery_' + i ).src = 'uploads/' + gallery_array[ o ][1];
    		$('gallery_' + i ).setProperty( 'rel', gallery_array[ o ][0] );
    	}
    }
    </script>
    Help is appreciated!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd check to see if 'this' is actually the element and not an object such as Window or the object the code is inside?


  3. #3
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By default 'this' refers to the object the handler is attached to according to the mootools docs, unless a second param is passed
    Also, in every browser (including IE) it uses 'this' for switching images in the gallery what completely works.

    Only when clicking the 1st/4th image, and when it's not on the start/end of the gallery array the error occurs in IE

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If that is the case, then give this a try:

    Code:
    window.addEvent('domready', function() {    
        for( i=1; i<5; i++ )
        {
            $('gallery_' + i).m = i;
            $('gallery_' + i).addEvent( 'click', function(){
                /*$('big_img').src = 'uploads/' + this.getProperty( 'rel' );
                if( this.m == 4 )
                {
                    if( this.getProperty( 'rel' ) != gallery_array[ ( gallery_array.length - 1 ) ][0] )
                    {
                        repopulate( 1 );
                    }
                }
                
                if( this.m == 1 )
                {
                    if( this.getProperty( 'rel' ) != gallery_array[0][0] )
                    {
                        repopulate( 0 );
                    }
                }*/
                alert(this.m);
                alert(this.nodeName);
            })
        }
    });
    also:

    Code:
    for( i=1; i<5; i++ )
    Do you have 4 elements with id's ie gallery_1, gallery_2, gallery_3, gallery_4?

    Check your Firefox error console, do you get any error messages in there?

    If possible, could you post an url or some sample code to look at?


  5. #5
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://edelhinse.nl/test/index.php/p...er-page-2.html
    This is where the problem occurs; Click the 4th image in the gallery to make it scroll one down. Works in every browser other than IE

  6. #6
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using Microsoft Script Editor showed that the error occurs on this line:
    Code:
    if( this.getProperty( 'rel' ) != gallery_array[ ( gallery_array.length - 1 ) ][0] )
    When I QuickWatch gallery_array.length I get a value of 9, which is clearly crap since there are only 8 elements in the array. I suspect you can resolve the problem by removing the trailing comma in your array declaration:
    Code:
    var gallery_array = [
    		[ 'Untitled-3.jpg', 'Untitled-3_thumb.jpg' ],
    		[ 'Untitled-1.jpg', 'Untitled-1_thumb.jpg' ],
    		[ 'big_img.jpg', 'big_img_thumb.jpg' ],
    		[ 'Untitled-2.jpg', 'Untitled-2_thumb.jpg' ],
    		[ 'test1.jpg', 'test1_thumb.jpg' ],
    		[ 'green.jpg', 'green_thumb.jpg' ],
    		[ 'blue.jpg', 'blue_thumb.jpg' ],
    		[ 'red.jpg', 'red_thumb.jpg' ], //<-- This one
    	];
    IE really doesn't deal with trailing commas.
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok... well IE seems to be adding an extra item to your gallery_array, which is null or undefined.

    My best course of advice, is either track down this extra item, or do the following:

    Code:
                    var gallery_item = gallery_array[ ( gallery_array.length - 1 ) ];
                    if(!gallery_item || typeof(gallery_item) == 'undefined')
                        gallery_item = gallery_array[ ( gallery_array.length - 2 ) ];
                    if( this.getProperty( 'rel' ) != gallery_item[0] )
                    {
                        repopulate( 1 );
                    }


  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol quicker then me

    although well spotted as I didn't see the additional comma.


  9. #9
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That fixed it. I was unaware that javascript does not allow , on the end of an array, as ActionScript and PHP do.

    Thanks for the help!

  10. #10
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not that JavaScript doesn't allow it, it's IE that doesn't.
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game


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
  •