Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Changeset 8723

Show
Ignore:
Timestamp:
01/25/08 22:02:12 (8 months ago)
Author:
andrew
Message:

Ensure positionedOffset properly considers "position: fixed" elements. Also ensure IE reports offsets correctly by triggering hasLayout when a "static" element has a "fixed" element as an offset parent. Closes #10644. [heygrady, kangax, Andrew Dupont]

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • spinoffs/prototype/trunk/CHANGELOG

    r8722 r8723  
    11*SVN* 
     2 
     3* Ensure positionedOffset properly considers "position: fixed" elements. Also ensures IE reports offsets correctly by triggering hasLayout when a "static" element has a "fixed" element as an offset parent. Closes #10644. [heygrady, kangax, Andrew Dupont] 
    24 
    35* Roll back the fix for #9609, since it does not work in Opera. Instead, avoid using "valueOf" or "toString" as field names in forms. 

  • spinoffs/prototype/trunk/src/dom.js

    r8703 r8723  
    520520        if (element.tagName == 'BODY') break; 
    521521        var p = Element.getStyle(element, 'position'); 
    522         if (p == 'relative' || p == 'absolute') break; 
     522        if (p !== 'static') break; 
    523523      } 
    524524    } while (element); 
    …… 
    713713 
    714714else if (Prototype.Browser.IE) { 
    715   $w('positionedOffset getOffsetParent viewportOffset').each(function(method) { 
     715  // IE doesn't report offsets correctly for static elements, so we change them 
     716  // to "relative" to get the values, then change them back.   
     717  Element.Methods.getOffsetParent = Element.Methods.getOffsetParent.wrap( 
     718    function(proceed, element) { 
     719      element = $(element); 
     720      var position = element.getStyle('position'); 
     721      if (position !== 'static') return proceed(element); 
     722      element.setStyle({ position: 'relative' }); 
     723      var value = proceed(element); 
     724      element.setStyle({ position: position }); 
     725      return value; 
     726    } 
     727  ); 
     728   
     729  $w('positionedOffset viewportOffset').each(function(method) { 
    716730    Element.Methods[method] = Element.Methods[method].wrap( 
    717731      function(proceed, element) { 
    718732        element = $(element); 
    719733        var position = element.getStyle('position'); 
    720         if (position != 'static') return proceed(element); 
     734        if (position !== 'static') return proceed(element); 
     735        // Trigger hasLayout on the offset parent so that IE6 reports 
     736        // accurate offsetTop and offsetLeft values for position: fixed. 
     737        var offsetParent = element.getOffsetParent(); 
     738        if (offsetParent && offsetParent.getStyle('position') === 'fixed') 
     739          offsetParent.setStyle({ zoom: 1 }); 
    721740        element.setStyle({ position: 'relative' }); 
    722741        var value = proceed(element); 
    …… 
    726745    ); 
    727746  }); 
    728    
     747     
    729748  Element.Methods.getStyle = function(element, style) { 
    730749    element = $(element); 

  • spinoffs/prototype/trunk/test/unit/dom.html

    r8703 r8723  
    368368    <div id="absolute_relative_undefined">XYZ</div> 
    369369  </div> 
    370 </div> 
     370  <div id="absolute_fixed" style="position: fixed; top: 10px; left: 10px"> 
     371    <span id="absolute_fixed_absolute" style="position: absolute; top: 10px; left: 10px">foo</span> 
     372    <span id="absolute_fixed_undefined" style="display:block">bar</span> 
     373  </div></div> 
    371374<div id="notInlineAbsoluted"></div> 
    372375<div id="inlineAbsoluted" style="position: absolute"></div> 
    …… 
    10921095      assert($('great-grand-child').descendantOf('child'), 'great-grand-child < child'); 
    10931096       
    1094       window.debug = true; 
    10951097      assert($('sibling').descendantOf('ancestor'), 'sibling < ancestor'); 
    10961098      assert($('grand-sibling').descendantOf('sibling'), 'grand-sibling < sibling'); 
    …… 
    10981100       
    10991101      assert($('grand-sibling').descendantOf(document.body), 'grand-sibling < body');       
    1100       window.debug = false; 
    11011102       
    11021103      assert(!$('great-grand-child').descendantOf('great-grand-child'), 'great-grand-child < great-grand-child'); 
    …… 
    11061107      assert(!$('child').descendantOf('not-in-the-family'), 'child < not-in-the-family'); 
    11071108       
    1108       assert(!$(document.body).descendantOf('great-grand-child')); 
     1109      assert(!$(document.body).descendantOf('great-grand-child'));       
    11091110    }},   
    11101111     
    …… 
    16051606      assertEnumEqual([0,10], 
    16061607        $('absolute_relative_undefined').positionedOffset()); 
     1608      assertEnumEqual([10,10], 
     1609        $('absolute_fixed_absolute').positionedOffset()); 
     1610         
     1611      var afu = $('absolute_fixed_undefined'); 
     1612      assertEnumEqual([afu.offsetLeft, afu.offsetTop], 
     1613        afu.positionedOffset()); 
    16071614    }}, 
    16081615