Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

New CSS file

 * Rewrote CSS file
 * Added utility to generate minified CSS file
 * Added a minified version of the JS
 * Added .png images for non-mhtml version of CSS file
 * Added example .htaccess file
 * Added ariaFormat option to JS initiated sliders/ranges
 * Updated modernizr to 2.5.3
 * Updated all demos
  • Loading branch information...
commit 3f9e3467f255202abbcd4d19d579196541f6f0fa 1 parent 01084d3
@freqdec authored
View
147 css-generator/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS generator for the HTML5 range polyfill</title>
+<style>
+body, input, textarea
+ {
+ font:normal 16px/1.5 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ }
+form
+ {
+ border:3px solid #aaa;
+ -webkit-border-radius:8px;
+ -moz-border-radius:8px;
+ border-radius:8px;
+ padding:10px;
+ width:700px;
+ margin:20px auto;
+ text-align:center;
+ }
+#userURL,
+#ta
+ {
+ display:block;
+ text-align:left;
+ width:688px;
+ border:2px solid #aaa;
+ -webkit-border-radius:8px;
+ -moz-border-radius:8px;
+ border-radius:8px;
+ padding:4px;
+ }
+#ta
+ {
+ height:20em;
+ font-size:12px;
+ }
+label
+ {
+ font-weight:bold;
+ }
+h2
+ {
+ border-bottom:3px double #ccc;
+ }
+/* Button CSS from https://github.com/ubuwaits/css3-buttons/blob/gh-pages/stylesheets/buttons.css */
+#gen
+ {
+ background-color: #ee432e;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
+ background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ border: 1px solid #951100;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ color: #fff;
+ font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
+ line-height: 1;
+ padding: 12px 10px 14px 10px;
+ text-align: center;
+ text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
+ }
+#gen:hover
+ {
+ background-color: #f37873;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
+ background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ cursor: pointer;
+ }
+#gen:active
+ {
+ background-color: #d43c28;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00));
+ background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ }
+</style>
+</head>
+<body>
+<form action="" method="post" onsubmit="minify(); return false;">
+ <h1>CSS generator for the HTML5 range polyfill</h1>
+ <p>Four simple steps to minified CSS goodness&#8230;</p>
+ <h2>Step #1</h2>
+ <p>Choose either to use the <code>fd-slider.mht</code> file or <code>.png</code> images for IE6 and 7. Remember, choosing to use the <code>fd-slider.mht</code> file will give IE6 and 7 users a better experience but it also means that you may have to configure your server to send the correct mimetype.</p>
+ <input type="radio" name="usemhtml" value="1" id="y" checked="checked" onclick="updateText();" />
+ <label for="y">Use MHTML</label>
+ <input type="radio" name="usemhtml" value="0" id="n" onclick="updateText();" />
+ <label for="n">Use PNG images</label>
+ <h2>Step #2</h2>
+ <p id="upd"></p>
+ <label for="userURL">Enter the appropriate URL for your installation</label>
+ <input type="text" name="userURL" id="userURL" placeholder="e.g. http://www.yoursite.com/the/file/path/" />
+ <h2>Step # </h2>
+ <p>Generate a minified version of the CSS file tailored for use on your server.</p>
+ <input type="submit" value="Generate minified CSS file" name="gen" id="gen" />
+ <h2>Step #4</h2>
+ <p>Copy the generated CSS from the textbox below and save it as a <code>.css</code> file. Reference this file within your HTML markup.</p>
+ <textarea id="ta" name="ta"></textarea>
+ <p>That&#8217;s it - you&#8217;re good to go!</p>
+ <p><em>Please report bugs or enhancement requests to <a href="https://twitter.com/freqdec">@freqdec</a> - thanks!</em></p>
+</form>
+<script>
+function minify() {
+ var useMHTML = document.getElementById("y").checked,
+ minifiedCSS = {
+ "mhtml" :".fd-form-element-hidden{display:none}.fd-slider{width:100%;height:20px;margin:0 0 10px 0}.fd-slider-vertical{width:20px;height:100%;margin:0 10px 10px 0}.fd-slider,.fd-slider-vertical{text-align:center;display:block;position:relative;cursor:pointer;text-decoration:none;border:0 none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.oldie .fd-slider,.oldie .fd-slider-vertical{*background:transparent url(mhtml:somelikeithotfd-slider.mht!blank) repeat}.fd-slider-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.oldie .fd-slider-vertical .fd-slider-wrapper{*clear:expression(style.height=parentNode.offsetHeight+'px',style.clear='none', 0);}.fd-slider-inner{display:none}.oldie .fd-slider-inner{position:absolute;height:2px;border:1px solid #bbf;background:#bbf;top:4px;bottom:none;left:4px;right:12px;z-index:2;margin:0;padding:0;overflow:hidden;line-height:4px;_right:auto;_width:expression((this.parentNode.offsetWidth - 8)+'px');filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5)}.oldie .fd-slider-vertical .fd-slider-inner{width:2px;height:auto;bottom:12px;right:auto;_bottom:auto;*clear:expression(style.height=(parentNode.offsetHeight - 8)+'px',style.clear='none',0)}.oldie .fd-slider-focused .fd-slider-inner{display:block}.fd-slider-bar{display:block;position:absolute;top:8px;right:10px;left:10px;z-index:2;height:2px;margin:0;padding:0;overflow:hidden;border:1px solid #bbb;border-bottom:1px solid #aaa;border-right:1px solid #aaa;border:1px solid rgba(187,187,187,.8);border-bottom:1px solid rgba(170,170,170,.8);border-right:1px solid rgba(170,170,170,.8);line-height:4px;background-color:#ddd;background-image:-webkit-gradient(linear,left top,left bottom,from(#ececec),to(#ccc));background-image:-webkit-linear-gradient(top,#ececec,#ccc);background-image:-moz-linear-gradient(top,#ececec,#ccc);background-image:-ms-linear-gradient(top,#ececec,#ccc);background-image:-o-linear-gradient(top,#ececec,#ccc);background-image:linear-gradient(to bottom,#ececec,#ccc);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.oldie .fd-slider-bar{_left:10px;_right:auto;_width:expression((this.parentNode.offsetWidth - 20)+'px');filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc')}.fd-slider-vertical .fd-slider-bar{width:2px;top:10px;right:auto;bottom:10px;left:8px;height:auto;background-color:#ddd;background-image:-webkit-gradient(linear,left top,right top,from(#ececec),to(#ccc));background-image:-webkit-linear-gradient(left,#ececec,#ccc);background-image:-moz-linear-gradient(left,#ececec,#ccc);background-image:-ms-linear-gradient(left,#ececec,#ccc);background-image:-o-linear-gradient(left,#ececec,#ccc);background-image:linear-gradient(to right,#ececec,#ccc)}.oldie .fd-slider-vertical .fd-slider-bar{_bottom:auto;*clear:expression(style.height=(parentNode.offsetHeight - 20)+'px',style.clear='none',0);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc')}.fd-slider-focused .fd-slider-bar{-webkit-box-shadow:0 0 6px rgba(10,130,170,0.7);-moz-box-shadow:0 0 6px rgba(10,130,170,0.7);box-shadow:0 0 6px rgba(10,130,170,0.7);-webkit-animation:fd-pulse 2s infinite;-moz-animation:fd-pulse 2s infinite;-ms-animation:fd-pulse 2s infinite;-o-animation:fd-pulse 2s infinite}.fd-slider-range{display:block;position:absolute;top:9px;left:11px;z-index:3;height:2px;margin:0;padding:0;overflow:hidden;line-height:2px;background-color:#4cc;background-image:-webkit-gradient(linear,left top,right top,from(#6cc),to(#3cf));background-image:-webkit-linear-gradient(left,#6cc,#3cf);background-image:-moz-linear-gradient(left,#6cc,#3cf);background-image:-ms-linear-gradient(left,#6cc,#3cf);background-image:-o-linear-gradient(left,#6cc,#3cf);background-image:linear-gradient(to right,#6cc,#3cf);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.oldie .fd-slider-range{_left:10px;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff')}.fd-slider-vertical .fd-slider-range{height:auto;width:2px;top:auto;right:auto;bottom:11px;left:9px;background-image:-webkit-gradient(linear,left top,left bottom,from(#3cf),to(#6cc));background-image:-webkit-linear-gradient(top,#3cf,#6cc);background-image:-moz-linear-gradient(top,#3cf,#6cc);background-image:-ms-linear-gradient(top,#3cf,#6cc);background-image:-o-linear-gradient(top,#3cf,#6cc);background-image:linear-gradient(to bottom,#3cf,#6cc)}.oldie .fd-slider-vertical .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff66cccc',endColorstr='#ff33ccff')}.fd-slider-handle{position:absolute;display:block;padding:0;border:0 none;margin:0;z-index:3;top:0;left:0;width:20px;height:20px;outline:0 none;background-color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFRDg4NEVDNENDODExRTFCMTZDREIyQTZDMjlDNTQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFRDg4NEVENENDODExRTFCMTZDREIyQTZDMjlDNTQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVEODg0RUE0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVEODg0RUI0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68iMNZAAAIQElEQVR42uxYW28b1xGe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);background-position:0 0;cursor:W-resize;line-height:20px;font-size:10px;-moz-outline:0 none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.oldie .fd-slider-handle{*background-image:url(mhtml:somelikeithotfd-slider.mht!fullsprite);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:somelikeithotfd-slider.mht!handlenormal');outline:expression(hideFocus='true')}.fd-slider-handle:focus{outline:0 none;border:0 none;-moz-user-focus:normal}.fd-slider-handle:focus::-moz-focus-inner{border-color:transparent}.fd-slider-focused .fd-slider-handle,.fd-slider-hover .fd-slider-handle,.fd-slider-active .fd-slider-handle{background-position:0 -20px}.oldie .fd-slider-focused .fd-slider-handle,.oldie .fd-slider-hover .fd-slider-handle,.oldie .fd-slider-active .fd-slider-handle{_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:somelikeithotfd-slider.mht!handleglow')}.fd-slider-vertical .fd-slider-handle{cursor:N-resize}.fd-slider-no-value .fd-slider-handle{background-position:0 -59px}.oldie .fd-slider-no-value .fd-slider-handle{_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:somelikeithotfd-slider.mht!handlenovalue')}body.fd-slider-drag-horizontal,body.fd-slider-drag-horizontal *,body.fd-slider-drag-vertical,body.fd-slider-drag-vertical *{cursor:N-resize!important;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}body.fd-slider-drag-horizontal,body.fd-slider-drag-horizontal *{cursor:W-resize!important}.fd-slider-disabled{opacity:.8;cursor:default}.fd-slider-disabled .fd-slider-handle{cursor:default!important;background-position:0 -40px;opacity:1}.oldie .fd-slider-disabled .fd-slider-handle{_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:somelikeithotfd-slider.mht!handledisabled')}.fd-slider-disabled .fd-slider-bar{cursor:auto!important;border:1px solid #888;border-bottom:1px solid #999;border-right:1px solid #999;border:1px solid rgba(136,136,136,.8);border-bottom:1px solid rgba(153,153,153,.8);border-right:1px solid rgba(153,153,153,.8);background-color:#555;background-image:-webkit-gradient(linear,left top,right top,from(#666),to(#333));background-image:-webkit-linear-gradient(left,#666,#333);background-image:-moz-linear-gradient(left,#666,#333);background-image:-ms-linear-gradient(left,#666,#333);background-image:-o-linear-gradient(left,#666,#333);background-image:linear-gradient(to right,#666,#333)}.fd-slider-vertical .fd-slider-disabled .fd-slider-bar{background-image:-webkit-gradient(linear,left top,right bottom,from(#333),to(#666));background-image:-webkit-linear-gradient(top,#333,#666);background-image:-moz-linear-gradient(top,#333,#666);background-image:-ms-linear-gradient(top,#333,#666);background-image:-o-linear-gradient(top,#333,#666);background-image:linear-gradient(to bottom,#333,#666)}.oldie .fd-slider-disabled .fd-slider-bar{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333')}.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-bar{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333')}.fd-slider-disabled .fd-slider-range{cursor:auto!important;background-color:#222;background-image:-webkit-gradient(linear,left top,right top,from(#222),to(#000));background-image:-webkit-linear-gradient(left,#222,#000);background-image:-moz-linear-gradient(left,#222,#000);background-image:-ms-linear-gradient(left,#222,#000);background-image:-o-linear-gradient(left,#222,#000);background-image:linear-gradient(to right,#222,#000)}.oldie .fd-slider-disabled .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000')}.fd-slider-vertical .fd-slider-disabled .fd-slider-range{background-image:-webkit-gradient(linear,left top,right bottom,from(#000),to(#222));background-image:-webkit-linear-gradient(top,#000,#222);background-image:-moz-linear-gradient(top,#000,#222);background-image:-ms-linear-gradient(top,#000,#222);background-image:-o-linear-gradient(top,#000,#222);background-image:linear-gradient(to bottom,#000,#222)}.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000')}@-webkit-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}@-moz-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}@-ms-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}@-o-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}",
+ "png" :".fd-form-element-hidden{display:none}.fd-slider{width:100%;height:20px;margin:0 0 10px 0}.fd-slider-vertical{width:20px;height:100%;margin:0 10px 10px 0}.fd-slider,.fd-slider-vertical{text-align:center;display:block;position:relative;cursor:pointer;text-decoration:none;border:0 none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.oldie .fd-slider,.oldie .fd-slider-vertical{*background:transparent url(somelikeithotblank.gif) repeat}.fd-slider-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.oldie .fd-slider-vertical .fd-slider-wrapper{*clear:expression(style.height=parentNode.offsetHeight+'px',style.clear='none', 0);}.fd-slider-inner{display:none}.oldie .fd-slider-inner{position:absolute;height:2px;border:1px solid #bbf;background:#bbf;top:4px;bottom:none;left:4px;right:12px;z-index:2;margin:0;padding:0;overflow:hidden;line-height:4px;_right:auto;_width:expression((this.parentNode.offsetWidth - 8)+'px');filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5)}.oldie .fd-slider-vertical .fd-slider-inner{width:2px;height:auto;top:4px;bottom:12px;left:4px;right:auto;_bottom:auto;*clear:expression(style.height=(parentNode.offsetHeight - 8)+'px',style.clear='none',0)}.oldie .fd-slider-focused .fd-slider-inner{display:block}.fd-slider-bar{display:block;position:absolute;top:8px;right:10px;left:10px;z-index:2;height:2px;margin:0;padding:0;overflow:hidden;border:1px solid #bbb;border-bottom:1px solid #aaa;border-right:1px solid #aaa;border:1px solid rgba(187,187,187,.8);border-bottom:1px solid rgba(170,170,170,.8);border-right:1px solid rgba(170,170,170,.8);line-height:4px;background-color:#ddd;background-image:-webkit-gradient(linear,left top,left bottom,from(#ececec),to(#ccc));background-image:-webkit-linear-gradient(top,#ececec,#ccc);background-image:-moz-linear-gradient(top,#ececec,#ccc);background-image:-ms-linear-gradient(top,#ececec,#ccc);background-image:-o-linear-gradient(top,#ececec,#ccc);background-image:linear-gradient(to bottom,#ececec,#ccc);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.oldie .fd-slider-bar{_left:10px;_right:auto;_width:expression((this.parentNode.offsetWidth - 20)+'px');filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc')}.fd-slider-vertical .fd-slider-bar{width:2px;top:10px;right:auto;bottom:10px;left:8px;height:auto;background-color:#ddd;background-image:-webkit-gradient(linear,left top,right top,from(#ececec),to(#ccc));background-image:-webkit-linear-gradient(left,#ececec,#ccc);background-image:-moz-linear-gradient(left,#ececec,#ccc);background-image:-ms-linear-gradient(left,#ececec,#ccc);background-image:-o-linear-gradient(left,#ececec,#ccc);background-image:linear-gradient(to right,#ececec,#ccc)}.oldie .fd-slider-vertical .fd-slider-bar{_bottom:auto;*clear:expression(style.height=(parentNode.offsetHeight - 20)+'px',style.clear='none',0);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc')}.fd-slider-focused .fd-slider-bar{-webkit-box-shadow:0 0 6px rgba(10,130,170,0.7);-moz-box-shadow:0 0 6px rgba(10,130,170,0.7);box-shadow:0 0 6px rgba(10,130,170,0.7);-webkit-animation:fd-pulse 2s infinite;-moz-animation:fd-pulse 2s infinite;-ms-animation:fd-pulse 2s infinite;-o-animation:fd-pulse 2s infinite}.fd-slider-range{display:block;position:absolute;top:9px;left:11px;z-index:3;height:2px;margin:0;padding:0;overflow:hidden;line-height:2px;background-color:#4cc;background-image:-webkit-gradient(linear,left top,right top,from(#6cc),to(#3cf));background-image:-webkit-linear-gradient(left,#6cc,#3cf);background-image:-moz-linear-gradient(left,#6cc,#3cf);background-image:-ms-linear-gradient(left,#6cc,#3cf);background-image:-o-linear-gradient(left,#6cc,#3cf);background-image:linear-gradient(to right,#6cc,#3cf);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.oldie .fd-slider-range{_left:10px;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff')}.fd-slider-vertical .fd-slider-range{height:auto;width:2px;top:auto;right:auto;bottom:11px;left:9px;background-image:-webkit-gradient(linear,left top,left bottom,from(#3cf),to(#6cc));background-image:-webkit-linear-gradient(top,#3cf,#6cc);background-image:-moz-linear-gradient(top,#3cf,#6cc);background-image:-ms-linear-gradient(top,#3cf,#6cc);background-image:-o-linear-gradient(top,#3cf,#6cc);background-image:linear-gradient(to bottom,#3cf,#6cc)}.oldie .fd-slider-vertical .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff66cccc',endColorstr='#ff33ccff')}.fd-slider-handle{position:absolute;display:block;padding:0;border:0 none;margin:0;z-index:3;top:0;left:0;width:20px;height:20px;outline:0 none;background-color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFRDg4NEVDNENDODExRTFCMTZDREIyQTZDMjlDNTQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFRDg4NEVENENDODExRTFCMTZDREIyQTZDMjlDNTQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVEODg0RUE0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVEODg0RUI0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68iMNZAAAIQElEQVR42uxYW28b1xGe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);background-position:0 0;cursor:W-resize;line-height:20px;font-size:10px;-moz-outline:0 none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.oldie .fd-slider-handle{*background-image:url(somelikeithotfd-slider-sprite.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='somelikeithotfd-handle-normal.png');outline:expression(hideFocus='true')}.fd-slider-handle:focus{outline:0 none;border:0 none;-moz-user-focus:normal}.fd-slider-handle:focus::-moz-focus-inner{border-color:transparent}.fd-slider-focused .fd-slider-handle,.fd-slider-hover .fd-slider-handle,.fd-slider-active .fd-slider-handle{background-position:0 -20px}.oldie .fd-slider-focused .fd-slider-handle,.oldie .fd-slider-hover .fd-slider-handle,.oldie .fd-slider-active .fd-slider-handle{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='somelikeithotfd-handle-glow.png')}.fd-slider-vertical .fd-slider-handle{cursor:N-resize}.fd-slider-no-value .fd-slider-handle{background-position:0 -59px}.oldie .fd-slider-no-value .fd-slider-handle{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='somelikeithotfd-handle-no-value.png')}body.fd-slider-drag-horizontal,body.fd-slider-drag-horizontal *,body.fd-slider-drag-vertical,body.fd-slider-drag-vertical *{cursor:N-resize!important;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}body.fd-slider-drag-horizontal,body.fd-slider-drag-horizontal *{cursor:W-resize!important}.fd-slider-disabled{opacity:.8;cursor:default}.fd-slider-disabled .fd-slider-handle{cursor:default!important;background-position:0 -40px;opacity:1}.oldie .fd-slider-disabled .fd-slider-handle{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='somelikeithotfd-handle-disabled.png')}.fd-slider-disabled .fd-slider-bar{cursor:auto!important;border:1px solid #888;border-bottom:1px solid #999;border-right:1px solid #999;border:1px solid rgba(136,136,136,.8);border-bottom:1px solid rgba(153,153,153,.8);border-right:1px solid rgba(153,153,153,.8);background-color:#555;background-image:-webkit-gradient(linear,left top,right top,from(#666),to(#333));background-image:-webkit-linear-gradient(left,#666,#333);background-image:-moz-linear-gradient(left,#666,#333);background-image:-ms-linear-gradient(left,#666,#333);background-image:-o-linear-gradient(left,#666,#333);background-image:linear-gradient(to right,#666,#333)}.fd-slider-vertical .fd-slider-disabled .fd-slider-bar{background-image:-webkit-gradient(linear,left top,right bottom,from(#333),to(#666));background-image:-webkit-linear-gradient(top,#333,#666);background-image:-moz-linear-gradient(top,#333,#666);background-image:-ms-linear-gradient(top,#333,#666);background-image:-o-linear-gradient(top,#333,#666);background-image:linear-gradient(to bottom,#333,#666)}.oldie .fd-slider-disabled .fd-slider-bar{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333')}.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-bar{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333')}.fd-slider-disabled .fd-slider-range{cursor:auto!important;background-color:#222;background-image:-webkit-gradient(linear,left top,right top,from(#222),to(#000));background-image:-webkit-linear-gradient(left,#222,#000);background-image:-moz-linear-gradient(left,#222,#000);background-image:-ms-linear-gradient(left,#222,#000);background-image:-o-linear-gradient(left,#222,#000);background-image:linear-gradient(to right,#222,#000)}.oldie .fd-slider-disabled .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000')}.fd-slider-vertical .fd-slider-disabled .fd-slider-range{background-image:-webkit-gradient(linear,left top,right bottom,from(#000),to(#222));background-image:-webkit-linear-gradient(top,#000,#222);background-image:-moz-linear-gradient(top,#000,#222);background-image:-ms-linear-gradient(top,#000,#222);background-image:-o-linear-gradient(top,#000,#222);background-image:linear-gradient(to bottom,#000,#222)}.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000')}@-webkit-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}@-moz-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}@-ms-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}@-o-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,0.55)}20%{box-shadow:0 0 4px rgba(70,130,170,0.6)}40%{box-shadow:0 0 5px rgba(40,130,170,0.65)}60%{box-shadow:0 0 6px rgba(10,130,170,0.7)}80%{box-shadow:0 0 5px rgba(40,130,170,0.65)}100%{box-shadow:0 0 4px rgba(70,130,170,0.6)}}"
+ };
+
+ document.getElementById("ta").value = "/* fd-slider.min.css referencing " + (useMHTML ? "the fd-slider.mht file" : "individual .png images") + " for IE6 and 7 */\n" + String(minifiedCSS[useMHTML ? "mhtml" : "png"]).replace(/somelikeithot/g, document.getElementById("userURL").value);
+
+ return false;
+};
+
+function updateText() {
+ document.getElementById("upd").innerHTML = (document.getElementById("y").checked ? "Enter an absolute URL that points to the folder in which you have placed the <code>fd-slider.mht</code> file on your server" : "Enter an absolute URL that points to the folder in which you have placed the various <code>.png</code> image files on your server") + ". Don&#8217;t forget the <code>http://</code> part or the trailing slash (<code>/</code>) when entering the URL.";
+};
+
+window.onload = updateText;
+</script>
+</body>
+</html>
+
View
6 css/.htaccess
@@ -0,0 +1,6 @@
+# This is an example .htaccess file. I'm not saying that you should use it! It's
+# included in the download as an example for people who may not be old hands at
+# dealing with htaccess directives.
+
+# Add the correct mimetype for .mht files
+AddType message/rfc822 mht
View
223 css/fd-slider-tooltip.css
@@ -1,116 +1,109 @@
-/*
- Sample tooltip code. Only works on grade A browsers (so no IE6, 7 or 8).
-
- See: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ for full info on
- how to style generated content & the associated pitfalls
-
- This code to be taken as experimental & untested - use at your discretion
-
- If showing the tooltip above the sider handle you are relegated to showing
- single line tooltips due to styling constraints!
-*/
-
-.fd-slider-handle:before,
-.fd-slider-handle:after
- {
- content:"";
- /* Remove from screen */
- opacity:0;
- /* Firefox */
- -moz-transition-property: all;
- -moz-transition-duration: 0.3s;
- -moz-transition-delay: 0.2s;
- /* WebKit */
- -webkit-transition-property: all;
- -webkit-transition-duration: 0.3s;
- -webkit-transition-delay: 0.2s;
- /* Opera */
- -o-transition-property: all;
- -o-transition-duration: 0.3s;
- -o-transition-delay: 0.2s;
- /* Standard */
- transition-property: all;
- transition-duration: 0.3s;
- transition-delay: 0.2s;
- }
-/*
- The tooltip body - as we position it above the slider and position the tooltip arrow
- below it, we need to know the height of the body. This means that multi-line tooltips
- are not supported.
-
- To support multi-line tooltips, you will need to position the tooltip below the slider
- and the tooltip pointer above the tooltip body. Additionally, you will have to set the
- tooltip bodies "height" to auto
-*/
-.fd-slider-handle:before
- {
- display:block;
- position:absolute;
- top:-30px;
- left:-25px;
- margin:0;
- width:60px;
- padding:5px;
- height:14px;
- line-height:12px;
- font-size:10px;
- text-shadow:0 1px 0 #000;
- color:#fff;
- background:#222;
- z-index:1;
- /* Use the ARIA valuetext property, set by the script, to generate the tooltip content */
- content:attr(aria-valuetext);
- /* Border radius and box shadow */
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- border-radius:3px;
- -moz-box-shadow: 0 0 4px #aaa;
- -webkit-box-shadow: 0 0 4px #aaa;
- box-shadow: 0 0 4px #aaa;
- }
-.fd-slider-handle:after
- {
- outline:none;
- content:"";
- display:block;
- position:absolute;
- top:-14px;
- left:50%;
- margin:0 0 0 -5px;
- background:#222;
- z-index:2;
- width:10px;
- height:10px;
- overflow:hidden;
- /* Rotate element by 45 degress to get the "\/" pointer effect */
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- /* Add a box shadow */
- -moz-box-shadow: 0 0 4px #aaa;
- -webkit-box-shadow: 0 0 4px #aaa;
- box-shadow: 0 0 4px #aaa;
- /* Clip */
- clip:rect(4px, 14px, 14px, 4px);
- }
-/* Change opacity and position to kick in the transitions */
-.fd-slider-focused .fd-slider-handle:before,
-.fd-slider-hover .fd-slider-handle:before,
-.fd-slider-active .fd-slider-handle:before
- {
- top:-25px;
- opacity:1;
- }
-.fd-slider-focused .fd-slider-handle:after,
-.fd-slider-hover .fd-slider-handle:after,
-.fd-slider-active .fd-slider-handle:after
- {
- top:-9px;
- opacity:1;
- }
-/* Remove completely for IE */
-.oldie .fd-slider-handle:before,
-.oldie .fd-slider-handle:after
- {
- display:none;
+/*
+ Sample tooltip code. Only works on grade A browsers (so no IE6, 7 or 8).
+
+ See: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
+ for full info on how to style generated content & the associated pitfalls.
+*/
+
+.fd-slider-handle:before,
+.fd-slider-handle:after
+ {
+ content:"";
+ /* Remove from screen */
+ opacity:0;
+ -webkit-transition-property: all;
+ -moz-transition-property: all;
+ -ms-transition-property: all;
+ -o-transition-property: all;
+ transition-property: all;
+ -webkit-transition-duration: 0.3s;
+ -moz-transition-duration: 0.3s;
+ -ms-transition-duration: 0.3s;
+ -o-transition-duration: 0.3s;
+ transition-duration: 0.3s;
+ -webkit-transition-delay: 0.2s;
+ -moz-transition-delay: 0.2s;
+ -ms-transition-delay: 0.2s;
+ -o-transition-delay: 0.2s;
+ transition-delay: 0.2s;
+ }
+/*
+ The tooltip body - as we position it above the slider and position the
+ tooltip arrow below it, we need to know the height of the body. This means
+ that multi-line tooltips are not supported.
+
+ To support multi-line tooltips, you will need to position the tooltip below
+ the slider and the tooltip pointer above the tooltip body. Additionally, you
+ will have to set the tooltip body "height" to auto
+*/
+.fd-slider-handle:before
+ {
+ display:block;
+ position:absolute;
+ top:-30px;
+ left:-25px;
+ margin:0;
+ width:60px;
+ padding:5px;
+ height:14px;
+ line-height:12px;
+ font-size:10px;
+ text-shadow:0 1px 0 #000;
+ color:#fff;
+ background:#222;
+ z-index:1;
+ /* Use the ARIA valuetext property, set by the script, to generate the
+ tooltip content */
+ content:attr(aria-valuetext);
+ -webkit-border-radius:3px;
+ -moz-border-radius:3px;
+ border-radius:3px;
+ -webkit-box-shadow: 0 0 4px #aaa;
+ -moz-box-shadow: 0 0 4px #aaa;
+ box-shadow: 0 0 4px #aaa;
+ }
+.fd-slider-handle:after
+ {
+ outline:none;
+ content:"";
+ display:block;
+ position:absolute;
+ top:-14px;
+ left:50%;
+ margin:0 0 0 -5px;
+ background:#222;
+ z-index:2;
+ width:10px;
+ height:10px;
+ overflow:hidden;
+ /* Rotate element by 45 degress to get the "\/" pointer effect */
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -webkit-box-shadow: 0 0 4px #aaa;
+ -moz-box-shadow: 0 0 4px #aaa;
+ box-shadow: 0 0 4px #aaa;
+ clip:rect(4px, 14px, 14px, 4px);
+ }
+/* Change opacity and position to kick in the transitions */
+.fd-slider-focused .fd-slider-handle:before,
+.fd-slider-hover .fd-slider-handle:before,
+.fd-slider-active .fd-slider-handle:before
+ {
+ top:-25px;
+ opacity:1;
+ }
+.fd-slider-focused .fd-slider-handle:after,
+.fd-slider-hover .fd-slider-handle:after,
+.fd-slider-active .fd-slider-handle:after
+ {
+ top:-9px;
+ opacity:1;
+ }
+/* Remove completely for IE 6, 7 and 8 */
+.oldie .fd-slider-handle:before,
+.oldie .fd-slider-handle:after
+ {
+ display:none;
}
View
1,187 css/fd-slider.css
@@ -1,116 +1,231 @@
-/*
-Content-Type: multipart/related; boundary="_BASE64_SEPARATOR"
-
---_BASE64_SEPARATOR
-Content-Location:handlenormal
-Content-Transfer-Encoding:base64
-
-iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKeSURBVHjaYvz//z8DNQFAADExUBkABBDVDQQIIKobCBBALNgEGYGAYek5OQYhcW8Gdk5bBjZ2DbDEr583GH5+P8zw7uVWhmijR/+xRABAADGiiwHNYuZZdclaQkKiUEeY19aIm4FdkZ2RhYOJkfHHf4Z/J778/7ni4Yc9b1++mMgQZXAcqP8vsn6AAGLBcFnbCmUhIaESa1EeWyue/5wCLIzAYAGa9O8/AxsDA5MdDyOzoBK/+4w/v1jftK0oA2q5jexSgABC9zIbg4xSkKQQv5UQ01+2d78ZGN7+YvgHUg3CjFDMxcjE6iEnbL/vk3rkMwaGDqDQT5gBAAGEbiAXAzefA+Pv36wPvzEwPGFk+PfnPwNGOLEwMjD+ZWBiURYTcgMaOAnZQIAAQjeQB2ig6oPvvxkefWP4izc6GYEW/eeQButhYHgPEwYIIEwv//vH9OIHmE04C/0DhwYbshBAAGEmm1dPXgjIKAjzsTAysgKj4x8WY5mAAfn7HwPD1+fPXr9FkwMIIHQDfzHcuXyVQVZRi5uZkZEXaChI859/iEhhgVry+S/Dv18Pb9wA60ECAAGEbuAXhr1r9v2UUzL6p6mrKsDCxCjACjKUkYEZKAkK1H/AFPLh9///3x/devT7wMa9YD1IACCA0LPeN4bjO89937J04+PLF+4//PH337e////zMjMySAFTNogG8Z/duvb48Yal69/uWH0SrAcJAAQQSk4BJ2wGBl4gVmHQs7RjsPNzZtAwUmGQUhAGK3j24C3DjXN3GA5t2stw6fghoMgdIP6MnLABAghr1gNS3EAsBcQKUJoXKv0ZZCwQP4DSX9GzHkAAMWIrYKEuZQMndEg6Y4NHGiTMQN78ha1wAAggRmqX2AABRPXyECDAAK8q7HNsZWwXAAAAAElFTkSuQmCC==
---_BASE64_SEPARATOR
-Content-Location:handleglow
-Content-Transfer-Encoding:base64
-
-iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAPcSURBVHjaYvz//z8DGmBEohmR+DDwHwkzINFgABBALFgMYoKyWaBsZiQ5kOa/QPwPiP9A+f+QDQYIIBY0w5ihmBWI2aCYBSrGADUMZNAvKP4NFfsLNeM/QAAhu5AZqpkdiDmhmAvKh6kDGfYTiL8B8Xco/olkGQNAALFATYZ5DaSZ+9evX/zLn/9QW/2B0enuH2bDNwwsMiDFIgx/niiz/D0fKvB/X6Qkxy02NjYmtHD9BxBAjMBIYYQaxgHEPO/evRPufvbP8dwf9hghbg5tAy5GVnl2BiYORkbG7/8Z/p/+8v/3ibffLliz/VxaKc18UEhI6C1Q3xcg/gFyJUAAsSBFANvPnz+5Vj79onXyJ2+cqiC7jgUPI6sgCwMj0Gog/s/Aycjw35aXgU2QmdNo+/M/zEC1r5O4uc+ys7P/ggbHP4AAYkLyMtuLFy/4N3xgcGfk4NIUZv7P8vHPP8YHP/4zAPH/+xAMZP9j5Gb6z6ItxKO7/yuTD0gPNPLAZgEEEMyF4Ah5/vw5/4N/CkZy//8xP/vJyPDyN8P/fwygIEGkmn/AMAIq/v/7PwMTIzun2fPnt/nl5eVfw5IXQAAhJxvmN2/e8L4T0JBi/PGX8cVvxv/MjEwMwKD7j5x2QRnh7/9////+A5r4j1UYpAc5rQIEEHKyYfj69SsrA/8/ple//jEwMzMBDQQ5g4EROVmDXPgXhP8C1fz7A9GDBAACiAU5B/z+/fuPwNf3734JiPIKsTEysgIdCPQwI8xEUMSAc+p/Joaff/8zsH/8+AGkB5oGwd4ACCAWpOz0B+i9rxLvntx/KCAqxw4U5mMBeRsoCfU0JPYY//8Buu4jMHDFPzx/CNIDjWGwoQABxIKUH39xc3O/1bx/49gHXhG1P1JyUjyMDMyCrIwgbzOADf7HCDT8P+N7oHq2ty9eKb24eYxbWvAtNBuCzPgPEEBMUAPB+VNWVvad6p9PZxVvnzzw8+mDlw+///n75c/f/5zAsBQFpkcQ/eXPv//fXzx5w3vtxH7Zb29OgvRADQQXFgABhByGv5WVlT/du3fv7qdLl7Zyn37x6Z6MtsUZMUWZj3yifCBF/J9efxJ5df+J0pOrJ1QYvh9W0NO7C9IDLSTAYQgQQMhe/isgIPBDW1v7NTCgLzNcv/5J6NKuG8DcIwWMVB5w2mJk/ALMFc+A2e2upqbmQ6DatyA9SEXaf4AAYoQWsCjFFzBtsZ09e5bn6dOnfKDE/ufPHw6w7SwsPyQlJT9KS0t/MjY2/iIiIvILqfgC+xQggBiRSmyqFLAAAcSCVrQzICn4R04VABBgAIVgtDIhSVTgAAAAAElFTkSuQmCC==
---_BASE64_SEPARATOR
-Content-Location:handledisabled
-Content-Transfer-Encoding:base64
-
-iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJSSURBVHjaYvz//z8DNQFAADExUBkABBDVDQQIIKobCBBALNgEGYHA1dVVjp2d3ZuZmdkWiDVA4n///r0BxId//vy5dffu3Y/+Y4kAgABiRBcDmsXs4eFhJSQklCcqKmoLpNm4ubmZWVhYQAb+f/Pmza87d+7s+/DhwxSgoceB+v8i6wcIIBZ0l1lYWCjz8fEVSUpK2gAN5GBjY2MCamIEGgaS/w8UYwaKuV6+fJkVqPYVUOw2sksBAgjdyyDXBAENtAZqYgd6jen79+8gcWRvMAENYVNQULD7/ft3GJDfDcQ/YZIAAYRuIBcrK6sD0ELWz58/M3758uUftnQKNBBEsQoLCzsD6anIBgIEELqBPEADVYGGMQENI5TiQaYqgPQA8XuYIEAAYXgZ6CJs3sQKoK5nQxYDCCCMZAM07AU/P78Q0KWMUK/hNAzok1fo4gABhG7gr48fP14FGqgJTHuMoKQCMhQ5HGH8P3/+/AcaeA2kB9kAgABCN/DLkydP9vHy8hoBk40KMKYZgRjFILCtv34xANPhvUePHu0F6UE2ACCA0A389uLFi3OcnJwbgexgoKEKTExMjBwcHAygIAAmk/8/fvxgAKp5CEzcGx8+fHgGpAfZAIAAYkTzDijQeIFYBZgk7KSkpJwFBQVVuLi4hMG2ffv29v3793eePXu29+3bt4eAQneA+DNywgYIIKxZD0hxA7EUNFlIQS0Bgc9A/AyIH0Dpr+hZDyCAGHEkXEZocuCCpjNY0vgFDTOQN39hKxwAAoiR2iU2QABRvTwECDAAxcXwW8Zw7FoAAAAASUVORK5CYII==
---_BASE64_SEPARATOR
-Content-Location:blank
-Content-Transfer-Encoding:base64
+/*
-R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==
---_BASE64_SEPARATOR
-Content-Location:handlenovalue
-Content-Transfer-Encoding:base64
+ Don't use this version of the file in a production environment. A minified
+ version tailored specifically to your needs can be generated in-browser by
+ using the /css-generator/index.html file.
+
+ Notes for the adventurous:
+
+ 1. The script automagically adds the classname "oldie" to IE6, 7 & 8.
+
+ 2. A combination of the .oldie class and "safe css hacks" are used to target
+ specific IE versions. See: http://mathiasbynens.be/notes/safe-css-hacks
+
+ 3. MSHTML has been used to base64 encode the various png images used for the
+ drag handle in IE6 and 7. IE7 gets served one base64 encoded image sprite
+ whereas IE6 gets served individual base64 encoded images.
+
+ See: http://www.phpied.com/the-proper-mhtml-syntax/ for more info on MHTML
+
+ The base64 encoded images have been placed into their own .mht file. This
+ means only IE6 and 7 will ever be burdened with downloading the file.
+
+ A Microsoft security update in July 2011 means that .mht files now have to
+ be delivered with the mimetype "message/rfc822". If using IIS, there is
+ nothing to do as IIS appears to default to using the required
+ "message/rfc822" mimetype, if using Apache, there are two ways in which to
+ configure this behaviour:
+
+ A. You have Admin rights and can restart the Apache server
+
+ Update the apache_root/httpd/conf/Srm.conf file and add the following
+ line:
+
+ AddType message/rfc822 mht
+
+ This method requires that you restart Apache.
+
+ B. You can simply use an htaccess directive
+
+ You can add the following to an .htaccess file that sits in the same
+ directory as the .mht file (or to an htaccess file at the root of your
+ website if one exists already):
+
+ AddType message/rfc822 mht
+
+ You do not need to restart Apache for the change to take effect.
+
+ Yikes - I cant do either of the above!
+
+ Don't worry, using the .mht file isn't compulsory - just replace the
+ various mhtml: references (found within the .oldie classes) to point to
+ the correct image file on your server (not forgetting to actually upload
+ the image files to your server of course).
+
+ All of the relevant rules have further instructions embedded within them.
+
+ 4. All browsers but IE6 get one "normal" base64 encoded image sprite. IE6 has
+ to use separate images for each animation state.
+
+ 5. The drag handle is only 20px in width & height, most probably not suitable
+ for touch screen devices.
+
+ 6. It's painless to base64 encode your own images, use an online encoder.
+ See: http://www.google.com/search?q=base+64+encoder - the only problem is
+ that IE6 needs each frame of the handle sprite to be encoded individually.
+
+ 7. If you want to use a different image for vertical slider drag handles,
+ uncomment the relevant classes below (easy to spot as they all have the
+ classname ".fd-slider-vertical" somewhere within the declaration).
+
+ 8. As a reminder, the following HTML is being targetted by the CSS:
+
+<span class="fd-slider[-vertical]"
+ id="fd-slider-[the associated form element id]"
+ role="application"
+ aria-disabled="false">
+ <span class="fd-slider-wrapper (fd-slider-[focus|hover|no-value|disabled|active])">
+ <span class="fd-slider-inner"></span>
+ <span class="fd-slider-range"></span>
+ <span class="fd-slider-bar"></span>
+ <span class="fd-slider-handle"
+ tabindex="0"
+ role="slider"
+ aria-valuemin="-10"
+ aria-valuemax="10"
+ aria-labelledby="[the associated form element label id]"
+ id="fd-slider-handle-[the associated form element id]"
+ aria-describedby="fd-slider-describedby"
+ aria-valuenow="-3.50"
+ aria-valuetext="-3.50">&nbsp;</span>
+ </span>
+</span>
-iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjVJREFUeNrMVE1PE0EYfmZ32a1ugXVrS0FsoKWKxBps4kFNOBnjybPR/8Nv8A+Y1K+DxgMeIMYLngiBxGyQKK1NWxq3VpGW7tc4O25C024rBw5MMpnknXmfeeZ9nncIpRSnOQSc8jj7gFJYkLCBZxs69IkclHNzkJUk37A6NXTau2jsb+NJvkFDBCC9MYYlRF9sZZLJ5L3rsdFsXoU0qxAhIhByREE//aF2odg0zP3aKh4vfmX53kCGnNlyIa7r+v278ejcnSiVNYnFQOF5FDI7shQl8oX0+MJTxxJ/LBdes5R6N9PeJ4uYTt+c1MczuuBKDRswLfDT/iTBPE8E8UEqll37ffVWBVhhIWcQoAx17AqxbbHYAsoE1KHoq5NEQFwIYiahLzDAtWGACgOc2GvbKLXgDZXTp0ojGs8BWoMAJVYsUjs6oUc8rw+j3zb18i9tekYdY2KMMJd6IZ0pMHY2wzqsVg7M//jQwe52FZdnp1SRYJQVy092vGNRpOCSAxfUKhq17vqFAXaw+sropNIp71ouoUkC0UaYMZlzRLbp+q9kmjdtStulHdP+8MbgOUMALay/L7Xjlza/O4/yyC1elAURkwoH9oFQ7Xi0svP5Z/nd883mystvPGdQp3Bj/1MtgRu3s1h6OI/5fAJTMyo/UNk7hLFRx8e3BrbWv/gV9xl2Gzu09bgfAd8SsWCNBNu+/k02zWC1eluPhH2wAVMxAFa6SuMENfOf6Z7oczhz/+FfAQYATvji+0cdRCAAAAAASUVORK5CYII==
---_BASE64_SEPARATOR--
*/
-/*
- Quick notes:
-
- - This file is heavily commented, run it through a CSS minifier before putting into production but don't remove the MHTML comment at the start. http://www.google.com/search?q=css+minifier
- - The file requires CRLF (Windows) line endings in order for the MHTML images to work
- - The script automagically adds the classname "oldie" to IE 6, 7 & 8
- - A combination of the .oldie class and "safe css hacks" are used to target specific IE versions. See http://mathiasbynens.be/notes/safe-css-hacks
- - MSHTML has been used to BASE 64 encode the various png images used for the drag handle states in IE6 and IE7. See http://www.phpied.com/the-proper-mhtml-syntax/
- - All browsers except IE6 and IE7 get one regular base 64 encoded image sprite.
- - The drag handle is only 20px in width & height and not suitable for touch screen devices. You will have to change the image etc if targeting a touch screen. 44px is the Apple norm.
- - It's painless to BASE 64 your own image, use an online encoder. http://www.google.com/search?q=base+64+encoder - the only problem is that IE needs each frame of the handle sprite to be encoded individually.
- - Remember to find and replace all occurences of "the_absolute_path_to_this_file" with an absolute path to this file on your server (no trailing slash required)
- e.g. if your file is positioned at
-
- http://www.mysite.com/css/fd-slider.css
-
- Then you would run a find/replace, replacing the_absolute_path_to_this_file by
-
- http://www.mysite.com/css
-
- Remember, don't include the trailing slash on the directory path.
-
-*/
-
-/* The styles given to the associated form element in order to hide it */
+/*
+ Element: Form element associated with the slider
+ Notes: The styles given to the associated form element in order to hide
+ it within the display
+*/
.fd-form-element-hidden
{
display:none;
}
-/* Horizontal Outer wrapper - all other DOM elements added as children to this top level wrapper */
+/*
+ Element: Outer wrapper
+ Orientation: Horizontal
+*/
.fd-slider
{
width:100%;
- /* The height of the slider handle */
height:20px;
- /* Set a 10 pixel bottom margin */
margin:0 0 10px 0;
}
-/* Vertical Outer wrapper - all other DOM elements added as children to this top level wrapper */
+/*
+ Element: Outer wrapper
+ Orientation: Vertical
+ Notes: You may wish to float the vertical sliders left or use
+ display:inline-block (inline-block should work even in IE6 as the slider
+ is constructed from span elements but don't quote me on that)
+*/
.fd-slider-vertical
- {
- /* The width of the slider handle */
+ {
width:20px;
- /* Fill the available space */
height:100%;
- /* Set a 10 pixel right and bottom margin */
- margin:0 10px 10px 0;
- /* You may wish to float the vertical sliders left or display:inline-block */
- /* float:left; */
+ margin:0 10px 10px 0;
}
-/* Shared rules - both horizontal & vertical sliders */
+/*
+ Element: Outer wrapper
+ Orientation: Both horizontal & vertical
+*/
.fd-slider,
.fd-slider-vertical
{
text-align:center;
- /* display:block required as the wrapper element is a span */
display:block;
- /* This lets us absolutely position the drag handle */
position:relative;
- /* Change the cursor */
- cursor:pointer;
- cursor:hand;
+ cursor:pointer;
text-decoration:none;
border:0 none;
- -moz-user-select:none;
- -khtml-user-select:none;
- -webkit-touch-callout:none;
- user-select:none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
}
+/*
+ Element: Outer Wrapper
+ Orientation: Both horizontal & vertical
+ Notes: IE6 & 7 need a transparent gif as a background in order for
+ hover events to work. This has been base64 encoded within the .mht file.
+ As it's not a png, no AlphaImageLoader filter is required for IE6.
+*/
+.oldie .fd-slider,
+.oldie .fd-slider-vertical
+ {
+ /*
+ If using the .mht file then uncomment the following rule and edit the
+ filepath to match the absolute path to the fd-slider.mht file on your
+ server (replace "www.your-domain.com/the/path/to/")
+ */
+
+ /*
+
+ *background:transparent url(mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!blank) repeat;
+
+ */
+
+ /*
+ If not using the .mht file then uncomment the following rule and edit
+ the filepath to match the absolute path to the blank.gif file on your
+ server (replace "www.your-domain.com/the/path/to/")
+ */
+
+ /*
+
+ *background:transparent url(http://www.your-domain.com/the/path/to/blank.gif) repeat;
+
+ */
+ }
+/*
+ Element: Inner wrapper
+ Notes: All other DOM elements added as children to this element.
+*/
+.fd-slider-wrapper
+ {
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ }
+/*
+ Element: Inner wrapper
+ Notes: IE6 needs an expression as it cannot do a height:100% on
+ absolutely positioned elements and it also can't position on four
+ corners - so we are left with a "one time evaluated" self-deleting
+ expression to do the dirty work.
+*/
+
+.oldie .fd-slider-vertical .fd-slider-wrapper
+ {
+ *clear:expression(style.height=parentNode.offsetHeight+'px',style.clear='none', 0);
+ }
+/*
+ Element: ieBlur shiv
+ Notes: Used only by IE for the onfocus "Blur" effect
+*/
.fd-slider-inner
{
- /* Used only by IE for the onfocus blur effect */
display:none;
}
-/* IE 6, 7 & 8 onfocus blur effect */
+/*
+ Element: ieBlur shiv
+ Orientation: Horizontal
+ Notes: IE6, 7 & 8 only.
+ Use the "Blur" filter to simulate the box-shadow - not brilliant but the
+ best we can do for IE. IE6 can't absolutely position on 4 sides so we
+ reset the right to "auto" and use a nasty expression to calculate the
+ width dynamically.
+*/
.oldie .fd-slider-inner
- {
- display:none;
+ {
position:absolute;
height:2px;
border:1px solid #bbf;
- background:#88f;
+ background:#bbf;
top:4px;
bottom:none;
left:4px;
@@ -119,120 +234,184 @@ iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFn
margin:0;
padding:0;
overflow:hidden;
- line-height:4px;
- /* IE 6 can't absolutely position on 4 sides so we reset the right to "auto" and use a nasty expression to calculate the width */
+ line-height:4px;
_right:auto;
- _width:expression((this.parentNode.offsetWidth - 8) + "px");
- /* Use the "blur" filter to simulate the box-shadow - not brilliant but the best we can do for IE */
- filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5);
+ _width:expression((this.parentNode.offsetWidth - 12) + "px");
+ filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5);
}
-/* Reposition for the vertical slider for IE 6, 7 & 8 */
+/*
+ Element: ieBlur shiv
+ Orientation: Vertical
+ Notes: Reposition the "Blur" filter for the vertical slider for IE6,
+ 7 & 8. The "Blur" filter rule cascades from the rule above so no need to
+ redeclare here, we just reposition.
+*/
.oldie .fd-slider-vertical .fd-slider-inner
{
width:2px;
height:auto;
- top:4px;
bottom:12px;
- left:4px;
- right:auto;
- /* IE 6 can't absolutely position on 4 sides so we reset the bottom to "auto" and use a nasty expression to calculate the height */
+ right:auto;
_bottom:auto;
- _height:expression((this.parentNode.offsetHeight - 8) + "px");
- /* Note: The "blur" filter rule cascades from the rule above */
+ *clear:expression(style.height=(parentNode.offsetHeight - 8)+'px',style.clear='none', 0);
}
-/* Display the "blurred" div for IE 6, 7 & 8 when the slider gains focus */
+/*
+ Element: ieBlur shiv
+ Orientation: Horizontal & Vertical
+ Notes: Display the "Blurred" inner div for IE6, 7 & 8 when the slider
+ gains focus
+*/
.oldie .fd-slider-focused .fd-slider-inner
{
display:block;
- }
-/* The inner track bar */
+ }
+/*
+ Element: Inner track bar
+ Orientation: Horizontal
+*/
.fd-slider-bar
{
- position:absolute;
display:block;
+ position:absolute;
+ top:8px;
+ right:10px;
+ left:10px;
z-index:2;
height:2px;
- width:auto;
- /* Fallback rules for non rgba aware browsers */
+ margin:0;
+ padding:0;
+ overflow:hidden;
border:1px solid #bbb;
border-bottom:1px solid #aaa;
border-right:1px solid #aaa;
- /* rgba versions */
border:1px solid rgba(187, 187, 187, .8);
border-bottom:1px solid rgba(170, 170, 170, .8);
- border-right:1px solid rgba(170, 170, 170, .8);
- margin:0;
- padding:0;
- overflow:hidden;
+ border-right:1px solid rgba(170, 170, 170, .8);
line-height:4px;
- top:8px;
- right:10px;
- left:10px;
- -moz-border-radius:2px;
- -webkit-border-radius:2px;
- border-radius:2px;
- -moz-background-clip: padding;
+ background-color:#ddd;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#ccc));
+ background-image: -webkit-linear-gradient(top, #ececec, #ccc);
+ background-image: -moz-linear-gradient(top, #ececec, #ccc);
+ background-image: -ms-linear-gradient(top, #ececec, #ccc);
+ background-image: -o-linear-gradient(top, #ececec, #ccc);
+ background-image: linear-gradient(to bottom, #ececec, #ccc);
+ -webkit-border-radius:2px;
+ -moz-border-radius:2px;
+ border-radius:2px;
-webkit-background-clip: padding-box;
- background-clip: padding-box;
- background-color: #ddd;
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(#ececec, #ccc);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#ccc));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -webkit-linear-gradient(#ececec, #ccc);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(#ececec, #ccc);
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
+/*
+ Element: Inner track bar
+ Orientation: Horizontal
+ Notes: For IE6 & 7 & 8. IE6 does not recognise absolute positioning on
+ four sides (top, right, bottom & left) so we use an expression to
+ dynamically calculate the track bar size. Yes, it is horrible - you
+ don't need to remind me.
+*/
.oldie .fd-slider-bar
{
- /* IE6 does not recognise absolute positioning on four sides (top, right, bottom & left) so we use an expression
- to dynamically calculate the track bar size. Yes, it is horrible - you don't need to remind me. */
- _left:10px;
_right:auto;
_width:expression((this.parentNode.offsetWidth - 20) + "px");
- /* Using the gradient filter for IE 6, 7 & 8. Colour strings in AARRGGBB format */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc');
- -ms-filter:"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc')";
}
-/* The animated range bar */
+/*
+ Element: Inner track bar
+ Orientation: Vertical
+*/
+.fd-slider-vertical .fd-slider-bar
+ {
+ width:2px;
+ top:10px;
+ right:auto;
+ bottom:10px;
+ left:8px;
+ height:auto;
+ background-color:#ddd;
+ background-image: -webkit-gradient(linear, left top, right top, from(#ececec), to(#ccc));
+ background-image: -webkit-linear-gradient(left, #ececec, #ccc);
+ background-image: -moz-linear-gradient(left, #ececec, #ccc);
+ background-image: -ms-linear-gradient(left, #ececec, #ccc);
+ background-image: -o-linear-gradient(left, #ececec, #ccc);
+ background-image: linear-gradient(to right, #ececec, #ccc);
+ }
+/*
+ Element: Inner track bar
+ Orientation: Vertical
+ Notes: For IE6 & 7 & 8. The gradient filter colour strings in AARRGGBB
+ format (to save you one less google). IE6 gets repositioned and alas,
+ an expression to calculate the height.
+*/
+.oldie .fd-slider-vertical .fd-slider-bar
+ {
+ _bottom:auto;
+ *clear:expression(style.height=(parentNode.offsetHeight - 20)+'px',style.clear='none', 0);
+ filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc');
+ }
+/*
+ Element: Inner track bar
+ Orientation: Horizontal & Vertical
+ State: Focused
+ Notes: Drop shadow on the inner bar when focused - newer browsers get
+ an animation. IE6, 7 & 8 get a "Blur" filter on an inner SPAN
+ .fd-slider-inner instead
+*/
+.fd-slider-focused .fd-slider-bar
+ {
+ -webkit-box-shadow: 0 0 6px rgba(10, 130, 170, 0.7);
+ -moz-box-shadow: 0 0 6px rgba(10, 130, 170, 0.7);
+ box-shadow: 0 0 6px rgba(10, 130, 170, 0.7);
+ -webkit-animation:fd-pulse 2s infinite;
+ -moz-animation:fd-pulse 2s infinite;
+ -ms-animation:fd-pulse 2s infinite;
+ -o-animation:fd-pulse 2s infinite;
+ }
+/*
+ Element: Inner animated range bar
+ Orientation: Horizontal
+*/
.fd-slider-range
{
- position:absolute;
display:block;
+ position:absolute;
+ top:9px;
+ left:11px;
z-index:3;
height:2px;
margin:0;
padding:0;
overflow:hidden;
line-height:2px;
- top:9px;
- left:11px;
- -moz-border-radius:2px;
+ background-color:#4cc;
+ background-image: -webkit-gradient(linear, left top, right top, from(#6cc), to(#3cf));
+ background-image: -webkit-linear-gradient(left, #6cc, #3cf);
+ background-image: -moz-linear-gradient(left, #6cc, #3cf);
+ background-image: -ms-linear-gradient(left, #6cc, #3cf);
+ background-image: -o-linear-gradient(left, #6cc, #3cf);
+ background-image: linear-gradient(to right, #6cc, #3cf);
-webkit-border-radius:2px;
- border-radius:2px;
- -moz-background-clip: padding;
+ -moz-border-radius:2px;
+ border-radius:2px;
-webkit-background-clip: padding-box;
- background-clip: padding-box;
- background-color: #4cc;
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(left, #6cc, #3cf);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#6cc), to(#3cf));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -webkit-linear-gradient(left, #6cc, #3cf);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(left, #6cc, #3cf);
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
+/*
+ Element: Inner range bar
+ Orientation: Horizontal
+ Notes: IE6, 7 & 8
+*/
.oldie .fd-slider-range
{
- /* IE6 - is this needed? To test... */
+ /* IE6 - is this needed? To test. */
_left:10px;
- /* IE 6, 7 & 8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
- -ms-filter:"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff')";
}
-/* Styles for the vertical sliders range bar */
+/*
+ Element: Inner range bar
+ Orientation: Vertical
+*/
.fd-slider-vertical .fd-slider-range
{
height:auto;
@@ -241,60 +420,32 @@ iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFn
right:auto;
bottom:11px;
left:9px;
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(top, #3cf, #6cc);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, left top, left bottom, from(#3cf), to(#6cc));
- /* Safari 5.1+, Chrome 10+ */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#3cf), to(#6cc));
background-image: -webkit-linear-gradient(top, #3cf, #6cc);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(top, #3cf, #6cc);
+ background-image: -moz-linear-gradient(top, #3cf, #6cc);
+ background-image: -ms-linear-gradient(top, #3cf, #6cc);
+ background-image: -o-linear-gradient(top, #3cf, #6cc);
+ background-image: linear-gradient(to bottom, #3cf, #6cc);
}
+/*
+ Element: Inner range bar
+ Orientation: Vertical
+ Notes: IE6, 7 & 8
+*/
.oldie .fd-slider-vertical .fd-slider-range
{
- /* IE 6, 7 & 8 */
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff33ccff',endColorstr='#ff66cccc');
- -ms-filter:"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff33ccff',endColorstr='#ff66cccc')";
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
}
-.fd-slider-vertical .fd-slider-bar
- {
- width:2px;
- top:10px;
- right:auto;
- bottom:10px;
- left:8px;
- height:auto;
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(left, #ececec, #ccc);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, left top, right top, from(#ececec), to(#ccc));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -webkit-linear-gradient(left, #ececec, #ccc);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(left, #ececec, #ccc);
- }
-.oldie .fd-slider-vertical .fd-slider-bar
- {
- /* Again, we use an expression to calculate the vertical track bar size for IE 6 */
- _top:10px;
- _bottom:auto;
- _right:auto;
- _left:8px;
- _height:expression((this.parentNode.offsetHeight - 20) + "px");
- /* Using the gradient filter for IE 6, 7 & 8. Colour strings in AARRGGBB format */
- filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc');
- -ms-filter"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc')";
- }
-.fd-slider-vertical .fd-slider-handle,
-.fd-slider-vertical .fd-slider-handle:link,
-.fd-slider-vertical .fd-slider-handle:visited
- {
- cursor:N-resize;
- }
-/* The drag handle */
-.fd-slider-handle,
-.fd-slider-handle:link,
-.fd-slider-handle:visited
+/*
+ Element: Drag handle
+ Orientation: Horizontal
+ State: Default.
+ Notes: The image sprite used for the handle is base64 encoded below. IE7
+ gets its own version within the .mht file, IE6 does not use an image
+ sprite and it is necessary to base64 encode individual animation frames
+ within the .mht file.
+*/
+.fd-slider-handle
{
position:absolute;
display:block;
@@ -308,343 +459,553 @@ iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFn
height:20px;
outline:0 none;
background-color:transparent;
- text-decoration:none;
- /* Using a BASE64 encoded image sprite for the drag handle */
- background-image:url(data:image/png;base64,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);
+ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFRDg4NEVDNENDODExRTFCMTZDREIyQTZDMjlDNTQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFRDg4NEVENENDODExRTFCMTZDREIyQTZDMjlDNTQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVEODg0RUE0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVEODg0RUI0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68iMNZAAAIQElEQVR42uxYW28b1xGe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);
background-position:0 0;
cursor:W-resize;
line-height:20px;
font-size:10px;
- -webkit-user-select: none;
- -webkit-touch-callout:none;
- -moz-user-select:none;
- -moz-user-focus:none;
-moz-outline:0 none;
- user-select:none;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
}
+/*
+ Element: Drag handle
+ Orientation: Horizontal
+ State: Default
+ Notes: IE6, 7 & 8 use a nasty expression in order to not draw focus
+ outline on drag handle.
+*/
.oldie .fd-slider-handle
{
+ /* IE6 & 7 - set the handle sprite as the background image */
+
/*
+ If using the .mht file then uncomment the following rule and edit the
+ filepath to match the absolute path to the fd-slider.mht file on your
+ server (replace "www.your-domain.com/the/path/to/")
+ */
- IE6 and IE7
- -----------
+ /*
- Should not render the image above as they do not understand regular base 64 encoded images
- but will render the MHTML image within the AlphaImageLoader filter below
+ *background-image:url(mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!fullsprite);
- IE8 in IE7 compat mode
- ----------------------
+ */
- Will render the image declared above (as it suddenly appears to understand regular base64 encoded images)
- but not the MHTML base 64 encoded image below (as it suddenly appears to forget what MHTML is)
+ /*
+ If not using the .mht file then uncomment the following rule and edit
+ the filepath to match the absolute path to the fd-slider-sprite.png
+ file on your server (replace "www.your-domain.com/the/path/to/")
+ */
+
+ /*
+
+ *background-image:url(http://www.your-domain.com/the/path/to/fd-slider-sprite.png);
+
+ */
+
+ /**********************************************************************/
+
+ /* IE6 - reset the background image sprite stipulated above. */
+ _background-image:none;
+
+ /*
+ IE6 - use the AlphaImageLoader to either load a base64 encoded image
+ from the .mht file or a normal png image from the server
+ */
- IE8
- ---
+ /*
+ If using the .mht file then uncomment the following rule and edit the
+ filepath to match the absolute path to the fd-slider.mht file on your
+ server (replace "www.your-domain.com/the/path/to/")
+ */
- Renders the regular base64 encoded image above but does not render the filter below
+ /*
+
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handlenormal');
*/
- *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:the_absolute_path_to_this_file/fd-slider.css!handlenormal');
+
/*
+ If not using the .mht file then uncomment the following rule and edit
+ the filepath to match the absolute path to the fd-handle-normal.png
+ file on your server (replace "www.your-domain.com/the/path/to/")
+ */
- IE6, IE7 and IE8
- ----------------
+ /*
- A nasty expression is used to not draw focus outline on drag handle.
- Feel free to remove the rule if you prefer the outline.
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-normal.png');
*/
+
+ /* IE6, 7 & 8 */
outline:expression(hideFocus='true');
- }
-/* Focus styles */
+ }
+/*
+ Element: Drag handle
+ Orientation: Horizontal & Vertical
+ State: Focused
+ Notes: Attempts to remove the focus outline, remove the rule if it
+ offends your sensibilities.
+*/
.fd-slider-handle:focus
{
outline:0 none;
border:0 none;
-moz-user-focus:normal;
}
-a.fd-slider-handle:focus::-moz-focus-inner
+.fd-slider-handle:focus::-moz-focus-inner
{
border-color: transparent;
}
-/* Glowing slider handle when focused or when hovered */
+/*
+ Element: Drag handle
+ Orientation: Horizontal
+ State: Focused and Hovered and also while handle is animating into
+ position or being dragged.
+ Notes: I'm using the same image for focused, hover and active states
+ but you can, of course, go wild.
+*/
.fd-slider-focused .fd-slider-handle,
-.fd-slider-hover .fd-slider-handle
+.fd-slider-hover .fd-slider-handle,
+.fd-slider-active .fd-slider-handle
{
- /* Move the background sprite into position */
background-position:0 -20px;
}
+/*
+ Element: Drag handle
+ Orientation: Horizontal
+ State: Focused and Hovered and also while handle is animating into
+ position or being dragged.
+ Notes: IE6 only.
+*/
.oldie .fd-slider-focused .fd-slider-handle,
-.oldie .fd-slider-hover .fd-slider-handle
+.oldie .fd-slider-hover .fd-slider-handle,
+.oldie .fd-slider-active .fd-slider-handle
{
/*
+ IE6 - use the AlphaImageLoader to either load a base64 encoded image
+ from the .mht file or a normal png image from the server
+ */
- IE6 and IE7
- -----------
+ /*
+ If using the .mht file then uncomment the following rule and edit the
+ filepath to match the absolute path to the fd-slider.mht file on your
+ server (replace "www.your-domain.com/the/path/to/")
+ */
- Should not render the base64 encoded image sprite declared within the
- .fd-slider-handle ruleset above but will render the MHTML image within
- the AlphaImageLoader filter below
+ /*
- IE8 in IE7 compat mode
- ----------------------
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handleglow');
- Will render the the base64 encoded image sprite declared within the
- .fd-slider-handle ruleset (as it suddenly appears to understand regular
- base64 encoded images) but not the MHTML base 64 encoded image below
- (as it suddenly appears to forget what MHTML is)
+ */
- IE8
- ---
+ /*
+ If not using the .mht file then uncomment the following rule and edit
+ the filepath to match the absolute path to the fd-handle-glow.png
+ file on your server (replace "www.your-domain.com/the/path/to/")
+ */
- Will render the the base64 encoded image sprite declared within the
- .fd-slider-handle ruleset but does not render the AlphaImageLoader
- filter below
+ /*
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-glow.png');
+
*/
- *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:the_absolute_path_to_this_file/fd-slider.css!handleglow');
}
-/* The slider is given this class whenever no value has been set by the user.
- Opacity & png images won't work in IE though so the .oldie class is used to
- pass a BASE64 encoded image to IE 6, 7 & 8
-
- This does mean that IE doesn't get the :hover + :focus effect
+/*
+ Element: Drag handle
+ Orientation: Vertical
+ Notes: Change the cursor to the correct icon.
+*/
+.fd-slider-vertical .fd-slider-handle
+ {
+ cursor:N-resize;
+ }
+/*
+ Element: Drag handle
+ Orientation: Vertical
+ Notes: IE6, 7 & 8
+
+.oldie .fd-slider-vertical .fd-slider-handle
+ {
+ }
+*/
+/*
+ Element: Drag handle
+ Orientation: Vertical
+ State: Focused and Hovered and also while handle is animating into
+ position or being dragged.
+
+.fd-slider-vertical .fd-slider-focused .fd-slider-handle,
+.fd-slider-vertical .fd-slider-hover .fd-slider-handle,
+.fd-slider-vertical .fd-slider-active .fd-slider-handle
+ {
+ }
+*/
+/*
+ Element: Drag handle
+ Orientation: Vertical
+ State: Focused and Hovered and also while handle is animating into
+ position or being dragged.
+ Notes: IE6, 7 & 8
+
+.oldie .fd-slider-vertical .fd-slider-focused .fd-slider-handle,
+.oldie .fd-slider-vertical .fd-slider-hover .fd-slider-handle,
+.oldie .fd-slider-vertical .fd-slider-active .fd-slider-handle
+ {
+ }
+*/
+/*
+ Element: Drag handle
+ Orientation: Horizontal & Vertical
+ State: User has not yet used the slider to set a value
+ Notes: I screwed the positioning of the image sprite by 1px which is why
+ it's -59px and not -60px. Yeah - I suck at Photoshop.
*/
.fd-slider-no-value .fd-slider-handle
{
- opacity:.6;
+ background-position:0 -59px;
}
-/* IE 6, 7 & 8 - uses a BASE64 encoded image as the opacity & png mix doesn't work */
+/*
+ Element: Drag handle
+ Orientation: Horizontal
+ State: User has not yet used the slider to set a value
+ Notes: IE6 only
+*/
.oldie .fd-slider-no-value .fd-slider-handle
{
- /* Reset opacity for IE8 as we are using png images */
- opacity:1;
- background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjVJREFUeNrMVE1PE0EYfmZ32a1ugXVrS0FsoKWKxBps4kFNOBnjybPR/8Nv8A+Y1K+DxgMeIMYLngiBxGyQKK1NWxq3VpGW7tc4O25C024rBw5MMpnknXmfeeZ9nncIpRSnOQSc8jj7gFJYkLCBZxs69IkclHNzkJUk37A6NXTau2jsb+NJvkFDBCC9MYYlRF9sZZLJ5L3rsdFsXoU0qxAhIhByREE//aF2odg0zP3aKh4vfmX53kCGnNlyIa7r+v278ejcnSiVNYnFQOF5FDI7shQl8oX0+MJTxxJ/LBdes5R6N9PeJ4uYTt+c1MczuuBKDRswLfDT/iTBPE8E8UEqll37ffVWBVhhIWcQoAx17AqxbbHYAsoE1KHoq5NEQFwIYiahLzDAtWGACgOc2GvbKLXgDZXTp0ojGs8BWoMAJVYsUjs6oUc8rw+j3zb18i9tekYdY2KMMJd6IZ0pMHY2wzqsVg7M//jQwe52FZdnp1SRYJQVy092vGNRpOCSAxfUKhq17vqFAXaw+sropNIp71ouoUkC0UaYMZlzRLbp+q9kmjdtStulHdP+8MbgOUMALay/L7Xjlza/O4/yyC1elAURkwoH9oFQ7Xi0svP5Z/nd883mystvPGdQp3Bj/1MtgRu3s1h6OI/5fAJTMyo/UNk7hLFRx8e3BrbWv/gV9xl2Gzu09bgfAd8SsWCNBNu+/k02zWC1eluPhH2wAVMxAFa6SuMENfOf6Z7oczhz/+FfAQYATvji+0cdRCAAAAAASUVORK5CYII==);
/*
+ IE6 - use the AlphaImageLoader to either load a base64 encoded image
+ from the .mht file or a normal png image from the server
+ */
- IE6 and IE7
- -----------
+ /*
+ If using the .mht file then uncomment the following rule and edit the
+ filepath to match the absolute path to the fd-slider.mht file on your
+ server (replace "www.your-domain.com/the/path/to/")
+ */
- Should not render the image above as they do not understand regular base 64 encoded images
- but will render the MHTML image within the AlphaImageLoader filter below
+ /*
- IE8 in IE7 compat mode
- ----------------------
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handlenovalue');
- Will render the image declared above (as it suddenly appears to understand regular base64 encoded images)
- but not the MHTML base 64 encoded image below (as it suddenly appears to forget what MHTML is)
+ */
- IE8
- ---
+ /*
+ If not using the .mht file then uncomment the following rule and edit
+ the filepath to match the absolute path to the fd-handle-no-value.png
+ file on your server (replace "www.your-domain.com/the/path/to/")
+ */
- Renders the regular base64 encoded image above but does not render the filter below
+ /*
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-no-value.png');
+
*/
- *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:the_absolute_path_to_this_file/fd-slider.css!handleglow');
}
-.oldie .fd-slider,
-.oldie .fd-slider-vertical
- {
- /*
-
- IE6 and IE7
- -----------
-
- Require either a solid background colour or a background image in order
- for mouse hover events to work. We are using a MHTML base64 encoded
- transparent gif image to get it to work
-
- IE8 in IE7 compat mode
- ----------------------
-
- Setting the background image below seems to do the trick, even if the
- image is not rendered. It just works - don't ask me why.
-
- IE8
- ---
+/*
+ Element: Drag handle
+ Orientation: Vertical
+ State: User has not yet used the slider to set a value
+ Notes: IE6, 7 & 8. Only required should you use a different image for
+ vertical sliders.
- Does not need the background hack to get mouse hover events to work so
- we keep the following rule from being noticed by using the star hack
-
- */
- *background:transparent url(mhtml:the_absolute_path_to_this_file/fd-slider.css!blank) repeat;
- }
-/* Drop shadow on the inner bar when focused - IE gets a "Blur" filter on an inner SPAN instead */
-.fd-slider-focused .fd-slider-bar
+.oldie .fd-slider-vertical .fd-slider-no-value .fd-slider-handle
{
- -moz-box-shadow: 0 0 4px #aaf;
- -webkit-box-shadow: 0 0 4px #aaf;
- box-shadow: 0 0 4px #aaf;
- }
-/* Class given to body to change cursor when dragging */
-.fd-slider-drag-vertical,
-.fd-slider-drag-vertical *
+ }
+*/
+/*
+ Element: document.body
+ Orientation: Horizontal and Vertical
+ Notes: Class given to body to change cursor style when dragging. It also
+ attempts to stop text selection while dragging.
+*/
+body.fd-slider-drag-horizontal,
+body.fd-slider-drag-horizontal *,
+body.fd-slider-drag-vertical,
+body.fd-slider-drag-vertical *
{
- /* Set the cursor to the correct resize cursor */
cursor:N-resize !important;
- /* Stop text selection */
- -moz-user-select:none;
- -webkit-user-select:none;
- user-select:none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
}
-.fd-slider-drag-horizontal,
-.fd-slider-drag-horizontal *
+/*
+ Element: document.body
+ Orientation: Horizontal
+ Notes: Class given to body to change cursor style when dragging
+*/
+body.fd-slider-drag-horizontal,
+body.fd-slider-drag-horizontal *
{
cursor:W-resize !important;
- /* Stop text selection */
- -moz-user-select:none;
- -webkit-user-select:none;
- user-select:none;
- }
-/* Disabled Sliders */
+ }
+/*
+ Element: Inner wrapper
+ Orientation: Horizontal & Vertical
+ State: disabled
+ Notes: Class given to slider when disabled
+*/
.fd-slider-disabled
{
- /* Lower opacity - No IE 6, 7 or 8 though */
- opacity:0.8;
- /* Remove the pointer */
+ opacity:.8;
cursor:default;
}
-/* Change the handle image */
+/*
+ Element: Drag handle
+ Orientation: Horizontal
+ State: disabled
+ Notes: Class given to slider when disabled
+*/
.fd-slider-disabled .fd-slider-handle
{
- /* Default cursor & black handle image */
cursor:default !important;
- /* Move the image sprite to appropriate position */
background-position:0 -40px;
+ opacity:1;
}
+/*
+ Element: Drag handle
+ Orientation: Horizontal
+ State: disabled
+ Notes: IE6 only
+*/
.oldie .fd-slider-disabled .fd-slider-handle
{
/*
+ IE6 - use the AlphaImageLoader to either load a base64 encoded image
+ from the .mht file or a normal png image from the server
+ */
- IE8
- ---
-
- Need to reset the opacity as opacity + png images don't mix
+ /*
+ If using the .mht file then uncomment the following rule and edit the
+ filepath to match the absolute path to the fd-slider.mht file on your
+ server (replace "www.your-domain.com/the/path/to/")
+ */
- */
- opacity:1;
/*
- IE6 and IE7
- -----------
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handledisabled');
- Should not render the image above as they do not understand regular base 64 encoded images
- but will render the MHTML image within the AlphaImageLoader filter below
+ */
- IE8 in IE7 compat mode
- ----------------------
+ /*
+ If not using the .mht file then uncomment the following rule and edit
+ the filepath to match the absolute path to the fd-handle-disabled.png
+ file on your server (replace "www.your-domain.com/the/path/to/")
+ */
+
+ /*
- Will render the image declared above (as it suddenly appears to understand regular base64 encoded images)
- but not the MHTML base 64 encoded image below (as it suddenly appears to forget what MHTML is)
-
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-disabled.png');
+
*/
- *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:the_absolute_path_to_this_file/fd-slider.css!handledisabled');
}
-/* Disable the track bar */
+/*
+ Element: Drag handle
+ Orientation: Vertical
+ State: disabled
+
+.fd-slider-vertical .fd-slider-disabled .fd-slider-handle
+ {
+ }
+.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-handle
+ {
+ }
+*/
+/*
+ Element: Inner track bar
+ Orientation: Horizontal
+ State: disabled
+*/
.fd-slider-disabled .fd-slider-bar
{
- /* Default cursor */
cursor:auto !important;
- /* non rgba aware browsers fallback to the following border rules */
border:1px solid #888;
border-bottom:1px solid #999;
border-right:1px solid #999;
- /* rgba aware browsers get the following border rules */
border:1px solid rgba(136,136,136,.8);
border-bottom:1px solid rgba(153,153,153,.8);
border-right:1px solid rgba(153,153,153,.8);
- /* Black background */
- background-color: #222;
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(left, #222, #000);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, left top, right top, from(#222), to(#000));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -webkit-linear-gradient(left, #222, #000);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(left, #222, #000);
+ background-color:#555;
+ background-image: -webkit-gradient(linear, left top, right top, from(#666), to(#333));
+ background-image: -webkit-linear-gradient(left, #666, #333);
+ background-image: -moz-linear-gradient(left, #666, #333);
+ background-image: -ms-linear-gradient(left, #666, #333);
+ background-image: -o-linear-gradient(left, #666, #333);
+ background-image: linear-gradient(to right, #666, #333);
}
-/* Vertical disabled track bar */
-.fd-slider-vertical.fd-slider-disabled .fd-slider-bar
+/*
+ Element: Inner track bar
+ Orientation: Vertical
+ State: disabled
+*/
+.fd-slider-vertical .fd-slider-disabled .fd-slider-bar
{
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(top, #000, #222);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, left top, right bottom, from(#000), to(#222));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -webkit-linear-gradient(top, #000, #222);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(top, #000, #222);
+ background-image: -webkit-gradient(linear, left top, right bottom, from(#333), to(#666));
+ background-image: -webkit-linear-gradient(top, #333, #666);
+ background-image: -moz-linear-gradient(top, #333, #666);
+ background-image: -ms-linear-gradient(top, #333, #666);
+ background-image: -o-linear-gradient(top, #333, #666);
+ background-image: linear-gradient(to bottom, #333, #666);
}
/*
-
-IE6
----
-
-IE6 sees this rule as being ".oldie .fd-slider-disabled .fd-slider-bar"
-
+ Element: Inner track bar
+ Orientation: Horizontal
+ State: disabled
+ Notes: IE6, 7 & 8
*/
-.oldie .fd-slider-vertical.fd-slider-disabled .fd-slider-bar
+.oldie .fd-slider-disabled .fd-slider-bar
{
- /* IE 6 + 7 */
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000');
- /* IE8 */
- -ms-filter"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000')";
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333');
}
-/*
-
-IE6
----
-
-The following rule rewrites the above rule as IE6 doesn't understand
-chained classes. This limits us to serving the same rule to IE6 for
-both horizontal and vertical sliders
-
+/*
+ Element: Inner track bar
+ Orientation: Vertical
+ State: disabled
+ Notes: IE6, 7 & 8
*/
-.oldie .fd-slider-disabled .fd-slider-bar
+.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-bar
{
- /* IE 6 + 7 */
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000');
- /* IE8 */
- -ms-filter"filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000')";
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333');
}
-/* Disabled range bar */
+/*
+ Element: Range bar
+ Orientation: Horizontal
+ State: disabled
+*/
.fd-slider-disabled .fd-slider-range
{
cursor:auto !important;
- background-color: #555;
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(left, #666, #333);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, left top, right top, from(#666), to(#333));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -webkit-linear-gradient(left, #666, #333);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(left, #666, #333);
+ background-color:#222;
+ background-image: -webkit-gradient(linear, left top, right top, from(#222), to(#000));
+ background-image: -webkit-linear-gradient(left, #222, #000);
+ background-image: -moz-linear-gradient(left, #222, #000);
+ background-image: -ms-linear-gradient(left, #222, #000);
+ background-image: -o-linear-gradient(left, #222, #000);
+ background-image: linear-gradient(to right, #222, #000);
}
-/* Vertical disabled range bar */
-.fd-slider-vertical.fd-slider-disabled .fd-slider-range
+/*
+ Element: Range bar
+ Orientation: Horizontal
+ State: disabled
+ Notes: IE6, 7 & 8
+*/
+.oldie .fd-slider-disabled .fd-slider-range
{
- /* Firefox 3.6+ */
- background-image: -moz-linear-gradient(top, #333, #666);
- /* Safari 4+, Chrome 1+ */
- background-image: -webkit-gradient(linear, left top, right bottom, from(#333), to(#666));
- /* Safari 5.1+, Chrome 10+ */
- background-image: -webkit-linear-gradient(top, #333, #666);
- /* Opera 11.10+ */
- background-image: -o-linear-gradient(top, #333, #666);
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000');
}
-.oldie .fd-slider-vertical.fd-slider-disabled .fd-slider-range
+/*
+ Element: Range bar
+ Orientation: Vertical
+ State: disabled
+*/
+.fd-slider-vertical .fd-slider-disabled .fd-slider-range
{
- /* IE 6 + 7 */
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333');
- /* IE8 */
- -ms-filter:"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333')";
+ background-image: -webkit-gradient(linear, left top, right bottom, from(#000), to(#222));
+ background-image: -webkit-linear-gradient(top, #000, #222);
+ background-image: -moz-linear-gradient(top, #000, #222);
+ background-image: -ms-linear-gradient(top, #000, #222);
+ background-image: -o-linear-gradient(top, #000, #222);
+ background-image: linear-gradient(to bottom, #000, #222);
}
-.oldie .fd-slider-disabled .fd-slider-range
+/*
+ Element: Range bar
+ Orientation: Vertical
+ State: disabled
+ Notes: IE6, 7 & 8
+*/
+.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-range
{
- /* IE 6 + 7 */
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333');
- /* IE8 */
- -ms-filter:"filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333')";
- }
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000');
+ }
+/*
+ The various prefixed keyframe rules for the glow effect used whenever
+ the slider gains keyboard focus
+*/
+@-webkit-keyframes fd-pulse {
+0% {
+ box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
+ }
+20% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+40% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+60% {
+ box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
+ }
+80% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+100% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+}
+@-moz-keyframes fd-pulse {
+0% {
+ box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
+ }
+20% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+40% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+60% {
+ box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
+ }
+80% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+100% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+}
+@-ms-keyframes fd-pulse {
+0% {
+ box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
+ }
+20% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+40% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+60% {
+ box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
+ }
+80% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+100% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+}
+@-o-keyframes fd-pulse {
+0% {
+ box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
+ }
+20% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+40% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+60% {
+ box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
+ }
+80% {
+ box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
+ }
+100% {
+ box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
+ }
+}
View
184 index.html
@@ -1,5 +1,9 @@
<!doctype html>
-<!-- The script automatically adds the class "oldie" to the html element in IE < 9 -->
+<!--
+
+The script automatically adds the class "oldie" to the html element in IE < 9
+
+-->
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -8,7 +12,15 @@
<meta name="description" content="An accessible, unobtrusive Slider/HTML5 Input Range polyfill script" />
<meta http-equiv="imagetoolbar" content="no" />
- <link rel="stylesheet" type="text/css" media="screen, projection" href="./css/fd-slider.css" />
+ <!--
+
+ I'm using a CSS file generated specifically for use on my server. Please
+ generate a file for your own project using:
+
+ http://www.frequency-decoder.com/demo/fd-slider/css-generator/
+
+ -->
+ <link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.frequency-decoder.com/demo/fd-slider/css/fd-slider.mhtml.min.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/demo.css" />
<script src="./js/fd-slider.js"></script>
</head>
@@ -17,24 +29,39 @@
<form action="" method="post">
<h1>Accessible, Unobtrusive &#8220;Slider/HTML5 range polyfill&#8221; Demo</h1>
<h2>Keyboard Controls</h2>
- <!-- The following paragraph is used to set the ARIA describedby property -->
+ <!--
+
+ The following paragraph is used to set the ARIA describedby property
+
+ -->
<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>
<h2>Mixed HTML5 Polyfill &amp; Javascript API Creation Demos</h2>
<h3>&#8230;as usual, &#8220;View Source&#8221; is your friend</h3>
<fieldset>
<legend>HTML5 input type="range" polyfill tests</legend>
- <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>
- <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>
+ <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>
+ <p>See the <a href="./yepnope/">Modernizr/yepnope</a> demo for a better example on how to include the CSS and JS files when using the polyfill.</p>
<!--
- Sliders #1, #2 & #3 created automatically by the script on page load only if the browser does not support type="range".
- The script will use the "min", "max" and "step" attributes assigned to the input to create the slider with the
- appropriate scale.
+ Sliders #1, #2 #3 & #4 created automatically by the script on page load
+ only if the browser does not support type="range".
+
+ The script will use the "min", "max" and "step" attributes assigned to the
+ input to create the slider with the appropriate scale.
Slider #1: "min", "max" & "step" attributes given
-->
+ <pre><code>&lt;input type="range"
+ name="html5shim-1"
+ id="html5shim-1"
+ min="-10"
+ max="10"
+ step="0.20"
+ value="8.2"
+ title="Range: -10 to 10 in steps of 0.2" /&gt;</code></pre>
+
<label for="html5shim-1">Range: -10 to 10 in steps of 0.2</label>
<p>
<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" />
@@ -43,12 +70,20 @@
</p>
<!--
- Slider #2: No "min" or "max" attributes given (they default to 0 and 100 respectivey) but the required "step" attribute set to "1".
+ Slider #2: No "min" or "max" attributes given (they default to 0 and 100
+ respectivey) but the required "step" attribute set to "1".
- Additionally, an onchange event has been set to test if the script honours HTML events set on the original input.
+ Additionally, an onchange event has been set to test if the script honours
+ HTML events set on the original Input.
-->
<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>
+ <pre><code>&lt;input type="range"
+ name="html5shim-2"
+ id="html5shim-2"
+ step="1"
+ value="75"
+ title="Range: 0 to 100 in steps of 1" /&gt;</code></pre>
<label for="html5shim-2">Range: 0 to 100 in steps of 1 <span id="html5shim-2-out"></span></label>
<p>
<input name="html5shim-2" id="html5shim-2" type="range" step="1" title="Range: 0 to 100 in steps of 1" value="75" />
@@ -56,43 +91,68 @@
<a href="#" onclick="document.getElementById('html5shim-2').stepDown(); return false;"><code>stepDown()</code></a>
</p>
<script>
- // Add an onchange event to the input element that updates a span with the input value
+ // Add an onchange event to the input element that updates a span with the
+ // input value
fdSlider.addEvent(document.getElementById("html5shim-2"), "change", function(e) {
document.getElementById("html5shim-2-out").innerHTML = "(Current Value: " + document.getElementById("html5shim-2").value + ")";
});
</script>
<!--
- Slider #3: The input element has been given the "data-fd-slider-vertical" custom data- attribute which makes the script create
- a vertical slider. Additionally, the value of this attribute is given to the slider as a classname - in this case, the class "v-s"
- which makes the slider inherit a height of 300px.
+ Slider #3: The input element has been given the "data-fd-slider-vertical"
+ custom data- attribute which makes the script create a vertical slider.
+ Additionally, the value of this attribute is given to the slider as a
+ classname - in this case, the class "v-s" which makes the slider inherit
+ a height of 300px.
-->
<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.
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>
+ <pre><code>&lt;input type="range"
+ name="html5shim-3"
+ id="html5shim-3"
+ data-fd-slider-vertical="v-s"
+ min="100"
+ max="0"
+ step="1"
+ value="50"
+ title="Range: 100 to 0 in steps of 1" /&gt;
+&lt;style&gt;.v-s { height:300px }&lt;/style&gt;</code></pre>
+</code></pre>
<label for="html5shim-3">Range: 100 to 0 in steps of 1</label>
<p>
- <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="" />
+ <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="50" />
<a href="#" onclick="document.getElementById('html5shim-3').stepUp(); return false;"><code>stepUp()</code></a>
<a href="#" onclick="document.getElementById('html5shim-3').stepDown(); return false;"><code>stepDown()</code></a>
</p>
<!--
- Slider #4: CSS has been used to make the following input element 400 pixels in height and 20 pixels wide, which instructs
- the script automatically create a vertical slider
+ Slider #4: CSS has been used to make the following input element 400
+ pixels in height and 20 pixels wide, which instructs the script to
+ automatically create a vertical slider.
-->
<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>
+ <pre><code>&lt;input type="range"
+ name="html5shim-4"
+ id="html5shim-4"
+ min="100"
+ max="0"
+ step="1"
+ value="50"
+ title="Range: 100 to 0 in steps of 1" /&gt;
+&lt;style&gt;#html5shim-4 { height:400px }&lt;/style&gt;</code></pre>
<label for="html5shim-4">Range: 100 to 0 in steps of 1</label>
<p>
- <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="" />
+ <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="50" />
<a href="#" onclick="document.getElementById('html5shim-4').stepUp(); return false;"><code>stepUp()</code></a>
<a href="#" onclick="document.getElementById('html5shim-4').stepDown(); return false;"><code>stepDown()</code></a>
</p>
</fieldset>
<!--
- Sliders created using the Javascript API from here on in i.e. no more HTML5 range polyfills from this point on.
+ Sliders created using the Javascript API from here on in i.e. no more HTML5
+ range polyfills from this point on.
-->
<fieldset>
@@ -100,7 +160,11 @@
<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>
<label for="inputTest3">Range: -10 to 10 in steps of 0.5</label>
<p>
- <!-- Here's the form element we will associate the first slider with. -->
+ <!--
+
+ Here's the form element we will associate the first slider with.
+
+ -->
<input name="inputTest3" id="inputTest3" type="text" title="Range: -10 to 10 in steps of 0.5" value="" maxlength="6" />
<a href="#" onclick="fdSlider.disable('inputTest3'); return false;">Disable</a>
<a href="#" onclick="fdSlider.enable('inputTest3'); return false;">Enable</a>
@@ -108,11 +172,12 @@
<script>
// Call the fdSlider.createSlider method, passing in the required options
fdSlider.createSlider({
- // Associate an input
+ // Associate the form element
inp:document.getElementById("inputTest3"),
- // Declare a step (quoting the value means the precision will be calculated as 2 decimal points
- // e.g. the "50" part of "0.50") which is a short-cut way of setting the precision without
- // actually using the "precision" parameter
+ // Declare a step (quoting the value means the precision will be
+ // calculated as 2 decimal points e.g. the "50" part of "0.50") which is
+ // a short-cut way of setting the precision without actually using the
+ // "precision" parameter
step:"0.50",
// Declare a maxStep (for keyboard users)
maxStep:2,
@@ -126,7 +191,11 @@
<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>
<label for="inputTest5">Range: 5 to 15 in steps of 0.2 with a (50:13) scale</label>
<p>
- <!-- Here's the form element we will associate the second slider with. -->
+ <!--
+
+ Here's the form element we will associate the second slider with.
+
+ -->
<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" />
</p>
<script>
@@ -141,7 +210,8 @@
min:5,
// Max value
max:15,
- // Define a scale (multiple points supported, I'm just using one for the demo)
+ // Define a scale (multiple points supported, I'm just using one for the
+ // demo)
scale:{
// At 50% of the slider scale, the value should be 13
"50":"13"
@@ -150,36 +220,17 @@
animation:"jump"
});
</script>
- <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>
+ <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>
<label for="inputTest6" id="inputTest6Label">Range: 5 to 15 in steps of 0.2</label>
<p>
- <!-- Here's the form element we will associate the third slider with. -->
+ <!--
+
+ Here's the form element we will associate the third slider with.
+
+ -->
<input name="inputTest6" id="inputTest6" type="text" title="Range: 5 to 15 in steps of 0.2" value="" maxlength="6" />
</p>
<script>
- // Create our callback functions
-
- // createScaffold, used with the "create" event
- function createScaffold(cbObj) {
- // Create a span
- var span = document.createElement("span");
- // Use the input ID to create an identifiable ID for the span
- span.id = cbObj.elem.id + "Visu";
- // Give it a className
- span.className = "visu";
- // Add it just after the input in the DOM
- cbObj.elem.parentNode.appendChild(span);
- // Hide the associated input
- cbObj.elem.style.display = "none";
- // Update the span we just added
- updateValue(cbObj);
- }
- // updateValue, used with the "change" event
- function updateValue(cbObj) {
- // Grab the span element and update its contents
- document.getElementById(cbObj.elem.id + "Visu").innerHTML = cbObj.value;
- }
- // Create the slider
fdSlider.createSlider({
// Associate an input
inp:document.getElementById("inputTest6"),
@@ -194,21 +245,18 @@
// Use the "tween to click point" animation
animation:"tween",
// Force the associated input to have a valid value
- forceValue:true,
- // Pass the two previously defined functions for the "create" & "change"
- // events
- callbacks:{
- // Pass an Array of functions - if multiple functions declared,
- // they will be called in sequence
- "create":[createScaffold],
- "change":[updateValue]
- }
+ forceValue:true
});
</script>
<p>The following slider has been associated with a <code>&lt;select&gt;</code>.</p>
<label for="selectTest1" id="selectTest1Label">Select List with eight options</label>
<p>
- <!-- Here's the form element - a select list in this case - that we will associate the forth and final slider with. -->
+ <!--
+
+ Here's the form element - a select list in this case - that we will
+ associate the forth and final slider with.
+
+ -->
<select name="selectTest1" id="selectTest1">
<option value="1">One</option>
<option value="2">Two</option>
@@ -233,18 +281,17 @@
hideInput:false,
// Create a vertical slider
vertical:true,
- // Give it the className "v-s2" which will make the slider 160px in height
+ // Give it the className "v-s2" which will make the slider 160px high
classNames:"v-s2"
});
</script>
</fieldset>
<fieldset>
- <legend>Dynamic creation test</legend>
- <p>Testing the dynamic creation of non-polyfill sliders.</p>
+ <legend>Dynamic Creation</legend>
<div id="corral">
<input name="dyn-1" id="dyn-1" type="text" title="Range: 5 to 15 in steps of 0.2" value="" maxlength="6" />
</div>
- <button onclick="createNewSlider(); return false;">Create New Slider</button>
+ <button onclick="createNewSlider(); return false;">Create New slider</button>