jQuery Side Navigation on jquery media queries

Question

I have Side Navigation action in jQuery:

$(function openSidebar()) {
   document.getElementById("sidebar").style.width = "250px";
   document.getElementById("wrapper").style.marginLeft = "250px";
}

function closeSidebar() {
   document.getElementById("sidebar").style.width = "0";
   document.getElementById("wrapper").style.marginLeft= "0";
}

I need to change width from 250px to 100% on mobile devices. How can I get it on jQuery?

@PeterMader I just used the solution from w3schools.com/howto/howto_js_sidenav.asp You may have another suggestion in return? — Filip Kolendo
– Filip Kolendo, Commented May 26, 2017 at 20:53
@FilipKolendo, with jQuery, you normally use $(...) and selectors to find elements in the DOM. In your case, it would be $('#sidebar').css('width', '250px'). Check out the jQuery API documentation. — PeterMader
– PeterMader, Commented May 27, 2017 at 16:54

Abdullah Seba · Accepted Answer · 2017-05-26 21:08:52Z

0

   if ($(window).width() < 768) {
       $(function openSidebar()) {
           document.getElementById("sidebar").style.width = "100%";
           document.getElementById("wrapper").style.marginLeft = "100%";
       }

       function closeSidebar() {
           document.getElementById("sidebar").style.width = "0";
           document.getElementById("wrapper").style.marginLeft = "0";
       }
   } else {
       $(function openSidebar()) {
           document.getElementById("sidebar").style.width = "250px";
           document.getElementById("wrapper").style.marginLeft = "250px";
       }

       function closeSidebar() {
           document.getElementById("sidebar").style.width = "0";
           document.getElementById("wrapper").style.marginLeft = "0";
       }
   }

Update:

       if ($(window).width() < 768) {
           var width = "100%";
           var marginLeft = "100%";
       } else {
           var width = "250px";
           var marginLeft = "250px";
       }

        function openSidebar() {
           $("#sidebar").width(width);
           $("#wrapper").css('margin-left', marginLeft );
       };

edited May 26, 2017 at 21:08

answered May 26, 2017 at 16:57

Abdullah Seba

3282 gold badges6 silver badges16 bronze badges

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

16 Comments

Filip Kolendo Over a year ago

Unfortunately, it does not work and highlights getElementById in two places

Abdullah Seba Over a year ago

@FilipKolendo I added your function name.

ohmu Over a year ago

It bugs me to no end when websites decide to arbitrarily assume some random width means you're on a mobile device.

Filip Kolendo Over a year ago

Now it works with only 250px and marginLeft on #wrapper is 0px all the time :/

Filip Kolendo Over a year ago

On mobile device it woks with 100% but on regular laptop margin left is still 0px

|

Collectives™ on Stack Overflow

jQuery Side Navigation on jquery media queries

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related