Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: pxiq/PIE
...
head fork: lojjic/PIE
  • 7 commits
  • 9 files changed
  • 0 commit comments
  • 1 contributor
View
10 documentation/build.html
@@ -36,11 +36,15 @@ <h2 id="getsource">Get the source code</h2>
<ol>
<li>Check out the source using Git:
- <pre><kbd>git clone git://github.com/lojjic/PIE.git</kbd></pre>
+ <pre><kbd>git clone git://github.com/lojjic/PIE.git
+cd PIE</kbd></pre>
+ If you want the 2.x unstable branch then you're done; if you want the 1.x stable branch then run:
+ <pre><kbd>git checkout 1.x</kbd></pre>
or:
</li>
- <li>Download an archive of the source:
- <a href="http://github.com/lojjic/PIE/archives/master">http://github.com/lojjic/PIE/archives/master</a>
+ <li>Download an archive of the source:<br>
+ <a href="http://github.com/lojjic/PIE/archives/master">http://github.com/lojjic/PIE/archives/master</a> (2.x unstable branch)<br>
+ <a href="http://github.com/lojjic/PIE/archives/1.x">http://github.com/lojjic/PIE/archives/1.x</a> (1.x stable branch)
</li>
</ol>
View
4 documentation/known-issues.html
@@ -21,7 +21,7 @@
and feature requests are tracked.</p>
<ul>
- <li><a href="#z-index">Problems with z-index (disappearing backgrounds/borders/shadows)</a></li>
+ <li><a href="#z-index">Disappearing backgrounds/borders/shadows (z-index issues)</a></li>
<li><a href="#relative-paths">Relative paths</a></li>
<li><a href="#shorthand">Shorthand only</a></li>
<li><a href="#hasLayout">Problems with hasLayout</a></li>
@@ -33,7 +33,7 @@
</ul>
-<h2 id="z-index">Problems with z-index (disappearing backgrounds/borders/shadows)</h2>
+<h2 id="z-index">Disappearing backgrounds/borders/shadows (z-index issues)</h2>
<p>First, a little background on how PIE renders CSS3 decorations: a single <code>&lt;css3-container/&gt;</code>
element is created which holds all the VML objects. This container element is inserted as a previous sibling to the
View
25 documentation/supported-css3-features.html
@@ -30,6 +30,8 @@
<li><a href="#pie-png-fix">PNG alpha transparency and -pie-png-fix</a></li>
<li><a href="#pie-lazy-init">Lazy Initialization (-pie-lazy-init)</a></li>
<li><a href="#pie-poll">Layout polling (-pie-poll)</a></li>
+ <li><a href="#pie-track-hover">:hover tracking (-pie-track-hover)</a></li>
+ <li><a href="#pie-track-active">:active tracking (-pie-track-active)</a></li>
</ul>
</li>
</ul>
@@ -396,6 +398,29 @@ <h3 id="pie-poll">Layout Polling (-pie-poll)</h3>
<code>-pie-poll:true;</code> to force polling on for an element, or <code>-pie-poll:false;</code> to disable it.</p>
+<h3 id="pie-track-hover">Hover tracking (-pie-track-hover)</h3>
+
+<p>By default, PIE automatically listens for mouseover/out events and applies any matching <code>:hover</code>
+styles if supported by the browser. In addition, it adds a special <code>pie_hover</code> class to the element
+which you can use to apply hover styles in versions of IE that don't support it.</p>
+
+<p>If you want to disable this, you can do so by setting the custom CSS style <code>-pie-track-hover:false;</code>
+for the element. This might be useful if you notice sluggishness on your page when hovering and you don't need
+hover styles.</p>
+
+
+<h3 id="pie-track-active">Active tracking (-pie-track-active)</h3>
+
+<p>By default, PIE automatically listens for mousedown/up events and applies any matching <code>:active</code>
+styles if supported by the browser. In addition, it adds a special <code>pie_active</code> class to the element
+which you can use to apply active styles in versions of IE that don't support it.</p>
+
+<p>If you want to disable this, you can do so by setting the custom CSS style <code>-pie-track-active:false;</code>
+for the element. This is useful in some situations where the addition of the pie_active class has unwanted
+side effects, for instance breaking the behavior of <a href="https://github.com/lojjic/PIE/issues/190">scrollbars in IE7</a>.</p>
+
+
+
<!-- noformat off -->
View
3  sources/BackgroundRenderer.js
@@ -150,7 +150,8 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
// Set the size of the image. We only set it if the image is scaled via background-size or by
// the user changing the browser zoom level, to avoid fuzzy images at normal size. For some reason
// using px units doesn't work in VML markup so we must convert to pt.
- 'size', ( adjustedImgSize.w !== imgSize.w || adjustedImgSize.h !== imgSize.h || screen['logicalXDPI'] / screen['deviceXDPI'] !== 1 ) ?
+ 'size', ( adjustedImgSize.w !== imgSize.w || adjustedImgSize.h !== imgSize.h ||
+ bounds.logicalZoomRatio !== 1 || screen['logicalXDPI'] / screen['deviceXDPI'] !== 1 ) ?
PIE.Length.pxToPt( adjustedImgSize.w ) + 'pt,' + PIE.Length.pxToPt( adjustedImgSize.h ) + 'pt' : ''
);
View
13 sources/BoundsInfo.js
@@ -25,14 +25,19 @@ PIE.BoundsInfo.prototype = {
getLiveBounds: function() {
var el = this.targetElement,
rect = el.getBoundingClientRect(),
- isIE9 = PIE.ieDocMode === 9;
+ isIE9 = PIE.ieDocMode === 9,
+ isIE7 = PIE.ieVersion === 7,
+ width = rect.right - rect.left;
return {
x: rect.left,
y: rect.top,
// In some cases scrolling the page will cause IE9 to report incorrect dimensions
- // in the rect returned by getBoundingClientRect, so we must query offsetWidth/Height instead
- w: isIE9 ? el.offsetWidth : rect.right - rect.left,
- h: isIE9 ? el.offsetHeight : rect.bottom - rect.top
+ // in the rect returned by getBoundingClientRect, so we must query offsetWidth/Height
+ // instead. Also IE7 is inconsistent in using logical vs. device pixels in measurements
+ // so we must calculate the ratio and use it in certain places as a position adjustment.
+ w: isIE9 || isIE7 ? el.offsetWidth : width,
+ h: isIE9 || isIE7 ? el.offsetHeight : rect.bottom - rect.top,
+ logicalZoomRatio: ( isIE7 && width ) ? el.offsetWidth / width : 1
};
},
View
10 sources/Element.js
@@ -5,6 +5,7 @@ PIE.Element = (function() {
lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
pollCssProp = PIE.CSS_PREFIX + 'poll',
trackActiveCssProp = PIE.CSS_PREFIX + 'track-active',
+ trackHoverCssProp = PIE.CSS_PREFIX + 'track-hover',
hoverClass = PIE.CLASS_PREFIX + 'hover',
activeClass = PIE.CLASS_PREFIX + 'active',
focusClass = PIE.CLASS_PREFIX + 'focus',
@@ -78,6 +79,7 @@ PIE.Element = (function() {
cs = el.currentStyle,
lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
trackActive = cs.getAttribute( trackActiveCssProp ) !== 'false',
+ trackHover = cs.getAttribute( trackHoverCssProp ) !== 'false',
childRenderers;
// Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
@@ -180,8 +182,12 @@ PIE.Element = (function() {
}
addListener( el, 'onresize', handleMoveOrResize );
addListener( el, 'onpropertychange', propChanged );
- addListener( el, 'onmouseenter', mouseEntered );
- addListener( el, 'onmouseleave', mouseLeft );
+ if( trackHover ) {
+ addListener( el, 'onmouseenter', mouseEntered );
+ }
+ if( trackHover || trackActive ) {
+ addListener( el, 'onmouseleave', mouseLeft );
+ }
if( trackActive ) {
addListener( el, 'onmousedown', mousePressed );
}
View
2  sources/IE9BackgroundRenderer.js
@@ -49,7 +49,7 @@ PIE.IE9BackgroundRenderer = PIE.RendererBase.newRenderer( {
}
if ( props.color ) {
- bg.push( props.color.val );
+ bg.push( props.color.val + ' ' + ( props.colorClip || '' ) );
}
me.parent.setBackgroundLayer(me.bgLayerZIndex, bg.join(','));
View
15 sources/RootRenderer.js
@@ -40,11 +40,12 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
boxPos,
s = this.getBoxEl().style, cs,
x = 0, y = 0,
- elBounds = this.boundsInfo.getBounds();
+ elBounds = this.boundsInfo.getBounds(),
+ logicalZoomRatio = elBounds.logicalZoomRatio;
if( tgtPos === 'fixed' && PIE.ieVersion > 6 ) {
- x = elBounds.x;
- y = elBounds.y;
+ x = elBounds.x * logicalZoomRatio;
+ y = elBounds.y * logicalZoomRatio;
boxPos = tgtPos;
} else {
// Get the element's offsets from its nearest positioned ancestor. Uses
@@ -55,12 +56,12 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
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 );
+ x = ( elBounds.x - parRect.left ) * logicalZoomRatio - ( parseFloat(cs.borderLeftWidth) || 0 );
+ y = ( elBounds.y - parRect.top ) * logicalZoomRatio - ( parseFloat(cs.borderTopWidth) || 0 );
} else {
docEl = doc.documentElement;
- x = elBounds.x + docEl.scrollLeft - docEl.clientLeft;
- y = elBounds.y + docEl.scrollTop - docEl.clientTop;
+ x = ( elBounds.x + docEl.scrollLeft - docEl.clientLeft ) * logicalZoomRatio;
+ y = ( elBounds.y + docEl.scrollTop - docEl.clientTop ) * logicalZoomRatio;
}
boxPos = 'absolute';
}
View
55 tests/track-hover_track-active.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>-pie-png-fix test</title>
+
+ <style>
+
+ div {
+ behavior: url(../build/PIE.htc);
+ border-radius: 20px;
+ box-shadow: 0 0 10px blue;
+ background: white;
+ width: 200px;
+ height: 50px;
+ padding: 30px;
+ margin: 50px;
+ }
+
+ div.hover:hover {
+ border-radius: 30px;
+ box-shadow: 0 0 10px green;
+ }
+ #hover-false {
+ -pie-track-hover: false;
+ }
+
+ div.active:active {
+ border-radius: 50px;
+ box-shadow: 0 0 20px red;
+ }
+ #active-false {
+ -pie-track-active: false;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div class="hover" id="hover-true">
+ -pie-track-hover: true;
+ </div>
+ <div class="hover" id="hover-false">
+ -pie-track-hover: false;
+ </div>
+
+ <div class="active" id="active-true">
+ -pie-track-active: true;
+ </div>
+ <div class="active" id="active-false">
+ -pie-track-active: false;
+ </div>
+
+</body>
+</html>

No commit comments for this range

Something went wrong with that request. Please try again.