Skip to content
Newer
Older
100644 116 lines (102 sloc) 2.27 KB
9603073 @nathansmith Added test cases for Adapt.js swapping of HTML class/ID.
authored May 16, 2011
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>Adapt.js - HTML Class Test</title>
6 <style>
7
8 * {
9 font-family: sans-serif;
d7fe259 @nathansmith Small copy edit tweaks to the ID/class name test cases.
authored May 16, 2011
10 line-height: 1.5;
9603073 @nathansmith Added test cases for Adapt.js swapping of HTML class/ID.
authored May 16, 2011
11 }
12
13 .range_test {
14 /* Default */
15 display: none;
d7fe259 @nathansmith Small copy edit tweaks to the ID/class name test cases.
authored May 16, 2011
16 font-weight: bold;
9603073 @nathansmith Added test cases for Adapt.js swapping of HTML class/ID.
authored May 16, 2011
17 }
18
19 html.range_0 #p_0 {
20 /* Style overrides for: 0px to 760px */
21 display: block;
22 }
23
24 html.range_1 #p_1 {
25 /* Style overrides for: 760px to 980px */
26 display: block;
27 }
28
29 html.range_2 #p_2 {
30 /* Style overrides for: 980px to 1280px */
31 display: block;
32 }
33
34 html.range_3 #p_3 {
35 /* Style overrides for: 1280px to 1600px */
36 display: block;
37 }
38
39 html.range_4 #p_4 {
40 /* Style overrides for: 1600px to 1920px */
41 display: block;
42 }
43
44 html.range_5 #p_5 {
45 /* Style overrides for: above 1920px */
46 display: block;
47 }
48 </style>
5baafb1 @nathansmith Moved <style> above <script>.
authored May 16, 2011
49 <script>
50 // Called by Adapt.js
51 function myCallback(i, width) {
52 // Alias HTML tag.
53 var html = document.documentElement;
54
55 // Find all instances of range_NUMBER and kill 'em.
56 html.className = html.className.replace(/(\s+)?range_\d/g, '');
57
58 // Check for valid range.
59 if (i > -1) {
60 // Add class="range_NUMBER"
61 html.className += ' range_' + i;
62 }
63
64 // Note: Not making use of width here, but I'm sure
65 // you could think of an interesting way to use it.
66 }
67
68 // Edit to suit your needs.
69 var ADAPT_CONFIG = {
70 // false = Only run once, when page first loads.
71 // true = Change on window resize and page tilt.
72 dynamic: true,
73
74 // Optional callback... myCallback(i, width)
75 callback: myCallback,
76
77 // First range entry is the minimum.
78 // Last range entry is the maximum.
79 // Separate ranges by "to" keyword.
80 range: [
81 '0 to 760',
82 '760 to 980',
83 '980 to 1280',
84 '1280 to 1600',
85 '1600 to 1920',
86 '1920'
87 ]
88 };
89 </script>
90 <script src="assets/js/adapt.min.js"></script>
9603073 @nathansmith Added test cases for Adapt.js swapping of HTML class/ID.
authored May 16, 2011
91 </head>
92 <body>
d7fe259 @nathansmith Small copy edit tweaks to the ID/class name test cases.
authored May 16, 2011
93 <p>
94 This page demonstrates how a callback function can be<br />
95 used with Adapt.js to change the class of the HTML tag.
96 </p>
9603073 @nathansmith Added test cases for Adapt.js swapping of HTML class/ID.
authored May 16, 2011
97 <p class="range_test" id="p_0">
98 Visible at: 0px to 760px
99 </p>
100 <p class="range_test" id="p_1">
101 Visible at: 760px to 980px
102 </p>
103 <p class="range_test" id="p_2">
104 Visible at: 980px to 1280px
105 </p>
106 <p class="range_test" id="p_3">
107 Visible at: 1280px to 1600px
108 </p>
109 <p class="range_test" id="p_4">
110 Visible at: 1600px to 1920px
111 </p>
112 <p class="range_test" id="p_5">
113 Visible at: above 1920px
114 </p>
115 </body>
116 </html>
Something went wrong with that request. Please try again.