Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Logo Continuous Slider Breaking In Some Browsers

    Hi, I have a site I have recently constructed with a logo parade that scrolls accross the screen displaying various company logos on the home page.

    This seems to work perfectly on my own system in Firefox and IE 8 but in Chrome, Safari and on some mobile phones it seems to be frozen.

    Website here:
    http://www.flyersdelivered.co.uk/

    Anyone have any ideas why this could be?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Webkit browsers (Chrome and Safari) don't set image dimensions until the image is loaded. This will mean that at $(document).ready() images have no width. I suspect in your page there's something within your scroller plugin, firing on $(document).ready(), which is looking at widths to decide whether scrolling is required.

    The solution is to fire your scroller code on $(window).load() instead - at this point all your images have loaded, the scroller has a width and all is well.

    Amend:

    Code:
    $(function() {
    		$("#scroller").simplyScroll();
    	});
    to

    Code:
    $(window).load(function() {
    		$("#scroller").simplyScroll();
    	});
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that, works on all browsers now.

    Just being nit picky, when the screen very first loads now, for a split second it displays all of the images in list form down the side just before the Jquery code kicks in and looks a little messy. Is there any way to prevent this?

    Thanks again.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, hide the images in css, and then use .show() to unhide them, again as part of $(window).load().
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •