Skip to content
This repository
Browse code

Updated demo to show how to use callbacks

  • Loading branch information...
commit dabdb44a7857fb33d582fe1c9c670ee4eb834004 1 parent c256e6a
Brian McAllister authored

Showing 2 changed files with 456 additions and 420 deletions. Show diff stats Hide diff stats

  1. 419  css/demo.css
  2. 457  index.html
419  css/demo.css
... ...
@@ -1,208 +1,213 @@
1  
-/* Generic CSS used for the slider demo */
2  
-body
3  
-        {
4  
-        background:#fff;
5  
-        color:#333;
6  
-        text-align:center;
7  
-        font-size:14px;
8  
-        font-family:verdana,arial,sans-serif;
9  
-        color:#545454;
10  
-        padding:0;
11  
-        margin:0;
12  
-        border:0;
13  
-        line-height:1.6em;
14  
-        text-shadow:0 1px 0 #fff;
15  
-        }
16  
-h1,
17  
-legend
18  
-        { 
19  
-        font-weight:lighter;
20  
-        font-family:georgia, times new roman, times, serif;
21  
-        text-align:center;
22  
-        color:#111;
23  
-        font-size:2em;
24  
-        }
25  
-h2
26  
-        {
27  
-        font-weight:lighter;
28  
-        font-family:verdana,arial,sans-serif;
29  
-        text-align:center;
30  
-        margin:1em 0;
31  
-        color:#333;
32  
-        text-transform:uppercase;
33  
-        letter-spacing:1px;
34  
-        font-size:1.2em;
35  
-        }
36  
-h3
37  
-        {
38  
-        font-weight:lighter;
39  
-        font-family:georgia, times new roman, times, serif;
40  
-        text-align:center;
41  
-        margin:1em 0;
42  
-        color:#868686;
43  
-        font-style:oblique;
44  
-        font-size:1.2em;
45  
-        }
46  
-code 
47  
-        { 
48  
-        font-family:'andale mono', 'lucida console', 'courier new', monospace;
49  
-        font-size:12px;
50  
-        color:#222;
51  
-        text-transform:none;
52  
-        }
53  
-kbd
54  
-        {
55  
-        display: inline;
56  
-	display: inline-block;
57  
-	min-width:1em;
58  
-	padding:.2em .3em .3em .3em;
59  
-	font: bold .85em/1em "Lucida Grande", Lucida, Arial, sans-serif;
60  
-	text-align: center;   		
61  
-	text-decoration: none;
62  
-	-moz-border-radius: .3em;
63  
-	-webkit-border-radius: .3em;
64  
-	border-radius: .3em;  	
65  
-	cursor: default;
66  
-	-moz-user-select: none;
67  
-	-webkit-user-select: none;
68  
-	user-select: none;
69  
-        background: rgb(230, 230, 230);
70  
-	background: -moz-linear-gradient(top, rgb(230,230,230), rgb(245,245,245));
71  
-	background: -webkit-gradient(linear, left top, left bottom, from(rgb(230,230,230)), to(rgb(245,245,245)));
72  
-	color:#222;
73  
-        color: rgb(80,80,80);
74  
-	text-shadow: 0 1px 0 rgb(255,255,255);
75  
-	border:1px solid #ccc;
76  
-	border-right:1px solid #aaa;
77  
-	border-bottom:1px solid #aaa;
78  
-	-moz-box-shadow: 0 2px 3px rgba(220,220,220,.8);
79  
-	-webkit-box-shadow: 0 2px 3px rgba(220,220,220,.8);
80  
-        box-shadow: 0 2px 3px rgba(220,220,220,.8);
81  
-        }
82  
-p
83  
-        {
84  
-        line-height:1.6em;
85  
-        margin:0 0 1.6em 0;
86  
-        text-align:left;
87  
-        }
88  
-dfn
89  
-        {
90  
-        border-bottom:1px dotted #222;
91  
-        cursor:help;
92  
-        font-style:normal;
93  
-        }
94  
-#article-wrapper
95  
-        {
96  
-        text-align:center;
97  
-        border:4px solid #ccc;
98  
-        background:#fcfcfc;
99  
-        width:80%;
100  
-        min-width:320px;
101  
-        max-width:1200px;
102  
-        margin:2em auto;
103  
-        padding:1em;
104  
-        -webkit-border-radius:8px;
105  
-        -moz-border-radius:8px;
106  
-        border-radius:8px;
107  
-        }
108  
-fieldset
109  
-        {
110  
-        margin:0 0 18px 0;
111  
-        padding:1em;      
112  
-        text-align:left;  
113  
-        }
114  
-form > fieldset
115  
-        {
116  
-        border:2px solid #ccc;
117  
-        -webkit-border-radius:6px;
118  
-        -moz-border-radius:6px;
119  
-        border-radius:6px;
120  
-        }
121  
-fieldset:last-of-type
122  
-        {
123  
-        margin:0;
124  
-        }
125  
-legend
126  
-        {
127  
-        font-size:16px;
128  
-        margin-bottom:1em\9;
129  
-        }
130  
-form
131  
-        {
132  
-        margin:0 auto 1.6em 0;
133  
-        padding:0;
134  
-        text-align:center;
135  
-        margin:0 auto;
136  
-        }
137  
-input
138  
-        {
139  
-        border:1px solid #ccc;
140  
-        border-top:1px solid #888;
141  
-        border-left:1px solid #888;
142  
-        width:4em;
143  
-        margin-left:0.2em;
144  
-        }
145  
-label
146  
-        {
147  
-        display:block;
148  
-        padding:0;
149  
-        margin:0 0 0.2em 0;
150  
-        text-align:left;
151  
-        font-weight:bold;
152  
-        color:#5c5c5c;
153  
-        }
154  
-a
155  
-        {
156  
-        font-weight:normal;
157  
-        outline:none;
158  
-        }
159  
-a:link,
160  
-a:visited
161  
-        {
162  
-        color:#333;
163  
-        text-decoration:underline;
164  
-        }
165  
-a:hover,
166  
-a:focus,
167  
-a:active,
168  
-a:hover code,
169  
-a:focus code,
170  
-a:active code
171  
-        {
172  
-        color:#fff !important;
173  
-        text-decoration:none;
174  
-        background:#000;
175  
-        text-shadow:0 1px 0 #444;
176  
-        }
177  
-#fd-slider-describedby 
178  
-        {
179  
-        padding:1em;
180  
-        border:3px solid #a84444;
181  
-        background:#fff;
182  
-        -webkit-border-radius:8px;
183  
-        -moz-border-radius:8px;
184  
-        border-radius:8px;
185  
-        }
186  
-input[type="range"]
187  
-        {
188  
-        width:100%;
189  
-        }
190  
-#html5shim-2-out
191  
-        {
192  
-        font-weight:normal;
193  
-        font-style:italic;
194  
-        }
195  
-/* The following classes are given to the vertical sliders to set their height */        
196  
-span.v-s
197  
-        {
198  
-        height:300px;
199  
-        }
200  
-span.v-s2
201  
-        {
202  
-        height:160px;
203  
-        }
204  
-#html5shim-4
205  
-        {
206  
-        width:20px;
207  
-        height:400px;
  1
+/* Generic CSS used for the slider demo */
  2
+body
  3
+        {
  4
+        background:#fff;
  5
+        color:#333;
  6
+        text-align:center;
  7
+        font-size:14px;
  8
+        font-family:verdana,arial,sans-serif;
  9
+        color:#545454;
  10
+        padding:0;
  11
+        margin:0;
  12
+        border:0;
  13
+        line-height:1.6em;
  14
+        text-shadow:0 1px 0 #fff;
  15
+        }
  16
+h1,
  17
+legend
  18
+        { 
  19
+        font-weight:lighter;
  20
+        font-family:georgia, times new roman, times, serif;
  21
+        text-align:center;
  22
+        color:#111;
  23
+        font-size:2em;
  24
+        }
  25
+h2
  26
+        {
  27
+        font-weight:lighter;
  28
+        font-family:verdana,arial,sans-serif;
  29
+        text-align:center;
  30
+        margin:1em 0;
  31
+        color:#333;
  32
+        text-transform:uppercase;
  33
+        letter-spacing:1px;
  34
+        font-size:1.2em;
  35
+        }
  36
+h3
  37
+        {
  38
+        font-weight:lighter;
  39
+        font-family:georgia, times new roman, times, serif;
  40
+        text-align:center;
  41
+        margin:1em 0;
  42
+        color:#868686;
  43
+        font-style:oblique;
  44
+        font-size:1.2em;
  45
+        }
  46
+code 
  47
+        { 
  48
+        font-family:'andale mono', 'lucida console', 'courier new', monospace;
  49
+        font-size:12px;
  50
+        color:#222;
  51
+        text-transform:none;
  52
+        }
  53
+kbd
  54
+        {
  55
+        display: inline;
  56
+	display: inline-block;
  57
+	min-width:1em;
  58
+	padding:.2em .3em .3em .3em;
  59
+	font: bold .85em/1em "Lucida Grande", Lucida, Arial, sans-serif;
  60
+	text-align: center;   		
  61
+	text-decoration: none;
  62
+	-moz-border-radius: .3em;
  63
+	-webkit-border-radius: .3em;
  64
+	border-radius: .3em;  	
  65
+	cursor: default;
  66
+	-moz-user-select: none;
  67
+	-webkit-user-select: none;
  68
+	user-select: none;
  69
+        background: rgb(230, 230, 230);
  70
+	background: -moz-linear-gradient(top, rgb(230,230,230), rgb(245,245,245));
  71
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(230,230,230)), to(rgb(245,245,245)));
  72
