Permalink
Browse files

Mutate using top/right/bottom/left position properties as declared to…

… maintain position even in the event of resizes
  • Loading branch information...
1 parent 6c35374 commit 16d0a967f9aba9c8a4e15bbceff287c810dd44ee @dzuelke committed Oct 15, 2011
Showing with 20 additions and 4 deletions.
  1. +20 −4 js/plax.js
View
24 js/plax.js
@@ -74,8 +74,24 @@
// Add an object to the list of things to parallax
layer.obj = $(this)
- layer.startX = this.offsetLeft
- layer.startY = this.offsetTop
+ if(layer.obj.css('right') != 'auto') {
+ // positioned using the "right" propery, not "left", so we should mutate that in case the parent element resizes
+ layer.startX = $(this.parentNode).width() - this.offsetLeft - layer.obj.width()
+ layer.hProp = 'right'
+ layer.xRange = -1 * layer.xRange
+ } else {
+ layer.startX = this.offsetLeft
+ layer.hProp = 'left'
+ }
+ if(layer.obj.css('bottom') != 'auto') {
+ // positioned using the "bottom" propery, not "top", so we should mutate that in case the parent element resizes
+ layer.startY = $(this.parentNode).height() - this.offsetTop - layer.obj.height()
+ layer.vProp = 'bottom'
+ layer.yRange = -1 * layer.yRange
+ } else {
+ layer.startY = this.offsetTop
+ layer.vProp = 'top'
+ }
layer.startX -= layer.inversionFactor * Math.floor(layer.xRange/2)
layer.startY -= layer.inversionFactor * Math.floor(layer.yRange/2)
@@ -220,8 +236,8 @@
for (i = layers.length; i--;) {
layer = layers[i]
layer.obj
- .css('left',layer.startX + layer.inversionFactor*(layer.xRange*hRatio))
- .css('top', layer.startY + layer.inversionFactor*(layer.yRange*vRatio))
+ .css(layer.hProp, layer.startX + layer.inversionFactor*(layer.xRange*hRatio))
+ .css(layer.vProp, layer.startY + layer.inversionFactor*(layer.yRange*vRatio))
}
}

0 comments on commit 16d0a96

Please sign in to comment.