Saturday, 25 April 2009 16:36

While working on this template, I was having an issue with both IE and Opera not rerendering things properly if the browser window was only resized vertically. What's odd is that certain JavaScript hover events would force some elements to be redrawn, thus "fixing" the problem.

Below is the short script I wrote to force IE and Opera to redraw a specific element, the wrapper of the site. It requires Mootools 1.11.

 
var fixy;
var fixyAnimation;
var fixyDir = 0;
// add events
if( window.opera ) { window.addEvent( 'load', operaResizeHandler ); }
if( window.ie ) { window.addEvent( 'load', ieResizeHandler ); }
// ie functions
function ieResizeHandler( e ) { setInterval( "fixIE()", 200 ); }
function fixIE()
{
  $E('div#wrapper').setStyle( 'padding-left', '10px' ).setStyle( 'padding-right', '10px' );
  $E('div#wrapper').setStyle( 'padding-left', '0px' ).setStyle( 'padding-right', '0px' );
}
// opera functions
function operaResizeHandler( e )
{
  // so what I'm doing is creating a dummy item for these browsers
  // and doing continuous, small animation to force the redraw
  fixy = new Element( 'div' );
  fixy.setStyle( 'position', 'absolute' );
  fixy.setStyle( 'top', '0px' );
  fixy.setStyle( 'left', '0px' );
  fixy.setStyle( 'letter-spacing', '0px' );
  fixy.setStyle( 'color', '#000' );
  fixy.setStyle( 'font-size', '4px' );
  fixy.setStyle( 'padding-left', '0px' );
  fixy.setStyle( 'padding-right', '0px' );
  // text node
  var txt = document.createTextNode( '.' );
  fixy.appendChild( txt );
  // we add to wrapper, because that's the element that needs to be redrawn
  $E('div#wrapper').appendChild( fixy );
  // set animation
  fixyAnimation = new Fx.Styles( fixy, { duration: 200, wait: false } );
  setInterval( "fixOpera()", 200 );
}
function fixOpera()
{
  fixyAnimation.start({
    'padding-left': fixyDir+'px',
    'padding-right': fixyDir+'px',
    'letter-spacing': fixyDir+'px'
  });
  fixyDir = fixyDir == 0 ? 10 : 0;
}
 
Last Updated on Tuesday, 28 April 2009 23:10
 

Add your comment

Your name:
Comment:
  The word for verification. Lowercase letters only with no spaces.
Word verification:

The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Jeff Channell is not affiliated with or endorsed by Open Source Matters or the Joomla!® Project.

Santorum
Joomla Extensions