+	color:#222;
  73
+        color: rgb(80,80,80);
  74
+	text-shadow: 0 1px 0 rgb(255,255,255);
  75
+	border:1px solid #ccc;
  76
+	border-right:1px solid #aaa;
  77
+	border-bottom:1px solid #aaa;
  78
+	-moz-box-shadow: 0 2px 3px rgba(220,220,220,.8);
  79
+	-webkit-box-shadow: 0 2px 3px rgba(220,220,220,.8);
  80
+        box-shadow: 0 2px 3px rgba(220,220,220,.8);
  81
+        }
  82
+p
  83
+        {
  84
+        line-height:1.6em;
  85
+        margin:0 0 1.6em 0;
  86
+        text-align:left;
  87
+        }
  88
+dfn
  89
+        {
  90
+        border-bottom:1px dotted #222;
  91
+        cursor:help;
  92
+        font-style:normal;
  93
+        }
  94
+#article-wrapper
  95
+        {
  96
+        text-align:center;
  97
+        border:4px solid #ccc;
  98
+        background:#fcfcfc;
  99
+        width:80%;
  100
+        min-width:320px;
  101
+        max-width:1200px;
  102
+        margin:2em auto;
  103
+        padding:1em;
  104
+        -webkit-border-radius:8px;
  105
+        -moz-border-radius:8px;
  106
+        border-radius:8px;
  107
+        }
  108
