Enable/Disable javascript using Media Query

Question

I have a slide where I want to show photos specific for each device. iPhone, iPad, Desktop.

I would like to use something like this to filter each out. Obviously display:none isn't going to work since it's JavaScript, but this is just a general idea of how it should work:

<style type="text/css">
@media only screen and (min-width: 800px) {
    #slide-desktop{display:block;}
    #slide-ipad{display:none;}
    #slide-iphone{display:none;}
}
@media only screen and (min-width: 481px) and (max-width: 799px) {
    #slide-desktop{display:none;}
    #slide-ipad{display:block;}
    #slide-iphone{display:none;}
}
@media only screen and (max-width: 480px) {
    #slide-desktop{display:none;}
    #slide-ipad{display:none;}
    #slide-iphone{display:block;}
}
</style>
<div id="slide-desktop">
    <script>
        $.vegas('slideshow', {
        delay:6000,
        backgrounds:[
        { src:'images/slide/desktop.jpg', fade:600 },
        ]
        })('overlay');
    </script>
</div>
<div id="slide-ipad">
    <script>
        $.vegas('slideshow', {
        delay:6000,
        backgrounds:[
        { src:'images/slide/ipad.jpg', fade:600 },
        ]
        })('overlay');
    </script>
</div>
<div id="slide-iphone">
    <script>
        $.vegas('slideshow', {
        delay:6000,
        backgrounds:[
        { src:'images/slide/iphone.jpg', fade:600 },
        ]
        })('overlay');
    </script>
</div>

What do you mean by display:none is Javascript ? It's a CSS property. — tomahim
– tomahim, Commented Nov 1, 2013 at 21:48

andbas · Accepted Answer · 2013-11-01 21:56:43Z

1

If you want to run different scripts based on a media query you can use enquire.js

enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries.

So, you no need to put anything in a style at all.

answered Nov 1, 2013 at 21:56

andbas

6015 silver badges8 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:21:33Z

1

If you want to check by the device width you can use simple javascript like this

   if(window.innerWidth >= 800)
   {
     alert('desktop?');
   }
   else if(window.innerWidth >= 481 && window.innerWidth < 799)
   {
     alert('ipad?');
   }
   else if(window.innerWidth < 480)
   {
    alert('iphone?');
   }

But I would not go for this technique. Check out

What is the best way to detect a mobile device in jQuery?

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Nov 1, 2013 at 21:57

oBo

9923 gold badges13 silver badges28 bronze badges

Collectives™ on Stack Overflow

Enable/Disable javascript using Media Query

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related