I make a simple check for the width of the screen to adapt, but something is wrong, here's the code:

var width = +$(window).width(); alert(width); //нормально выводит значение ширины окна if (width < 1024) { //не срабатывает в любом случае $('.fixed-1').css("position", "relative"); } else{ alert(width < 1024); //выводит всегда false var width_true = $('#menu2').width(); $('.fixed-l').css("max-width", width_true); $('.fixed-l').css(" position", "fixed"); }

Even when the window is less than 1024 pixels, it returns false . What's the matter?

  • var width = + $ (window) .width (); why did you put the signs = +? - Arsen
  • @ Arsen without + doesn't work either - shumik_UA
  • one
    and how are you checking? resize? - humster_spb
  • one
    Your code will only work when the page is reloaded - Arsen
  • The problem is that you have an alert(width < 1024); it runs if width>=1024 , so the condition will always be false . The error is not in the code, but in the logic. - Sergey Glazirin

2 answers 2

Everything should work. Probably a problem in your timer.
Use event instead of timer:

 $(window).on('DOMContentLoaded', () => { $(window).on('resize', onResize); onResize(); }); function onResize() { var width = $(window).width(), test = $('#test'); if (width < 1024) test.css('color', 'red'); else test.css('color', 'green'); test.text('Ширина вьюпорта: ' + width); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"></div>

JSbin demo

  • $ (window) .on ('DOMContentLoaded', () => {setInterval (function () {var width_true = $ ('# menu2'). width (); $ ('. fixed-l'). css (" max-width ", width_true);}, 200); $ (window) .on ('resize', onResize); onResize ();}); function onResize () {var width = $ (window) .width (), test = $ ('. fixed-1'); if (width <1024) test.css ('position', 'relative'); else test.css ('position', 'fixed'); } same problem, only else works - shumik_UA
  • shumikua.zzz.com.ua/lottery.php here, the script above div.menu-1 - shumik_UA
  • @shumik_UA, so what is this horror in the comments? Here is your page with the cut scripts and adding only one to the beginning of the body : jsbin.com/qeqaqicapa/edit?html,output (Move the separator between the markup and the output) - yar85
  • @shumik_UA, in general, I don’t quite understand what you want to achieve on that page (it’s inconvenient to read such markup from mobile phones), so I added a division at the end of the badi - with the same class, and changing the background color as in the example: jsbin.com/xacocumaga / edit? html, output - yar85

Wrap your code in an event handler.

 $(window).resize(function(){ var width = +$(window).width(); alert(width); if (width < 1024) { $('.fixed-1').css("position", "relative"); } else { alert(width < 1024); var width_true = $('#menu2').width(); $('.fixed-l').css("max-width", width_true); $('.fixed-l').css(" position", "fixed"); } });
  • The logic is almost working, but what if the user does not resize the window? - Arsen
  • I have setInterval, the problem is in if - shumik_UA
  • @ Arsen In this case, in general, it would be necessary to register all sorts of \ @media (max-width: 1024px) - Boris Ustyantsev
  • @UstyantsevBoris and here "any @media"? I wrote about that to you that in JS you should have two logic, the first one works when loading DOM and the second one when resizing. - Arsen