+fieldset
  109
+        {
  110
+        margin:0 0 18px 0;
  111
+        padding:1em;      
  112
+        text-align:left;  
  113
+        }
  114
+form > fieldset
  115
+        {
  116
+        border:2px solid #ccc;
  117
+        -webkit-border-radius:6px;
  118
+        -moz-border-radius:6px;
  119
+        border-radius:6px;
  120
+        }
  121
+fieldset:last-of-type
  122
+        {
  123
+        margin:0;
  124
+        }
  125
+legend
  126
+        {
  127
+        font-size:16px;
  128
+        margin-bottom:1em\9;
  129
+        }
  130
+form
  131
+        {
  132
+        margin:0 auto 1.6em 0;
  133
+        padding:0;
  134
+        text-align:center;
  135
+        margin:0 auto;
  136
+        }
  137
+input
  138
+        {
  139
+        border:1px solid #ccc;
  140
+        border-top:1px solid #888;
  141
+        border-left:1px solid #888;
  142
+        width:4em;
  143
+        margin-left:0.2em;
  144
+        }
  145
+label
  146
+        {
  147
+        display:block;
  148
+        padding:0;
  149
+        margin:0 0 0.2em 0;
  150
+        text-align:left;
  151
+        font-weight:bold;
  152
+        color:#5c5c5c;
  153
+        }
  154
+a
  155
+        {
  156
+        font-weight:normal;
  157
+        outline:none;
  158
+        }
  159
+a:link,
  160
+a:visited
  161
+        {
  162
+        color:#333;
  163
+        text-decoration:underline;
  164
+        }
  165
+a:hover,
  166
+a:focus,
  167
+a:active,
  168
+a:hover code,
  169
+a:focus code,
  170
+a:active code
  171
+        {
  172
+        color:#fff !important;
  173
+        text-decoration:none;
  174
+        background:#000;
  175
+        text-shadow:0 1px 0 #444;
  176
+        }
  177
+#fd-slider-describedby 
  178
+        {
  179
+        padding:1em;
  180
+        border:3px solid #a84444;
  181
+        background:#fff;
  182
+        -webkit-border-radius:8px;
  183
+        -moz-border-radius:8px;
  184
+        border-radius:8px;
  185
+        }
  186
+input[type="range"]
  187
+        {
  188
+        width:100%;
  189
+        }
  190
+#html5shim-2-out
  191
+        {
  192
+        font-weight:normal;
  193
+        font-style:italic;
  194
+        }
  195
+/* The following classes are given to the vertical sliders to set their height */        
  196
+span.v-s
  197
+        {
  198
+        height:300px;
  199
+        }
  200
+span.v-s2
  201
+        {
  202
+        height:160px;
  203
+        }
  204
+#html5shim-4
  205
+        {
  206
+        width:20px;
  207
+        height:400px;
  208
+        }
  209
+.visu
  210
+        {
  211
+        font:normal 3em impact, helvetica, sans serif;
  212
+        color:#6cc;
208 213
         }
