Search code examples
javascriptcssskrollr

How to ignore javascript on smaller resolutions?

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>
Solution

  • 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.