Search code examples
jquerycssjcarousellite

jCarousel images not displaying in jQuery slider

I have a jQuery sliding panel that is not displaying a jQuery carousel within it.

Example: http://www.warface.co.uk/clients/warface.co.uk/

Click Show Dashboard to display the Sliding Panel.

I have the buttons (previous/next) displaying but not the carousel. I have added the carousel below also for example.

I have the CSS for the sliding panel

#panel {
    width: 100%;
    height: 500px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: none;
}

and it seems removing display: none; fixes it but leaves the slider down on page load.

Solution

  • Cracked it:

    You need to hide your panel using height instead of display, like so:

    #panel {
    width: 100%;
    height:0px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    }

    Then show it in js by changing height to 500 making your JS this:

    $(document).ready(function() {

    // Expand Panel
   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").animate({height: "500px"},"slow");
    });    

    // Collapse Panel
    $("#close").click(function(e){
        e.preventDefault();
        $("div#panel").animate({height: "0px"},"slow");
    });     

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  

     $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });

});

    Note the additon of preventDefault() which prevents the page from jumping to the top, which was neccesary when I was trying it in jsfiddle, but prob won't be needed in live application, none the less it is generally good practice. If you want to see it in action you can do so here: http://jsfiddle.net/LiamBailey/ERQzd/87/ note: because of the limited window size in jsfiddle, you have to scroll down to get to the close panel link leaving you unable to see the panel sliding back up because of preventDefault, to fix this I added a little scroll up $("html,body").animate({scrollTop: target},"fast"); But none of that will be needed for you as the close panel link is visible without scrolling down.