457  index.html
... ...
@@ -1,213 +1,244 @@
1  
-<!doctype html>
2  
-<!-- The script automatically adds the class "oldie" to the html element in IE < 9 -->
3  
-<html lang="en">
4  
-<head>
5  
-        <meta charset="utf-8" />
6  
-        <title>frequency decoder - accessible, unobtrusive slider/HTML5 polyfill script demo</title>       
7  
-        <meta name="author"                     content="frequency decoder" />
8  
-        <meta name="description"                content="An accessible, unobtrusive Slider/HTML5 Input Range polyfill script" />
9  
-        <meta http-equiv="imagetoolbar"         content="no" />
10  
-        
11  
-        <link rel="stylesheet" type="text/css" media="screen, projection" href="./css/fd-slider.css" />
12  
-        <link rel="stylesheet" type="text/css" media="screen, projection" href="./css/demo.css" />   
13  
-        <script src="./js/fd-slider.js"></script>
14  
-</head>
15  
-<body>
16  
-<div id="article-wrapper">
17  
-  <form action="" method="post">
18  
-    <h1>Accessible, Unobtrusive &#8220;Slider/HTML5 range polyfill&#8221; Demo</h1>
19  
-    <h2>Keyboard Controls</h2>
20  
-    <!-- The following paragraph is used to set the ARIA describedby property -->
21  
-    <p id="fd-slider-describedby">Whenever a slider has focus, the keys <kbd title="Left arrow key">&larr;</kbd>, <kbd title="Right arrow key">&rarr;</kbd>, <kbd title="Up arrow key">&uarr;</kbd>, <kbd title="Down arrow key">&darr;</kbd>, <kbd title="Insert key">Ins</kbd> and <kbd title="Delete key">Del</kbd> can be used to control the slider handle (pressing either the <kbd>Page up</kbd> or <kbd>Page down</kbd> keys or <kbd title="CTRL key">CTRL</kbd> and an arrow key will move the handle by two steps at a time), the <kbd title="Home key">Home</kbd> key to set the slider at the minimum value and the <kbd title="End key">End</kbd> key to set the slider at the maximum value.</p>   
22  
-    <h2>Mixed HTML5 Polyfill &amp; Javascript API Creation Demos</h2>
23  
-    <h3>&#8230;as usual, &#8220;View Source&#8221; is your friend</h3>
24  
-
25  
-    <fieldset>            
26  
-      <legend>HTML5 input type="range" polyfill tests</legend>
27  
-      <p>When the <code>window.onload</code> event fires, the following input elements will be automatically converted into sliders <em>only</em> if the browser does not recognise the HTML5 input &#8220;range&#8221; state.</p>    
28  
-      <p><em>Please Note</em>: At the time of writing, only webkit and Opera support the input range state and even then, they do not appear to fully support vertical ranges (webkit) or ranges that have a minimum value greater than the maximum value (both webkit and Opera).</p>
29  
-      <!--
30  
-      
31  
-      Sliders #1, #2 & #3 created automatically by the script on page load only if the browser does not support type="range".
32  
-      The script will use the "min", "max" and "step" attributes assigned to the input to create the slider with the
33  
-      appropriate scale.
34  
-      
35  
-      Slider #1: "min", "max" & "step" attributes given
36  
-      
37  
-      -->
38  
-      <label for="html5shim-1">Range: -10 to 10 in steps of 0.2</label>
39  
-      <p>
40  
-        <input name="html5shim-1" id="html5shim-1" type="range" min="-10" max="10" step="0.20" title="Range: -10 to 10 in steps of 0.2" value="8.2" />
41  
-        <a href="#" onclick="document.getElementById('html5shim-1').stepUp(); return false;"><code>stepUp()</code></a> or
42  
-        <a href="#" onclick="document.getElementById('html5shim-1').stepDown(); return false;"><code>stepDown()</code></a>
43  
-      </p>     
44  
-      <!--
45  
-      
46  
-      Slider #2: No "min" or "max" attributes given (they default to 0 and 100 respectivey) but the required "step" attribute set to "1".
47  
-      
48  
-      Additionally, an onchange event has been set to test if the script honours HTML events set on the original input.
49  
-      
50  
-      -->   
51  
-      <p>The following Input has an <code>onchange</code> event that updates the value of a <code>span</code> positioned within the associated <code>label</code>.</p>
52  
-      <label for="html5shim-2">Range: 0 to 100 in steps of 1 <span id="html5shim-2-out"></span></label>
53  
-      <p>
54  
-        <input name="html5shim-2" id="html5shim-2" type="range" step="1" title="Range: 0 to 100 in steps of 1" value="75" /> 
55  
-        <a href="#" onclick="document.getElementById('html5shim-2').stepUp(); return false;"><code>stepUp()</code></a> or
56  
-        <a href="#" onclick="document.getElementById('html5shim-2').stepDown(); return false;"><code>stepDown()</code></a>        
57  
-      </p>  
58  
-      <script>
59  
-      // Add an onchange event to the input element that updates a span with the input value      
60  
-      fdSlider.addEvent(document.getElementById("html5shim-2"), "change", function(e) {
61  
-        document.getElementById("html5shim-2-out").innerHTML = "(Current Value: " + document.getElementById("html5shim-2").value + ")";
62  
-      });
63  
-      </script>    
64  
-      <!--
65  
-      
66  
-      Slider #3: The input element has been given the "data-fd-slider-vertical" custom data- attribute which makes the script create 
67  
-      a vertical slider. Additionally, the value of this attribute is given to the slider as a classname - in this case, the class "v-s" 
68  
-      which makes the slider inherit a height of 300px. 
69  
-      
70  
-      -->
71  
-      <p>The following input element has been assigned a custom data- attribute named <code>data-fd-slider-vertical</code> which tells the script to create a vertical slider.
72  
-         Additionally, the value of the <code>data-fd-slider-vertical</code> attribute, in this case &#8220;v-s&#8221;, is added as a classname to the associated slider &ndash; this enables you set the slider height using a CSS classname (which, in this case, sets a height of 300 pixels).</p>
73  
-      <label for="html5shim-3">Range: 100 to 0 in steps of 1</label>
74  
-      <p>
75  
-        <input name="html5shim-3" id="html5shim-3" data-fd-slider-vertical="v-s" type="range" min="100" max="0" step="1" title="Range: 100 to 0 in steps of 1" value="" /> 
76  
-        <a href="#" onclick="document.getElementById('html5shim-3').stepUp(); return false;"><code>stepUp()</code></a>
77  
-        <a href="#" onclick="document.getElementById('html5shim-3').stepDown(); return false;"><code>stepDown()</code></a>
78  
-      </p>
79  
-      <!--
80  
-      
81  
-      Slider #4: CSS has been used to make the following input element 400 pixels in height and 20 pixels wide, which instructs
82  
-      the script automatically create a vertical slider
83  
-      
84  
-      -->
85  
-      <p>CSS has been used to make the following input element 400 pixels in height and 20 pixels wide, which instructs the script to create a vertical slider.</p>      
86  
-      <label for="html5shim-4">Range: 100 to 0 in steps of 1</label>
87  
-      <p>
88  
-        <input name="html5shim-4" id="html5shim-4" type="range" min="100" max="0" step="1" title="Range: 100 to 0 in steps of 1" value="" /> 
89  
-        <a href="#" onclick="document.getElementById('html5shim-4').stepUp(); return false;"><code>stepUp()</code></a>
90  
-        <a href="#" onclick="document.getElementById('html5shim-4').stepDown(); return false;"><code>stepDown()</code></a>
91  
-      </p>      
92  
-    </fieldset>    
93  
-    <!--
94  
-    
95  
-    Sliders created using the Javascript API from here on in i.e. no more HTML5 range polyfills from this point on.
96  
-    
97  
-    -->
98  
-    <fieldset>
99  
-      <legend>Javascript initialisation tests</legend>      
100  
-      <p>The first three sliders show the three different &#8220;handle to clickpoint&#8221; animation styles: <em>timed</em>, <em>jump</em> <span class="amp">&</span> <em>tween</em> respectively. Additionally, the third slider has the &#8220;forceValue&#8221; parameter set to TRUE.</p>      
101  
-      <label for="inputTest3">Range: -10 to 10 in steps of 0.5</label>
102  
-      <p>
103  
-        <!-- Here's the form element we will associate the first slider with. -->
104  
-        <input name="inputTest3" id="inputTest3" type="text" title="Range: -10 to 10 in steps of 0.5" value=""  maxlength="6" />
105  
-        <a href="#" onclick="fdSlider.disable('inputTest3'); return false;">Disable</a>
106  
-        <a href="#" onclick="fdSlider.enable('inputTest3'); return false;">Enable</a>
107  
-      </p>
108  
-      <script>
109  
-      // Call the fdSlider.createSlider method, passing in the required options
110  
-      fdSlider.createSlider({
111  
-        // Associate an input
112  
-        inp:document.getElementById("inputTest3"),
113  
-        // Declare a step (quoting the value means the precision will be calculated as 2 decimal points
114  
-        // e.g. the "50" part of "0.50") which is a short-cut way of setting the precision without
115  
-        // actually using the "precision" parameter
116  
-        step:"0.50", 
117  
-        // Declare a maxStep (for keyboard users)
118  
-        maxStep:2,
119  
-        // Min & Max values
120  
-        min:-10,
121  
-        max:10,
122  
-        // Use the "timed increments to click point" animation
123  
-        animation:"timed"
124  
-        });
125  
-      </script> 
126  
-      <p>The following slider has a 50:13 scale set, which means that when the drag handle is at the 50% mark, then the slider value should be 13.</p>
127  
-      <label for="inputTest5">Range: 5 to 15 in steps of 0.2 with a (50:13) scale</label>
128  
-      <p>
129  
-        <!-- Here's the form element we will associate the second slider with. -->
130  
-        <input name="inputTest5" id="inputTest5" type="text" title="Range: 5 to 15 in steps of 0.2 with a (50:13) scale" value=""  maxlength="6" />
131  
-      </p>
132  
-      <script>
133  
-      fdSlider.createSlider({
134  
-        // Associate an input
135  
-        inp:document.getElementById("inputTest5"),
136  
-        // Declare a step
137  
-        step:0.2, 
138  
-        // Declare a maxStep (for keyboard users)
139  
-        maxStep:0.4,
140  
-        // Min value
141  
-        min:5,
142  
-        // Max value
143  
-        max:15,
144  
-        // Define a scale (multiple points supported, I'm just using one for the demo)
145  
-        scale:{
146  
-                // At 50% of the slider scale, the value should be 13
147  
-                "50":"13"       
148  
-        },
149  
-        // Use the "jump to click point" animation
150  
-        animation:"jump"
151  
-        });
152  
-      </script>
153  
-      <p>The following slider has the &#8220;forceValue&#8221; parameter set to TRUE, which forces the associated text input to show a valid value.</p>
154  
-      <label for="inputTest6" id="inputTest6Label">Range: 5 to 15 in steps of 0.2</label>
155  
-      <p>
156  
-        <!-- Here's the form element we will associate the third slider with. -->
157  
-        <input name="inputTest6" id="inputTest6" type="text" title="Range: 5 to 15 in steps of 0.2" value=""  maxlength="6" />
158  
-      </p>
159  
-      <script>
160  
-      fdSlider.createSlider({
161  
-        // Associate an input
162  
-        inp:document.getElementById("inputTest6"),
163  
-        // Declare a step
164  
-        step:0.2, 
165  
-        // Declare a maxStep (for keyboard users)
166  
-        maxStep:0.4,
167  
-        // Min value
168  
-        min:5,
169  
-        // Max value
170  
-        max:15,
171  
-        // Use the "tween to click point" animation
172  
-        animation:"tween",
173  
-        // Force the associated input to have a valid value
174  
-        forceValue:true
175  
-        });
176  
-      </script> 
177  
-      <p>The following slider has been associated with a <code>&lt;select&gt;</code>.</p> 
178  
-      <label for="selectTest1" id="selectTest1Label">Select List with eight options</label>
179  
-      <p>
180  
-        <!-- Here's the form element - a select list in this case - that we will associate the forth and final slider with. -->
181  
-        <select name="selectTest1" id="selectTest1">
182  
-          <option value="1">One</option>
183  
-          <option value="2">Two</option>
184  
-          <option value="4">Four</option>
185  
-          <option value="8">Eight</option>
186  
-          <option value="16">Sixteen</option>
187  
-          <option value="32">Thirty Two</option>
188  
-          <option value="64">Sixty Four</option>
189  
-          <option value="128">One Hundred and Twenty Eight</option>
190  
-          <option value="256">Two Hundred and Fifty Six</option>
191  
-        </select>  
192  
-        <a href="#" onclick="fdSlider.disable('selectTest1'); return false;">Disable</a>
193  
-        <a href="#" onclick="fdSlider.enable('selectTest1'); return false;">Enable</a>
194  
-      </p>
195  
-      <script>
196  
-      fdSlider.createSlider({
197  
-        // Associate the select list
198  
-        inp:document.getElementById("selectTest1"),
199  
-        // Use the tween animation
200  
-        animation:"tween",
201  
-        // Keep the form element, in this case a select list, visible
202  
-        hideInput:false,
203  
-        // Create a vertical slider
204  
-        vertical:true,
205  
-        // Give it the className "v-s2" which will make the slider 160px in height
206  
-        classNames:"v-s2"
207  
-        });
208  
-      </script>         
209  
-    </fieldset>    
210  
-  </form>
211  
-</div>
212  
-</body>
213  
-</html>
  1
