i am looking to apply media queries through javascript

Question

I want to slide the divs of menu from left to right,I have done that using javascript

     <div id="script" style="height: 250px;">
                <div class="slide">
                    <div id="div1" class="slide-item">
                        <p>Home</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="div2" class="slide-item">
                        <p>About Us</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="div3" class="slide-item">
                        <p>Events</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="div4" class="slide-item">
                        <p>Register</p>
                    </div>

                </div>

            </div>

But I cant do it with different media screen I have tried this:

   document.ready(function () {

if (screen.width <= 450) {
    $("#div1").animate({ left: '100px' }, { duration: 500 });

}
else if (screen.width >= 451 && screen.width <= 700) {
    $("#div1").animate({ left: '150px' }, { duration: 500 });
}
else (screen.width > 700)
{
    $("#div1").animate({ left: '200px' }, { duration: 500 });
}

I have also tried using switch case:

        $(document).ready(function () {
    switch ( varmql) {
        case window.matchMedia("screen and (min-width: 450px)"):
            $("#div1").animate({ left: '60px' }, { duration: 500 });

            break;
        case window.matchMedia("screen and (min-width: 451px) and (max-width:540px)"):
            $("#div1").animate({ left: '80px' }, { duration: 500 });

            break;

        case window.matchMedia("screen and (min-width: 541px) and (max-width:768px)"):
            $("#div1").animate({ left: '100px' }, { duration: 500 });

            break;

        case window.matchMedia("screen and (min-width: 769px) and (max-width:1024px)"):
            $("#div1").animate({ left: '140px' }, { duration: 500 });

            break;
        case window.matchMedia("screen and (min-width: 1025px) and (max-width:1200px)"):
            $("#div1").animate({ left: '160px' }, { duration: 500 });

            break;
        case window.matchMedia("screen and (min-width: 1201px) "):
            $("#div1").animate({ left: '180px' }, { duration: 500 });
        default

    }


});

doing this the slide item is not appearing at all on screen

Answer 1

Look at the documentation for matchMedia at https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia.

It returns a "media query list" on which you have to access the matches property:

case window.matchMedia("screen and (min-width: 450px)").matches:
                                                       ^^^^^^^^

I don't know what varmql is, but it would seem you should replace it with true.

But as a commenter mentioned, you probably don't need to this at all. You can use CSS with media queries:

#div1 { transition: all 500ms; }

@media screen and (min-width: 450px) {
    #div1 .animate { left: 60px; }
}

$(document).ready(function() {
    $('#div1').addClass('animate');
});

or something similar.