SitePoint Sponsor

User Tag List

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

    Question Image carrousel won't work in Safari

    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):

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

    Code HTML4Strict:
    <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
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <ul>
        <div>
        ...
        </div>
    </ul>
    Only <li> elements can be immediate children of a <ul>...
    I'm the web overlord for Graphic Business Systems

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