+<!doctype html>
  2
+<!-- The script automatically adds the class "oldie" to the html element in IE < 9 -->
  3
+<html lang="en">
  4
+<head>
  5
+        <meta charset="utf-8" />
  6
+        <title>frequency decoder - accessible, unobtrusive slider/HTML5 polyfill script demo</title>       
  7
+        <meta name="author"                     content="frequency decoder" />
  8
+        <meta name="description"                content="An accessible, unobtrusive Slider/HTML5 Input Range polyfill script" />
  9
+        <meta http-equiv="imagetoolbar"         content="no" />
  10
+        
  11
+        <link rel="stylesheet" type="text/css" media="screen, projection" href="./css/fd-slider.css" />
  12
+        <link rel="stylesheet" type="text/css" media="screen, projection" href="./css/demo.css" />   
  13
+        <script src="./js/fd-slider.js"></script>
  14
+</head>
  15
+<body>
  16
+<div id="article-wrapper">
  17
+  <form action="" method="post">
  18
+    <h1>Accessible, Unobtrusive &#8220;Slider/HTML5 range polyfill&#8221; Demo</h1>
  19
+    <h2>Keyboard Controls</h2>
  20
+    <!-- The following paragraph is used to set the ARIA describedby property -->
  21
+    <p id="fd-slider-describedby">Whenever a slider has focus, the keys <kbd title="Left arrow key">&larr;</kbd>, <kbd title="Right arrow key">&rarr;</kbd>, <kbd title="Up arrow key">&uarr;</kbd>, <kbd title="Down arrow key">&darr;</kbd>, <kbd title="Insert key">Ins</kbd> and <kbd title="Delete key">Del</kbd> can be used to control the slider handle (pressing either the <kbd>Page up</kbd> or <kbd>Page down</kbd> keys or <kbd title="CTRL key">CTRL</kbd> and an arrow key will move the handle by two steps at a time), the <kbd title="Home key">Home</kbd> key to set the slider at the minimum value and the <kbd title="End key">End</kbd> key to set the slider at the maximum value.</p>   
  22
