jeffchannell.com

IE and Opera Vertical Resize

Posted in JavaScript
2009-04-25 21:36:36 +0000 UTC

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;
}