JQuery loop - stucks on some computers

JavaScript
1

Hi all,

On a website we’ve built, we use two bits of jquery to make an array of images display in an animated loop (seen in the darker blue boxes on top of the homepage). This seems to work fine, but some people (mostly Mac/Safari users) notify us that these loops stuck between images, stop working or display the images in a shifting/flickering manner.

I’m on WinVista/FF 3.6, and I don’t experience any of these issues.

This is the JS used on the page:


<script type="text/javascript">
$( function () {
	$("div.thumbnail a:not(:first)").hide()
	$("div.thumbnail a:first").addClass("current");
	
	setInterval( function () {
		var $active = $("div.thumbnail a.current");
		
		if($active.length == 0)
			$active = $("div.thumbnail a:first");
			
		$next = $active.next().length ? $active.next() : $("div.thumbnail a:first");
		
		$active.removeClass("current").fadeOut('slow');
		$next.addClass("current").fadeIn('slow');
	}, 4000);
});

$( function () {
	$("div.thumbnail2 a:not(:first)").hide()
	$("div.thumbnail2 a:first").addClass("current");
	
	setInterval( function () {
		var $active = $("div.thumbnail2 a.current");
		
		if($active.length == 0)
			$active = $("div.thumbnail2 a:first");
			
		$next = $active.next().length ? $active.next() : $("div.thumbnail2 a:first");
		
		$active.removeClass("current").fadeOut('slow');
		$next.addClass("current").fadeIn('slow');
	}, 4000);
</script>
});

This is the according HTML:


<!-- load featured project -->
<div id="feat_project">

<div class="thumbnail2">
<a href="[http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7a-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7a-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad)" alt="fwpbu7a" /></a>
<a href="[http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7h-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7h-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad)" alt="fwpbu7h" /></a>
<a href="[http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7kkopie-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7kkopie-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad)" alt="fwpbu7kkopie" /></a>
</div>

    	<div class="cat_info">
    	<div class="cat_title">project in de kijker</div>
    	<div class="cat_desc">Klik op de foto en ontdek hier maandelijks &eacute;&eacute;n unieke, nieuwe realisatie</div>
    	</div>
        
</div>

<!-- load latest projects -->
<div id="latest">

<div class="thumbnail">
        <a href="[http://www.demooistezwembaden.be/buitenzwembad-met-houten-terras-polyester-monoblock"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/08/flpwkn4-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/08/flpwkn4-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-met-houten-terras-polyester-monoblock)" alt="flpwkn4" /></a>

        <a href="[http://www.demooistezwembaden.be/buitenzwembad-overloopzwembad-in-tuin-van-kasteel"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fqpk12-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fqpk12-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-overloopzwembad-in-tuin-van-kasteel)" alt="fqpk1" /></a>

        <a href="[http://www.demooistezwembaden.be/buitenzwembad-aanleggenmonoblock-overloop-zwembad"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fadf1-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fadf1-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-aanleggenmonoblock-overloop-zwembad)" alt="fadf1" /></a>

        <a href="[http://www.demooistezwembaden.be/binnenzwembad-onderloopzwembad-met-jetstream-sfeervolle-verlichting"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fqp11-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fqp11-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/binnenzwembad-onderloopzwembad-met-jetstream-sfeervolle-verlichting)" alt="fqp1" /></a>

        <a href="[http://www.demooistezwembaden.be/binnenzwembad-overloopzwembad-bekleed-met-zwarte-moza%c3%afek"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fwpbi7akopie-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fwpbi7akopie-127x85.jpg](http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/binnenzwembad-overloopzwembad-bekleed-met-zwarte-moza%c3%afek)" alt="fwpbi7akopie" /></a>

</div>

    	<div class="cat_info">
    	<div class="cat_title">recent toegevoegde projecten</div>
    	<div class="cat_desc">Klik op een foto voor de laatste nieuwe galerijen</div>
    	</div> 
</div>

</div>

Does anyone know how to make this problem go away? Are these two instances that use the same scripting somehow in conflict?

Thanks in advance for your assistance.

Stef

2

Okay. Thanks for looking in to that. I’m affraid I don’t really know how to go from here…

Maybe I should have mentioned that I’m not that much of a JS-genius. I got this code snippet somewhere online a while back and I’ve used it numerous time without problem. It’s just by using it twice on one page, that this issue has been noticed.

3

To declare the variable properly, simply change the statement that starts with "$next = " to have a var statement, so "var $next = "

Give that a go and see how you fare.

4

One of the first things I’m noticing is that $next is not being declared in the individual functions with a var statement. This means that $next is in the global scope.

To illustrate this, consider the following example:

var x = 5;
 
y = 2;
 
function test() {
    var y;
    x = 10; //modifying the global
    y = 8; //y is defined in side the method with "var", so it is local
    z = 7; //also modifying the global
}
test();
console.log(x); //10
console.log(y); //2
console.log(z); //7

To fix this, simply declare $next in both the setInterval methods (in the same place where you declare $active using var)

Note sure if this will fix your issue, but it will be a good step in the right direction :slight_smile:

5

Hi,

Sorry for the tardy reply. I implemented this code, and on my computers the loops still run as smoothly as before. My client however notified me today that Safari still raises an issue, bot on Mac (coputer and iPad) and Windows systems.

How come this browser breaks the loops? It is still a mystery to me, so any suggestions would be highly appreciated.

6

Ok, so took me a little while to figure this out, but it seems that Chrome doesn’t behave properly if the anchor isn’t display:block; (or maybe it is behaving correctly?)

In any case, if you add something like the following, it should start working:


div.thumbnail2 a, div.thumbnail a{
	display:block;
}

I couldn’t tell you exactly why this is happening, but suspect it has something to do with how jQuery hides/shows elements and returns them to their original display state when showing them.

I’ve put a basic example up on jsfiddle

7

Yes. Yes! And one more time: YES!

That totally fixed it! Client confirmed it runs smoothly on Mac/iPad too. Thanks a million, you sir are my hero of the day! :wink:

Stef