SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast hotdiggity's Avatar
    Join Date
    Aug 2004
    Location
    Brisbane
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jCarousel won't hide during load

    I'm trying to get jQuery to hide jCarousel images while they load using the following code. It actually worked at one point but refuses to now (which makes me think it's a minor syntax issue). '#carousel' is the containing ul element. You can see I've tried it a few different ways. No errors appeared in Chrome's debugging console. "show('slow')" doesn't work either...


    Code:
          /* Hide jCarousel 
             */ 
    //        $('.jcarousel-container').css('visibility', 'hidden');   
    //        $('#carousel').css('visibility', 'hidden'); 
              $('#carousel').hide();    
    
            $(window).load(function() 
            { 
                    $('#jcarousel-loading').hide(); 
    //                $('.jcarousel-container').css('visibility', 'visible'); 
    //                $('#carousel').css('visibility', 'visible'); 
                    $('#carousel').show('slow'); 
            }); 
    
           /* Show jCarousel 
             */
    $(document).ready(function() 
    { 
            $('#carousel').jcarousel({ 
            });
    
            $("a.fancypopbox").fancybox();
    
    });

  2. #2
    SitePoint Enthusiast hotdiggity's Avatar
    Join Date
    Aug 2004
    Location
    Brisbane
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In css:
    Code:
    #carousel { visibility: hidden; }
    Simplify js.
    Code:
    $(document).ready(function() 
    { 
                    $('#jcarousel-loading').hide(); 
                    $('#carousel').css('visibility', 'visible'); 
                    $('#carousel').jcarousel({ 
                    });
    
    });
    ta da

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    What was the reason for hiding it in the first place? Was it because of some loading issue? I would just be hesitant to have the slideshow hidden via CSS, as those with JS off will never see anything at all.

  4. #4
    SitePoint Enthusiast hotdiggity's Avatar
    Join Date
    Aug 2004
    Location
    Brisbane
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, hidden so the list of images don't stack down the page until jCarousel kicks in.

    Have tried with $('#carousel').css('visibility', 'hidden'); at the top, outside the doc ready function without luck, so unless you have any other suggestions please?

    Frankly, think i'd rather the carousel hidden if the user has js disabled

    (Don't know how anybody can surf the interwebs these days without js)

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    A better solution would be to fix the height of the slideshow container (assuming that the slides are all the same height) and also set it to overflow: hidden. That's how I prevent that initial page load overflow.

  6. #6
    SitePoint Enthusiast hotdiggity's Avatar
    Join Date
    Aug 2004
    Location
    Brisbane
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one. I'll try that, thanks!


Tags for this Thread

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
  •