Fire script once with JQuery window resize and media queries

Question

I'm using Masterslider to power an image carousel.

For desktop, I'd like the script to run layout: 'autofill'. For mobile, I would like the script to run layout: 'boxed'.

To achieve this, I am using window .resize() with Modenizr mq:

( function( $ ) {

    $( window ).resize(function() {
        if (Modernizr.mq('(max-width: 767px)')) {

            var slider = new MasterSlider();
            slider.setup('masterslider' , {
                width: 1440,    // slider standard width
                height: 400,   // slider standard height
                space: 5,
                layout: 'boxed',
            });

            // adds Arrows navigation control to the slider.
            slider.control('arrows');

        } else {

            var slider = new MasterSlider();
            slider.setup('masterslider' , {
                width: 1440,    // slider standard width
                height: 400,   // slider standard height
                space: 5,
                layout: 'autofill',
            });

            // adds Arrows navigation control to the slider.
            slider.control('arrows');

        }
    }).resize();

} )( jQuery ); // End JQuery

This method seems to fire the script multiple times with the following multiple errors in console:

Uncaught TypeError: Cannot read property 'position' of undefined

How should I run the script only once, calling the layout operator on resize?

That stops the error, but does this mean that it will only detect the re-size once? I'd like it so it detects the re-size an infinite amount for when users switch between portrait and landscape. — Sam, Sep 05 '16 at 14:52

score 0 · Accepted Answer · answered Sep 05 '16 at 15:53

Speaking with another developer, we came up with the following solution:

( function( $ ) {

    var slider = new MasterSlider();

    var changeSetup = function(){

    if (Modernizr.mq('(max-width: 767px)')) {

        slider.setup('masterslider' , {
            width: 1440,    // slider standard width
            height: 400,   // slider standard height
            space: 5,
            layout: 'boxed',
        });

        // adds Arrows navigation control to the slider.
        slider.control('arrows');
    } 

    else {

        slider.setup('masterslider' , {
        width: 1440,    // slider standard width
        height: 400,   // slider standard height
        space: 5,
        layout: 'autofill',
    });

    // adds Arrows navigation control to the slider.
            slider.control('arrows');
        }
    };

    changeSetup();

    $( window ).resize(function(){
        changeSetup();
    });

} )( jQuery ); // End JQuery

Fire script once with JQuery window resize and media queries

1 Answers1