How to completely stop jQuery cycle function from running (not pause / resume)

Question

I'm having an issue using jQuery cycle in a responsive mobile design.

Using CSS I can get it to display properly on page load, but once the cycle has loaded it no longer becomes responsive as everything has a fixed width. So in the case that user changes from portrait to landscape mode, the cycle won't resize.

(I know this fires a million times on resize and isn't the best way to go - it's just for testing).

Currently I'm testing using this:

window.onresize = function (event) {
    jQuery('#slideshow').cycle('pause');
    jQuery('#slideshow').cycle({
        fx: 'scrollHorz',
        timeOut: '4000'
    });

    

What I'm trying to do is kill the slideshow and the reload it so that the cycle internal functions + CSS will account for the new screen size. (I know of window.onorientationchange -so once again this is just for testing).

I either want to know how to completely kill the slideshow from running so I can initiate it again, or get a suggestion for a better method.

It might not be much help but here is a JS Fiddle http://jsfiddle.net/yhNgh/

Answer 1

You should use destroy:

$('#slideshow').cycle('destroy'); 

BTW, you should debounce a little the resize method using a timeout:

http://jsfiddle.net/yhNgh/1/

jQuery(document).ready(function () {

    jQuery('#slideshow').cycle({
        fx: 'scrollHorz',
        timeOut: '4000'
    });
    var resizeTimeout;
    window.onresize = function (event) {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
            jQuery('#slideshow').cycle('destroy');
            jQuery('#slideshow').cycle({
                fx: 'scrollHorz',
                timeOut: '4000'
            });
        }, 50);
    };

});

Answer 2

I re-read your post, try this jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

 var rtime = new Date(1, 1, 2000, 12,00,00);
 var timeout = false;
 var delta = 200;
 $(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

also another nice link (from above stackoverflow thread) http://forum.jquery.com/topic/the-resizeend-event