How to check Body Width every time you change Size in Jquery

Question

How to check Body Width every time you change Size in Jquery

Navigation

#1 by (3 votes)

-2

I was checking the size of body for $(window).resize but I realize that when starting the page initially the size is right but it does not apply to classes . Follow the Code:

jQuery.noConflict()(function($) {
  "use strict";

  $(document).ready(function() { // Inicializar app quando o documento esta pronto
    $(window).on('load', function() {
      $('.preloader').delay(350).fadeOut(); // Page Preloading
      $('body').hide().delay(350).show(); // Force Chrome to repaint fonts
      checkSize();
      $(window).resize(checkSize);
    });
  });

  function checkSize() {
    var width = $(window).width();
    if (width >= 320 || width <= 480) {
      $('.teste').addClass('celular').removeClass('desktop phablet').html('Celular: '+width);
    } else if (width >= 481 || width <= 767) {
      $('.teste').addClass('phablet').removeClass('desktop celular').html('Phablet: '+width);
    } else {
      $('.teste').addClass('desktop').removeClass('celular phablet').html('Desktop: '+width);
    }
  }

}(jQuery)); // Passar em (jQuery):

#body {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="body">
  <div class="teste"></div>
</div>

jquery

asked by anonymous 13.05.2016 / 22:12

1 answer

Summation system with checkbox does not work [closed] With "echo" works and with "return" no

score 3 · Accepted Answer

In size checking you used the OR operator, this way it always ends up entering the first if, after all the page is always greater than 320 or less than 480

if (width >= 320 || width <= 480)

The correct one would be to use the AND operator

if (width >= 320 && width <= 480) {
    //se for maior ou igual que 320 E menor ou igual a 480
} else if (width >= 481 && width <= 767) {
    //se for maior ou igual a 481 E menor ou igual a 767
} else {
    //em qualquer outro caso
}