Jquery add class on resize, window width not correct

Question

I had a question about something weird. I have been using jquery window.with and window.resize but I don't feel like it is accurate, I have set it to do something at max-width 1200px, but it does it at 1280px? Is there something wrong with my code?

jQuery(window).resize(function() {
        if (jQuery(window).width() <= 1200) {
            if(!jQuery(".navbar-collapse .nav li").hasClass("fa fa-chevron-down")) {
                document.querySelector('style').textContent += "@media screen and (max-width: 1200px) { " +
                    ".fa, .fa-chevron-down:hover { color: black; }" +
                    ".fa-chevron-down:before {content: normal;}" +
                    ".nav .parent:before {display: inline-block;\n" +
                    "        content: '\\f078';\n" +
                    "        -webkit-border-after-width: 20px;\n" +
                    "        top: 7px;\n" +
                    "        position: absolute;\n" +
                    "        right: 24px;\n" +
                    "        font-size: 25px;\n" +
                    "        z-index: 8;}" +
                    "" +
                    "}";
            }
            jQuery('.navbar-collapse .nav li').addClass("fa fa-chevron-down");
        }
        else if(jQuery(window).width() >= 1201) {
            jQuery('.navbar-collapse .nav li').removeClass("fa fa-chevron-down");
        }
    });

Does anyone know how to fix this problem so it just adds the class at 1200px and removes it as 1201px?

it's rather weird to add a media query through JS under the resize event - why not just put it directly in your CSS? — Rory McCrossan
– Rory McCrossan, Commented Nov 24, 2017 at 8:53
Mmh, I added it because for some reason if I didnt it started to do weird things with this code, but with the solution below I could put it back in css? — Brum
– Brum, Commented Nov 24, 2017 at 9:02
Definitely. Using JS as a crutch for the UI is a really bad idea — Rory McCrossan
– Rory McCrossan, Commented Nov 24, 2017 at 9:10

Kathara · Accepted Answer · 2017-11-24 08:46:54Z

4

I believe the problem is, that the window.width() returns the width of the window including scrollbars etc. (pls, correct me if I'm wrong...). I have once needed something similar and I used a function to determine the width:

function viewport() {
  var e = window, a = 'inner';
  if (!('innerWidth' in window )) {
    a = 'client';
    e = document.documentElement || document.body;
  }
  return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

With this you can check for the window-width as follows:

if ((viewport().width <= 1200)

answered Nov 24, 2017 at 8:46

Kathara

1,2901 gold badge12 silver badges37 bronze badges

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

2 Comments

Brum Over a year ago

Thank you, this worked like a charm! I didn't know that it took the scrollbars :O

Kathara Over a year ago

I'm glad it worked... I had the same issue once and I found somewhere, that the window width includes the scrollbars and then found this solution somewhere along the way. :)

Prasanth S · Accepted Answer · 2017-11-24 09:09:56Z

0

remove jQuery(window).resize(function()

fiddle link that works fair simple

if (jQuery(window).width() < 767) {
$("p").append("<b>Appended text less than 767</b>");
}
else if(jQuery(window).width() > 767) {
$("p").append("<b>Appended text greater than than 767</b>");
}

edited Nov 24, 2017 at 9:09

answered Nov 24, 2017 at 9:04

Prasanth S

5355 silver badges19 bronze badges

1 Comment

Prasanth S Over a year ago

answer of Kathara also correct but getting width and then check for width is not coool one

Collectives™ on Stack Overflow

Jquery add class on resize, window width not correct

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related