aboutsummaryrefslogtreecommitdiffstats
path: root/demos/slider
diff options
context:
space:
mode:
authorRichard Worth <rdworth@gmail.com>2009-03-03 10:38:12 +0000
committerRichard Worth <rdworth@gmail.com>2009-03-03 10:38:12 +0000
commitaacb34f437811a69be360acde6b52c36fdcf8bff (patch)
treecdaf614a11e3ba9e9735a4bee0b26670b3cd75ff /demos/slider
parent6d8e662744a84da8dd4f2dd051ab014cbcd723d1 (diff)
downloadjquery-ui-aacb34f437811a69be360acde6b52c36fdcf8bff.tar.gz
jquery-ui-aacb34f437811a69be360acde6b52c36fdcf8bff.zip
demos: removed Slider 'Simple scrollbar' and Tabs 'Simple manipulation' for now as both have issues in Safari
Diffstat (limited to 'demos/slider')
-rw-r--r--demos/slider/index.html1
-rw-r--r--demos/slider/side-scroll.html135
2 files changed, 0 insertions, 136 deletions
diff --git a/demos/slider/index.html b/demos/slider/index.html
index 19b9fea96..9a010a5d3 100644
--- a/demos/slider/index.html
+++ b/demos/slider/index.html
@@ -18,7 +18,6 @@
<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>
</div>
diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html
deleted file mode 100644
index 5357eb18c..000000000
--- a/demos/slider/side-scroll.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-07 05:12:23 +0000