116 lines
2.3 KiB
HTML
116 lines
2.3 KiB
HTML
|
<!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>
|