How to trigger media Queries in javascript for style.width

Question

I'm working on a onclick event (html) with jquery. In my jquery i set the width for this event.

Though i want a different width for the mobile website. For this I should work with media queries. On desktop it is 50vw, on phone (triggered from 600px) it should be 100vw... Though how to make this work properly?

function openMenu() {
document.getElementById("menuNav").style.width = "50vw"; 
}

function closeMenu() {
    document.getElementById("menuNav").style.width = "0vh";
}

Matjaž Drolc · Accepted Answer · 2017-09-03 18:21:13Z

3

Define .open class and .closed class in CSS where you can use media queries normally. Then switch CSS classes on menuNav with JavaScript. See documentation for classList: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

answered Sep 3, 2017 at 18:21

Matjaž Drolc

4166 silver badges10 bronze badges

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

Comments

Ruslan · Accepted Answer · 2017-09-03 18:22:56Z

2

if($(window).width() < 601) { 
    // change functionality for smaller screens
} else { 
    // change functionality for larger screens
}e

or

if(window.matchMedia('(max-width: 600px)').matches)
{
    // do functionality on screens smaller than 600px
}

answered Sep 3, 2017 at 18:22

Ruslan

1082 silver badges8 bronze badges

Comments

Jerome Beckett · Accepted Answer · 2017-09-03 18:30:35Z

1

You can use jQuery's width() method to find the width of the window (IE the browser viewport) and determine whether 50vw or 100vw should be used:

function openMenu() {
    if($(window).width() > 600) {
        document.getElementById("menuNav").style.width = "50vw";
    } else {
        document.getElementById("menuNav").style.width = "100vw"; 
    }
}

answered Sep 3, 2017 at 18:30

Jerome Beckett

732 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to trigger media Queries in javascript for style.width

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related