PDA

View Full Version : Height Trouble!

Crash1hd
03-26-2003, 10:03 AM
I want to use a Javascript to dynamically change the height of this div statement

<div id=DWelcome style='position:absolute; visibility:hidden; font-family:arial; font-size:10pt; width: 450; height: 250; Z-Index: 1; clip:rect(0,450,250,0); background-color:#CCCCCC; layer-background-color:#CCCCCC'>
<P Align=Center>
<b>Welcome</b><BR>
</P>
</div>

I figured something like this would work

<script>
function h(){
if(document.body.width=600){250}
if(document.body.width=768){350}
}
</script>

and the do the following
<div id=DWelcome style='position:absolute; visibility:hidden; font-family:arial; font-size:10pt; width: 450; height: h(); Z-Index: 1; clip:rect(0,450,h(),0); background-color:#CCCCCC; layer-background-color:#CCCCCC'>
<P Align=Center>
<b>Welcome</b><BR>
</P>
</div>

but it doesnt work!
glenngv
03-26-2003, 10:24 AM
you can only call javascript inside event handlers like onclick, onchange but not like what you did.

there are 2 ways to do what you want.

1. change the height onload:

<head>
<script>
function h(){
var obj = document.getElementById("DWelcome");
if (screen.height==600) obj.style.height="250px";
else if (screen.height==768) obj.style.height="350px";
}
window.onload=h;
</script>
</head>

2. document.write the div as the page loads:

<body>
<script>
if (screen.height==600)
document.write('<div id="DWelcome " ...>'); //write div with height of 250
else if (screen.height==768)
document.write('<div id="DWelcome " ...>'); //write div with height of 350
</script>
</body>

if you want to change the height even after the page has loaded, solution #1 is the way to go.
Crash1hd
03-26-2003, 11:12 AM
Number 2 works perfect for every browser but netscape 4.7! Doh and I cant get Number 1 to work at all!

Gonna Keep trying!
glenngv
03-27-2003, 01:51 AM
#1 should work with IE5+/NS6+/Mozilla
for #2 to work in NS4, try putting document.close() at the end.

maybe i could help better if you have a link to your page or if you can post the code here.
liorean
03-27-2003, 01:55 AM
Isn't it a bit limited to have just 600 or 768 to chose from? It's been a long time since I last used such low resolutions, and with more and more screens in other proportions than 4:3, resolutions are getting pretty diverse.
Crash1hd
03-27-2003, 05:23 AM
Oh they are just examples I will be useing all resolutions when I am done personally I am set at 1280*1024! I actually slept on it tried it again and for what ever reason without changing a darn thing It works fine lol

Crash1hd
Crash1hd
03-27-2003, 08:49 AM
Which would be better useing the screen.height or the document.body.clientheight cause I would like the area to change size acording to the size of the browser the screen way is great for full screen webpage but I want it to be a bit more versitile
glenngv
03-27-2003, 09:13 AM
put the div inside the table with height and width of 100% then just put a percentage the div will occupy inside the table.

<table height="100%" width="100%" border="1"><tr><td>
<div style="border:1px solid black;height:80%;font-family:arial; font-size:10pt; ">
Welcome!!!
</div>
</td></tr></table>

I've made the borders of the table and div shown for you to see the height of the div changes as you resize the window. you can remove them later. and adjust the div height to your liking.