├── README.md
└── demo
├── css
├── ie.css
└── style.css
├── index-without-respondjs.html
├── index.html
└── js
└── mqsync.js
/README.md:
--------------------------------------------------------------------------------
1 | # Media-Query-Sync
2 |
3 | A cross-browser solution for syncing Javascript functionality with CSS media queries
4 |
5 | [Read more about this technique here](http://goo.gl/ggnlJ)
6 |
7 | ## How To
8 |
9 | **In your CSS file**
10 |
11 | 1. Add a font-family property to the head element with a value you wish to use for the name of your breakpoint
12 | 2. Add an :after pseudo element with a content value the same as your font-family property to the body element
13 | 3. Repeat steps 1 and 2 for each media queries you want to sync with JavaScript.
14 |
15 | Remember, "The absence of support for @media queries is in fact the first @media query." - [Bryan Rieger](http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu)
16 |
17 | **In the mqSync function**
18 |
19 | 4. Set up conditions for your breakpoint variables from you CSS file
20 | 5. Add the JavaScript you want executed in sync with your media queries inside the conditions you created
21 |
22 |
23 | ## Demo
24 |
25 | [View Demo](http://brettjankord.com/projects/media-query-sync/) - with respond.js
26 |
27 | [View Demo](http://brettjankord.com/projects/media-query-sync/index-without-respondjs.html) - without respond.js
28 |
29 |
30 | ## Thanks
31 |
32 | [Jeremy Keith](https://github.com/adactio), [Chris Coyier](https://github.com/chriscoyier), [Emil Björklund](https://github.com/emilbjorklund)
--------------------------------------------------------------------------------
/demo/css/ie.css:
--------------------------------------------------------------------------------
1 | /* IE Styles
2 | ------------------------------------------*/
3 | /* Styles from largest media query */
4 | head { font-family:"L";}
5 | body{background:#194759;}
--------------------------------------------------------------------------------
/demo/css/style.css:
--------------------------------------------------------------------------------
1 | /* Base Styles
2 | ------------------------------------------*/
3 | html{
4 | font-size: 100%;
5 | }
6 |
7 | body{
8 | color:#fff;
9 | font:1.5em/1.2 Arial, Helvetica, sans-serif;
10 | padding:1em 0 0;
11 | text-align:center;
12 | text-shadow:0 0 3px rgba(0,0,0,.5);
13 | }
14 |
15 | /* Media Query Styles
16 | ------------------------------------------*/
17 | head {font-family:"XS";}
18 | body:after{ content:"XS"; display:none;}
19 |
20 | /* Custom Styles for this breakpoint */
21 | body{background:#527d87;}
22 |
23 |
24 | @media screen and (min-width: 450px) {
25 | head { font-family:"S";}
26 | body:after{content:"S";}
27 |
28 | /* Custom Styles for this breakpoint */
29 | body{background:#296b73;}
30 | }
31 |
32 | @media screen and (min-width: 600px) {
33 | head { font-family:"M";}
34 | body:after{content:"M";}
35 |
36 | /* Custom Styles for this breakpoint */
37 | body{background:#194759;}
38 | }
39 |
40 | @media screen and (min-width: 960px) {
41 | head { font-family:"L";}
42 | body:after{content:"L";}
43 |
44 | /* Custom Styles for this breakpoint */
45 | body{background:#0F2B4A;}
46 | }
--------------------------------------------------------------------------------
/demo/index-without-respondjs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Media Query Sync
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Media Query Sync
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/demo/js/mqsync.js:
--------------------------------------------------------------------------------
1 | // Add Events Cross-browser
2 | var event = {
3 | add: function(elem, type, fn) {
4 | if (elem.attachEvent) {
5 | elem['e'+type+fn] = fn;
6 | elem[type+fn] = function() {elem['e'+type+fn](window.event);}
7 | elem.attachEvent('on'+type, elem[type+fn]);
8 | } else
9 | elem.addEventListener(type, fn, false);
10 | }
11 | };
12 |
13 | // Set default
14 | var currentMQ = "unknown";
15 |
16 | // Checks CSS value in active media query and syncs Javascript functionality
17 | var mqSync = function(){
18 |
19 | // Fix for Opera issue when using font-family to store value
20 | if (window.opera){
21 | var activeMQ = window.getComputedStyle(document.body,':after').getPropertyValue('content');
22 | }
23 | // For all other modern browsers
24 | else if (window.getComputedStyle)
25 | {
26 | var activeMQ = window.getComputedStyle(document.head,null).getPropertyValue('font-family');
27 | }
28 | // For oldIE
29 | else {
30 | // Use .getCompStyle instead of .getComputedStyle so above check for window.getComputedStyle never fires true for old browsers
31 | window.getCompStyle = function(el, pseudo) {
32 | this.el = el;
33 | this.getPropertyValue = function(prop) {
34 | var re = /(\-([a-z]){1})/g;
35 | if (prop == 'float') prop = 'styleFloat';
36 | if (re.test(prop)) {
37 | prop = prop.replace(re, function () {
38 | return arguments[2].toUpperCase();
39 | });
40 | }
41 | return el.currentStyle[prop] ? el.currentStyle[prop] : null;
42 | }
43 | return this;
44 | }
45 | var compStyle = window.getCompStyle(document.getElementsByTagName('head')[0], "");
46 | var activeMQ = compStyle.getPropertyValue("font-family");
47 | }
48 |
49 | activeMQ = activeMQ.replace(/"/g, "");
50 | activeMQ = activeMQ.replace(/'/g, "");
51 |
52 | // Conditions for each breakpoint
53 | if (activeMQ != currentMQ) {
54 | if (activeMQ == 'XS') {
55 | currentMQ = activeMQ;
56 | // Add code you want to sync with this breakpoint
57 | document.getElementById('msg').innerHTML = ('Active media query:
' + currentMQ + '');
58 | console.log(currentMQ);
59 | }
60 | if (activeMQ == 'S') {
61 | currentMQ = activeMQ;
62 | // Add code you want to sync with this breakpoint
63 | document.getElementById('msg').innerHTML = ('Active media query:
' + currentMQ + '');
64 | console.log(currentMQ);
65 | }
66 | if (activeMQ == 'M') {
67 | currentMQ = activeMQ;
68 | // Add code you want to sync with this breakpoint
69 | document.getElementById('msg').innerHTML = ('Active media query:
' + currentMQ + '');
70 | console.log(currentMQ);
71 | }
72 | if (activeMQ == 'L') {
73 | currentMQ = activeMQ;
74 | // Add code you want to sync with this breakpoint
75 | document.getElementById('msg').innerHTML = ('Active media query:
' + currentMQ + '');
76 | console.log(currentMQ);
77 | }
78 | }
79 |
80 | }; // End mqSync
81 |
82 | // Run when DOM is ready
83 | mqSync();
84 | // Run on resize
85 | event.add(window, "resize", mqSync);
--------------------------------------------------------------------------------