473,397 Members | 2,116 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,397 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 7776
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: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.