Add -pie-track-active:false flag to prevent toggling the active class…

… name on mousedown/up on a case by case basis. This can be used to avoid the IE6-7 bug where you couldn't drag the scrollbar of a descendant. Fixes issue #190.
lojjic · Mar 28, 2012 · 29edda0 · 29edda0
1 parent 4b397f2
commit 29edda0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/sources/Element.js b/sources/Element.js
@@ -4,6 +4,7 @@ PIE.Element = (function() {
     var wrappers = {},
         lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
         pollCssProp = PIE.CSS_PREFIX + 'poll',
+        trackActiveCssProp = PIE.CSS_PREFIX + 'track-active',
         hoverClass = PIE.CLASS_PREFIX + 'hover',
         activeClass = PIE.CLASS_PREFIX + 'active',
         focusClass = PIE.CLASS_PREFIX + 'focus',
@@ -76,6 +77,7 @@ PIE.Element = (function() {
                     ieDocMode = PIE.ieDocMode,
                     cs = el.currentStyle,
                     lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
+                    trackActive = cs.getAttribute( trackActiveCssProp ) !== 'false',
                     childRenderers;
 
                 // Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
@@ -180,7 +182,9 @@ PIE.Element = (function() {
                     addListener( el, 'onpropertychange', propChanged );
                     addListener( el, 'onmouseenter', mouseEntered );
                     addListener( el, 'onmouseleave', mouseLeft );
-                    addListener( el, 'onmousedown', mousePressed );
+                    if( trackActive ) {
+                        addListener( el, 'onmousedown', mousePressed );
+                    }
                     if( el.tagName in PIE.focusableElements ) {
                         addListener( el, 'onfocus', focused );
                         addListener( el, 'onblur', blurred );

diff --git a/tests/submitted/issue190.html b/tests/submitted/issue190.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+
+    <style type="text/css">
+        .cssPieRoundedCornersTest
+        {
+            border: 1px solid #000;
+            border-radius: 10px;
+            behavior: url(../../build/PIE.htc);
+            position: relative;
+            -pie-track-active: false;
+        }
+    </style>
+
+</head>
+<body>
+
+<div class="cssPieRoundedCornersTest" style="height:150px;">
+    <div style="overflow:auto; height:75px; width:50%;">
+        Hello 1<br/>Hello 2<br/>Hello 3<br/>Hello 4<br/>Hello 5<br/>Hello 6<br/>
+        Hello 7<br/>Hello 8<br/>Hello 9<br/>Hello 10<br/>Hello 11<br/>Hello 12<br/>
+        Hello 13<br/>Hello 14<br/>Hello 15<br/>Hello 16<br/>Hello 17<br/>Hello 18<br/>
+    </div>
+</div>
+
+</body>
+</html>