[SOLVED] Include jQuery script at footer only on mobile and resize friendly

Include jQuery script at footer only on mobile and resize friendly

I'm trying to incorporate a jQuery plugin by Codrops - that make turns the menu into a bar on the left and bottom. I'd like to use the same menu as a normally top bar on desktop screens, just changing the styles of the id and classes that come with the demo. I was wondering whats the best Javascript solution to include the plugin's scripts on max-width of 768 and then remove them on anything larger. I'd like it to self check and update on browser resize too. Here's what I have so far...

 <script>
  (function() {
if( window.innerWidth > 600 ) {
   $.getSscript("assets/js/modernizr.custom.js");
   $.getSscript("assets/js/classie.js");
   $.getSscript("assets/js/borderMenu.js");
}
 })();
 </script>

Solution

So I did some research and I think I found an alternative answer. It doesn't link the scripts, but you can copy and paste them in the function thats called on the mobile screens.

Below is the code I incorporated at the bottom of my footer. I linked all the necessary scripts above this code so it loaded on all screen sizes( the plugin came with a custom modernizer.js and used classie.js)

    /////////////////////////////////
    // MATCH MEDIA FOR MOBILE MENU //
    /////////////////////////////////  

   /* JavaScript Media Queries */
if (matchMedia) {
    //*change this to whatever size screens you'd like, I wanted mine to only work on 768 or below
    var mq = window.matchMedia("(min-width: 768px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

   //* Put jQuery plugin's code here


}

So far it's worked great. Let me know if you notice anything that could be changed on the above code.

Thanks to Craig Buckler of OptimalWorks.net for his great tutorial and the example code.