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

132 lines
5.1 KiB
HTML
Raw Permalink 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>
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029
2013-12-02 18:36:12 +00:00
<link rel="stylesheet" href="../../themes/base/all.css">
Build: Reorganize external directory Put each external library into its own directory. Move jquery.js to external. Ref gh-1266
2014-06-10 11:55:45 +00:00
<script src="../../external/jquery/jquery.js"></script>
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029
2013-12-02 18:36:12 +00:00
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/slider.js"></script>
Slider demos: Coding standards.
2010-10-13 14:39:50 +00:00
<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; }
.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" );
Updating to jQuery 1.9.0
2013-01-17 06:28:41 +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
//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
}
});
Updating to jQuery 1.9.0
2013-01-17 06:28:41 +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
//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();
Updating to jQuery 1.9.0
2013-01-17 06:28:41 +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
//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" );
Updating to jQuery 1.9.0
2013-01-17 06:28:41 +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
//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
}
Updating to jQuery 1.9.0
2013-01-17 06:28:41 +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
//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
}
Updating to jQuery 1.9.0
2013-01-17 06:28:41 +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
}
}
Updating to jQuery 1.9.0
2013-01-17 06:28:41 +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
//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