WordPress.org

Support

Support » Themes and Templates » Flato » JavaScript Error

JavaScript Error

  • I’m getting continuous (loop) JavaScript error ‘Uncaught TypeError: Cannot read property ‘complete’ of undefined’ on line 73 (scripts.js).

    var image = firstImage.get(0);
    			if (image.complete || image.readyState == 'complete' || image.readyState == 4) {

    Same thing happens on your demo page as well – http://demo.themememe.com/flato/

    Thanks,
    Gene

Viewing 10 replies - 1 through 10 (of 10 total)
  • I’m having the same problem as well!
    The following message is from Firefox developer console:
    TypeError: image is undefined on scripts.js:73

    Can someone help please?

    I’m getting the same error on the Flato theme.

    Uncaught TypeError: Cannot read property 'complete' of undefined (repeated 999999 times)

    /*  FlexSlider
    /* ------------------------------------ */
    	var firstImage = jQuery('.flexslider').find('img').filter(':first'),
    		checkforloaded = setInterval(function() {
    			var image = firstImage.get(0);
    			if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
    				clearInterval(checkforloaded);
    				jQuery('.flexslider').flexslider({
    					animation: "slide",
    					useCSS: false, // Fix iPad flickering issue
    					slideshow: false,
    					directionNav: true,
    					controlNav: true,
    					pauseOnHover: true,
    					slideshowSpeed: 7000,
    					animationSpeed: 400,
    					smoothHeight: true,
    					touch: false
    				});
    			}
    		}, 20);
    
    	$('select').dropkick();
    });

    It’s in an endless loop that continuously counts up repetitively when using Right Click>Inspect Element in Chrome Browser.

    I managed to eliminate this error by just commenting out the entire flexslider section in …themes/flato/js/scripts.js

    Not sure if flexslider is essential to some sort of theme functionality but my site seems to be cool without it.

    I replaced this:

    /*  FlexSlider
    /* ------------------------------------ */
    	var firstImage = jQuery('.flexslider').find('img').filter(':first'),
    		checkforloaded = setInterval(function() {
    			var image = firstImage.get(0);
    			if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
    				clearInterval(checkforloaded);
    				jQuery('.flexslider').flexslider({
    					animation: "slide",
    					useCSS: false, // Fix iPad flickering issue
    					slideshow: false,
    					directionNav: true,
    					controlNav: true,
    					pauseOnHover: true,
    					slideshowSpeed: 7000,
    					animationSpeed: 400,
    					smoothHeight: true,
    					touch: false
    				});
    			}
    		}, 20);
    
    	$('select').dropkick();
    });

    with this:

    /*  FlexSlider
    /* ------------------------------------
    	var firstImage = jQuery('.flexslider').find('img').filter(':first'),
    		checkforloaded = setInterval(function() {
    			var image = firstImage.get(0);
    			if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
    				clearInterval(checkforloaded);
    				jQuery('.flexslider').flexslider({
    					animation: "slide",
    					useCSS: false, // Fix iPad flickering issue
    					slideshow: false,
    					directionNav: true,
    					controlNav: true,
    					pauseOnHover: true,
    					slideshowSpeed: 7000,
    					animationSpeed: 400,
    					smoothHeight: true,
    					touch: false
    				});
    			}
    		}, 20);
    
    	$('select').dropkick();
    });
    */

    Okay so commenting out the FlexSlider is not a good idea as it will mess with your mobile navigation menu so don’t do what I said above.

    FlexSlider is definitely needed.

    I’m sure its a simple thing to resolve. Just the image variable needs to be defined. The thing is I’m not sure where and how to define it.

    I hope someone can support us on this.

    We can call this a “hacky” solution because, like the other members of this thread, I don’t know exactly what this script is being used for. Here’s the code I used:

    /*  FlexSlider
    /* ------------------------------------ */
    	var firstImage = jQuery('.flexslider').find('img').filter(':first'),
    		checkforloaded = setInterval(function() {
    			var image = firstImage.get(0);
    			if ( image ) {
    				if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
    					clearInterval(checkforloaded);
    					jQuery('.flexslider').flexslider({
    						animation: "slide",
    						useCSS: false, // Fix iPad flickering issue
    						slideshow: false,
    						directionNav: true,
    						controlNav: true,
    						pauseOnHover: true,
    						slideshowSpeed: 7000,
    						animationSpeed: 400,
    						smoothHeight: true,
    						touch: false
    					});
    				}
    			}
    		}, 20);
    
    	$('select').dropkick();
    });

    Note that I enclosed the entire “if (image.complete || image.readyState == ‘complete’ || image.readyState == 4)” statement in an “if( image )” statement. Now, if image isn’t defined, it never gets to the code that was throwing an error.

    Temporary fix until I can figure out what’s really up with this theme’s code and whether this is robust.

    I found that by using the hacky solution above that it did remove the error but then I noticed that the search box woould no longer drop down from the site menu

    e.g.
    <div class=”search-expand” style=”display: ..

    Has anyone since found a solution?

    Hi – no, I haven’t – and I’m concerned that it will hurt my rankings because of the error.

    I appreciate the theme is “free” so can’t really complain too much – but it would be nice to have a solution that doesn’t affect any other part of the functionality.

    The alternative is to get a paid for theme, which may have support – which would be a shame, as I really like this one.

    Cheers, Mark

    I had this same problem and found the information in the above answers very useful for debugging.

    I have attached the code I am using which seems to have ‘fixed the glitch’. It is very similar to Christopher Michael Luna’s solution, but it doesn’t seem to have the search bar issue patsam was referring to.

    In case anyone is interested in how I did it here we go, otherwise feel free to just snag the snippet:
    I wrapped the current if statement in a new if statement to check if the image variable is not undefined (by checking its current type). If the image variable is NOT undefined then the code executes normally. However, if the image variable IS undefined then we skip the next part (which tries to access properties from the image variable).

    The error was caused because the current FlexSlider logic wants to grab certain properties from the image variable, the problem is the image variable doesn’t seem to be defined at this point (probably if the flexSlider is trying to access images which don’t exist)

    /*  FlexSlider
    
    /* ------------------------------------ */
    
    	var firstImage = jQuery('.flexslider').find('img').filter(':first'),
    
    		checkforloaded = setInterval(function() {
    
    			var image = firstImage.get(0);
    			if(typeof image !== 'undefined'){
    				if (image.readyState == 'complete' || image.readyState == 4 || image.complete ) {
    
    					clearInterval(checkforloaded);
    
    					jQuery('.flexslider').flexslider({
    
    						animation: "slide",
    
    						useCSS: false, // Fix iPad flickering issue
    
    						slideshow: false,
    
    						directionNav: true,
    
    						controlNav: true,
    
    						pauseOnHover: true,
    
    						slideshowSpeed: 7000,
    
    						animationSpeed: 400,
    
    						smoothHeight: true,
    
    						touch: false
    
    					});
    
    				}
    			}
    
    		}, 20);
    
    	$('select').dropkick();
    
    });

    I can confirm that the code fix that Jrgailey posted above works to fix the problem!
    Thanks Jrgailey

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘JavaScript Error’ is closed to new replies.
Skip to toolbar