web-app-theme 0.6.3 → 0.7.0
Sign up to get free protection for your applications and to get access to all the features.
- data/VERSION +1 -1
- data/index.html +1 -0
- data/javascripts/jquery.localscroll.js +103 -103
- data/javascripts/jquery.scrollTo.js +149 -149
- data/stylesheets/themes/activo/images/arrow.png +0 -0
- data/stylesheets/themes/activo/images/boxbar-background.png +0 -0
- data/stylesheets/themes/activo/images/button-background-active.png +0 -0
- data/stylesheets/themes/activo/images/button-background.png +0 -0
- data/stylesheets/themes/{default → activo}/images/menubar-background.png +0 -0
- data/stylesheets/themes/activo/style.css +462 -0
- data/stylesheets/themes/default/fonts/museo700-regular-webfont.eot +0 -0
- data/stylesheets/themes/default/fonts/museo700-regular-webfont.svg +242 -0
- data/stylesheets/themes/default/fonts/museo700-regular-webfont.ttf +0 -0
- data/stylesheets/themes/default/fonts/museo700-regular-webfont.woff +0 -0
- data/stylesheets/themes/default/fonts/museosans_500-webfont.eot +0 -0
- data/stylesheets/themes/default/fonts/museosans_500-webfont.svg +240 -0
- data/stylesheets/themes/default/fonts/museosans_500-webfont.ttf +0 -0
- data/stylesheets/themes/default/fonts/museosans_500-webfont.woff +0 -0
- data/stylesheets/themes/default/fonts/museosans_500_italic-webfont.eot +0 -0
- data/stylesheets/themes/default/fonts/museosans_500_italic-webfont.svg +240 -0
- data/stylesheets/themes/default/fonts/museosans_500_italic-webfont.ttf +0 -0
- data/stylesheets/themes/default/fonts/museosans_500_italic-webfont.woff +0 -0
- data/stylesheets/themes/default/images/arrow.png +0 -0
- data/stylesheets/themes/default/images/bgd.jpg +0 -0
- data/stylesheets/themes/default/images/boxbar-background.png +0 -0
- data/stylesheets/themes/default/images/button-background-active.png +0 -0
- data/stylesheets/themes/default/images/button-background.png +0 -0
- data/stylesheets/themes/default/images/messages/error.png +0 -0
- data/stylesheets/themes/default/images/messages/notice.png +0 -0
- data/stylesheets/themes/default/images/messages/warning.png +0 -0
- data/stylesheets/themes/default/style.css +299 -298
- data/web-app-theme.gemspec +25 -5
- metadata +26 -13
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.
|
1
|
+
0.7.0
|
data/index.html
CHANGED
@@ -342,6 +342,7 @@
|
|
342
342
|
<h3>Switch Theme</h3>
|
343
343
|
<ul class="navigation">
|
344
344
|
<li><a href="#" onclick="Theme.activate('default'); return false;">Default</a></li>
|
345
|
+
<li><a href="#" onclick="Theme.activate('activo'); return false;">Activo 2</a></li>
|
345
346
|
<li><a href="#" onclick="Theme.activate('red'); return false;">Red</a></li>
|
346
347
|
<li><a href="#" onclick="Theme.activate('amro'); return false;">Amro</a></li>
|
347
348
|
<li><a href="#" onclick="Theme.activate('bec'); return false;">Bec</a></li>
|
@@ -1,104 +1,104 @@
|
|
1
|
-
/**
|
2
|
-
* jQuery.LocalScroll
|
3
|
-
* Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
|
4
|
-
* Dual licensed under MIT and GPL.
|
5
|
-
* Date: 6/3/2008
|
6
|
-
*
|
7
|
-
* @projectDescription Animated scrolling navigation, using anchors.
|
8
|
-
* http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
|
9
|
-
* @author Ariel Flesler
|
10
|
-
* @version 1.2.6
|
11
|
-
*
|
12
|
-
* @id jQuery.fn.localScroll
|
13
|
-
* @param {Object} settings Hash of settings, it is passed in to jQuery.ScrollTo, none is required.
|
14
|
-
* @return {jQuery} Returns the same jQuery object, for chaining.
|
15
|
-
*
|
16
|
-
* @example $('ul.links').localScroll();
|
17
|
-
*
|
18
|
-
* @example $('ul.links').localScroll({ filter:'.animated', duration:400, axis:'x' });
|
19
|
-
*
|
20
|
-
* @example $.localScroll({ target:'#pane', axis:'xy', queue:true, event:'mouseover' });
|
21
|
-
*
|
22
|
-
* Notes:
|
23
|
-
* - The plugin requires jQuery.ScrollTo.
|
24
|
-
* - The hash of settings, is passed to jQuery.ScrollTo, so the settings are valid for that plugin as well.
|
25
|
-
* - jQuery.localScroll can be used if the desired links, are all over the document, it accepts the same settings.
|
26
|
-
* - If the setting 'lazy' is set to true, then the binding will still work for later added anchors.
|
27
|
-
* - The setting 'speed' is deprecated, use 'duration' instead.
|
28
|
-
* - If onBefore returns false, the event is ignored.
|
29
|
-
**/
|
30
|
-
;(function( $ ){
|
31
|
-
var URI = location.href.replace(/#.*/,'');//local url without hash
|
32
|
-
|
33
|
-
var $localScroll = $.localScroll = function( settings ){
|
34
|
-
$('body').localScroll( settings );
|
35
|
-
};
|
36
|
-
|
37
|
-
//Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option.
|
38
|
-
//@see http://www.freewebs.com/flesler/jQuery.ScrollTo/
|
39
|
-
$localScroll.defaults = {//the defaults are public and can be overriden.
|
40
|
-
duration:1000, //how long to animate.
|
41
|
-
axis:'y',//which of top and left should be modified.
|
42
|
-
event:'click',//on which event to react.
|
43
|
-
stop:true//avoid queuing animations
|
44
|
-
/*
|
45
|
-
lock:false,//ignore events if already animating
|
46
|
-
lazy:false,//if true, links can be added later, and will still work.
|
47
|
-
target:null, //what to scroll (selector or element). Keep it null if want to scroll the whole window.
|
48
|
-
filter:null, //filter some anchors out of the matched elements.
|
49
|
-
hash: false//if true, the hash of the selected link, will appear on the address bar.
|
50
|
-
*/
|
51
|
-
};
|
52
|
-
|
53
|
-
//if the URL contains a hash, it will scroll to the pointed element
|
54
|
-
$localScroll.hash = function( settings ){
|
55
|
-
settings = $.extend( {}, $localScroll.defaults, settings );
|
56
|
-
settings.hash = false;//can't be true
|
57
|
-
if( location.hash )
|
58
|
-
setTimeout(function(){ scroll( 0, location, settings ); }, 0 );//better wrapped with a setTimeout
|
59
|
-
};
|
60
|
-
|
61
|
-
$.fn.localScroll = function( settings ){
|
62
|
-
settings = $.extend( {}, $localScroll.defaults, settings );
|
63
|
-
|
64
|
-
return ( settings.persistent || settings.lazy )
|
65
|
-
? this.bind( settings.event, function( e ){//use event delegation, more links can be added later.
|
66
|
-
var a = $([e.target, e.target.parentNode]).filter(filter)[0];//if a valid link was clicked.
|
67
|
-
a && scroll( e, a, settings );//do scroll.
|
68
|
-
})
|
69
|
-
: this.find('a,area')//bind concretely, to each matching link
|
70
|
-
.filter( filter ).bind( settings.event, function(e){
|
71
|
-
scroll( e, this, settings );
|
72
|
-
}).end()
|
73
|
-
.end();
|
74
|
-
|
75
|
-
function filter(){//is this a link that points to an anchor and passes a possible filter ? href is checked to avoid a bug in FF.
|
76
|
-
return !!this.href && !!this.hash && this.href.replace(this.hash,'') == URI && (!settings.filter || $(this).is( settings.filter ));
|
77
|
-
};
|
78
|
-
};
|
79
|
-
|
80
|
-
function scroll( e, link, settings ){
|
81
|
-
var id = link.hash.slice(1),
|
82
|
-
elem = document.getElementById(id) || document.getElementsByName(id)[0];
|
83
|
-
if ( elem ){
|
84
|
-
e && e.preventDefault();
|
85
|
-
var $target = $( settings.target || $.scrollTo.window() );//if none specified, then the window.
|
86
|
-
|
87
|
-
if( settings.lock && $target.is(':animated') ||
|
88
|
-
settings.onBefore && settings.onBefore.call(link, e, elem, $target) === false ) return;
|
89
|
-
|
90
|
-
if( settings.stop )
|
91
|
-
$target.queue('fx',[]).stop();//remove all its animations
|
92
|
-
$target
|
93
|
-
.scrollTo( elem, settings )//do scroll
|
94
|
-
.trigger('notify.serialScroll',[elem]);//notify serialScroll about this change
|
95
|
-
if( settings.hash )
|
96
|
-
$target.queue(function(){
|
97
|
-
location = link.hash;
|
98
|
-
// make sure this function is released
|
99
|
-
$(this).dequeue();
|
100
|
-
});
|
101
|
-
}
|
102
|
-
};
|
103
|
-
|
1
|
+
/**
|
2
|
+
* jQuery.LocalScroll
|
3
|
+
* Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
|
4
|
+
* Dual licensed under MIT and GPL.
|
5
|
+
* Date: 6/3/2008
|
6
|
+
*
|
7
|
+
* @projectDescription Animated scrolling navigation, using anchors.
|
8
|
+
* http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
|
9
|
+
* @author Ariel Flesler
|
10
|
+
* @version 1.2.6
|
11
|
+
*
|
12
|
+
* @id jQuery.fn.localScroll
|
13
|
+
* @param {Object} settings Hash of settings, it is passed in to jQuery.ScrollTo, none is required.
|
14
|
+
* @return {jQuery} Returns the same jQuery object, for chaining.
|
15
|
+
*
|
16
|
+
* @example $('ul.links').localScroll();
|
17
|
+
*
|
18
|
+
* @example $('ul.links').localScroll({ filter:'.animated', duration:400, axis:'x' });
|
19
|
+
*
|
20
|
+
* @example $.localScroll({ target:'#pane', axis:'xy', queue:true, event:'mouseover' });
|
21
|
+
*
|
22
|
+
* Notes:
|
23
|
+
* - The plugin requires jQuery.ScrollTo.
|
24
|
+
* - The hash of settings, is passed to jQuery.ScrollTo, so the settings are valid for that plugin as well.
|
25
|
+
* - jQuery.localScroll can be used if the desired links, are all over the document, it accepts the same settings.
|
26
|
+
* - If the setting 'lazy' is set to true, then the binding will still work for later added anchors.
|
27
|
+
* - The setting 'speed' is deprecated, use 'duration' instead.
|
28
|
+
* - If onBefore returns false, the event is ignored.
|
29
|
+
**/
|
30
|
+
;(function( $ ){
|
31
|
+
var URI = location.href.replace(/#.*/,'');//local url without hash
|
32
|
+
|
33
|
+
var $localScroll = $.localScroll = function( settings ){
|
34
|
+
$('body').localScroll( settings );
|
35
|
+
};
|
36
|
+
|
37
|
+
//Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option.
|
38
|
+
//@see http://www.freewebs.com/flesler/jQuery.ScrollTo/
|
39
|
+
$localScroll.defaults = {//the defaults are public and can be overriden.
|
40
|
+
duration:1000, //how long to animate.
|
41
|
+
axis:'y',//which of top and left should be modified.
|
42
|
+
event:'click',//on which event to react.
|
43
|
+
stop:true//avoid queuing animations
|
44
|
+
/*
|
45
|
+
lock:false,//ignore events if already animating
|
46
|
+
lazy:false,//if true, links can be added later, and will still work.
|
47
|
+
target:null, //what to scroll (selector or element). Keep it null if want to scroll the whole window.
|
48
|
+
filter:null, //filter some anchors out of the matched elements.
|
49
|
+
hash: false//if true, the hash of the selected link, will appear on the address bar.
|
50
|
+
*/
|
51
|
+
};
|
52
|
+
|
53
|
+
//if the URL contains a hash, it will scroll to the pointed element
|
54
|
+
$localScroll.hash = function( settings ){
|
55
|
+
settings = $.extend( {}, $localScroll.defaults, settings );
|
56
|
+
settings.hash = false;//can't be true
|
57
|
+
if( location.hash )
|
58
|
+
setTimeout(function(){ scroll( 0, location, settings ); }, 0 );//better wrapped with a setTimeout
|
59
|
+
};
|
60
|
+
|
61
|
+
$.fn.localScroll = function( settings ){
|
62
|
+
settings = $.extend( {}, $localScroll.defaults, settings );
|
63
|
+
|
64
|
+
return ( settings.persistent || settings.lazy )
|
65
|
+
? this.bind( settings.event, function( e ){//use event delegation, more links can be added later.
|
66
|
+
var a = $([e.target, e.target.parentNode]).filter(filter)[0];//if a valid link was clicked.
|
67
|
+
a && scroll( e, a, settings );//do scroll.
|
68
|
+
})
|
69
|
+
: this.find('a,area')//bind concretely, to each matching link
|
70
|
+
.filter( filter ).bind( settings.event, function(e){
|
71
|
+
scroll( e, this, settings );
|
72
|
+
}).end()
|
73
|
+
.end();
|
74
|
+
|
75
|
+
function filter(){//is this a link that points to an anchor and passes a possible filter ? href is checked to avoid a bug in FF.
|
76
|
+
return !!this.href && !!this.hash && this.href.replace(this.hash,'') == URI && (!settings.filter || $(this).is( settings.filter ));
|
77
|
+
};
|
78
|
+
};
|
79
|
+
|
80
|
+
function scroll( e, link, settings ){
|
81
|
+
var id = link.hash.slice(1),
|
82
|
+
elem = document.getElementById(id) || document.getElementsByName(id)[0];
|
83
|
+
if ( elem ){
|
84
|
+
e && e.preventDefault();
|
85
|
+
var $target = $( settings.target || $.scrollTo.window() );//if none specified, then the window.
|
86
|
+
|
87
|
+
if( settings.lock && $target.is(':animated') ||
|
88
|
+
settings.onBefore && settings.onBefore.call(link, e, elem, $target) === false ) return;
|
89
|
+
|
90
|
+
if( settings.stop )
|
91
|
+
$target.queue('fx',[]).stop();//remove all its animations
|
92
|
+
$target
|
93
|
+
.scrollTo( elem, settings )//do scroll
|
94
|
+
.trigger('notify.serialScroll',[elem]);//notify serialScroll about this change
|
95
|
+
if( settings.hash )
|
96
|
+
$target.queue(function(){
|
97
|
+
location = link.hash;
|
98
|
+
// make sure this function is released
|
99
|
+
$(this).dequeue();
|
100
|
+
});
|
101
|
+
}
|
102
|
+
};
|
103
|
+
|
104
104
|
})( jQuery );
|
@@ -1,150 +1,150 @@
|
|
1
|
-
/**
|
2
|
-
* jQuery.ScrollTo
|
3
|
-
* Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
|
4
|
-
* Dual licensed under MIT and GPL.
|
5
|
-
* Date: 2/19/2008
|
6
|
-
*
|
7
|
-
* @projectDescription Easy element scrolling using jQuery.
|
8
|
-
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
|
9
|
-
* Tested with jQuery 1.2.1. On FF 2.0.0.11, IE 6, Opera 9.22 and Safari 3 beta. on Windows.
|
10
|
-
*
|
11
|
-
* @author Ariel Flesler
|
12
|
-
* @version 1.3.3
|
13
|
-
*
|
14
|
-
* @id jQuery.scrollTo
|
15
|
-
* @id jQuery.fn.scrollTo
|
16
|
-
* @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
|
17
|
-
* The different options for target are:
|
18
|
-
* - A number position (will be applied to all axes).
|
19
|
-
* - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
|
20
|
-
* - A jQuery/DOM element ( logically, child of the element to scroll )
|
21
|
-
* - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
|
22
|
-
* - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
|
23
|
-
* @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
|
24
|
-
* @param {Object} settings Hash of settings, optional.
|
25
|
-
* @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
|
26
|
-
* @option {Number} duration The OVERALL length of the animation.
|
27
|
-
* @option {String} easing The easing method for the animation.
|
28
|
-
* @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
|
29
|
-
* @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }.
|
30
|
-
* @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes.
|
31
|
-
* @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends.
|
32
|
-
* @option {Function} onAfter Function to be called after the scrolling ends.
|
33
|
-
* @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends.
|
34
|
-
* @return {jQuery} Returns the same jQuery object, for chaining.
|
35
|
-
*
|
36
|
-
* @example $('div').scrollTo( 340 );
|
37
|
-
*
|
38
|
-
* @example $('div').scrollTo( '+=340px', { axis:'y' } );
|
39
|
-
*
|
40
|
-
* @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } );
|
41
|
-
*
|
42
|
-
* @example var second_child = document.getElementById('container').firstChild.nextSibling;
|
43
|
-
* $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){
|
44
|
-
* alert('scrolled!!');
|
45
|
-
* }});
|
46
|
-
*
|
47
|
-
* @example $('div').scrollTo( { top: 300, left:'+=200' }, { offset:-20 } );
|
48
|
-
*
|
49
|
-
* Notes:
|
50
|
-
* - jQuery.scrollTo will make the whole window scroll, it accepts the same arguments as jQuery.fn.scrollTo.
|
51
|
-
* - If you are interested in animated anchor navigation, check http://jquery.com/plugins/project/LocalScroll.
|
52
|
-
* - The options margin, offset and over are ignored, if the target is not a jQuery object or a DOM element.
|
53
|
-
* - The option 'queue' won't be taken into account, if only 1 axis is given.
|
54
|
-
*/
|
55
|
-
;(function( $ ){
|
56
|
-
|
57
|
-
var $scrollTo = $.scrollTo = function( target, duration, settings ){
|
58
|
-
$scrollTo.window().scrollTo( target, duration, settings );
|
59
|
-
};
|
60
|
-
|
61
|
-
$scrollTo.defaults = {
|
62
|
-
axis:'y',
|
63
|
-
duration:1
|
64
|
-
};
|
65
|
-
|
66
|
-
//returns the element that needs to be animated to scroll the window
|
67
|
-
$scrollTo.window = function(){
|
68
|
-
return $( $.browser.safari ? 'body' : 'html' );
|
69
|
-
};
|
70
|
-
|
71
|
-
$.fn.scrollTo = function( target, duration, settings ){
|
72
|
-
if( typeof duration == 'object' ){
|
73
|
-
settings = duration;
|
74
|
-
duration = 0;
|
75
|
-
}
|
76
|
-
settings = $.extend( {}, $scrollTo.defaults, settings );
|
77
|
-
duration = duration || settings.speed || settings.duration;//speed is still recognized for backwards compatibility
|
78
|
-
settings.queue = settings.queue && settings.axis.length > 1;//make sure the settings are given right
|
79
|
-
if( settings.queue )
|
80
|
-
duration /= 2;//let's keep the overall speed, the same.
|
81
|
-
settings.offset = both( settings.offset );
|
82
|
-
settings.over = both( settings.over );
|
83
|
-
|
84
|
-
return this.each(function(){
|
85
|
-
var elem = this, $elem = $(elem),
|
86
|
-
t = target, toff, attr = {},
|
87
|
-
win = $elem.is('html,body');
|
88
|
-
switch( typeof t ){
|
89
|
-
case 'number'://will pass the regex
|
90
|
-
case 'string':
|
91
|
-
if( /^([+-]=)?\d+(px)?$/.test(t) ){
|
92
|
-
t = both( t );
|
93
|
-
break;//we are done
|
94
|
-
}
|
95
|
-
t = $(t,this);// relative selector, no break!
|
96
|
-
case 'object':
|
97
|
-
if( t.is || t.style )//DOM/jQuery
|
98
|
-
toff = (t = $(t)).offset();//get the real position of the target
|
99
|
-
}
|
100
|
-
$.each( settings.axis.split(''), function( i, axis ){
|
101
|
-
var Pos = axis == 'x' ? 'Left' : 'Top',
|
102
|
-
pos = Pos.toLowerCase(),
|
103
|
-
key = 'scroll' + Pos,
|
104
|
-
act = elem[key],
|
105
|
-
Dim = axis == 'x' ? 'Width' : 'Height',
|
106
|
-
dim = Dim.toLowerCase();
|
107
|
-
|
108
|
-
if( toff ){//jQuery/DOM
|
109
|
-
attr[key] = toff[pos] + ( win ? 0 : act - $elem.offset()[pos] );
|
110
|
-
|
111
|
-
if( settings.margin ){//if it's a dom element, reduce the margin
|
112
|
-
attr[key] -= parseInt(t.css('margin'+Pos)) || 0;
|
113
|
-
attr[key] -= parseInt(t.css('border'+Pos+'Width')) || 0;
|
114
|
-
}
|
115
|
-
|
116
|
-
attr[key] += settings.offset[pos] || 0;//add/deduct the offset
|
117
|
-
|
118
|
-
if( settings.over[pos] )//scroll to a fraction of its width/height
|
119
|
-
attr[key] += t[dim]() * settings.over[pos];
|
120
|
-
}else
|
121
|
-
attr[key] = t[pos];//remove the unnecesary 'px'
|
122
|
-
|
123
|
-
if( /^\d+$/.test(attr[key]) )//number or 'number'
|
124
|
-
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) );//check the limits
|
125
|
-
|
126
|
-
if( !i && settings.queue ){//queueing each axis is required
|
127
|
-
if( act != attr[key] )//don't waste time animating, if there's no need.
|
128
|
-
animate( settings.onAfterFirst );//intermediate animation
|
129
|
-
delete attr[key];//don't animate this axis again in the next iteration.
|
130
|
-
}
|
131
|
-
});
|
132
|
-
animate( settings.onAfter );
|
133
|
-
|
134
|
-
function animate( callback ){
|
135
|
-
$elem.animate( attr, duration, settings.easing, callback && function(){
|
136
|
-
callback.call(this, target);
|
137
|
-
});
|
138
|
-
};
|
139
|
-
function max( Dim ){
|
140
|
-
var el = win ? $.browser.opera ? document.body : document.documentElement : elem;
|
141
|
-
return el['scroll'+Dim] - el['client'+Dim];
|
142
|
-
};
|
143
|
-
});
|
144
|
-
};
|
145
|
-
|
146
|
-
function both( val ){
|
147
|
-
return typeof val == 'object' ? val : { top:val, left:val };
|
148
|
-
};
|
149
|
-
|
1
|
+
/**
|
2
|
+
* jQuery.ScrollTo
|
3
|
+
* Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
|
4
|
+
* Dual licensed under MIT and GPL.
|
5
|
+
* Date: 2/19/2008
|
6
|
+
*
|
7
|
+
* @projectDescription Easy element scrolling using jQuery.
|
8
|
+
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
|
9
|
+
* Tested with jQuery 1.2.1. On FF 2.0.0.11, IE 6, Opera 9.22 and Safari 3 beta. on Windows.
|
10
|
+
*
|
11
|
+
* @author Ariel Flesler
|
12
|
+
* @version 1.3.3
|
13
|
+
*
|
14
|
+
* @id jQuery.scrollTo
|
15
|
+
* @id jQuery.fn.scrollTo
|
16
|
+
* @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
|
17
|
+
* The different options for target are:
|
18
|
+
* - A number position (will be applied to all axes).
|
19
|
+
* - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
|
20
|
+
* - A jQuery/DOM element ( logically, child of the element to scroll )
|
21
|
+
* - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
|
22
|
+
* - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
|
23
|
+
* @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
|
24
|
+
* @param {Object} settings Hash of settings, optional.
|
25
|
+
* @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
|
26
|
+
* @option {Number} duration The OVERALL length of the animation.
|
27
|
+
* @option {String} easing The easing method for the animation.
|
28
|
+
* @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
|
29
|
+
* @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }.
|
30
|
+
* @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes.
|
31
|
+
* @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends.
|
32
|
+
* @option {Function} onAfter Function to be called after the scrolling ends.
|
33
|
+
* @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends.
|
34
|
+
* @return {jQuery} Returns the same jQuery object, for chaining.
|
35
|
+
*
|
36
|
+
* @example $('div').scrollTo( 340 );
|
37
|
+
*
|
38
|
+
* @example $('div').scrollTo( '+=340px', { axis:'y' } );
|
39
|
+
*
|
40
|
+
* @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } );
|
41
|
+
*
|
42
|
+
* @example var second_child = document.getElementById('container').firstChild.nextSibling;
|
43
|
+
* $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){
|
44
|
+
* alert('scrolled!!');
|
45
|
+
* }});
|
46
|
+
*
|
47
|
+
* @example $('div').scrollTo( { top: 300, left:'+=200' }, { offset:-20 } );
|
48
|
+
*
|
49
|
+
* Notes:
|
50
|
+
* - jQuery.scrollTo will make the whole window scroll, it accepts the same arguments as jQuery.fn.scrollTo.
|
51
|
+
* - If you are interested in animated anchor navigation, check http://jquery.com/plugins/project/LocalScroll.
|
52
|
+
* - The options margin, offset and over are ignored, if the target is not a jQuery object or a DOM element.
|
53
|
+
* - The option 'queue' won't be taken into account, if only 1 axis is given.
|
54
|
+
*/
|
55
|
+
;(function( $ ){
|
56
|
+
|
57
|
+
var $scrollTo = $.scrollTo = function( target, duration, settings ){
|
58
|
+
$scrollTo.window().scrollTo( target, duration, settings );
|
59
|
+
};
|
60
|
+
|
61
|
+
$scrollTo.defaults = {
|
62
|
+
axis:'y',
|
63
|
+
duration:1
|
64
|
+
};
|
65
|
+
|
66
|
+
//returns the element that needs to be animated to scroll the window
|
67
|
+
$scrollTo.window = function(){
|
68
|
+
return $( $.browser.safari ? 'body' : 'html' );
|
69
|
+
};
|
70
|
+
|
71
|
+
$.fn.scrollTo = function( target, duration, settings ){
|
72
|
+
if( typeof duration == 'object' ){
|
73
|
+
settings = duration;
|
74
|
+
duration = 0;
|
75
|
+
}
|
76
|
+
settings = $.extend( {}, $scrollTo.defaults, settings );
|
77
|
+
duration = duration || settings.speed || settings.duration;//speed is still recognized for backwards compatibility
|
78
|
+
settings.queue = settings.queue && settings.axis.length > 1;//make sure the settings are given right
|
79
|
+
if( settings.queue )
|
80
|
+
duration /= 2;//let's keep the overall speed, the same.
|
81
|
+
settings.offset = both( settings.offset );
|
82
|
+
settings.over = both( settings.over );
|
83
|
+
|
84
|
+
return this.each(function(){
|
85
|
+
var elem = this, $elem = $(elem),
|
86
|
+
t = target, toff, attr = {},
|
87
|
+
win = $elem.is('html,body');
|
88
|
+
switch( typeof t ){
|
89
|
+
case 'number'://will pass the regex
|
90
|
+
case 'string':
|
91
|
+
if( /^([+-]=)?\d+(px)?$/.test(t) ){
|
92
|
+
t = both( t );
|
93
|
+
break;//we are done
|
94
|
+
}
|
95
|
+
t = $(t,this);// relative selector, no break!
|
96
|
+
case 'object':
|
97
|
+
if( t.is || t.style )//DOM/jQuery
|
98
|
+
toff = (t = $(t)).offset();//get the real position of the target
|
99
|
+
}
|
100
|
+
$.each( settings.axis.split(''), function( i, axis ){
|
101
|
+
var Pos = axis == 'x' ? 'Left' : 'Top',
|
102
|
+
pos = Pos.toLowerCase(),
|
103
|
+
key = 'scroll' + Pos,
|
104
|
+
act = elem[key],
|
105
|
+
Dim = axis == 'x' ? 'Width' : 'Height',
|
106
|
+
dim = Dim.toLowerCase();
|
107
|
+
|
108
|
+
if( toff ){//jQuery/DOM
|
109
|
+
attr[key] = toff[pos] + ( win ? 0 : act - $elem.offset()[pos] );
|
110
|
+
|
111
|
+
if( settings.margin ){//if it's a dom element, reduce the margin
|
112
|
+
attr[key] -= parseInt(t.css('margin'+Pos)) || 0;
|
113
|
+
attr[key] -= parseInt(t.css('border'+Pos+'Width')) || 0;
|
114
|
+
}
|
115
|
+
|
116
|
+
attr[key] += settings.offset[pos] || 0;//add/deduct the offset
|
117
|
+
|
118
|
+
if( settings.over[pos] )//scroll to a fraction of its width/height
|
119
|
+
attr[key] += t[dim]() * settings.over[pos];
|
120
|
+
}else
|
121
|
+
attr[key] = t[pos];//remove the unnecesary 'px'
|
122
|
+
|
123
|
+
if( /^\d+$/.test(attr[key]) )//number or 'number'
|
124
|
+
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) );//check the limits
|
125
|
+
|
126
|
+
if( !i && settings.queue ){//queueing each axis is required
|
127
|
+
if( act != attr[key] )//don't waste time animating, if there's no need.
|
128
|
+
animate( settings.onAfterFirst );//intermediate animation
|
129
|
+
delete attr[key];//don't animate this axis again in the next iteration.
|
130
|
+
}
|
131
|
+
});
|
132
|
+
animate( settings.onAfter );
|
133
|
+
|
134
|
+
function animate( callback ){
|
135
|
+
$elem.animate( attr, duration, settings.easing, callback && function(){
|
136
|
+
callback.call(this, target);
|
137
|
+
});
|
138
|
+
};
|
139
|
+
function max( Dim ){
|
140
|
+
var el = win ? $.browser.opera ? document.body : document.documentElement : elem;
|
141
|
+
return el['scroll'+Dim] - el['client'+Dim];
|
142
|
+
};
|
143
|
+
});
|
144
|
+
};
|
145
|
+
|
146
|
+
function both( val ){
|
147
|
+
return typeof val == 'object' ? val : { top:val, left:val };
|
148
|
+
};
|
149
|
+
|
150
150
|
})( jQuery );
|