help with resizing element please

[billyboy]

Hello,
I am new to this forum and am very new to using javascript. (Translation: I really don't know what I'm doing)
I have this snippet of code that I have modified and simplified that will resize a page element to fill the available space regardless of the user's resolution. It seems to me it should be possible to combine width and height rather that calling up 'mydiv' twice, but anything I've tried causes an error. And I've written the same code twice since there is quite a difference between what is needed for Firefox and IE and used conditional comments to hide the code for IE from FF. Could this be done using if, else somehow? What I have here seems to work okay, just not sure if it's "right" or if it could be done more effeciently, and would appreciate any suggestions/help from someone that actually knows JS.
Thanks, Bill

<script type="text/javascript"> // controls size in Firefox
document['mydiv'].style.width=screen.width+144
document['mydiv'].style.height=screen.height+45
</script>
<!--[if IE]>
<script type="text/javascript"> // controls size in IE
document['mydiv].style.width=screen.width+5
document['mydiv'].style.height=screen.height+40
</script>
<![endif]-->

[jscheuer1]

Using the screen size is unreliable if the page is loaded in a window that doesn't take up the entire screen. Just setting the element's width to 100% will make it as wide as the window as long as nothing else whose inner dimensions are narrower is containing it. This part can be hard coded into the HTML:

<div style="width:100%;"></div>

However, a division's default width is 100%, so even this is not necessary. The height is another issue, generally a division will expand vertically to contain whatever is inside it, as long as nothing with a specific height is containing it. If this isn't good enough, say - you want a border for the entire page or something, use the body tag. In fact, a division that takes up the entire window is the body, why not use it?

[billyboy]

Unfortunatley I have to resort to JS. What I've done is increase the size of an MSN chatroom screen by inserting it's url in an object tag and modified it with the above code. The MSN screen itself is quite small with a lot of wasted space around it so expanding it gets rid of the wasted space, and since it renders quite differently in Firefox I need the two codes. My 1st attempt was setting height and width in the CSS but if I set the height as a percentage to stretch the chatscreen to fill the window at 800X600, then it's too long at 1024x768 and higher. Can that code be modified to something along these lines:

if IE
document['mydiv].style.width=screen.width+5 & height=screen.height+40
else
document['mydiv'].style.width=screen.width+144 & height=screen.height+45


That's what I've been trying to do but I don't know enough about JS to know if it can be done like that, or how to write it properly.
Thanks, Bill

[jscheuer1]

I still want to get you off of using 'screen' dimensions to resize a division for the reasons already noted. I'd also like to get you off of wanting your code to look real simple. 'Works' is better than 'looks good'. In doing so, I think I will answer your other question of how to distinguish which browser is being used. The consensus in these forums, which I tend to agree with, is that browser testing is less desirable than object testing. Since browsers are always changing, to test for them is complicated and potentially requires that your code be updated for each new version. Testing for browsers also requires that many, many browsers be tested for if you want your code to work with more than just two of them.

Consider that most browsers will return an accurate value for:

window.innerHeight

and:

window.innerWidth

And that these values reflect the space available in the user's window, not his screen. Those (generally IE browsers) that do not return any value/don't recognize those as objects will return accurate values for either:

document.documentElement.clientWidth/Height

or:

document.body.clientWidth/Height

depending upon wether there is a DOCTYPE involved or not, which can also be tested for. So, if you must resize to available dimensions, here is a good way to do it:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}
function resizeDiv(id){
if ((document.getElementById||document.all)&&(window.innerWidth||iecompattest().clientWidth)){
var el=document.all? document.all[id].style : document.getElementById(id).style
el.width=el.height=0
el.position='absolute'
el.left=el.top=0
el.width=window.innerWidth? window.innerWidth+'px' : iecompattest().clientWidth+'px'
el.height=window.innerHeight? window.innerHeight+'px' : iecompattest().clientHeight+'px'
}
}
</script>
</head>
<body>
<div id="myDiv" style="background-color:red;">hi</div>
<script type="text/javascript">
resizeDiv('myDiv');
onresize=function(){resizeDiv('myDiv');}
</script>
</body>
</html>

[billyboy]

That code works great in the example you posted. Unfortunately I'm dealing with MSN here and they have their own way of doing things. Proper code and MSN is a contradiction of terms. As soon as I put in the link to the chatroom it goes haywire. There's something in their code that overrides yours and messes it up. Any values inserted for FF cause it to disappear completely and any value inserted for IE cause it to expand ridiculously large. So I'm still stuck with the original code. I tried a few other things before posting here and so far that's the only thing that works. Can it be written as width plus height?

[jscheuer1]

Well, I'd like to see a demo of your page using screen the way that you have it in your first post in this thread. In tests here, even when corrected for the missing single quote (') in this line:

document['mydiv].style.width=screen.width+5

It did nothing with a division with both its name and id set to 'mydiv'. If enhanced to do what it appears to be trying to do, it could look like so:

<script type="text/javascript"> // controls size in most modern browsers
if (document.getElementById){
var obj=document.getElementById('myDiv').style
obj.width=screen.width+144+'px',obj.height=screen.height+45+'px'
}
</script>
<!--[if IE]>
<script type="text/javascript"> // controls size in modern IE
if (document.getElementById){
obj.width=screen.width+5+'px',obj.height=screen.height+40+'px'
}
</script>
<![endif]-->

Then it works with a division with the id of 'myDiv' but, as I expected when I originally saw your code, the size of the division becomes (as the code dictates) larger than the screen size.

The bottom line here though is, if whatever code you had was working, it certainly needn't be changed.

[billyboy]

Thanks again for all your help John, with this and media player in the other thread. I do appreciate it.
I don't understand why that code I first posted works in one situation and not in another. I've tried it in another situation, and like your test, it did nothing. And I do need to stretch the div larger then the screen to compensate for wasted space. Your advice has not fallen on deaf ears either. The code you posted that detects object support and sizes the content according to the window would be ideal, and works for everything I've tried except the chatscreen. I haven't given up on it yet but for now I do have something that works, and when I have more time I'm going to play with it a bit more.

Bill