Entry

How do I work around the OPERA window resize bug for positioned elements / layers

Apr 6th, 2008 19:17
ha mo, Mark Szlazak,

NN4 looses positions and style definitions of "layers" when resizing 
the browser window. See articles:

"How do I work around the NN4 resize bug for positioned elements / 
layers?"
"What can I do about my positioned elements/layers being lost onresize 
in NN4?"

	http://www.faqts.com/knowledge_base/view.phtml/aid/2208/fid/128

"Why is the background color of my layers changing when resizing the 
window in NN4"

	http://www.faqts.com/knowledge_base/view.phtml/aid/2594/fid/128

The general solution is to reload the page on browser window resize 
events.

        function resizeHandler() { location.reload() }
        onresize = resizeHandler;

However, resize events fire when scroll bars are sized, and this occurs 
during page loading, causing an additional firing of this event.

To filter out this second resize, a comparison can be made of window 
dimensions with resize events, if they have changed then a true resize 
has occurred.

See "Ensuring DHTML Layout on Resize"

	http://www.webreference.com/dhtml/diner/resize/

Here's one possible script that gets original dimension after page 
loading and uses these in the resize handler.

        NN4   = (document.layers);

	function loadHandler() {
		if (NN4) {
			origWidth  = this.innerWidth;
			origHeight = this.innerHeight;
		}
	}
	onload = loadHandler;

	function resizeHandler() {
	        if (this.innerWidth != origWidth
	            ||
	            this.innerHeight != origHeight) location.reload();
        }
        if (NN4) onresize = resizeHandler;

Unfortunately, this doesn't work in Opera since there is no support for 
window resize events. A work around is to use a timer that watches for 
changes in window size.

A script that works in both NN4 and Opera could look like this.

        OPERA = (window.opera);
        NN4   = (document.layers);

	function loadHandler() {
		if (NN4 || OPERA) {
			origWidth  = this.innerWidth;
			origHeight = this.innerHeight;
                        if (OPERA) resizeHandler();
		}
	}
	onload = loadHandler;

        function resizeHandler() {
	        if (this.innerWidth != origWidth
	            ||
	            this.innerHeight != origHeight) location.reload();
	        if (OPERA) setTimeout('resizeHandler()',500);
        }
        if (NN4) onresize = resizeHandler;


http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com