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?

A.L · Accepted Answer · 2015-04-14 08:30:32Z

1

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

edited Apr 14, 2015 at 8:30

A.L

10.6k10 gold badges73 silver badges106 bronze badges

answered Apr 14, 2015 at 8:06

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Enable/Disable Javascript based on screen size

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related