SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slider exposes images on load

    Hi all,

    I have created this page http://www.kylehouston.com/new/ in the main banner i have a mac with the insert being a slider, when you initially visit this page the slider exposes all the images contained in it, is there a way I can fix this?

    Thanks in advance

    Kyle

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like you fixed it, did #mini_mac_slider not have overflow:hidden when you asked to question? I checked it on FF 3.6 on a mac.

  3. #3
    SitePoint Enthusiast phillip_davies's Avatar
    Join Date
    Dec 2009
    Location
    Cheltenham, UK
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kyle,

    I always link in all my js in the head of the document so it loads before the body (I think thats correct anyway) which might help. Your using

    $(document).ready(function(){
    $("#mini_mac_slider").easySlider({
    auto: true,
    continuous: true
    });
    });

    so this can also be put in the head as the script will only run when the document is ready (and the target div has been created).

    At the moment your page is going draw all this, then load in jquery etc, then run the script. Stick it in the head and jquery etc should be loaded in time to stop the images displaying.

    If that fails you could just a .hide() in the js before and then a .show() after the slider function or add a display: none in the css and toggle it to show with js.

    Couple of ideas there that should work, somebody else might have a more elegant solution though!

    ps check your site in IE6 few layout issues (Although im guessing your working on it!)

    EDIT: yeh actually setting a height and adding overflow:hidden on the container should do it :-s

    EDIT EDIT: Ah yeh looks like js is adding the inline overflow:hidden / height. try sticking it in your css as a defined style

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could try the load method in jQuery:

    Code:
    $(document).ready(function(){
    $("#mini_mac_slider").load(function(){
    
    $("#mini_mac_slider ul").show();
    $("#mini_mac_slider").easySlider({
    auto: true, continuous: true
    });
    }); });
    The
    Code:
    $("#mini_mac_slider ul").show();
    code assumes you are using css to display:none the ul in the slider, then once the jquery is ready it will show the ul (and the images I am assuming) then once the #mini_mac_slider container and all of its sub-elements has finished loading (based on .load()) then it will initiate the slider plugin.

    Hope that helps. You can also start the slider out by showing a default image, wait for the load, hide the default then do the .show() on the ul. I guess there are a lot of ways of doing it.

  5. #5
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your responses guys, gonna have a go with them now so will let you know how i get on, thanks!

  6. #6
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah Phillip the great ie6 fixes will be coming soon! Thanks!


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
  •