Menu icon Foundation
Reinitialize Foundation (orbit) on screen resize

Hey Everyone! Melissa emailed us about a JavaScript question relating to reloading Foundation components on resize. We think this answer may be useful to some of you.

--

Hello. I’ve searched for an answer to this without luck. Is there a way to re-instantiate my orbit slider on a page resize?


I set up my slider on window load:

    $(window).load(function () {

 

        //Image slider

        $('#featured').orbit({

            fluid: '1400x730',

            timer: false,

            animation: 'horizontal-push',

            bullets: true,

            bulletThumbs: true,

            bulletThumbLocation: 'images/',

            bulletThumbsHideOnSmall: false,

            centerBullets: true

        });   

 

    });

 
 

            

         

I watch for the window to be resized and then call the doneResizing function:

    //Watch for window resizing

    $(window).resize(function () {

        clearTimeout(timer);

        timer = setTimeout(doneResizing, 500);

 

    });

 
 
In the doneResizing function I want to re-initiate my orbit instance:

    function doneResizing() {

        console.log('done resizing');

        //Image slider

        /*$('#featured').orbit({

            fluid: '1400x730',

            timer: false,

            animation: 'horizontal-push',

            bullets: true,

            bulletThumbs: true,

            bulletThumbLocation: 'images/',

            bulletThumbsHideOnSmall: false,

        });*/

 

        //$("#featured").unbind.orbit();

 

    }

 
 

            

         

Not a JavaScript of jQuery expert so any help would be appreciated.


Ultimately what I’m trying to accomplish allowing the user to resize the window while keeping the bullet thumbs centered in the window. Currently that calculation takes place on window.load which is great but I also need to re-calculate when the screen is resized.


Thanks so much!

Melissa

jsjavascriptresizereloadfunctionOrbit

Hey Everyone! Melissa emailed us about a JavaScript question relating to reloading Foundation components on resize. We think this answer may be useful to some of you.

--

Hello. I’ve searched for an answer to this without luck. Is there a way to re-instantiate my orbit slider on a page resize?


I set up my slider on window load:

    $(window).load(function () {

 

        //Image slider

        $('#featured').orbit({

            fluid: '1400x730',

            timer: false,

            animation: 'horizontal-push',

            bullets: true,

            bulletThumbs: true,

            bulletThumbLocation: 'images/',

            bulletThumbsHideOnSmall: false,

            centerBullets: true

        });   

 

    });

 
 

            

         

I watch for the window to be resized and then call the doneResizing function:

    //Watch for window resizing

    $(window).resize(function () {

        clearTimeout(timer);

        timer = setTimeout(doneResizing, 500);

 

    });

 
 
In the doneResizing function I want to re-initiate my orbit instance:

    function doneResizing() {

        console.log('done resizing');

        //Image slider

        /*$('#featured').orbit({

            fluid: '1400x730',

            timer: false,

            animation: 'horizontal-push',

            bullets: true,

            bulletThumbs: true,

            bulletThumbLocation: 'images/',

            bulletThumbsHideOnSmall: false,

        });*/

 

        //$("#featured").unbind.orbit();

 

    }

 
 

            

         

Not a JavaScript of jQuery expert so any help would be appreciated.


Ultimately what I’m trying to accomplish allowing the user to resize the window while keeping the bullet thumbs centered in the window. Currently that calculation takes place on window.load which is great but I also need to re-calculate when the screen is resized.


Thanks so much!

Melissa


Rafi Benkual gave the most helpful answer for this post
Rafi Benkual over 5 years ago

You could do it like:

$(window).on('resize', Foundation.lib_methods.throttle(function () {
   $(document).foundation('orbit', 'init');
}

But better to call Foundation again:

$(window).on('resize', Foundation.lib_methods.throttle(function () {
       $(document).foundation();
}, 300));

300 is in ms

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

You could do it like:

$(window).on('resize', Foundation.lib_methods.throttle(function () {
   $(document).foundation('orbit', 'init');
}

But better to call Foundation again:

$(window).on('resize', Foundation.lib_methods.throttle(function () {
       $(document).foundation();
}, 300));

300 is in ms