| 1 | <!DOCTYPE html> |
|---|
| 2 | <html lang="en"> |
|---|
| 3 | <head> |
|---|
| 4 | <meta charset="utf-8"> |
|---|
| 5 | <title>jQuery UI Slider - Slider scrollbar</title> |
|---|
| 6 | <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> |
|---|
| 7 | <script src="../../jquery-1.7.1.js"></script> |
|---|
| 8 | <script src="../../ui/jquery.ui.core.js"></script> |
|---|
| 9 | <script src="../../ui/jquery.ui.widget.js"></script> |
|---|
| 10 | <script src="../../ui/jquery.ui.mouse.js"></script> |
|---|
| 11 | <script src="../../ui/jquery.ui.slider.js"></script> |
|---|
| 12 | <link rel="stylesheet" href="../demos.css"> |
|---|
| 13 | <style> |
|---|
| 14 | #demo-frame > div.demo { padding: 10px !important; } |
|---|
| 15 | .scroll-pane { overflow: auto; width: 99%; float:left; } |
|---|
| 16 | .scroll-content { width: 2440px; float: left; } |
|---|
| 17 | .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } |
|---|
| 18 | * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */ |
|---|
| 19 | .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } |
|---|
| 20 | .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } |
|---|
| 21 | .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } |
|---|
| 22 | .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } |
|---|
| 23 | .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } |
|---|
| 24 | </style> |
|---|
| 25 | <script> |
|---|
| 26 | $(function() { |
|---|
| 27 | //scrollpane parts |
|---|
| 28 | var scrollPane = $( ".scroll-pane" ), |
|---|
| 29 | scrollContent = $( ".scroll-content" ); |
|---|
| 30 | |
|---|
| 31 | //build slider |
|---|
| 32 | var scrollbar = $( ".scroll-bar" ).slider({ |
|---|
| 33 | slide: function( event, ui ) { |
|---|
| 34 | if ( scrollContent.width() > scrollPane.width() ) { |
|---|
| 35 | scrollContent.css( "margin-left", Math.round( |
|---|
| 36 | ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) |
|---|
| 37 | ) + "px" ); |
|---|
| 38 | } else { |
|---|
| 39 | scrollContent.css( "margin-left", 0 ); |
|---|
| 40 | } |
|---|
| 41 | } |
|---|
| 42 | }); |
|---|
| 43 | |
|---|
| 44 | //append icon to handle |
|---|
| 45 | var handleHelper = scrollbar.find( ".ui-slider-handle" ) |
|---|
| 46 | .mousedown(function() { |
|---|
| 47 | scrollbar.width( handleHelper.width() ); |
|---|
| 48 | }) |
|---|
| 49 | .mouseup(function() { |
|---|
| 50 | scrollbar.width( "100%" ); |
|---|
| 51 | }) |
|---|
| 52 | .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) |
|---|
| 53 | .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); |
|---|
| 54 | |
|---|
| 55 | //change overflow to hidden now that slider handles the scrolling |
|---|
| 56 | scrollPane.css( "overflow", "hidden" ); |
|---|
| 57 | |
|---|
| 58 | //size scrollbar and handle proportionally to scroll distance |
|---|
| 59 | function sizeScrollbar() { |
|---|
| 60 | var remainder = scrollContent.width() - scrollPane.width(); |
|---|
| 61 | var proportion = remainder / scrollContent.width(); |
|---|
| 62 | var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); |
|---|
| 63 | scrollbar.find( ".ui-slider-handle" ).css({ |
|---|
| 64 | width: handleSize, |
|---|
| 65 | "margin-left": -handleSize / 2 |
|---|
| 66 | }); |
|---|
| 67 | handleHelper.width( "" ).width( scrollbar.width() - handleSize ); |
|---|
| 68 | } |
|---|
| 69 | |
|---|
| 70 | //reset slider value based on scroll content position |
|---|
| 71 | function resetValue() { |
|---|
| 72 | var remainder = scrollPane.width() - scrollContent.width(); |
|---|
| 73 | var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : |
|---|
| 74 | parseInt( scrollContent.css( "margin-left" ) ); |
|---|
| 75 | var percentage = Math.round( leftVal / remainder * 100 ); |
|---|
| 76 | scrollbar.slider( "value", percentage ); |
|---|
| 77 | } |
|---|
| 78 | |
|---|
| 79 | //if the slider is 100% and window gets larger, reveal content |
|---|
| 80 | function reflowContent() { |
|---|
| 81 | var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); |
|---|
| 82 | var gap = scrollPane.width() - showing; |
|---|
| 83 | if ( gap > 0 ) { |
|---|
| 84 | scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); |
|---|
| 85 | } |
|---|
| 86 | } |
|---|
| 87 | |
|---|
| 88 | //change handle position on window resize |
|---|
| 89 | $( window ).resize(function() { |
|---|
| 90 | resetValue(); |
|---|
| 91 | sizeScrollbar(); |
|---|
| 92 | reflowContent(); |
|---|
| 93 | }); |
|---|
| 94 | //init scrollbar size |
|---|
| 95 | setTimeout( sizeScrollbar, 10 );//safari wants a timeout |
|---|
| 96 | }); |
|---|
| 97 | </script> |
|---|
| 98 | </head> |
|---|
| 99 | <body> |
|---|
| 100 | |
|---|
| 101 | <div class="demo"> |
|---|
| 102 | |
|---|
| 103 | <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> |
|---|
| 104 | <div class="scroll-content"> |
|---|
| 105 | <div class="scroll-content-item ui-widget-header">1</div> |
|---|
| 106 | <div class="scroll-content-item ui-widget-header">2</div> |
|---|
| 107 | <div class="scroll-content-item ui-widget-header">3</div> |
|---|
| 108 | <div class="scroll-content-item ui-widget-header">4</div> |
|---|
| 109 | <div class="scroll-content-item ui-widget-header">5</div> |
|---|
| 110 | <div class="scroll-content-item ui-widget-header">6</div> |
|---|
| 111 | <div class="scroll-content-item ui-widget-header">7</div> |
|---|
| 112 | <div class="scroll-content-item ui-widget-header">8</div> |
|---|
| 113 | <div class="scroll-content-item ui-widget-header">9</div> |
|---|
| 114 | <div class="scroll-content-item ui-widget-header">10</div> |
|---|
| 115 | <div class="scroll-content-item ui-widget-header">11</div> |
|---|
| 116 | <div class="scroll-content-item ui-widget-header">12</div> |
|---|
| 117 | <div class="scroll-content-item ui-widget-header">13</div> |
|---|
| 118 | <div class="scroll-content-item ui-widget-header">14</div> |
|---|
| 119 | <div class="scroll-content-item ui-widget-header">15</div> |
|---|
| 120 | <div class="scroll-content-item ui-widget-header">16</div> |
|---|
| 121 | <div class="scroll-content-item ui-widget-header">17</div> |
|---|
| 122 | <div class="scroll-content-item ui-widget-header">18</div> |
|---|
| 123 | <div class="scroll-content-item ui-widget-header">19</div> |
|---|
| 124 | <div class="scroll-content-item ui-widget-header">20</div> |
|---|
| 125 | </div> |
|---|
| 126 | <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> |
|---|
| 127 | <div class="scroll-bar"></div> |
|---|
| 128 | </div> |
|---|
| 129 | </div> |
|---|
| 130 | |
|---|
| 131 | </div><!-- End demo --> |
|---|
| 132 | |
|---|
| 133 | |
|---|
| 134 | |
|---|
| 135 | <div class="demo-description"> |
|---|
| 136 | <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> |
|---|
| 137 | </div><!-- End demo-description --> |
|---|
| 138 | |
|---|
| 139 | </body> |
|---|
| 140 | </html> |
|---|
