Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fixed position relative cases. Added cleanup for interrupted animations.

  • Loading branch information...
commit d76751f1d65690b1fd57a5d2fdf8b519fbcbb8a4 1 parent 8fb3968
@razorjack razorjack authored
Showing with 53 additions and 22 deletions.
  1. +53 −22 jquery.quicksand.js
View
75 jquery.quicksand.js
@@ -13,6 +13,7 @@ Github site: http://github.com/RazorJack/Quicksand
*/
+
(function ($) {
$.fn.quicksand = function (collection, customOptions) {
var options = {
@@ -22,21 +23,51 @@ Github site: http://github.com/RazorJack/Quicksand
selector: '> li', // selector for content items in container
adjustHeight: true // put false if you don't want the plugin to adjust height of container to fit all the items
};
+
+ // get CSS path of the node
+ // indentifies the owner of the temporary container
+ // helping to clean it up after interrupted animation
+ function cssPath(node) {
+ var nodes = []
+ var name = $(node).get(0).nodeName.toLowerCase();
+ if ($(node).attr('id')) {
+ name += '#' + $(node).attr('id');
+ }
+ nodes.push(name);
+ $(node).parentsUntil("html").each(function () {
+ name = $(this).get(0).nodeName.toLowerCase();
+ if ($(this).attr('id')) {
+ name += '#' + $(this).attr('id');
+ }
+ nodes.push(name);
+ });
+ return nodes.reverse().join(' > ');
+ }
$.extend(options, customOptions);
- var $collection = $(collection).clone();
+
return this.each(function (i) {
-
+ var $collection = $(collection).clone();
var $sourceParent = $(this);
- var $subject = $(this);
var sourceHeight = $(this).css('height');
+ var offset = $($sourceParent).offset();
+ var offsets = [];
+ var horizCorrection = parseFloat($('body').css('border-left-width'));
+ var vertCorrection = parseFloat($('body').css('border-top-width'));
+ var relativeTop = 0;
+ var relativeLeft = 0;
- var horizCorrection = parseFloat($("body").css('border-left-width'));
- var vertCorrection = parseFloat($("body").css('border-top-width'));
$sourceParent.css('height', $(this).height());
var $source = $(this).find(options.selector);
- var offsets = [];
+ $($source.parentsUntil("html").toArray().reverse()).each(function (i) {
+ if ($(this).css('position') == 'relative') {
+ o = $(this).offset();
+ relativeTop = o.top;
+ relativeLeft = o.left;
+ }
+ });
+
$source.each(function (i) {
offsets[i] = $(this).offset();
});
@@ -47,30 +78,30 @@ Github site: http://github.com/RazorJack/Quicksand
$(this)
.css('position', 'absolute')
.css('margin', 0)
- .css('top', offsets[i].top - parseFloat($(this).css('margin-top')) + vertCorrection)
- .css('left', offsets[i].left - parseFloat($(this).css('margin-left')) + horizCorrection);
+ .css('top', offsets[i].top - parseFloat($(this).css('margin-top')) + vertCorrection - relativeTop)
+ .css('left', offsets[i].left - parseFloat($(this).css('margin-left')) + horizCorrection - relativeLeft);
+
});
- var $dest = $($sourceParent).clone().html("").attr('id', "").css('height', 'auto').append($collection);
+ var $dest = $($sourceParent).clone().html('').attr('id', '').attr("data-quicksand-owner", $sourceParent.selector).css('height', 'auto').append($collection);
var postCallbackPerformed = 0;
var postCallback = function () {
if (!postCallbackPerformed) {
- $sourceParent.html($dest.html());
-
- $dest.remove();
+ $sourceParent.html($dest.html());
+ $("[data-quicksand-owner=" + cssPath($sourceParent) + "]").remove();
postCallbackPerformed = 1;
}
};
-
- var offset = $($sourceParent).offset();
- $dest.insertBefore($sourceParent).css('z-index', -1)
+
+ $dest.insertBefore($sourceParent).css('z-index', 1)
.css('opacity', 0.0)
.css('margin', 0.0)
.css('position', 'absolute')
- .css('top', offset.top + vertCorrection)
- .css('left', offset.left + horizCorrection);
-
+ .css('top', offset.top + vertCorrection - relativeTop)
+ .css('left', offset.left + horizCorrection - relativeLeft)
+ .attr('data-quicksand-owner', cssPath($sourceParent));
+ $dest.offset(offset);
if (options.adjustHeight) {
$sourceParent.animate({height: $dest.height()}, options.duration, options.easing, function (e) {
$sourceParent.css('height', 'auto');
@@ -81,9 +112,9 @@ Github site: http://github.com/RazorJack/Quicksand
var destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
if (destElement.length) {
if ($.browser.msie) {
- $(this).animate({top: destElement.offset().top + vertCorrection, left: destElement.offset().left + horizCorrection, opacity: 1.0}, options.duration, options.easing, postCallback);
+ $(this).animate({top: destElement.offset().top + vertCorrection - relativeTop, left: destElement.offset().left + horizCorrection - relativeLeft, opacity: 1.0}, options.duration, options.easing, postCallback);
} else {
- $(this).animate({top: destElement.offset().top + vertCorrection, left: destElement.offset().left + horizCorrection, opacity: 1.0, scale: '1.0'}, options.duration, options.easing, postCallback);
+ $(this).animate({top: destElement.offset().top + vertCorrection - relativeTop, left: destElement.offset().left + horizCorrection - relativeLeft, opacity: 1.0, scale: '1.0'}, options.duration, options.easing, postCallback);
}
} else {
if ($.browser.msie) {
@@ -113,8 +144,8 @@ Github site: http://github.com/RazorJack/Quicksand
.clone()
.css('position', 'absolute')
.css('margin', 0.0)
- .css('top', destElement.offset().top + vertCorrection)
- .css('left', destElement.offset().left + horizCorrection)
+ .css('top', destElement.offset().top + vertCorrection - relativeTop)
+ .css('left', destElement.offset().left + horizCorrection - relativeLeft)
.css('opacity', 0.0)
.css('transform', 'scale(0.0)')
.appendTo($sourceParent)
Please sign in to comment.
Something went wrong with that request. Please try again.