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 Require.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. What is this happening?
Any help even with how I can debug this would be really appreciated.
Thanks,
Russ
Hi Russ,
Do you have this page online somewhere that we could take a look? It’d be much easier to see everything in context and step through the code as it’s running in the page.
Sure,
I’ve just uploaded a latest version to http://thgcreative.co.uk/yeti/
The jQuery Tools script that is showing within the <head> tag is the one loading using the loadJS function. For some reason if I manually add the <script> line it works fine, but when it’s loaded using loadJS it doesn’t working. This must be an order thing no?
Is it because the loadJS is loading after the functions relating to the slideshow are loading? Could that be the problem?
Cheers,
Russ
Yes, that seems to be the problem.
Try using jQuery’s .getScript() function to load jQuery Tools, passing an init function for the slider as a callback:
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
jQuery.getScript('http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js')
.done(initSlider);
console.log('tablet loaded');
}
});
enquire.register("screen and (min-width: 900px)", {
match : function() {
jQuery.getScript('http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js')
.done(initSlider);
console.log('desktop loaded');
}
});
var initSlider = function() {
$(".slidetabs").tabs(".slides_container > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: true,
interval: 6000
});
});
};
Hey fretburner,
I’ve made those changes but still not having much look. In fact, with the new code it doesn’t look like the script is getting loaded. Do you know why this would be?
I’ve uploaded the changes to http://thgcreative.co.uk/yeti/
Thanks for your help - it’s appreciated!
Best,
Russ
I’m starting to suspect a bug in jQuery’s getScript. Neither the success nor error callback is getting executed. Nor is an error being thrown in the browser. Yet I can see in the network console that the tools script was downloaded.
As a quick alternative, I added LazyLoad.js, then instead of jQuery.getScript, I put in:
LazyLoad.js('http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js', initSlider);
And that seemed to do the trick.
Hi Russ,
Try changing the code slightly to this:
jQuery.getScript('http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js', initSlider);
For some reason it doesn’t seem to be calling the initSlider function when passed via .done()
Hey fretburner,
I tried changing the script as you specified but it still wasn’t loading the script.
So, I tried the lazyload.js and this loaded the script. However, the slideshow is still not working, and there are still no errors. This is really confusing me!
Here’s the latest: http://thgcreative.co.uk/yeti/
Cheers for all your help!
Oh! 
So the code that we were originally trying to run…
enquire.register("screen and (min-width: 900px)", {
match : function() {
jQuery.getScript('http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js')
.done(initSlider);
console.log('desktop loaded');
}
});
var initSlider = function() {
// ...
};
Notice that initSlider is a function expression, not a declaration. And that means it has to be defined before we try to use it. The .done() callback probably was being executed. Problem is we were passing undefined as the callback.
Try moving the initSlider function before any of the enquire statements.
Sidenote. This is why we like tools such as JSHint. It would have warned us about silly stuff like this.
my bad, should have known better… sorry Russ!
That’s it!
Thanks so much for your help on that one. That would have taken me ages to work out - I was moving code from place to place without knowing enough about what differentiates a declaration from an expression.
Thanks again, and thanks for the JShint link too, that looks like it could be really useful.