How do you get the window width for all browsers?

Phil Powell · Jul 16, 2004

[JS]
<script type="text/javascript">

</script>
[/JS]

This entire script fails in Mozilla Firefox, Konqueror and IE 6+ in
all instances. Customer has a simple request: they want me to produce
a textarea that is dynamic in width that fills the entire window
because the content itself is dynamic in width (people's resumes) and
I cannot think of any way to do this except Javascript.

I borrowed code thinking I could get the instance to work, to no
avail, I continually get "undefined" for the "width" variable when
using the function I borrowed.

How do you simply get the window's width?

Thanx
Phil

Janwillem Borleffs · Jul 18, 2004

Phil said:
I borrowed code thinking I could get the instance to work, to no
avail, I continually get "undefined" for the "width" variable when
using the function I borrowed.

The reason for this, is that document.body does not exist at the time you
are calling it.

One workaround would be the following:

....
<head>
<script type="text/javascript">
function getWinWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (document.body.clientWidth) {
return document.body.clientWidth;
} else {
return 100;
}
}

window.onload = function () {
var width;
if (width = getWinWidth()) {
document.forms[0].elements['ta'].style.width
= width + 'px';
}
}
</script>
</head>
<body>
<form>
<textarea name="ta" rows="29" name="resume" cols="100"
style="width:100px">
</textarea>
</form>
</body>
</html>

Also note that I have changed the browser detection into property detection,
which is more reliable.

JW

Mark Preston · Jul 20, 2004

Phil said:
This entire script fails in Mozilla Firefox, Konqueror and IE 6+ in
all instances. Customer has a simple request: they want me to produce
a textarea that is dynamic in width that fills the entire window
because the content itself is dynamic in width (people's resumes) and
I cannot think of any way to do this except Javascript.
[snip]

I can see a couple of problems - so, working through them:-

function getWinWidth() {
isNav = (document.all) ? false : true;

isNav = true (for Firefox etc), false for MSIE (all)

isIE = (document.all) ? true : false;

isIE = true (for MSIE, Opera and other spoofers), false for Firefox etc.

if (isNav && !isIE)
return(window.innerWidth);

Is the window already open at this stage? Remember that it may even be
blocked from opening as well. Try it and see.

else if (isIE && !isNav)
return(document.body.clientWidth);

At this stage, surely there is no "document" to have a "body".

The Nordic One · Jul 20, 2004

Actually, as it turns out, there is no Javascript solution for this as
it is impossible to dynamically resize form elements throughout all
browsers.

Phil

How can I calculate the last payment for Reprofiled Amount column with 2 decimal places to make the sum of all payments to be the same as RC amount?	2	Jul 13, 2023
FAQ Topic - How do I find the size of the window? (2009-12-23)	14	Dec 22, 2009
Compatible for all browsers. How!?	3	May 25, 2005
Is there a way to detect the width of the browser scrolling bar?	1	Jun 30, 2005
JEDs popup problem....	0	Feb 3, 2007
Sencha Touch--Support 2 browsers in just 228K!	64	Jul 15, 2010
How do I center or resize a Browser Window?	3	May 12, 2005
How i can populate all fileds dynamically in jsp page based on contents found in xml file?	1	Oct 3, 2006

How do you get the window width for all browsers?

Phil Powell

Janwillem Borleffs

Mark Preston

The Nordic One

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads