How to dynamically load foundation orbit?

Question

In my javascript, if the window is a specific width, add the data-orbit attribute to my intended slider. This fires on $(window).resize() and $(function(){}) .

The condensed version...

   var ui = {
        mobile : function() {
            var i = 0;
            if($(window).width() <= 568) {
                this.resizeOffers();
            } else {
                this.mobileClear();
            }
        },
        resizeOffers : function() {
                $('#offers .inner').attr('data-orbit', "");

        },
        mobileClear : function() {
                $('#offers .inner').removeAttr('data-orbit');

        }
    }

Everything works great if you load the page while the window width falls into the condition. If you load the page with a normal window width, then resize to the media query, obviously orbit didn't load with the dom so there is no slider animation or dynamically added orbit dom elements.

My question is...

How can I have orbit manipulate the dom, after the document has loaded? Or is this not possible?

Thanks,
Seth

Answer 1

Thinking about this you could load the orbit js using ajax then initiate it once the dom is ready.

 $(document).ready(function(){

   //load the orbit JS
   $.ajax({
     url: 'js/foundation/foundation.orbit.js',
     dataType: 'script',
     success: function(){
       //initiate orbit
       console.log('loaded');
       $(document).foundation('orbit');
     },
     async: false
   });

});

Answer 2

Found out after the fact that if orbit is loaded, running ... $(document).foundation('orbit'); in my the js media query did the same as above, without any http requests.