0

When the screen is on a certain width, we wish to hide a button and, instead, allow the wrapper div to be clickable.

That should only happen, however, when:

@media only screen and (min-width:320px) {

While we can easily display:none; and display:block; the button, the issue arrives when we want to remove the surrounding wrapper div (on higher screen sizes), because, if we display: none; the surrounding div, all their inside content will be removed too!

Is there any javascript version of the media query above, that could be reliable cross browser, and cross OS, that one may have, in order to dynamically add and remove the element on certain screen conditions?

MEM
  • 30,529
  • 42
  • 121
  • 191
  • Check tis question out: http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa – Stevo Perisic Jul 22 '14 at 16:10

2 Answers2

2

Yeah check this:

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

Syntax

mql = window.matchMedia(mediaQueryString)

Where mediaQueryString is a string representing the media query for which to return a new MediaQueryList object.

Example

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */
}

And a polyfill like this:

https://github.com/paulirish/matchMedia.js/

Old IE:

https://github.com/benschwarz/matchMedia.js/tree/IE7-8

If you just care about a simple check here's how you could do it with jQuery, though it is pretty trivial to do it in plain Javascript too this is just easier because of your old IE requirements:

var timeout;

function onWindowResize() {
    var width = $(window).width();

    if (width <= 480) {
        console.log('small');
    } else if (width <= 767) {
        console.log('medium');
    } else if (width <= 1024) {
        console.log('large');
    } else {
        console.log('xlarge');
    }
}

$(window).resize(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        onWindowResize();
    }, 50); // Only resize every 50ms - number up to you.
});
Dominic
  • 62,658
  • 20
  • 139
  • 163
  • @MEM it is supposed to work for IE9 in fact I am pretty sure it does. IE8 doesn't even support css media queries so you can never have proper support but check this https://github.com/paulirish/matchMedia.js/issues/13 and consider not supporting IE8 it is an ancient unused browser – Dominic Jul 23 '14 at 09:07
  • @DominicTobias - Indeed ie8 doesn't support media queries but there are scripts that do those kind of jobs for css media queries, in order for the ie8 to handled. I'm wondering if matchMedia has the same kind of alternative. :) – MEM Jul 23 '14 at 09:58
  • @MEM Yes check that issue I posted, it has a link to https://github.com/benschwarz/matchMedia.js/tree/IE7-8 – Dominic Jul 23 '14 at 10:47
  • @DominicTobias Thank you so much for your clarifications. I have one last question: Jquery window.width returns the viewport width. (and totally cross browsers with no hacks). Do you believe the matchMedia is more relevant due to the fact that it supports other things specifically related to the media queries? (like orientation for example?). – MEM Jul 23 '14 at 11:25
  • 1
    @MEM Yeah it depends how much detail you want, if you are simply checking the window width (which you are doing in IE8 anyway) then you might just want to make a simple window.width check, which rechecks when the window is resized - though you have to be careful with doing logic for every resize event as it happens many times per second when dragging browser width ("throttle" the logic e.g. http://underscorejs.org/#throttle) – Dominic Jul 23 '14 at 15:23
  • @DominicTobias thanks for all the clarifications Dominic. Really. – MEM Jul 23 '14 at 15:53
  • @MEM np + added a jquery example of simple width checking with throttle – Dominic Jul 23 '14 at 16:26
0

Don't use JS to change the display property on the element directly. Modify the class names that are associated with the element instead.

You can then define display: none or otherwise using a class selector and media queries in your external stylesheet.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335