473,225 Members | 1,402 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

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 7772
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Scott | last post by:
I'm new to ASP, but I've been programming in VB for several years, and I'm having a few issues with this ASP enhancement I'm working on. I've found ASP to be a lot different than what I'm use to...
4
by: Peter Kirk | last post by:
Hi, I want to open a popup-window which displays a list to the user. From this list, the user can select an item, and the data regarding this item is then transferred to some fields on the main...
6
by: David Hayes | last post by:
juglesh <juglesh@nospamRadioKDUG.com> wrote in "Re: how to maximize the browser window that fits the monitor size?" (Saturday, January 01, 2005 3:12 AM): > > >I want to maximize the browser...
1
by: stellabein | last post by:
Hi friends, I am very very new to programing. i have a one main window from that window i am opening one modal window using showmodaldialog(m.jp...). in that modal window i have a form. when i...
14
by: D. Alvarado | last post by:
Hello, I am trying to open a window containing an image and I would like the image to be flush against the window -- i.e. have no padding or border. Can I make this happen with a single call to a...
5
by: Den | last post by:
Hi, I have one simple question: Code: ------------ <html> <body> <input type="button" onclick="openWindow('http://www.google.com', 'Google')" value="Google"> </body> <script...
4
by: alexandre.brisebois | last post by:
Hi, I am using access 2003, I would like to know if there is an option to reorganize the tables in a maner that is readable, as we can do in sql sever 2000 or 2005. I have been given a database...
4
by: Perl Beginner | last post by:
I have created a GUI window using Perl Win32::XMLBuilder. This window has several buttons on it, that when a button is clicked another Perl script will execute. When the script is complete, the GUI...
2
by: wreed06 | last post by:
Hello, I have 2 problems. In my webpage, I have a dropdown list with a button that takes the user to a popup window specific to the option. I am using Firefox 2.0.0.13. I have successfully...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.