By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,949 Members | 1,426 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,949 IT Pros & Developers. It's quick & easy.

How do you get the window width for all browsers?

P: n/a
[JS]
<script type="text/javascript">
<!--

function getWinWidth() {
isNav = (document.all) ? false : true;
isIE = (document.all) ? true : false;
if (isNav && !isIE)
return(window.innerWidth);
else if (isIE && !isNav)
return(document.body.clientWidth);
else
return(100);
}

var width = getWinWidth();
alert("width=" . width);
document.writeln('<textarea rows="29" name="resume"
cols="108">');
//-->
</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
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Phil Powell wrote:
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

Jul 23 '05 #2

P: n/a
Phil Powell wrote:
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".
Jul 23 '05 #3

P: n/a
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

---------------------------------------
TCL and PHP: The Superior Web Languages!
javascript: Is Cool
ASP: why?
http://valsignalandet.com

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.