Slideshow Not Loading When Using Enquire

[slaterino]

Hi,

I am currently building a site which works perfectly as it is. However, I am now trying to add mobile responsiveness and having trouble with what I think is the order in which the JavaScript files are loading. Essentially, I have a slideshow on the main page but I don't want this to load on mobile devices so am using Enquire.js to set some parameters. However, even though it looks like it's working in the code there are some problems.

 

First off, in my script, I load the JavaScript files:

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript" charset="utf-8"></script>

Then I load the loadJS function and initialise the jQuery tool:

<script type="text/javascript">

function loadJS(url)

{

  var head = document.getElementsByTagName('head')[0];

  var script = document.createElement('script');

  script.type = 'text/javascript';

  script.src = url;

  head.appendChild(script);

};



   (function($) {

     jQuery('#slides').slides({

preload: true,

generateNextPrev: true

});

});

  </script>

This all works fine. My problem is that I want jQuery Tools to only open if the computer is not a mobile. So, instead of loading the script in the header I have this script later on in the file:

enquire.register("screen and (min-width: 900px)", {

            match : function() {

                loadJS('http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js');

                console.log('desktop loaded');

            }

        });

However, even though that script loads the JavaScript in the header the jQuery Tools are not initialising properly and the slideshow is not working. Why is this happening?

 

Any help even with how I can debug this would be really appreciated.

 

Thanks,

Russ