W3C home > Mailing lists > Public > www-style@w3.org > August 2014

Re: why not MediaQueryList.onchange

From: Jonathan Fielding <hello@jonathanfielding.com>
Date: Wed, 06 Aug 2014 14:32:58 +0000
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Jochen Eisinger <eisinger@google.com>, www-style list <www-style@w3.org>
Message-Id: <CEAB4C32-DEF9-4FA5-8610-B75865F43383@jonathanfielding.com> (sfid-20140806_143304_732546_BDD0ADBC)
To: Simon Pieters <simonp@opera.com>

What I meant was a resize event per MediaQueryList, if you look at www.simplestatemanager.com you would see that it allows your to have a enter, leave and resize event. 

So if we think of this in terms of the MediaQueryList, we currently have

var mql = window.matchMedia("screen and (max-width:768px)");

But what we might have instead is:

var mql = window.matchMedia("screen and (max-width:768px)”);

mql.addEventListener(“match”, function(){
	console.log(‘ive matched’);

mql.addEventListener(“unmatch”, function(){
	console.log(‘ive unmatched’);

mql.addEventListener(“resize”, function(){
	console.log(‘while matched and browser is resized I will fire’);

So this gives us the ability to add a resize event specific to a “state” i.e. while the media query matches.


Jonathan Fielding
Jonathan Fielding Ltd

On 6 Aug 2014, at 15:19, Simon Pieters <simonp@opera.com> wrote:

> On Mon, 09 Jun 2014 22:22:54 +0200, Jonathan Fielding <hello@jonathanfielding.com> wrote:
>> Would be nice to be able to do addEventListener(“resize”, …) as well, I have mentioned this in previous threads because its really important to some responsive sites
> Do you mean when the viewport is resized? The spec already fires an event for that:
> http://dev.w3.org/csswg/cssom-view/#resizing-viewports
> -- 
> Simon Pieters
> Opera Software

Received on Friday, 8 August 2014 17:08:34 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:45 UTC