Question

I’m trying to readjust, or destroy and reapply the jCarouselLite plugin when resizing the window, but I have no success, this is because I created an website where each page is a ‘li’ where, when navigating through the menu it scroll to that ‘page’…

I have tryied to use this on resize, and reapply the jcarousellite, but it didn’t worked:

$('#mega').jCarouselLite = null;

this is the code I’m using, but if I keep reapplying the jcarouselLite, the carousel goes crazy!

$(document).ready(function(){
    w = $(window).width();
    h = $(window).height();
    $('#mega li').css('width',w);
    $('#mega li').css('height',h);
    $('#mega').jCarouselLite({
        circular:false,
        vertical:true,
        speed:1000,
        visible:1,
        btnGo:["#home", "#comofunciona", "#porquemegafome", "#contato"]
    });
});
$(window).resize(function() {
    w = $(window).width();
    h = $(window).height();
    $('#mega li').css('width',w);
    $('#mega li').css('height',h);
    $('#mega').jCarouselLite({
        circular:false,
        vertical:true,
        speed:1000,
        visible:1,
        btnGo:["#home", "#comofunciona", "#porquemegafome", "#contato"]
    });
});

SOLUTION:

“idrumgood”, I was trying to do this only with the “li”, but searching a little more about deactivating plugins, I discovered that I have to unbind the clicks too, so, here is the code I had to apply:

$(window).resize(function() {
    $('#mega').jCarouselLite = null;
    $('#home, #comofunciona, #porquemegafome, #contato').unbind('click'); //buttons I defined on btnGo option
    runCarousel(); //again
    aClick(); // function where I get the li index and save into a hidden input, on resize it keeps li position! :)
});

Answer 1

jCarouselLite (and pretty much any carousel plugin) injects some extra markup when the carousel is created. Usually a containing element that is set with a width of elementsWidth * numberOfElements with the overflow hidden. A second containing element within that is also created and that’s what will actually move. Then your elements are then floated and the left margin of the secondary containing element is altered to give the scrolling effect.

Point of that is, if you want to change that, you need to change the widths of those containing divs and/or the width of the elements that you are scrolling through when the window resizes.

Try changing the sizes of those elements on window resize instead of re-initializing the carousel and see what happens (without your markup, that’s about the best advice I can give)