Demos: Cleanup.

author: Scott González <scott.gonzalez@gmail.com> 2012-09-10 11:33:46 -0400
committer: Scott González <scott.gonzalez@gmail.com> 2012-09-10 11:33:46 -0400
commit: 303f20e1b3c977d75047bed1a3533a180d73fab5 (patch)
tree: c8cf97b57f2493313dfd92c1dfceedb29d137d67 /demos/slider
parent: 9e259c6e5369bf272dd14df7aea1372c5b064300 (diff)
download: jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz
jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip
13 files changed, 39 insertions, 215 deletions
diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html
index 2b7906f09..34d43a9f1 100644
--- a/demos/slider/colorpicker.html
+++ b/demos/slider/colorpicker.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -30,7 +30,6 @@
 	#green .ui-slider-handle { border-color: #8ae234; }
 	#blue .ui-slider-range { background: #729fcf; }
 	#blue .ui-slider-handle { border-color: #729fcf; }
-	#demo-frame > div.demo { padding: 10px !important; };
 	</style>
 	<script>
 	function hexFromRGB(r, g, b) {
@@ -70,8 +69,6 @@
 </head>
 <body class="ui-widget-content" style="border:0;">
 
-<div class="demo">
-
 <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
 	<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
 	Simple Colorpicker
@@ -83,13 +80,8 @@
 
 <div id="swatch" class="ui-widget-content ui-corner-all"></div>
 
-</div><!-- End demo -->
-
-
-
-<div class="demo-description" style="clear:left;">
+<div class="demo-description">
 <p>Combine three sliders to create a simple RGB colorpicker.</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/default.html b/demos/slider/default.html
index 43a0b1208..1c9350239 100644
--- a/demos/slider/default.html
+++ b/demos/slider/default.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8" >
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; }
-	</style>
 	<script>
 	$(function() {
 		$( "#slider" ).slider();
@@ -21,17 +18,10 @@
 </head>
 <body>
 
-<div class="demo">
-
 <div id="slider"></div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/hotelrooms.html b/demos/slider/hotelrooms.html
index cad838bf7..f0a2aa953 100644
--- a/demos/slider/hotelrooms.html
+++ b/demos/slider/hotelrooms.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; };
-	</style>
 	<script>
 	$(function() {
 		var select = $( "#minbeds" );
@@ -33,8 +30,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <form id="reservation">
 	<label for="minbeds">Minimum number of beds</label>
 	<select name="minbeds" id="minbeds">
@@ -47,13 +42,8 @@
 	</select>
 </form>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/index.html b/demos/slider/index.html
index caf68fe97..2d05bb58b 100644
--- a/demos/slider/index.html
+++ b/demos/slider/index.html
@@ -1,29 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>jQuery UI Slider Demos</title>
-	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>
 
-<div class="demos-nav">
-	<h4>Examples</h4>
-	<ul>
-		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
-		<li><a href="steps.html">Snap to increments</a></li>
-		<li><a href="range.html">Range slider</a></li>
-		<li><a href="rangemin.html">Range with fixed minimum</a></li>
-		<li><a href="hotelrooms.html">Room reservation</a></li>
-		<li><a href="rangemax.html">Range with fixed maximum</a></li>
-		<li><a href="slider-vertical.html">Vertical slider</a></li>
-		<li><a href="range-vertical.html">Vertical range slider</a></li>
-		<li><a href="multiple-vertical.html">Multiple sliders</a></li>
-		<li><a href="colorpicker.html">Simple colorpicker</a></li>
-		<li><a href="side-scroll.html">Simple scrollbar</a></li>
-		<li><a href="tabs.html">Slider controls tabs</a></li>
-	</ul>
-</div>
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="steps.html">Snap to increments</a></li>
+	<li><a href="range.html">Range slider</a></li>
+	<li><a href="rangemin.html">Range with fixed minimum</a></li>
+	<li><a href="hotelrooms.html">Room reservation</a></li>
+	<li><a href="rangemax.html">Range with fixed maximum</a></li>
+	<li><a href="slider-vertical.html">Vertical slider</a></li>
+	<li><a href="range-vertical.html">Vertical range slider</a></li>
+	<li><a href="multiple-vertical.html">Multiple sliders</a></li>
+	<li><a href="colorpicker.html">Simple colorpicker</a></li>
+	<li><a href="side-scroll.html">Simple scrollbar</a></li>
+</ul>
 
 </body>
 </html>
diff --git a/demos/slider/multiple-vertical.html b/demos/slider/multiple-vertical.html
index f154d1de4..5468cfd09 100644
--- a/demos/slider/multiple-vertical.html
+++ b/demos/slider/multiple-vertical.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -11,7 +11,6 @@
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
-	#demo-frame > div.demo { padding: 10px !important; }
 	#eq span {
 		height:120px; float:left; margin:15px
 	}
@@ -39,9 +38,7 @@
 	});
 	</script>
 </head>