+    <h2>Mixed HTML5 Polyfill &amp; Javascript API Creation Demos</h2>
  23
+    <h3>&#8230;as usual, &#8220;View Source&#8221; is your friend</h3>
  24
+
  25
+    <fieldset>            
  26
+      <legend>HTML5 input type="range" polyfill tests</legend>
  27
+      <p>When the <code>window.onload</code> event fires, the following input elements will be automatically converted into sliders <em>only</em> if the browser does not recognise the HTML5 input &#8220;range&#8221; state.</p>    
  28
+      <p><em>Please Note</em>: At the time of writing, only webkit and Opera support the input range state and even then, they do not appear to fully support vertical ranges (webkit) or ranges that have a minimum value greater than the maximum value (both webkit and Opera).</p>
  29
+      <!--
  30
+      
  31
+      Sliders #1, #2 & #3 created automatically by the script on page load only if the browser does not support type="range".
  32
+      The script will use the "min", "max" and "step" attributes assigned to the input to create the slider with the
  33
+      appropriate scale.
  34
+      
  35
+      Slider #1: "min", "max" & "step" attributes given
  36
+      
  37
+      -->
  38
+      <label for="html5shim-1">Range: -10 to 10 in steps of 0.2</label>
  39
+      <p>
  40
+        <input name="html5shim-1" id="html5shim-1" type="range" min="-10" max="10" step="0.20" title="Range: -10 to 10 in steps of 0.2" value="8.2" />
  41
+        <a href="#" onclick="document.getElementById('html5shim-1').stepUp(); return false;"><code>stepUp()</code></a> or
  42
+        <a href="#" onclick="document.getElementById('html5shim-1').stepDown(); return false;"><code>stepDown()</code></a>
  43
+      </p>     
  44
+      <!--
  45
+      
  46
+      Slider #2: No "min" or "max" attributes given (they default to 0 and 100 respectivey) but the required "step" attribute set to "1".
  47
+      
  48
+      Additionally, an onchange event has been set to test if the script honours HTML events set on the original input.
  49
+      
  50
+      -->   
  51
+      <p>The following Input has an <code>onchange</code> event that updates the value of a <code>span</code> positioned within the associated <code>label</code>.</p>
  52
+      <label for="html5shim-2">Range: 0 to 100 in steps of 1 <span id="html5shim-2-out"></span></label>
  53
+      <p>
  54
+        <input name="html5shim-2" id="html5shim-2" type="range" step="1" title="Range: 0 to 100 in steps of 1" value="75" /> 
  55
