How to ignore javascript on smaller resolutions?

Question

My dev site uses lots of Skrollr animation at 1024px resolutions and up. Under 1024px, I don't want the animation to show, so I hid all of the images and whatnot.

However, the javascript that gets called to make the animation work is still getting called on smaller resolutions and causing some issues.

Is there a way to basically say "If the resolution is less than 1024px, ignore these JS files"?

I tried putting them in a DIV and using my existing CSS media queries to "display: none" the DIV on smaller resolutions, but that doesn't work.

FYI, these are the files being called:

<script type="text/javascript" src="/js/skrollr.min.js"></script>
<script type="text/javascript" src="/js/homepageanimation.js"></script>

Use javascript to check the width of the viewport, if it is < 1024, don't initialize the Skrollr javascript. — Josh KG, May 06 '15 at 15:30
Check this answer http://stackoverflow.com/a/18946851/1156325 — Germanaz0, May 06 '15 at 15:30
possible duplicate of [Using Media Queries To Only Include JS Files On Mobile](http://stackoverflow.com/questions/18946403/using-media-queries-to-only-include-js-files-on-mobile) — Timotheus Triebl, May 06 '15 at 15:47

score 2 · Answer 1 · answered May 06 '15 at 15:27

2

The easiest way is too use jQuery..

$(window).width();

plain Javascript:

var w = window.innerWidth;
var ow = window.outerWidth; //toolbars and status, etc...

if(w > 1024) {
   //Skrollr
}

from there an small if to trigger the Skrollr event

answered May 06 '15 at 15:27

jycr753

3,097
5
31
54

score 2 · Accepted Answer · answered May 06 '15 at 15:28

On top of the jQuery(function($) { in http://workwave.joomlatest01.mms-dev.com//js/homepageanimation.js put something like

jQuery(function($) {
    if(screen.width < 1024) {
        return;
    }
    // skrollr stuff....
}

so all the skrollr functions won't be called on screen sizes with a width below 1024px.

score 1 · Answer 3 · answered May 06 '15 at 15:38

I would suggest conditionally loading the script. Basically the script only gets loaded if the screen size is greater than 1024.

if(window.innerWidth >= 1024){
    var file = document.createElement('script')
    file.setAttribute("type","text/javascript")
    file.setAttribute("src", "/js/skrollr.min.js")
}

score 0 · Answer 4 · answered May 06 '15 at 15:31

A nice approach here would be to only call the function that initiates the Skrollr functionality at given screen sizes. A real quick Google suggests that Skrollr has a .init() function that gets things rolling. Without seeing how the JS is set up it's hard to give any solid advice, but here's an idea:

You have a JS file for the page/site that contains a conditional that checks the width of the window before initializing the plugin after the document is ready.

$(document).ready(function() {
 if ($(window).width() > 1023) {
  skrollr.init();
 }
});

jQuery makes this a lot easier too, so it's worth taking advantage of that.

score 0 · Answer 5 · answered May 06 '15 at 15:53

Another option to consider instead of going via window width (which can sometimes be inconsistent with the CSS widths among different browsers) is to test against a CSS rule and whether it is true, so use one you know would be true at a size above 1024px, and this would eliminate any inconsistency.

Within this condition link the JQuery files as demonstrated in other answers.

How to ignore javascript on smaller resolutions?

5 Answers5