forked from nathansmith/adapt
/
test_class.html
116 lines (102 loc) · 2.27 KB
/
test_class.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Adapt.js - HTML Class Test</title>
<style>
* {
font-family: sans-serif;
line-height: 1.5;
}
.range_test {
/* Default */
display: none;
font-weight: bold;
}
html.range_0 #p_0 {
/* Style overrides for: 0px to 760px */
display: block;
}
html.range_1 #p_1 {
/* Style overrides for: 760px to 980px */
display: block;
}
html.range_2 #p_2 {
/* Style overrides for: 980px to 1280px */
display: block;
}
html.range_3 #p_3 {
/* Style overrides for: 1280px to 1600px */
display: block;
}
html.range_4 #p_4 {
/* Style overrides for: 1600px to 1920px */
display: block;
}
html.range_5 #p_5 {
/* Style overrides for: above 1920px */
display: block;
}
</style>
<script>
// Called by Adapt.js
function myCallback(i, width) {
// Alias HTML tag.
var html = document.documentElement;
// Find all instances of range_NUMBER and kill 'em.
html.className = html.className.replace(/(\s+)?range_\d/g, '');
// Check for valid range.
if (i > -1) {
// Add class="range_NUMBER"
html.className += ' range_' + i;
}
// Note: Not making use of width here, but I'm sure
// you could think of an interesting way to use it.
}
// Edit to suit your needs.
var ADAPT_CONFIG = {
// false = Only run once, when page first loads.
// true = Change on window resize and page tilt.
dynamic: true,
// Optional callback... myCallback(i, width)
callback: myCallback,
// First range entry is the minimum.
// Last range entry is the maximum.
// Separate ranges by "to" keyword.
range: [
'0 to 760',
'760 to 980',
'980 to 1280',
'1280 to 1600',
'1600 to 1920',
'1920'
]
};
</script>
<script src="assets/js/adapt.min.js"></script>
</head>
<body>
<p>
This page demonstrates how a callback function can be<br />
used with Adapt.js to change the class of the HTML tag.
</p>
<p class="range_test" id="p_0">
Visible at: 0px to 760px
</p>
<p class="range_test" id="p_1">
Visible at: 760px to 980px
</p>
<p class="range_test" id="p_2">
Visible at: 980px to 1280px
</p>
<p class="range_test" id="p_3">
Visible at: 1280px to 1600px
</p>
<p class="range_test" id="p_4">
Visible at: 1600px to 1920px
</p>
<p class="range_test" id="p_5">
Visible at: above 1920px
</p>
</body>
</html>