Enable/Disable Javascript based on screen size

Question

I am creating a responsive site where I am using a slide out panel to diaplay content on the desktop version.

For my tab/mob site I would not be using this, because it will look weird along with the responsive mobile navigation.

I would like to find a way to enable/disable this slide out JS, without realoding the site.

I have been looking at the following posts, but these all requires that I reload the page, none of them allow me to enable/disable the JS only based on screen re-size.

how to disable javascript for responsive design

disabling javascript plugin based on window size

jQuery: Disable & Enable Plugin based on browser window size?

score 1 · Answer 1 · edited Apr 14 '15 at 08:30

You could create a container that holds a static image as an alias of the default slider. This container (lets say #staticImg) would be invisible on wide screens.

In narrower screens, hide the original div (the one that holds the slider) and show up the #staticImg in place of the original slider.

CSS

#staticImg { display:none }

@media all and (max-width: 450px) { 
    #originalHolder { display:none }
    #staticImg { display:block }
}

Javascript will still be working, but the slider will be invisible

Enable/Disable Javascript based on screen size

1 Answers1