reverted r2179 (demos: removed Slider 'Simple scrollbar' and Tabs 'Simple manipulation' for now as both have issues in Safari) restoring broken demos to trunk so they can be worked on for the next release (1.7.1)

author: Richard Worth <rdworth@gmail.com> 2009-03-03 11:15:16 +0000
committer: Richard Worth <rdworth@gmail.com> 2009-03-03 11:15:16 +0000
commit: c701c7126cadee162f7783ae0d5b6003ca9e1b16 (patch)
tree: 14c8abb71cc44b719b98fe0e8f97b03eff7da272 /demos/slider/side-scroll.html
parent: f291a813115b8b25d11f542ba2d4353189a868d4 (diff)
download: jquery-ui-c701c7126cadee162f7783ae0d5b6003ca9e1b16.tar.gz
jquery-ui-c701c7126cadee162f7783ae0d5b6003ca9e1b16.zip
1 files changed, 135 insertions, 0 deletions
diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html
new file mode 100644
index 000000000..5357eb18c
--- /dev/null
+++ b/demos/slider/side-scroll.html
@@ -0,0 +1,135 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Slider - Slider scrollbar</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<style type="text/css">
+		#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; }
+		* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
+		.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
+		.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
+		.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
+		.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
+		.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
+	</style>
+	<script type="text/javascript">
+	$(function() {
+		//scrollpane parts
+		var scrollPane = $('.scroll-pane');
+		var scrollContent = $('.scroll-content');
+		
+		//build slider
+		var scrollbar = $(".scroll-bar").slider({
+			slide:function(e, ui){
+				if( scrollContent.width() > scrollPane.width() ){ scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); }
+				else { scrollContent.css('margin-left', 0); }
+			}
+		});
+		
+		//append icon to handle
+		var handleHelper = scrollbar.find('.ui-slider-handle')
+		.mousedown(function(){
+			scrollbar.width( handleHelper.width() );
+		})
+		.mouseup(function(){
+			scrollbar.width( '100%' );
+		})
+		.append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
+		.wrap('<div class="ui-handle-helper-parent"></div>').parent();
+		
+		//change overflow to hidden now that slider handles the scrolling
+		scrollPane.css('overflow','hidden');
+		
+		//size scrollbar and handle proportionally to scroll distance
+		function sizeScrollbar(){
+			var remainder = scrollContent.width() - scrollPane.width();
+			var proportion = remainder / scrollContent.width();
+			var handleSize = scrollPane.width() - (proportion * scrollPane.width());
+			scrollbar.find('.ui-slider-handle').css({
+				width: handleSize,
+				'margin-left': -handleSize/2
+			});
+			handleHelper.width('').width( scrollbar.width() - handleSize);
+		}
+		
+		//reset slider value based on scroll content position
+		function resetValue(){
+			var remainder = scrollPane.width() - scrollContent.width();
+			var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
+			var percentage = Math.round(leftVal / remainder * 100);
+			scrollbar.slider("value", percentage);
+		}
+		//if the slider is 100% and window gets larger, reveal content
+		function reflowContent(){
+				var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
+				var gap = scrollPane.width() - showing;
+				if(gap > 0){
+					scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
+				}
+		}
+		
+		//change handle position on window resize
+		$(window)
+		.resize(function(){
+				resetValue();
+				sizeScrollbar();
+				reflowContent();
+		});
+		//init scrollbar size
+		setTimeout(sizeScrollbar,10);//safari wants a timeout
+	});
+	</script>
+</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>
+		<div class="scroll-content-item ui-widget-header">2</div>
+		<div class="scroll-content-item ui-widget-header">3</div>
+		<div class="scroll-content-item ui-widget-header">4</div>
+		<div class="scroll-content-item ui-widget-header">5</div>
+		<div class="scroll-content-item ui-widget-header">6</div>
+		<div class="scroll-content-item ui-widget-header">7</div>
+		<div class="scroll-content-item ui-widget-header">8</div>
+		<div class="scroll-content-item ui-widget-header">9</div>
+		<div class="scroll-content-item ui-widget-header">10</div>
+		<div class="scroll-content-item ui-widget-header">11</div>
+		<div class="scroll-content-item ui-widget-header">12</div>
+		<div class="scroll-content-item ui-widget-header">13</div>
+		<div class="scroll-content-item ui-widget-header">14</div>
+		<div class="scroll-content-item ui-widget-header">15</div>
+		<div class="scroll-content-item ui-widget-header">16</div>
+		<div class="scroll-content-item ui-widget-header">17</div>
+		<div class="scroll-content-item ui-widget-header">18</div>
+		<div class="scroll-content-item ui-widget-header">19</div>
+		<div class="scroll-content-item ui-widget-header">20</div>
+	</div>
+	<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
+		<div class="scroll-bar"></div>
+	</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 -->
+
+</body>
+</html>
author	Richard Worth <rdworth@gmail.com>	2009-03-03 11:15:16 +0000
committer	Richard Worth <rdworth@gmail.com>	2009-03-03 11:15:16 +0000
commit	c701c7126cadee162f7783ae0d5b6003ca9e1b16 (patch)
tree	14c8abb71cc44b719b98fe0e8f97b03eff7da272 /demos/slider/side-scroll.html
parent	f291a813115b8b25d11f542ba2d4353189a868d4 (diff)
download	jquery-ui-c701c7126cadee162f7783ae0d5b6003ca9e1b16.tar.gz jquery-ui-c701c7126cadee162f7783ae0d5b6003ca9e1b16.zip