blob: 0c33228a046f4da430e34a73b8226221a0162bc1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<!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.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; }
.scroll-content { width: 2440px; }
.scroll-content-item { width: 100px; height: 75px; float: left; margin: 10px; font-size: 3em; padding-top: 25px; 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%; }
</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"/>')
.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 = 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 ui-helper-clearfix">
<div class="scroll-content" class="ui-helper-clearfix">
<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>
|
