Image carrousel won't work in Safari

JavaScript
1

Hi all,

On a site we’ve developed for a client, we use a little bit of JS to create an infinite loop of logos on the homepage (below the category blocks when you scroll down).

  • In Firefox, all works fine.
  • In Safari however, the logo’s are initially shown, but the scrolling seems to reduce them one at a time until you’re left with an empty white space and nothing happens anymore.
  • In Internet Explorer, the scrolling logo’s take up more than the allowed width of 900px and scroll from one end of the browser window to the other.

This is the JS (there is more JS in the head to enable other functions/animations):


<script type="text/javascript">    

$(document).ready(function() {
        
        var auto_slide = 1;
        var hover_pause = 1;
        var key_slide = 0;
        var auto_slide_seconds = 2000;

        $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
        
        if(auto_slide == 1){
            var timer = setInterval('slide("right")', auto_slide_seconds); 
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }
  
        if(hover_pause == 1){
            $('#carousel_ul').hover(function(){
                clearInterval(timer)
            },function(){
                timer = setInterval('slide("right")', auto_slide_seconds); 
            });
        }
  
        if(key_slide == 1){
            $(document).bind('keypress', function(e) {
                if(e.keyCode==37){
                        slide('left');
                }else if(e.keyCode==39){
                        slide('right');
                }
            });
        }
  });

function slide(where){
    
            var item_width = $('#carousel_ul li').outerWidth() + 0;

            if(where == 'left'){
                var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            }else{
                var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
            }

            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                if(where == 'left'){
                    $('#carousel_ul li:first').before($('#carousel_ul li:last'));
                }else{
                    $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
                }
                
                $('#carousel_ul').css({'left' : '-225px'});
            });
           
}
</script>

This is the HTML used to display the loop:


<div id='carousel_container'>

    <div id='carousel_inner'>
        <ul id='carousel_ul'>
            
    <div>
<li><a href="http://www.extremis.be/" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/07/partner_extremis.png"  alt="Extremis"  /></a></li>
<li><a href="http://www.tuinteam.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_tuinteam.png"  alt="Tuinteam"  /></a></li>
<li><a href="http://www.westpool.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_westpool.png"  alt="Westpool"  /></a></li>
<li><a href="http://www.qualitypool.be/" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/07/partner_qualitypool.png"  alt="Quality Pool"  /></a></li>
<li><a href="http://www.meubili.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_meubili.png"  alt="Meubili"  /></a></li>
<li><a href="http://www.philippedewilde.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_pdw.png"  alt="Philippe De Wilde"  /></a></li>
<li><a href="http://www.artdeceau.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_artdeceau.png"  alt="Art Deceau"  /></a></li>
<li><a href="http://www.naturalpools.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_natural.png"  alt="Natural Pools"  /></a></li>
<li><a href="http://www.becaus-zwembaden.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_becaus.png"  alt="Becaus"  /></a></li>
<li><a href="http://www.coolsbvba.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_cools.png"  alt="Cools"  /></a></li>
<li><a href="http://www.azurpools.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_azur.png"  alt="Azur"  /></a></li>
<li><a href="http://www.lpwcorporate.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/05/partner_lpw.png"  alt="LPW"  /></a></li>
<li><a href="http://www.skymirror-pools.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/06/partner_skymirror.png"  alt="Skymirror"  /></a></li>
<li><a href="http://www.colect.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/06/partner_colect.png"  alt="Colect"  /></a></li>
<li><a href="http://www.bovi.be" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/06/partner_bovi.png"  alt="Bovi"  /></a></li>
<li><a href="http://www.artdeau.be/" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/09/partner_artdeau.png"  alt="Art D'eau"  /></a></li>
<li><a href="#" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2011/10/partner_eauthentique.png"  alt="Eau'thentique"  /></a></li>
<li><a href="http://www.groenoog.be/" target="_blank"><img src="http://www.demooistezwembaden.be/wp-content/uploads/2012/01/partner_bleuetvert.png"  alt="Bleu et Vert"  /></a></li>

    </div>

        </ul>

    </div>
  <input type='hidden' id='hidden_auto_slide_seconds' value=0 />
  </div>

Does anyone know what causes this strange behavior in Safari and/or IE?

Thanks in advance for any help,
Stef

2

I’m sorry, I come with more questions and offer no answers:

  • Couldn’t reproduce the issue in Safari. What version/os did you test with?
  • Wasn’t sure what the issue was in IE. When I tried the code in FF or Chrome, there was no animation, nor was there a 900px container. Can you link to a live example, perhaps?

I did notice one issue, but it’s probably irrelevant. The following is invalid:


<ul>
    <div>
    ...
    </div>
</ul>

Only <li> elements can be immediate children of a <ul>…

3

Hi,

Thanks for the reply. We tested on Mac osX and Vista, both versions of safari show the same problem. The issue in IE consists of a working script, but stretched over the whole window. You can see the live example here.

The div’s are placed there automatically by Wordpress. The <li>'s with the images are loaded from the Wordpress Blogroll in this case, I’ve been looking into removing those div’s; but I’m not sure how.