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);
    };

});