Forum Moderators: open

Message Too Old, No Replies

NS7.2: Adjusting DIVs by onResize()

Homemade Script Works in IE6 but not NS6+

         

Quasaur1

5:45 pm on Oct 29, 2004 (gmt 0)

10+ Year Member



Hello...

My name is Calvin Mitchell.
My web site is [clmitchell.net...]
Here's my problem:

I've added an external javascript file to respond to the onresize command in the body of my web page:

***************************
<body id="bodygs" class="gnustep" onresize="resize()" onresize="resize()">
***************************

the javascript function works fine in IE6, but in NS7.2 it doesn't work...where did i go wrong?
following is the code for resize.js; ANY ASSISTANCE WOULD BE GREATLY APPRECIATED!

*****************************
//function for resizing gnustep page

function resize(){
//IE6
if (document.all){
//if window width is too small dont change anything
var parWidth=document.body.clientWidth;
if (parWidth<795)parWidth=805;
//make width adjustments
document.all['ws1'].style.pixelWidth=parWidth-10;
document.all['HTab'].style.pixelWidth=parWidth-232;
document.all['DataTab'].style.pixelWidth=parWidth-232;
document.all['dock1'].style.pixelLeft=parWidth-85;
document.all['xhtml-compliant'].style.pixelLeft=parWidth-288;
//if window height is too small dont change anything
var parHeight=document.body.clientHeight;
if (parHeight<595)parHeight=605;
//make height adjustments
document.all['ws1'].style.pixelHeight=parHeight-10;
document.all['DataTab'].style.pixelHeight=parHeight-92;
document.all['xhtml-compliant'].style.pixelTop=parHeight-50;
//make sure everything is visible
document.all['bodygs'].style.visibility = 'visible';
document.all['bodygs'].zIndex = 0;
document.all['HTab'].style.visibility = 'visible';
document.all['HTab'].zIndex = 1;
document.all['DataTab'].style.visibility = 'visible';
document.all['DataTab'].zIndex = 1;
document.all['dock1'].style.visibility = 'visible';
document.all['dock1'].zIndex = 1;
document.all['xhtml-compliant'].style.visibility = 'visible';
document.all['xhtml-compliant'].zIndex = 1;
document.all['menu1'].style.visibility = 'visible';
document.all['menu1'].zIndex = 1;
return;
}
//NS6+
if (document.getElementById){
//if window width is too small dont change anything
var parWidth=window.innerWidth;
if (parWidth<795)parWidth=805;
//make width adjustments
document.getElementById('ws1').style.width=parWidth-10;
document.getElementById('HTab').style.width=parWidth-232;
document.getElementById('DataTab').style.width=parWidth-232;
document.getElementById('dock1').style.left=parWidth-85;
document.getElementById('xhtml-compliant').left=parWidth-288;
//if window height is too small dont change anything
var parHeight=window.innerHeight;
if (parHeight<595)parHeight=605;
//make height adjustments
document.getElementById('ws1').height=parHeight-10;
document.getElementById('DataTab').height=parHeight-92;
document.getElementById('xhtml-compliant').top=parHeight-50;
//make sure everything is visible
document.getElementById('bodygs').visibility = 'visible';
document.getElementById('bodygs').zIndex = 0;
document.getElementById('HTab').visibility = 'visible';
document.getElementById('HTab').zIndex = 1;
document.getElementById('DataTab').visibility = 'visible';
document.getElementById('DataTab').zIndex = 1;
document.getElementById('dock1').visibility = 'visible';
document.getElementById('dock1').zIndex = 1;
document.getElementById('xhtml-compliant').visibility = 'visible';
document.getElementById('xhtml-compliant').zIndex = 1;
document.getElementById('menu1').visibility = 'visible';
document.getElementById('menu1').zIndex = 1;
return;
}
}
*****************************

Bernard Marx

8:25 am on Oct 30, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



1. Use units explicitly for css properties, eg:

document.getElementById('DataTab').style.width=(parWidth-232)+'px';

2. style object is missing from the reference chain in many statements, eg:

document.getElementById('ws1').height=parHeight-10;
// should be
document.getElementById('ws1').style.height=(parHeight-10)+'px';

Quasaur1

4:05 pm on Oct 30, 2004 (gmt 0)

10+ Year Member



Thanks a BUNDLE...I'll buy you a house!

Quasaur1

4:15 pm on Oct 30, 2004 (gmt 0)

10+ Year Member



(PUTTING ON BRAKES)...Sorry...NS7.2 still ignores my onresize() event...

