Skip to content

/matchMedia.js forked from paulirish/matchMedia.js

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
matchMedia.js/matchMedia.js
Newer
Older
100644 61 lines (49 sloc) 2.181 kb
Raw Normal view History
d92c1e8 Paul Irish
paulirish authored
1 /*
da923cc Paul Hayes Typo fix.
authored
2 * MediaQueryListener proof of concept using CSS transitions by Paul Hayes
ea57cb7 Paul Hayes Proof of concept for using CSS transitions to mimic MediaQueryListener
authored
3 * November 5th 2011
4 *
5 * Based on the excellent matchMedia polyfill
6 * https://github.com/paulirish/matchMedia.js
7 *
91bacc9
Eivind Uggedal authored
8 * matchMedia() polyfill - test whether a CSS media type or media query applies
50c64c8 Paul Irish big refactor to incorporate nicholas's technique.
paulirish authored
9 * authors: Scott Jehl, Paul Irish, Nicholas Zakas
77a0042 Paul Irish changing copyright to authors (at scott's request.) adding BSD license.
paulirish authored
10 * Copyright (c) 2011 Scott, Paul and Nicholas.
11 * Dual MIT/BSD license
91bacc9
Eivind Uggedal authored
12 */
d92c1e8 Paul Irish
paulirish authored
13
ea57cb7 Paul Hayes Proof of concept for using CSS transitions to mimic MediaQueryListener
authored
14 mql = (function(doc, undefined) {
50c64c8 Paul Irish big refactor to incorporate nicholas's technique.
paulirish authored
15
7772d7b removing need for mql.css, adding style within, cleaning README to put i...
Divya Manian authored
16 var docElem = doc.documentElement,
ea57cb7 Paul Hayes Proof of concept for using CSS transitions to mimic MediaQueryListener
authored
17 refNode = docElem.firstElementChild || docElem.firstChild,
18 idCounter = 0;
7772d7b removing need for mql.css, adding style within, cleaning README to put i...
Divya Manian authored
19 if(!doc.getElementById('mq-style')) {
20 style = doc.createElement('style');
21 style.id = 'mq-style';
22 style.textContent = '.mq { -webkit-transition: width 0.001ms; -moz-transition: width 0.001ms; -o-transition: width 0.001ms; -ms-transition: width 0.001ms; width: 0; position: absolute; top: -100em; }\n';
23 docElem.insertBefore(style, refNode);
24 }
154509a Paul Irish add back examples.
paulirish authored
25
a7b7d94 transitionEnd as one correct event listener
John Reading authored
26 var transitionEnds = Array('transitionend','webkitTransitionEnd','oTransitionEnd','msTransitionEnd');
27
28 for(var i in transitionEnds) {
29 if ('on'+ transitionEnds[i].toLowerCase() in window) transitionEnd = transitionEnds[i];
30 }
31
ea57cb7 Paul Hayes Proof of concept for using CSS transitions to mimic MediaQueryListener
authored
32 return function(q, cb) {
154509a Paul Irish add back examples.
paulirish authored
33
ea57cb7 Paul Hayes Proof of concept for using CSS transitions to mimic MediaQueryListener
authored
34 var id = 'mql-' + idCounter++,
35 callback = function() {
36 // perform test and send results to callback
37 cb({
38 matches: (div.offsetWidth == 42),
39 media: q
40 });
41 },
42 div = doc.createElement('div');
43
44 div.className = 'mq'; // mq class in CSS declares width: 0 and transition on width of duration 0.001ms
45 div.id = id;
7772d7b removing need for mql.css, adding style within, cleaning README to put i...
Divya Manian authored
46 style.textContent += '@media ' + q + ' { #' + div.id + ' { width: 42px; } }\n';
ea57cb7 Paul Hayes Proof of concept for using CSS transitions to mimic MediaQueryListener
authored
47
a7b7d94 transitionEnd as one correct event listener
John Reading authored
48 // add transition event listener
49 div.addEventListener(transitionEnd, callback, false);
ea57cb7 Paul Hayes Proof of concept for using CSS transitions to mimic MediaQueryListener
authored
50
51 docElem.insertBefore(div, refNode);
52
53 // original polyfill removes element, we need to keep element for transitions to continue and events to fire.
54
55 return {
56 matches: div.offsetWidth == 42,
57 media: q
58 };
59 };
60
61 })(document);
Something went wrong with that request. Please try again.