+        <a href="#" onclick="document.getElementById('html5shim-2').stepUp(); return false;"><code>stepUp()</code></a> or
  56
+        <a href="#" onclick="document.getElementById('html5shim-2').stepDown(); return false;"><code>stepDown()</code></a>        
  57
+      </p>  
  58
+      <script>
  59
+      // Add an onchange event to the input element that updates a span with the input value      
  60
+      fdSlider.addEvent(document.getElementById("html5shim-2"), "change", function(e) {
  61
+        document.getElementById("html5shim-2-out").innerHTML = "(Current Value: " + document.getElementById("html5shim-2").value + ")";
  62
+      });
  63
+      </script>    
  64
+      <!--
  65
+      
  66
+      Slider #3: The input element has been given the "data-fd-slider-vertical" custom data- attribute which makes the script create 
  67
+      a vertical slider. Additionally, the value of this attribute is given to the slider as a classname - in this case, the class "v-s" 
  68
+      which makes the slider inherit a height of 300px. 
  69
+      
  70
+      -->
  71
+      <p>The following input element has been assigned a custom data- attribute named <code>data-fd-slider-vertical</code> which tells the script to create a vertical slider.
  72
+         Additionally, the value of the <code>data-fd-slider-vertical</code> attribute, in this case &#8220;v-s&#8221;, is added as a classname to the associated slider &ndash; this enables you set the slider height using a CSS classname (which, in this case, sets a height of 300 pixels).</p>
  73
+      <label for="html5shim-3">Range: 100 to 0 in steps of 1</label>
  74
+      <p>
  75
+        <input name="html5shim-3" id="html5shim-3" data-fd-slider-vertical="v-s" type="range" min="100" max="0" step="1" title="Range: 100 to 0 in steps of 1" value="" /> 
  76
+        <a href="#" onclick="document.getElementById('html5shim-3').stepUp(); return false;"><code>stepUp()</code></a>
  77
+        <a href="#" onclick="document.getElementById('html5shim-3').stepDown(); return false;"><code>stepDown()</code></a>
  78
+      </p>
  79
+      <!--
  80
+      
  81
+      Slider #4: CSS has been used to make the following input element 400 pixels in height and 20 pixels wide, which instructs
  82
+      the script automatically create a vertical slider
  83
+      
  84
+      -->
  85
+      <p>CSS has been used to make the following input element 400 pixels in height and 20 pixels wide, which instructs the script to create a vertical slider.</p>      
  86
+      <label for="html5shim-4">Range: 100 to 0 in steps of 1</label>
  87
+      <p>
  88
+        <input name="html5shim-4" id="html5shim-4" type="range" min="100" max="0" step="1" title="Range: 100 to 0 in steps of 1" value="" /> 
  89
+        <a href="#" onclick="document.getElementById('html5shim-4').stepUp(); return false;"><code>stepUp()</code></a>
  90
+        <a href="#" onclick="document.getElementById('html5shim-4').stepDown(); return false;"><code>stepDown()</code></a>
  91
+      </p>      
  92
+    </fieldset>    
  93
+    <!--
  94
+    
  95
+    Sliders created using the Javascript API from here on in i.e. no more HTML5 range polyfills from this point on.
  96
+    
  97
+    -->
  98
+    <fieldset>
  99
+      <legend>Javascript initialisation tests</legend>      
  100
+      <p>The first three sliders show the three different &#8220;handle to clickpoint&#8221; animation styles: <em>timed</em>, <em>jump</em> <span class="amp">&</span> <em>tween</em> respectively. Additionally, the third slider has the &#8220;forceValue&#8221; parameter set to TRUE.</p>      
  101
+      <label for="inputTest3">Range: -10 to 10 in steps of 0.5</label>
  102
+      <p>
  103
+        <!-- Here's the form element we will associate the first slider with. -->
  104
+        <input name="inputTest3" id="inputTest3" type="text" title="Range: -10 to 10 in steps of 0.5" value=""  maxlength="6" />
  105
+        <a href="#" onclick="fdSlider.disable('inputTest3'); return false;">Disable</a>
  106
+        <a href="#" onclick="fdSlider.enable('inputTest3'); return false;">Enable</a>
  107
+      </p>
  108
+      <script>
  109
+      // Call the fdSlider.createSlider method, passing in the required options
  110
+      fdSlider.createSlider({
  111
+        // Associate an input
  112
+        inp:document.getElementById("inputTest3"),
  113
+        // Declare a step (quoting the value means the precision will be calculated as 2 decimal points
  114
+        // e.g. the "50" part of "0.50") which is a short-cut way of setting the precision without
  115
+        // actually using the "precision" parameter
  116
+        step:"0.50", 
  117
+        // Declare a maxStep (for keyboard users)
  118
+        maxStep:2,
  119
+        // Min & Max values
  120
+        min:-10,
  121
+        max:10,
  122
+        // Use the "timed increments to click point" animation
  123
+        animation:"timed"
  124
+        });
  125
+      </script> 
  126
+      <p>The following slider has a 50:13 scale set, which means that when the drag handle is at the 50% mark, then the slider value should be 13.</p>
  127
+      <label for="inputTest5">Range: 5 to 15 in steps of 0.2 with a (50:13) scale</label>
  128
+      <p>
  129
+        <!-- Here's the form element we will associate the second slider with. -->
  130
+        <input name="inputTest5" id="inputTest5" type="text" title="Range: 5 to 15 in steps of 0.2 with a (50:13) scale" value=""  maxlength="6" />
  131
