Permalink
Browse files

Detect element position, then override positioning method

This is to fix #15 in a better way, and fix another bug in FF that the
previous fix caused.

Firefox appears to set explicit values for top, right, bottom, and left
values, regardless of what is actually specified. This negates the
ability to use `.css('left') != 'auto'`. This method, rather than
detecting how the element position is set, figures out where the
element is, then repositions it using top/left based on the original
position.
  • Loading branch information...
1 parent 118a729 commit 918b527c6984e4e97ecbeb36d111dc341a273298 Cameron McEfee committed Dec 19, 2011
Showing with 83 additions and 24 deletions.
  1. +69 −0 examples/right.html
  2. +14 −24 js/plax.js
View
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Plax Example</title>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+ <!-- <script src="http://s3.amazonaws.com/ender-js/jeesh.min.js"></script> -->
+
+ <script type="text/javascript" src="../js/plax.js"></script>
+ <style type="text/css">
+ * {
+ margin: 0px;
+ padding: 0px;
+ }
+ body {
+ background: #ebeae6 url(img/body_bg.png) bottom right repeat;
+ position: relative;
+ }
+ div#shell {
+ display: block;
+ position: relative;
+ margin: 100px auto;
+ width: 318px;
+ height: 318px;
+ }
+ div#shell{
+ z-index: 1;
+ }
+ img#plax-logo {
+ position: absolute;
+ bottom: 125px;
+ right: 90px;
+ z-index: 3;
+ }
+ img#plax-sphere-1 {
+ position: absolute;
+ z-index: 4;
+ bottom: 189px;
+ right: 191px;
+ }
+ img#plax-sphere-2 {
+ position: absolute;
+ z-index: 2;
+ bottom: 49px;
+ right: 53px;
+ }
+ img#plax-sphere-3 {
+ position: absolute;
+ bottom: 35px;
+ right: 32px;
+ z-index: 1;
+ }
+ </style>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ $('#shell img').plaxify()
+ $.plax.enable()
+ })
+ </script>
+
+ </head>
+ <body>
+ <div id="shell">
+ <img src="img/plax_logo.png" width="136" height="70" data-xrange="20" data-yrange="20" id="plax-logo"/>
+ <img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" id="plax-sphere-1"/>
+ <img src="img/plax_sphere_large.png" width="215" height="215" data-xrange="10" data-yrange="10" id="plax-sphere-2"/>
+ <img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" data-invert="true" id="plax-sphere-3"/>
+ </div>
+ </body>
+</html>
View
@@ -1,4 +1,4 @@
-/* Plax version 1.2.1 */
+/* Plax version 1.2.2 */
/*
Copyright (c) 2011 Cameron McEfee
@@ -90,27 +90,17 @@
layer.startX = x[2] || 0
layer.startY = y[2] || 0
} else {
- // animate using the element's position
- 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
- layer.obj.css('left', 'auto')
- } 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
- layer.obj.css('top', 'auto')
- } else {
- layer.startY = this.offsetTop
- layer.vProp = 'top'
- }
+
+ // Figure out where the element is positioned, then reposition it from the top/left
+ var position = layer.obj.position()
+ layer.obj.css({
+ 'top' : position.top,
+ 'left' : position.left,
+ 'right' :'',
+ 'bottom':''
+ })
+ layer.startX = this.offsetLeft
+ layer.startY = this.offsetTop
}
layer.startX -= layer.inversionFactor * Math.floor(layer.xRange/2)
@@ -261,8 +251,8 @@
layer.obj.css('background-position', newX+'px '+newY+'px')
} else {
layer.obj
- .css(layer.hProp, newX)
- .css(layer.vProp, newY)
+ .css('left', newX)
+ .css('top', newY)
}
}
}

0 comments on commit 918b527

Please sign in to comment.