Question

I got some javascript for sliding menus, but I need some values to be different for different size screens.

This is my script for reference:

    $('.show-menu').on('click', function () {
        if ($(".menu-button").html() == 'CLOSE') {
            $("#slideover").animate({
                right: "0"
                }, 300);
            $(".black-cover").fadeOut(300);
            $(".menu-button").html('MENU');
                } else {
            $("#slideover").animate({
                right: "512px"
                }, 300);
            $(".black-cover").fadeIn(300);
            $(".menu-button").html('CLOSE');
            }
        });

My question is that is it possible to load in .js files scripts similar to the link query below?

<link rel="stylesheet"
      media="only screen and (orientation:landscape) and (orientation:portrait)" href="ipad.css">

<link rel="stylesheet"
      media="only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-o-min-device-pixel-ratio: 3/2) and (min-device-pixel-ratio: 1.5)" href="iphone.css">

If you need me elaborate the question let me know or if you can think of another solution then awesome, thanks in advance.

---

UPDATE, Thanks for the 3 answers, I can see all of them working a beaut.

I’m going to try them all and repost the one that works the fastest and is lightest 🙂

Again, thanks

Answer 1

Use window.matchMedia(). Here’s a polyfill: https://github.com/paulirish/matchMedia.js

If you want to load different script files based on which media query currently matches, you could combine the above with a script loader like LAB.js or yepnope.