469,345 Members | 6,212 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,345 developers. It's quick & easy.

Window's Width

Hello,

I need to display the current Web Browser's Width on my web page. I
Tried Screen.width, but it is for the width of the Windows. I tried
Window.width, but it doesn't work.

What i want to do is, if the user resize the Web Browser's Window,
upon refresh, the webpage will show the width size of the web browser
windows. this will help me in working on Floating Menu on my web page.
thanks.

May 10 '07 #1
6 7592
ASM
Tweety a écrit :
Hello,

I need to display the current Web Browser's Width on my web page. I
Tried Screen.width, but it is for the width of the Windows. I tried
Window.width, but it doesn't work.
you could see that :
http://www.javascript-fx.com/develop...SFX_Browser.js

or

<script type="text/javascript">
<!--
function getCanvasWidth() {
return document.body.clientWidth || innerWidth;
}
function getCanvasHeight() {
return document.body.clientHeight || innerHeight;
}

alert('viewport width = '+getCanvasWidth()+' px');
alert('viewport height = '+getCanvasHeight()+' px');

function getSizes() {
var w = document.body.clientWidth || innerWidth;
var h = document.body.clientHeight || innerHeight;
var W = document.body.clientWidth || outerWidth;
var H = document.body.clientHeight || outerHeight;
var Sw = screen.width;
var Sh = screen.height;
var d = document.createElement('P');
d.innerHTML = 'View Port : width = '+w+' -- height = '+h+'<br>'+
'Window : width = '+W+' -- height = '+H+'<br>'+
'Screen : width = '+Sw+' -- height = '+Sh;
document.body.appendChild(d);
}

onload = getSizes;

//-->
But all that doesn't mean you'll get the right sizes
(depends of the browser ...)

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
May 10 '07 #2
Tweety wrote on 10 mei 2007 in comp.lang.javascript:
I need to display the current Web Browser's Width on my web page. I
Tried Screen.width, but it is for the width of the Windows. I tried
Window.width, but it doesn't work.

What i want to do is, if the user resize the Web Browser's Window,
upon refresh, the webpage will show the width size of the web browser
windows. this will help me in working on Floating Menu on my web page.
thanks.
My browser properties are non of your clientside scripting business under
normal security settings, only the window view plane is.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 10 '07 #3
ASM wrote :
Tweety a écrit :
>Hello,

I need to display the current Web Browser's Width on my web page. I
Tried Screen.width, but it is for the width of the Windows. I tried
Window.width, but it doesn't work.

you could see that :
http://www.javascript-fx.com/develop...SFX_Browser.js
This is a very bad file as all of such file relies on user agent string
detection instead of detection object/feature support.
or

<script type="text/javascript">
<!--
Using HTML comments in scripts is not recommendable and not needed.

Don't Use HTML Comments In Script Blocks
http://www.javascripttoolbox.com/bes...ices/#comments
function getCanvasWidth() {
return document.body.clientWidth || innerWidth;
What about IE6 and IE7 in compliant rendering mode? A very wide majority
of users are now using MSIE6 or MSIE7. And a growing minority of web
authors are trying to move toward standards compliance. So giving
recommendations to people should at least start with triggering browsers
into standards compliant rendering mode where HTML and CSS rendering are
more consistent across browsers. Your code is not correct for MSIE6 and
MSIE7 in standards compliant rendering mode. And even in
backward-compatible rendering mode, it should be offsetWidth, not
clientWidth.
}
function getCanvasHeight() {
return document.body.clientHeight || innerHeight;
}

alert('viewport width = '+getCanvasWidth()+' px');
alert('viewport height = '+getCanvasHeight()+' px');
Alerts are always a bad way to communicate values gathered in real time
as they interrupt script flow and unneedlessly makes the user always
click an OK button to close the alert. Using alerts should be avoided.
function getSizes() {
var w = document.body.clientWidth || innerWidth;
var h = document.body.clientHeight || innerHeight;
That's wrong. In backward compatible mode (not even in standards
compliant rendering mode), it must be at least

var h = document.body.offsetHeight || innerHeight;
var W = document.body.clientWidth || outerWidth;
var H = document.body.clientHeight || outerHeight;
Where did you see that document.body.clientHeight is equivalent to the
window's outerHeight?? What your code is submitting and proposing here
is very wrong.
var Sw = screen.width;
var Sh = screen.height;
The last 4 variable have nothing to do with the poster's message.
var d = document.createElement('P');
d.innerHTML = 'View Port : width = '+w+' -- height = '+h+'<br>'+
'Window : width = '+W+' -- height = '+H+'<br>'+
'Screen : width = '+Sw+' -- height = '+Sh;
document.body.appendChild(d);
}

onload = getSizes;
Well, at least, you could have added

window.onresize = getSizes;

He did say

{
if the user resize the Web Browser's Window,
upon refresh, the webpage will show the width size of the web browser
}

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
May 10 '07 #4
Tweety wrote :
Hello,

I need to display the current Web Browser's Width on my web page. I
Tried Screen.width, but it is for the width of the Windows. I tried
Window.width, but it doesn't work.

What i want to do is, if the user resize the Web Browser's Window,
upon refresh, the webpage will show the width size of the web browser
windows. this will help me in working on Floating Menu on my web page.
thanks.
All you need is to use position: fixed and then set your floating menu
at some position.

E.g.

#FloatingMenu {position: fixed; right: 8%; top: auto;}

and your floating menu should be within 8% of the right edge of the
browser viewport, even when the browser window viewport is resized. You
do not need to know what's the current size of the client area.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
May 10 '07 #5
Yun
On May 10, 1:42 pm, Gérard Talbot <newsblahgr...@gtalbot.orgwrote:
Tweety wrote :
Hello,
I need to display the current Web Browser's Width on my web page. I
Tried Screen.width, but it is for the width of the Windows. I tried
Window.width, but it doesn't work.
What i want to do is, if the user resize the Web Browser's Window,
upon refresh, the webpage will show the width size of the web browser
windows. this will help me in working on Floating Menu on my web page.
thanks.

All you need is to use position: fixed and then set your floating menu
at some position.

E.g.

#FloatingMenu {position: fixed; right: 8%; top: auto;}


"position:fixed" is not supported on IE6, I thought.
May 10 '07 #6
Hello Gerard,

I understand what you mean, but the design of the webpage is at the
center. I'll try to use your way.

Thanks Everybody. I'll try tonite and reply on the result tomorrow.
thanks.

May 11 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by Scott | last post: by
4 posts views Thread by Peter Kirk | last post: by
6 posts views Thread by David Hayes | last post: by
1 post views Thread by stellabein | last post: by
14 posts views Thread by D. Alvarado | last post: by
5 posts views Thread by Den | last post: by
4 posts views Thread by alexandre.brisebois | last post: by
4 posts views Thread by Perl Beginner | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.