Here's the modified code...what am i missing?:

**********************
//function for resizing gnustep page

function resize(){
//IE6
if (document.all){
//if window width is too small dont change anything
var parWidth=document.body.clientWidth;
if (parWidth<795)parWidth=805;
//make width adjustments
document.all['ws1'].style.pixelWidth=parWidth-10;
document.all['HTab'].style.pixelWidth=parWidth-232;
document.all['DataTab'].style.pixelWidth=parWidth-232;
document.all['dock1'].style.pixelLeft=parWidth-85;
document.all['xhtml-compliant'].style.pixelLeft=parWidth-288;
//if window height is too small dont change anything
var parHeight=document.body.clientHeight;
if (parHeight<595)parHeight=605;
//make height adjustments
document.all['ws1'].style.pixelHeight=parHeight-10;
document.all['DataTab'].style.pixelHeight=parHeight-92;
document.all['xhtml-compliant'].style.pixelTop=parHeight-50;
//make sure everything is visible
document.all['bodygs'].style.visibility = 'visible';
document.all['bodygs'].zIndex = 0;
document.all['HTab'].style.visibility = 'visible';
document.all['HTab'].zIndex = 1;
document.all['DataTab'].style.visibility = 'visible';
document.all['DataTab'].zIndex = 1;
document.all['dock1'].style.visibility = 'visible';
document.all['dock1'].zIndex = 1;
document.all['xhtml-compliant'].style.visibility = 'visible';
document.all['xhtml-compliant'].zIndex = 1;
document.all['menu1'].style.visibility = 'visible';
document.all['menu1'].zIndex = 1;
return;
}
//NS6+
if (document.getElementById){
//if window width is too small dont change anything
var NparWidth=self.innerWidth;
if (NparWidth<795)NparWidth=805;
//make width adjustments

document.getElementById('ws1').style.width=(NparWidth-10)+'px';
document.getElementById('HTab').style.width=(NparWidth-232)+'px';
document.getElementById('DataTab').style.width=(NparWidth-232)+'px';
document.getElementById('dock1').style.left=(NparWidth-85)+'px';
document.getElementById('xhtml-compliant').style.left=(NparWidth-288)+'px';
//if window height is too small dont change anything
var NparHeight=self.innerHeight;
if (NparHeight<595)NparHeight=605;
//make height adjustments
document.getElementById('ws1').style.height=(NparHeight-10)+'px';
document.getElementById('DataTab').style.height=(NparHeight-92)+'px';
document.getElementById('xhtml-compliant').style.top=(NparHeight-50)+'px';
//make sure everything is visible
document.getElementById('bodygs').visibility = 'visible';
document.getElementById('bodygs').zIndex = 0;
document.getElementById('HTab').visibility = 'visible';
document.getElementById('HTab').zIndex = 1;
document.getElementById('DataTab').visibility = 'visible';
document.getElementById('DataTab').zIndex = 1;
document.getElementById('dock1').visibility = 'visible';
document.getElementById('dock1').zIndex = 1;
document.getElementById('xhtml-compliant').visibility = 'visible';
document.getElementById('xhtml-compliant').zIndex = 1;
document.getElementById('menu1').visibility = 'visible';
document.getElementById('menu1').zIndex = 1;
return;
}
}
**********************

Quasaur1

5:04 pm on Oct 30, 2004 (gmt 0)

10+ Year Member



TO BERNARD MAX:

A THOUSAND APOLOGIES!

your suggestion worked PERFECTLY...it's just that in NS7.2 the content only updates AFTER i let go of the window.

...Now to figure out if i can do the resize under NN4!

Do you think it's worth the trouble to try?
right now Communicator 4.8 mis-aligns the DIVs when i resize the client window...

I COULD just have the script exit when a NN4 browser is detected...?

Bernard Marx

6:02 pm on Oct 30, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Do you think it's worth the trouble to try?

How long is a piece of string?

There are a few complications, but it's possible.
You're divs will have to be postioned for you to be able to reference them in NN4.

Quasaur1

6:19 pm on Oct 30, 2004 (gmt 0)

10+ Year Member



my 4 DIVs are positioned in the stylesheet...

What do YOU mean by "positioned"?

Bernard Marx

10:55 pm on Oct 30, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



NN4 can't reference divs that aren't "position: absolute" (I think relative will do though).

Bernard Marx

10:56 pm on Oct 30, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



NN4 can't reference divs that aren't position: absolute (¦¦ relative - I think)