Skip to content
Merged

2.0.0 #109

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(The MIT License)

Copyright (c) 2007-2014 Ariel Flesler <[email protected]>
Copyright (c) 2007-2015 Ariel Flesler <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
Expand Down
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ CDN provided by [cdnjs](https://cdnjs.com/libraries/jquery-scrollTo)

If you want the latest stable version, get the latest release from the [releases page](https://github.com/flesler/jquery.scrollTo/releases).

## 2.0

Version 2.0 has been recently released. It is mostly backwards compatible, if you have any issue first check [this link](https://github.com/flesler/jquery.scrollTo/wiki/Migrating-to-2.0).
If your problem is not solved then go ahead and [report the issue](https://github.com/flesler/jquery.scrollTo/issues/new).

## Notes

* Apart from the target and duration, the plugin can receive a hash of settings. Documentation and examples are included in the source file.
Expand Down
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "jquery.scrollTo",
"version": "1.4.14",
"version": "2.0.0",
"description": "Easy element scrolling using jQuery.",
"homepage": "https://github.com/flesler/jquery.scrollTo",
"main": [
Expand All @@ -16,7 +16,7 @@
"scrollTo.jquery.json"
],
"dependencies": {
"jquery": ">=1.4"
"jquery": ">=1.8"
},
"keywords": [
"browser", "animated", "animation", "jquery",
Expand Down
14 changes: 14 additions & 0 deletions changes.txt
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
2.0.0
[Feature]
- All settings are passed to jQuery.animate() meaning it now supports even more settings
[Enhancement]
- $(window)._scrollable() is no longer needed, the element is always the window
- Delegating to jQuery the get/set of element/window scroll positions.
[Compat]
- Dropped support for $.scrollTo.window() and $(window)._scrollable()
[Fix]
- Now works consistenly on Chrome 40
- Now works correctly on Windows Phone
- Now works correctly on Android Browsers
- Now works correctly on iOS Browsers

1.4.14
[Misc]
- Internal both() function will handle nulls correctly
Expand Down
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
],
"require": {
"components/jquery": ">=1.4"
"components/jquery": ">=1.8"
},
"extra": {
"component": {
Expand Down
85 changes: 43 additions & 42 deletions jquery.scrollTo.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/*!
* jQuery.scrollTo
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Licensed under MIT
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
* @projectDescription Easy element scrolling using jQuery.
* @author Ariel Flesler
* @version 1.4.14
* @version 2.0.0
*/
;(function(define) {
'use strict';
Expand All @@ -21,30 +21,10 @@
limit:true
};

// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function() {
return $(window)._scrollable();
};

// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function() {
return this.map(function() {
var elem = this,
isWin = !elem.nodeName || $.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;

if (!isWin) {
return elem;
}

var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;

return /webkit/i.test(navigator.userAgent) || doc.compatMode === 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
function isWin(elem) {
return !elem.nodeName ||
$.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
}

$.fn.scrollTo = function(target, duration, settings) {
if (typeof duration === 'object') {
Expand All @@ -71,14 +51,16 @@
settings.offset = both(settings.offset);
settings.over = both(settings.over);

return this._scrollable().each(function() {
return this.each(function() {
// Null target yields nothing, just like jQuery does
if (target === null) return;

var elem = this,
var win = isWin(this),
elem = win ? this.contentWindow || window : this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
targ = target,
attr = {},
toff;

switch (typeof targ) {
// A number will pass the regex
Expand All @@ -89,8 +71,8 @@
// We are done
break;
}
// Relative/Absolute selector, no break!
targ = win ? $(targ) : $(targ, this);
// Relative/Absolute selector
targ = win ? $(targ) : $(targ, elem);
if (!targ.length) return;
/* falls through */
case 'object':
Expand All @@ -107,11 +89,11 @@
var Pos = axis === 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
prev = $(elem)[key](),
max = $scrollTo.max(elem, axis);

if (toff) {// jQuery / DOMElement
attr[key] = toff[pos] + (win ? 0 : old - $elem.offset()[pos]);
attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);

// If it's a dom element, reduce the margin
if (settings.margin) {
Expand Down Expand Up @@ -142,23 +124,27 @@
// Queueing axes
if (!i && settings.queue) {
// Don't waste time animating, if there's no need.
if (old !== attr[key]) {
if (prev !== attr[key]) {
// Intermediate animation
animate(settings.onAfterFirst);
}
// Don't animate this axis again in the next iteration.
delete attr[key];
attr = {};
}
});

animate(settings.onAfter);

function animate(callback) {
$elem.animate(attr, duration, settings.easing, callback && function() {
callback.call(this, targ, settings);
var opts = $.extend({}, settings, {
duration: duration,
complete: callback && function() {
callback.call(elem, targ, settings);
}
});
$elem.animate(attr, opts);
}
}).end();
});
};

// Max scrolling position, works on quirks mode
Expand All @@ -167,12 +153,13 @@
var Dim = axis === 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;

if (!$(elem).is('html,body'))
if (!isWin(elem))
return elem[scroll] - $(elem)[Dim.toLowerCase()]();

var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
doc = elem.ownerDocument || elem.document,
html = doc.documentElement,
body = doc.body;

return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
};
Expand All @@ -181,6 +168,20 @@
return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
}

// Add special hooks so that window scroll properties can be animated
$.Tween.propHooks.scrollLeft =
$.Tween.propHooks.scrollTop = {
get: function(t) {
return $(t.elem)[t.prop]();
},
set: function(t) {
var v = Math.round(t.now);
if (this.get(t) !== v) {
$(t.elem)[t.prop](v);
}
}
};

// AMD requirement
return $scrollTo;
});
Expand Down
6 changes: 3 additions & 3 deletions jquery.scrollTo.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"name": "jquery.scrollto",
"version": "1.4.14",
"version": "2.0.0",
"description": "Easy element scrolling using jQuery.",
"main": "jquery.scrollTo.js",
"license": "MIT",
"ignore": ["**/.*","demo","tests","changes.txt","composer.json","bower.json","scrollTo.jquery.json"],
"dependencies": { "jquery": ">=1.4" },
"dependencies": { "jquery": ">=1.8" },
"homepage": "https://github.com/flesler/jquery.scrollTo/",
"bugs": "https://github.com/flesler/jquery.scrollTo/issues",
"repository": "git://github.com/flesler/jquery.scrollTo",
Expand Down
2 changes: 1 addition & 1 deletion tests/ElemMaxY-compat.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>

<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion tests/ElemMaxY-quirks.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>

<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion tests/WinMaxY-compat.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>

<div style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
Expand Down
2 changes: 1 addition & 1 deletion tests/WinMaxY-quirks.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>

<div style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
Expand Down
4 changes: 2 additions & 2 deletions tests/WinMaxY-with-iframe-compat.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Compat Mode</title>
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>

<iframe src="WinMaxY-compat.html" />
</html>
61 changes: 11 additions & 50 deletions tests/test.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,21 @@
$.fn.test = function(){
if( location.search == '?notest' )
// Hide title on iframes
if (window.self !== window.top) {
$('h1').hide();
}

if (location.search === '?notest') {
return this;
}

testScrollable();

$.scrollTo.defaults.axis = 'xy';

this._scrollable().find('div').html(
var root = this.is('iframe') ? this.contents() : $('body');
root.find('#ua').html(
navigator.userAgent +
'<br />' +
'document.compatMode is "' + document.compatMode + '"' +
'<br />' +
'scrolling the ' + this._scrollable().prop('nodeName')
'document.compatMode is "' + document.compatMode + '"'
);

/*var orig = [ $(window).scrollLeft(), $(window).scrollTop() ];

scrollTo(0,1);
var elem = document.documentElement.scrollTop ? document.documentElement : document.body;
scrollTo(0,9e9);
var max = $(window).scrollTop();
scrollTo(orig[0],orig[1]);

setTimeout(function(){
alert( elem.nodeName + ' ' + max );
}, 1000 );*/
return this.scrollTo('max', 1000).scrollTo(0, 1000)
return this.scrollTo('max', 1000).scrollTo(0, 1000);
};

function assert( bool, message ){
if( !bool ){
alert('FAIL: ' + message);
throw new Error();
}
};

function f( name ){
return $(name)[0];
}

function testScrollable(){

$.each([ window, document, f('body'), f('html') ], function(i, elem){
var s = $(elem)._scrollable();
assert( s.length == 1, 'scrollable must always return exactly 1 element' );
assert( s.is('html,body'), 'scrollable must either html or body for window scrolling' );
});

$('body :not(iframe)').each(function(){
var s = $(this)._scrollable();
assert( s.length == 1, 'scrollable must always return exactly 1 element' );
assert( s[0] == this, 'scrollable must return the same element for normal element scrolling' );
});
};

$(function(){
if( location.search == '?notest' )
$('h1').hide();
});