Permalink
Browse files

Fix positioning of CSS3 element when target element is position:fixed…

…. Fixes issue #74.
  • Loading branch information...
1 parent 7e497de commit de695e55711464edc714939298d86471dcf8476e Jason Johnston committed Nov 1, 2010
Showing with 99 additions and 20 deletions.
  1. +29 −20 sources/RootRenderer.js
  2. +70 −0 tests/position-fixed.html
View
@@ -25,30 +25,41 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
var el = this.targetElement,
par = el,
docEl,
- elBounds, parRect,
+ parRect,
+ tgtCS = el.currentStyle,
+ tgtPos = tgtCS.position,
+ boxPos,
s = this.getBox().style, cs,
- x = 0, y = 0;
+ x = 0, y = 0,
+ elBounds = this.boundsInfo.getBounds();
- // Get the element's offsets from its nearest positioned ancestor. Uses
- // getBoundingClientRect for accuracy and speed.
- do {
- par = par.offsetParent;
- } while( par && par.currentStyle.position === 'static' );
- elBounds = this.boundsInfo.getBounds();
- if( par ) {
- parRect = par.getBoundingClientRect();
- cs = par.currentStyle;
- x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
- y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
+ if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
+ x = elBounds.x;
+ y = elBounds.y;
+ boxPos = tgtPos;
} else {
- docEl = doc.documentElement;
- x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
- y = elBounds.y + docEl.scrollTop - docEl.clientTop;
+ // Get the element's offsets from its nearest positioned ancestor. Uses
+ // getBoundingClientRect for accuracy and speed.
+ do {
+ par = par.offsetParent;
+ } while( par && par.currentStyle.position === 'static' );
+ if( par ) {
+ parRect = par.getBoundingClientRect();
+ cs = par.currentStyle;
+ x = elBounds.x - parRect.left - ( parseFloat(cs.borderLeftWidth) || 0 );
+ y = elBounds.y - parRect.top - ( parseFloat(cs.borderTopWidth) || 0 );
+ } else {
+ docEl = doc.documentElement;
+ x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
+ y = elBounds.y + docEl.scrollTop - docEl.clientTop;
+ }
+ boxPos = 'absolute';
}
+ s.position = boxPos;
s.left = x;
s.top = y;
- s.zIndex = el.currentStyle.position === 'static' ? -1 : el.currentStyle.zIndex;
+ s.zIndex = tgtPos === 'static' ? -1 : tgtCS.zIndex;
this.isPositioned = true;
}
},
@@ -71,13 +82,11 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
},
getBox: function() {
- var box = this._box, el, s;
+ var box = this._box, el;
if( !box ) {
el = this.targetElement;
box = this._box = doc.createElement( 'css3-container' );
- s = box.style;
- s.position = el.currentStyle.position === 'fixed' ? 'fixed' : 'absolute';
this.updateVisibility();
// If it's a td/th element, insert the css3-container outside the table
View
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Testing position:fixed</title>
+
+ <style>
+
+ #forceScroll {
+ height: 10000px;
+ background: url(background1.gif)
+ }
+
+
+ .fixed {
+ position: fixed;
+ top: 100px;
+ background: #EEE;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ -webkit-box-shadow: #000 0 0 20px;
+ -moz-box-shadow: #000 0 0 20px;
+ box-shadow: #000 0 0 20px;
+ padding: 20px;
+ width: 60px;
+ border: 1px solid;
+ behavior: url(../build/PIE.htc);
+ }
+
+ #test1 {
+ left: 20px;
+ }
+
+ #test2Cont {
+ position: absolute;
+ border: 1px solid red;
+ top: 300px;
+ left: 10px;
+ background: #FFF;
+ }
+ #test2 {
+ left: 160px;
+ }
+
+ #test3 {
+ right: 100px;
+ }
+
+ </style>
+</head>
+<body>
+
+ <p>This document tests position:fixed. The rounded boxes should stay in place when scrolling.
+ This won't work in IE6 of course as it does not support position:fixed.</p>
+
+ <div id="forceScroll"></div>
+
+ <div class="fixed" id="test1">Child of body</div>
+
+ <div id="test2Cont">
+ Container
+ <div class="fixed" id="test2">Child of container</div>
+ </div>
+
+ <div class="fixed" id="test3">From right</div>
+
+
+</body>
+</html>

0 comments on commit de695e5

Please sign in to comment.