-<body class="ui-widget-content" style="border:0;">
-
-<div class="demo">
+<body>
 
 <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
 	<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
@@ -65,13 +62,8 @@
 	<span>70</span>
 </div>
 
-</div><!-- End demo -->
-
-
-
-<div class="demo-description" style="clear:left;">
+<div class="demo-description">
 <p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/range-vertical.html b/demos/slider/range-vertical.html
index b5c2f3303..fd8defcf5 100644
--- a/demos/slider/range-vertical.html
+++ b/demos/slider/range-vertical.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; };
-	</style>
 	<script>
 	$(function() {
 		$( "#slider-range" ).slider({
@@ -30,8 +27,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <p>
 	<label for="amount">Target sales goal (Millions):</label>
 	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
@@ -39,13 +34,8 @@
 
 <div id="slider-range" style="height:250px;"></div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>Change the orientation of the range slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/range.html b/demos/slider/range.html
index bfb699b55..5aa234ec0 100644
--- a/demos/slider/range.html
+++ b/demos/slider/range.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; };
-	</style>
 	<script>
 	$(function() {
 		$( "#slider-range" ).slider({
@@ -31,8 +28,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <p>
 	<label for="amount">Price range:</label>
 	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
@@ -40,13 +35,8 @@
 
 <div id="slider-range"></div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html
index f313e193e..c205aeec8 100644
--- a/demos/slider/rangemax.html
+++ b/demos/slider/rangemax.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; };
-	</style>
 	<script>
 	$(function() {
 		$( "#slider-range-max" ).slider({
@@ -30,21 +27,14 @@
 </head>
 <body>
 
-<div class="demo">
-
 <p>
 	<label for="amount">Minimum number of bedrooms:</label>
 	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
 </p>
 <div id="slider-range-max"></div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>Fix the maximum value of the range slider so that the user can only select a minimum.  Set the <code>range</code> option to "max."</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html
index 992ed2918..44460522a 100644
--- a/demos/slider/rangemin.html
+++ b/demos/slider/rangemin.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; };
-	</style>
 	<script>
 	$(function() {
 		$( "#slider-range-min" ).slider({
@@ -30,8 +27,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <p>
 	<label for="amount">Maximum price:</label>
 	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
@@ -39,13 +34,8 @@
 
 <div id="slider-range-min"></div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>Fix the minimum value of the range slider so that the user can only select a maximum.  Set the <code>range</code> option to "min."</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html
index 84cd54a80..f6b2ae335 100644
--- a/demos/slider/side-scroll.html
+++ b/demos/slider/side-scroll.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -11,7 +11,6 @@
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
-	#demo-frame > div.demo { padding: 10px !important; }
 	.scroll-pane { overflow: auto; width: 99%; float:left; }
 	.scroll-content { width: 2440px; float: left; }
 	.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
@@ -98,8 +97,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
 	<div class="scroll-content">
 		<div class="scroll-content-item ui-widget-header">1</div>
@@ -128,13 +125,8 @@
 	</div>
 </div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/slider-vertical.html b/demos/slider/slider-vertical.html
index 3a4c10f46..ee2be1817 100644
--- a/demos/slider/slider-vertical.html
+++ b/demos/slider/slider-vertical.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; };
-	</style>
 	<script>
 	$(function() {
 		$( "#slider-vertical" ).slider({
@@ -31,8 +28,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <p>
 	<label for="amount">Volume:</label>
 	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
@@ -40,13 +35,8 @@
 
 <div id="slider-vertical" style="height:200px;"></div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>Change the orientation of the slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/steps.html b/demos/slider/steps.html
index 93589f546..ae7eccfba 100644
--- a/demos/slider/steps.html
+++ b/demos/slider/steps.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -10,9 +10,6 @@
 	<script src="../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../ui/jquery.ui.slider.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; };
-	</style>
 	<script>
 	$(function() {
 		$( "#slider" ).slider({
@@ -30,8 +27,6 @@
 </head>
 <body>
 
-<div class="demo">
-
 <p>
 	<label for="amount">Donation amount ($50 increments):</label>
 	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
@@ -39,13 +34,8 @@
 
 <div id="slider"></div>
 
-</div><!-- End demo -->
-
-
-
 <div class="demo-description">
 <p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value.  The default increment is 1.</p>
-</div><!-- End demo-description -->
-
+</div>
 </body>
 </html>
diff --git a/demos/slider/tabs.html b/demos/slider/tabs.html
deleted file mode 100644
index c7c169567..000000000
--- a/demos/slider/tabs.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="utf-8">
-	<title>jQuery UI Slider - Snap to increments</title>
-	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
-	<script src="../../jquery-1.8.0.js"></script>
-	<script src="../../ui/jquery.ui.core.js"></script>
-	<script src="../../ui/jquery.ui.widget.js"></script>
-	<script src="../../ui/jquery.ui.mouse.js"></script>
-	<script src="../../ui/jquery.ui.tabs.js"></script>
-	<script src="../../ui/jquery.ui.slider.js"></script>
-	<link rel="stylesheet" href="../demos.css">
-	<style>
-	#demo-frame > div.demo { padding: 10px !important; }
-	</style>
-	<script>
-	$(function() {
-		$( "#tabs" ).tabs({
-			select: function( event, ui ) {
-				$( "#slider" ).slider( "value", ui.index );
-			}
-		});
-		$( "#slider" ).slider({
-			min: 0,
-			max: $( "#tabs" ).tabs( "length" ) - 1,
-			slide: function( event, ui ) {
-				$( "#tabs" ).tabs( "select", ui.value );
-			}
-		});
-	});
-	</script>
-</head>
-<body>
-
-<div class="demo">
-
-<div id="slider" style="width:100px"></div>
-
-<div id="tabs">
-	<ul>
-		<li><a href="#tabs-1">Nunc tincidunt</a></li>
-		<li><a href="#tabs-2">Proin dolor</a></li>
-		<li><a href="#tabs-3">Aenean lacinia</a></li>
-	</ul>
-	<div id="tabs-1">
-		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
-	</div>
-	<div id="tabs-2">
-		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
-	</div>
-	<div id="tabs-3">
-		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
-		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
-	</div>
-</div>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-<p>Control tabs with a slider.</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
author	Scott González <scott.gonzalez@gmail.com>	2012-09-10 11:33:46 -0400
committer	Scott González <scott.gonzalez@gmail.com>	2012-09-10 11:33:46 -0400
commit	303f20e1b3c977d75047bed1a3533a180d73fab5 (patch)
tree	c8cf97b57f2493313dfd92c1dfceedb29d137d67 /demos/slider
parent	9e259c6e5369bf272dd14df7aea1372c5b064300 (diff)
download	jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip