faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

9 of 10 people (90%) answered Yes
Recently 9 of 10 people (90%) answered Yes

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