SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JQuery loop - stucks on some computers

    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:

    Code JavaScript:
    <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:

    Code HTML4Strict:
    <!-- load featured project -->
    <div id="feat_project">
     
    <div class="thumbnail2">
    <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"]http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad[/URL]"><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[/URL]" alt="fwpbu7a" /></a>
    <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"]http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad[/URL]"><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[/URL]" alt="fwpbu7h" /></a>
    <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"]http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad[/URL]"><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[/URL]" 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="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-met-houten-terras-polyester-monoblock"]http://www.demooistezwembaden.be/buitenzwembad-met-houten-terras-polyester-monoblock[/URL]"><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[/URL]" alt="flpwkn4" /></a>
     
            <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-overloopzwembad-in-tuin-van-kasteel"]http://www.demooistezwembaden.be/buitenzwembad-overloopzwembad-in-tuin-van-kasteel[/URL]"><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[/URL]" alt="fqpk1" /></a>
     
            <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-aanleggenmonoblock-overloop-zwembad"]http://www.demooistezwembaden.be/buitenzwembad-aanleggenmonoblock-overloop-zwembad[/URL]"><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[/URL]" alt="fadf1" /></a>
     
            <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/binnenzwembad-onderloopzwembad-met-jetstream-sfeervolle-verlichting"]http://www.demooistezwembaden.be/binnenzwembad-onderloopzwembad-met-jetstream-sfeervolle-verlichting[/URL]"><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[/URL]" alt="fqp1" /></a>
     
            <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/binnenzwembad-overloopzwembad-bekleed-met-zwarte-moza%c3%afek"]http://www.demooistezwembaden.be/binnenzwembad-overloopzwembad-bekleed-met-zwarte-moza%c3%afek[/URL]"><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[/URL]" 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
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code css:
    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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Stef
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions


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
  •