Question

I am writing a responsive WordPress theme and am in a situation where I want to hide a div based on the screen resolution of the viewer.

I have a 468px by 60px advertising banner from BuySellAds in a div and I would like to hide it from viewers that view the site on a smartphone or tablet.

I tried to achieve this using CSS3 media queries however it did not work.

Can this be achieved using jQuery? If so any code to point me in the right direction would be greatly appreciated.

Thanks

Answer 1

You can take values from $(window) selector. For getting current value; use resize() method:

Here is working jsFiddle.

var range = 200;
//for getting begining values
var windowW = $(window).height();
var windowH = $(window).width();
console.log(windowW+'X'+windowH);

//for getting current values
$(window).resize(function() {
   var windowW = $(this).height();
   var windowH = $(this).width();
   console.log(windowW+'X'+windowH);

   if( windowW < range ) {
      $('.ele').hide();
   }else{
      $('.ele').show();
   }
});​

Edit: You can do this with pure css3 also, using this css:

@media only screen and (min-width: 767px) { .ele { display:none; } }

And i suggest to inspect these answer’s, if you want to go further with jQuery scroll values: Setting CSS value limits of the window scrolling animation and How to build simple sticky navigation at the page bottum?