jquery window width not working at some breakpoints

Question

I wrote a script that loads some html from files based on the width of window.

The problem is that at some points it fails to work

var winWidth = $(window).width();
//var winWidth = window.outerWidth;
//var winWidth = document.body.offsetWidth;


    if((winWidth > 0) && (winWidth <= 767)){
        console.log('Mobile');
        $.ajax({
            url : "home-banner-parts/mobile.html",
            dataType: "html",
            success : function (data) {
                $("#homeslider").html(data);
            }
        });
    }
    if((winWidth >= 768) && (winWidth <= 1279)){
        console.log('Tab');
        $.ajax({
            url : "home-banner-parts/tab.html",
            dataType: "html",
            success : function (data) {
                $("#homeslider").html(data);
            }
        });
    }
    if((winWidth >= 1280)){
        console.log('Desktop');
        $.ajax({
            url : "home-banner-parts/desktop.html",
            dataType: "html",
            success : function (data) {
                $("#homeslider").html(data);
            }
        });
    }


//the above code is wrapped in function
$(window).resize(function() {
    console.log('Resizing');
    homeCarousel();
});

So the problem comes around width

1281px to 1295px - loads tab.html but should load sektop.html
770px 785px - loads mobile.html but should load tab.html

Please help

Can you add console.log(winWidth); above your IF-statements to track the current width? — cosmoonot, Apr 09 '17 at 17:29
I did, and it does not show the correct one that is shown by chrome on resizing - there is a mismatch. — Stacy J, Apr 09 '17 at 17:35
Oh, You're resizing. You need to use $(window).on('load resize', function () { // code here.}); — cosmoonot, Apr 09 '17 at 17:38
@cosmoonot - I call this code withinin $(window).resize(function() {}. Should I use on('load resize') instead..? — Stacy J, Apr 09 '17 at 17:40
Yes, because your code is only checking for resize at the moment. Use the answer below, or the code I posted above. — cosmoonot, Apr 09 '17 at 17:40
Just a tip, it is better to use `winWidth > 767 ...` when the previous check was `winWidth <= 767`. — GramThanos, Apr 09 '17 at 18:32

Gabriele Petrioli · Accepted Answer · 2017-04-09T18:27:57.013

The pixel range, that your code fails, points to the scrollbar width.

Indeed, you need to use window.innerWidth to get the actual viewport used.

So var winWidth = window.innerWidth;

Finally you should also call you code when the dom is ready, so

function handleWindowSize(){
   // your code here
}
$(window).resize(function() {
    console.log('Resizing');
    handleWindowSize();
    homeCarousel();
});
$(document).ready(function(){
    $(window).trigger('resize');
})

Michael Coker · Answer 2 · 2017-04-09T18:02:49.210

1

You need to wrap everything in a $(window).on('load resize', function() { ... }); event handler so that this code runs when the page loads and on the resize event.

I would also track the state somewhere so that you aren't unnecessarily firing $.load() if what you want to load is already on the page.

var $body = $('body');

    $(window).on('load resize', function() {
      
      var winWidth = $(this).width(),
          state = $body.data('state');

      console.log(winWidth);

      if ((winWidth > 0) && (winWidth <= 767) && (state != 'mobile')) {
        $body.data('state','mobile');
        console.log('Mobile');
        $.ajax({
          url: "home-banner-parts/mobile.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
      if ((winWidth >= 768) && (winWidth <= 1279) && (state != 'tab')) {
        $body.data('state','tab');
        console.log('Tab');
        $.ajax({
          url: "home-banner-parts/tab.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
      if ((winWidth >= 1280) && (state != 'desktop')) {
        $body.data('state','desktop');
        console.log('Desktop');
        $('bo')
        $.ajax({
          url: "home-banner-parts/desktop.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
    })

body {
overflow-y: scroll;
min-height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Apr 09 '17 at 18:02

answered Apr 09 '17 at 17:36

Michael Coker

52,626
5
64
64

The above code is wrapped in a function. I call the function on load and resize..Updated the code – Stacy J Apr 09 '17 at 17:38
@StacyJ updated what code? It's not in your OP. My demo seems to work. Does it work for you? – Michael Coker Apr 09 '17 at 17:39
@StacyJ You're only checking for resize at the moment, you want load and resize. – cosmoonot Apr 09 '17 at 17:39
@StacyJ also updated my answer to add a method to track state so `$.load()` doesn't fire unless the file isn't currently loaded. – Michael Coker Apr 09 '17 at 17:45
I'll try this - but on load resize does not work for me – Stacy J Apr 09 '17 at 17:46
@StacyJ please be more specific. "but on load resize does not work for me" - why? Does my demo work? And if not, please tell me *why* or give me some feedback if you'd like me to help. It's a very straightforward concept. – Michael Coker Apr 09 '17 at 17:49
ok, i tried your updated script and at 1296 on chrome it shows Tab in the console. But it should show Desktop – Stacy J Apr 09 '17 at 17:50
@MichaelCoker - ur snippet however works fine. I am not sure whats wrong with my implementation – Stacy J Apr 09 '17 at 17:52
@StacyJ it doesn't load the wrong resource at 1296 for me. Here's a screenshot of the page loaded at 1275 - 1299 and it loads the right file http://i.imgur.com/ot7vXWR.png Feel free to include everything you have so I can look, but I can't help if you can't reproduce it. All I can do is guess. – Michael Coker Apr 09 '17 at 17:55
@MichaelCoker - there is a mismatch the width when I console log it. For width 1292 on chrome it logs 1275 – Stacy J Apr 09 '17 at 17:56
@MichaelCoker Do you think it is because of the scrollbar....your snippet does't have a scrollbar – Stacy J Apr 09 '17 at 17:58
@StacyJ "For width 1292 on chrome it logs 1275" - how are you seeing it's 1292px? When I have the dev tools open, and compare the width in the top/right of the window (which shows the window width) it matches the # in the console log. And I'm using chrome. – Michael Coker Apr 09 '17 at 17:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141293/discussion-between-stacy-j-and-michael-coker). – Stacy J Apr 09 '17 at 18:01
@StacyJ could be, I added a scrollbar to my snippet if you want to try again. If so, you can either adjust your media queries or use `innerWidth` like @Gaby suggested, or one of the techniques here http://stackoverflow.com/questions/8339377/how-to-get-screen-width-without-minus-scrollbar – Michael Coker Apr 09 '17 at 18:04
@MichaelCoker - innerwidth worked for me. Thanks for bringing up the state..it helps a lot. – Stacy J Apr 09 '17 at 18:07

jquery window width not working at some breakpoints

2 Answers2