Get browser width and hide element depending on size?

javascript, jquery, resolution, width

Solution

You can accomplish this using a CSS media query.

@media (max-width: 1024px) {
  #someElement { display:none; }
}

Some older browsers don't support media queries, so you could use jQuery to accomplish this as well. This example will show/hide the element when the window resizes

<div id="someElement">SOME ELEMENT</div>

<script>
  $(function() {
    $(window).bind("resize", function() {
      $('#someElement').toggle($(this).width() >= 1024);    
    }).trigger("resize");
  });
</script>

Problem

Is it possible to detect what width a browser window is and hide an element on page if its lower than 1024? In JQuery perhaps? :-)

Original source