-
Notifications
You must be signed in to change notification settings - Fork 2
/
conditional-css.html
84 lines (70 loc) · 4.36 KB
/
conditional-css.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Query Events Example</title>
<meta name="description" content="A demo of mq-events, a way to bind event listeners to all of a pages media queries">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="condition" class="unmet"></div>
<header role="banner">
<h1>Media Query Events + Conditional CSS</h1>
<h2>Check out Jeremy's article: <a href="http://adactio.com/journal/5429">http://adactio.com/journal/5429</a></h2>
</header>
<section role="main">
<h1>Who Is Your Daddy and What Does He Do?</h1>
<h2>Putting this content here to give the impression that this is a real page.</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
</section>
<footer role="contentinfo">
<a href="http://twitter.com/thegaw">Follow @thegaw</a>
<a href="http://tylergaw.com">More fun things here</a>
</footer>
<script src="js/mq-events.js"></script>
<script>
var msg = document.getElementById('condition'),
getScreenSize = function () {
return window.getComputedStyle(document.body, ':after').getPropertyValue('content');
},
currentScreenSize = getScreenSize(),
// For this demo these don't do much, but with these functions
// you could take very specific actions based on the screen size.
screenSizeActions = {
'narrow': function () {
msg.setAttribute('class', 'narrow');
msg.innerHTML = 'The screen size is pretty narrow';
},
'medium': function () {
msg.setAttribute('class', 'medium');
msg.innerHTML = 'The screen size is medium, do some medium shit';
},
'large': function () {
msg.setAttribute('class', 'large');
msg.innerHTML = 'The screen size is large, load some huge PNGs';
},
'x-large': function () {
msg.setAttribute('class', 'x-large');
msg.innerHTML = 'The screen size is extra large. You got a big monitor yo!';
},
'short': function () {
msg.setAttribute('class', 'short');
msg.innerHTML = 'Hey Shorty, the screen is just like you.';
}
},
handleMediaChange = function (mql) {
var screenSize = getScreenSize();
if (screenSize !== currentScreenSize) {
// Call the method that matches the screen size
screenSizeActions[screenSize]();
currentScreenSize = screenSize;
}
};
screenSizeActions[currentScreenSize]();
mqEvents(handleMediaChange);
</script>
</body>
</html>