+      </p>
  132
+      <script>
  133
+      fdSlider.createSlider({
  134
+        // Associate an input
  135
+        inp:document.getElementById("inputTest5"),
  136
+        // Declare a step
  137
+        step:0.2, 
  138
+        // Declare a maxStep (for keyboard users)
  139
+        maxStep:0.4,
  140
+        // Min value
  141
+        min:5,
  142
+        // Max value
  143
+        max:15,
  144
+        // Define a scale (multiple points supported, I'm just using one for the demo)
  145
+        scale:{
  146
+                // At 50% of the slider scale, the value should be 13
  147
+                "50":"13"       
  148
+        },
  149
+        // Use the "jump to click point" animation
  150
+        animation:"jump"
  151
+        });
  152
+      </script>
  153
+      <p>The following slider has the &#8220;forceValue&#8221; parameter set to TRUE, which forces the associated text input to show a valid value. Two callback functions have been defined for the <code>create</code> and <code>change</code> slider events. The <code>create</code> callback (fired once whenever the slider has been created) injects a span into the DOM and hides the associated input, while the <code>change</code> callback simply updates this <code>span</code> with the current slider value.</p>
  154
+      <label for="inputTest6" id="inputTest6Label">Range: 5 to 15 in steps of 0.2</label>
  155
+      <p>
  156
+        <!-- Here's the form element we will associate the third slider with. -->
  157
+        <input name="inputTest6" id="inputTest6" type="text" title="Range: 5 to 15 in steps of 0.2" value=""  maxlength="6" />
  158
+      </p>
  159
+      <script>
  160
+      // Create our callback functions
  161
+      
  162
+      // createScaffold, used with the "create" event
  163
+      function createScaffold(cbObj) {
  164
+          // Create a span 
  165
+          var span  = document.createElement("span");
  166
+          // Use the input ID to create an identifiable ID for the span    
  167
+          span.id = cbObj.elem.id + "Visu";
  168
+          // Give it a className
  169
+          span.className = "visu";
  170
+          // Add it just after the input in the DOM    
  171
+          cbObj.elem.parentNode.appendChild(span);
  172
+          // Hide the associated input
  173
+          cbObj.elem.style.display = "none";
  174
+          // Update the span we just added 
  175
+          updateValue(cbObj);          
  176
+      }
  177
+      // updateValue, used with the "change" event
  178
+      function updateValue(cbObj) {
  179
+          // Grab the span element and update its contents
  180
+          document.getElementById(cbObj.elem.id + "Visu").innerHTML = cbObj.value;
  181
+      }
  182
+      // Create the slider
  183
+      fdSlider.createSlider({
  184
+        // Associate an input
  185
+        inp:document.getElementById("inputTest6"),
  186
+        // Declare a step
  187
+        step:0.2, 
  188
+        // Declare a maxStep (for keyboard users)
  189
+        maxStep:0.4,
  190
+        // Min value
  191
+        min:5,
  192
+        // Max value
  193
+        max:15,
  194
+        // Use the "tween to click point" animation
  195
+        animation:"tween",
  196
+        // Force the associated input to have a valid value
  197
+        forceValue:true,
  198
+        // Pass the two previously defined functions for the "create" & "change" 
  199
+        // events
  200
+        callbacks:{
  201
+                // Pass an Array of functions - if multiple functions declared, 
  202
+                // they will be called in sequence
  203
+                "create":[createScaffold],
  204
+                "change":[updateValue]
  205
+        }
  206
+        });
  207
+      </script> 
  208
+      <p>The following slider has been associated with a <code>&lt;select&gt;</code>.</p> 
  209
+      <label for="selectTest1" id="selectTest1Label">Select List with eight options</label>
  210
+      <p>
  211
+        <!-- Here's the form element - a select list in this case - that we will associate the forth and final slider with. -->
  212
+        <select name="selectTest1" id="selectTest1">
  213
+          <option value="1">One</option>
  214
+          <option value="2">Two</option>
  215
+          <option value="4">Four</option>
  216
+          <option value="8">Eight</option>
  217
+          <option value="16">Sixteen</option>
  218
+          <option value="32">Thirty Two</option>
  219
+          <option value="64">Sixty Four</option>
  220
+          <option value="128">One Hundred and Twenty Eight</option>
  221
+          <option value="256">Two Hundred and Fifty Six</option>
  222
+        </select>  
  223
+        <a href="#" onclick="fdSlider.disable('selectTest1'); return false;">Disable</a>
  224
+        <a href="#" onclick="fdSlider.enable('selectTest1'); return false;">Enable</a>
  225
+      </p>
  226
+      <script>
  227
+      fdSlider.createSlider({
  228
+        // Associate the select list
  229
+        inp:document.getElementById("selectTest1"),
  230
+        // Use the tween animation
  231
+        animation:"tween",
  232
+        // Keep the form element, in this case a select list, visible
  233
+        hideInput:false,
  234
+        // Create a vertical slider
  235
+        vertical:true,
  236
+        // Give it the className "v-s2" which will make the slider 160px in height
  237
+        classNames:"v-s2"
  238
+        });
  239
+      </script>         
  240
+    </fieldset>    
  241
+  </form>
  242
+</div>
  243
+</body>
  244
+</html>

0 notes on commit dabdb44

Please sign in to comment.
Something went wrong with that request. Please try again.