Reset jQuery Script on Browser Resize

Question

After endless searching I'm hoping to get this figured out. Essentially I need to take a script and restart it when the browser window resizes. I'm only knowledgable enough in JS to be dangerous.

The script is a non-responsive slider that is in a responsive template. Currently, based on what resolution the window is initially loaded at, the script alterts its output and displays appropriately. However, if you resize the window, the script goes crazy and looks terrible.

I would rather be able to rewrite the script to listen for a resize and recalculate the sizes but unfortunately with my knowledge there undertaking would be overwhelming. I hope by restarting the script to achieve a similar result.

This is when the slideshow is called:

$(document).ready(function()
{
$("#showcase").awShowcase(
{
    content_height:         640,
    fit_to_parent:          true,
    auto:                   false,
    interval:               5000,
    continuous:             true,
    loading:                true,
    tooltip_width:          200,
    tooltip_icon_width:     32,
    tooltip_icon_height:    32,
    tooltip_offsetx:        18,
    tooltip_offsety:        0,
    arrows:                 true,
    buttons:                false,
    btn_numbers:            true,
    keybord_keys:           true,
    mousetrace:             false, /* Trace x and y coordinates for the mouse */
    pauseonover:            true,
    stoponclick:            false,
    transition:             'hslide', /* hslide/vslide/fade */
    transition_speed:       500,
    transition_delay:       300,
    show_caption:           'show', /* onload/onhover/show */
    thumbnails:             true,
    thumbnails_position:    'outside-last', /* outside-last/outside-first/inside-last/inside-first */
    thumbnails_direction:   'horizontal', /* vertical/horizontal */
    thumbnails_slidex:      0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
    dynamic_height:         true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
    speed_change:           false, /* Set to true to prevent users from swithing more then one slide at once. */
    viewline:               true /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. It's OK with only the width. */

});
});

I also have the code in place to detect the window resize, wait 150ms, but then I'm lost.

var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {

}, 150);
});

Answer 1

UPDATE: I have updated this to respond to your comment. It seems as though your slider code modifies the original html structure once it runs, so you can't rerun the code a second time. The solution below makes a backup copy of the original html. Right before you rerun the slider code, you revert the slider html to the original state, then rerun the code.

Note that this might cause some sort of flickering as the slider is deleted and recreated. If you make sure to specify a fixed height in the css for the parent element (slideshow wrapper as shown below), you can avoid this.

• Create a new hidden div into which you will put the backup html. Something like:

<div id="slideshow-backup" style="display:none;"></div>

• Put your existing showcase div inside a wrapper. We will use this when we recreate the slideshow html:

<div id="slideshow-wrapper" style="height: 800px">
    <div id="slideshow">
    ...
    </div>
</div>

• You need to create a function in which you put the slideshow code. You call it once when the document is ready, and you set the same function to be called whenever the window is resized:

function show_slider() {
    $("#showcase").awShowcase({
        content_height: 640
        // deleted the rest of the options for clarity...
    });
}

$(document).ready(function() {
    // make a backup copy of the original showcase div, and change its id to showcase-orig
    $('#showcase').clone().appendTo('#slideshow-backup').attr('id', 'showcase-orig');

    show_slider();

    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            // delete the modified showcase div
            $('#showcase').remove();
            // create a fresh copy of the slideshow from the backup div
            $('#showcase-orig').clone().appendTo('#showcase-wrapper').attr('id', 'showcase')

            // restart the slideshow
            show_slider();            
        }, 150);
    });

});​