1

I notticed when resizing the window, that the effects applied from the responsive @media querys and the effects applied from the jQuery are not at the same point of width.

Is is dued to the browser? Is there a solution for that, or a way to calculate the difference between CSS and JS?

My CSS:

@media only screen
and (min-width : 768px)
and (max-width : 1024px) { }

My jQuery:

$(document).ready(function(){

  if($(this).width() < 1024 && $(this).width() > 768) {

  } else {

  }

  $(window).on('resize', function(){    
    if($(this).width() < 1024 && $(this).width() > 768) {

    } else {

    }

  });

});

To avoid this difference at the moment, my solution is something like that: I have a #selector declared with the display:none when it's between 768px and 1024px. Then, in the jQuery code, instead of using the size < 1024 and > 768 I'm using this:

if($("#selector").is(":hidden")) { }

But, is there a better way to combine width from the @media querys and the jQuery without differences? Thanks.

UPDATE: I already found a solution explained here: https://stackoverflow.com/a/11310353/3018860. That occurs because «the CSS is using the device width, but the JS is using the document width».

Community
  • 1
  • 1
Unix
  • 1,358
  • 3
  • 14
  • 23
  • 1
    Doesn't the CSS Media query widths include 768/1024 also? I think it does. – Harry Jul 12 '14 at 12:24
  • 1
    The previous fiddle that I added has some problems. Ignore that and have a look at [this one](http://codepen.io/hari_shanx/pen/maKpi). I have added the width also to a div below for reference. Keep it exactly at 768px, comment out the media query and you would see that the color is still black whereas when you include media query it becomes red. – Harry Jul 12 '14 at 12:42
  • Thank you, Harry. Your example works perfect, so I don't understand why it doesn't work on my code. You can see the effect [here](http://demo.seozeta.com/blog/). Use 1100px of width, then reduce it slowly. When it's at 1038px it will change the width of the content (jQuery), and when it's at 1024px it will appear the responsive menus (@media query). – Unix Jul 12 '14 at 17:17
  • 14px difference, that's driving me crazy. – Unix Jul 12 '14 at 17:57
  • 1
    Yes, I could also see it but it happens at 1040px for me. Would you be ok to use `window.innerWidth` instead of jQuery's width? It could be because the jQuery width is the content's width. You can use the Dev console and hover your HTML or BODY tag and see that when the browser is resized to 1040px, the BODY actually shows only 1024px. – Harry Jul 13 '14 at 06:58
  • Yep, it depends of every broswer, depending of the scroll-bar width. This difference is caused because the @media queries use the device width, but the JavaScript uses the document width. I found a solution here (http://stackoverflow.com/a/11310353/3018860) that solves it, and now the code uses the same width. My problem now is on the load and resize events, because my code doesn't add/remove the CSS style sometimes, depending of the width when I load the page, etc. I opened a new question: http://stackoverflow.com/questions/24718435/jquery-function-on-window-events-load-and-resize. – Unix Jul 13 '14 at 08:16

0 Answers0