library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
568aec62d9
jquery-ui/demos/slider/side-scroll.html

133 lines
5.3 KiB
HTML
Raw Normal View History

Demos: Cleanup.
2012-09-10 15:33:46 +00:00
<!doctype html>
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)
2009-03-03 11:15:16 +00:00
<html lang="en">
<head>
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
<meta charset="utf-8">
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)
2009-03-03 11:15:16 +00:00
<title>jQuery UI Slider - Slider scrollbar</title>
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
Upgrade jQuery to 1.8.2.
2012-09-21 01:41:47 +00:00
<script src="../../jquery-1.8.2.js"></script>
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
<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.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.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%; }
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)
2009-03-03 11:15:16 +00:00
</style>
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
<script>
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)
2009-03-03 11:15:16 +00:00
$(function() {
//scrollpane parts
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
var scrollPane = $( ".scroll-pane" ),
scrollContent = $( ".scroll-content" );
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)
2009-03-03 11:15:16 +00:00
//build slider
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
var scrollbar = $( ".scroll-bar" ).slider({
slide: function( event, 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 );
}
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)
2009-03-03 11:15:16 +00:00
}
});
//append icon to handle
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
var handleHelper = scrollbar.find( ".ui-slider-handle" )
.mousedown(function() {
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)
2009-03-03 11:15:16 +00:00
scrollbar.width( handleHelper.width() );
})
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
.mouseup(function() {
scrollbar.width( "100%" );
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)
2009-03-03 11:15:16 +00:00
})
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
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)
2009-03-03 11:15:16 +00:00
//change overflow to hidden now that slider handles the scrolling
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
scrollPane.css( "overflow", "hidden" );
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)
2009-03-03 11:15:16 +00:00
//size scrollbar and handle proportionally to scroll distance
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
function sizeScrollbar() {
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)
2009-03-03 11:15:16 +00:00
var remainder = scrollContent.width() - scrollPane.width();
var proportion = remainder / scrollContent.width();
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
scrollbar.find( ".ui-slider-handle" ).css({
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)
2009-03-03 11:15:16 +00:00
width: handleSize,
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
"margin-left": -handleSize / 2
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)
2009-03-03 11:15:16 +00:00
});
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
handleHelper.width( "" ).width( scrollbar.width() - handleSize );
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)
2009-03-03 11:15:16 +00:00
}
//reset slider value based on scroll content position
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
function resetValue() {
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)
2009-03-03 11:15:16 +00:00
var remainder = scrollPane.width() - scrollContent.width();
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
parseInt( scrollContent.css( "margin-left" ) );
var percentage = Math.round( leftVal / remainder * 100 );
scrollbar.slider( "value", percentage );
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)
2009-03-03 11:15:16 +00:00
}
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
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)
2009-03-03 11:15:16 +00:00
//if the slider is 100% and window gets larger, reveal content
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
function reflowContent() {
var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
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)
2009-03-03 11:15:16 +00:00
var gap = scrollPane.width() - showing;
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
if ( gap > 0 ) {
scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
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)
2009-03-03 11:15:16 +00:00
}
}
//change handle position on window resize
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
$( window ).resize(function() {
resetValue();
sizeScrollbar();
reflowContent();
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)
2009-03-03 11:15:16 +00:00
});
//init scrollbar size
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
setTimeout( sizeScrollbar, 10 );//safari wants a timeout
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)
2009-03-03 11:15:16 +00:00
});
</script>
</head>
<body>
<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 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>
Demos: Cleanup.
2012-09-10 15:33:46 +00:00
</div>
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)
2009-03-03 11:15:16 +00:00
</body>
</html>
Reference in New Issue Copy Permalink