Getting Browser's height and width using Javascript

By: Emiley J. Emailed: 1644 times Printed: 2113 times    

Latest comments
By: rohit kumar - how this program is work
By: Kirti - Hi..thx for the hadoop in
By: Spijker - I have altered the code a
By: ali mohammed - why we use the java in ne
By: ali mohammed - why we use the java in ne
By: mizhelle - when I exported the data
By: raul - no output as well, i'm ge
By: Rajesh - thanx very much...
By: Suindu De - Suppose we are executing

Getting the Browser's height and width is quite useful in many circumstances. For example if you are using a google map in your site, you will have to set a height and width for the map object. But the problem is there are so many different types of browsers out there and you don't know which one the end user will be using. Another issue is the height and the width of different laptops and desktops available in the market.

So most probably you are fine tuning your application based on the server or the PC or the laptop that you are using to develop. It will look perfectly fine until one day you decide to demo to your colleagues using a different laptop. All the layouts and alignments will be wrong. This happens if you hard code the height and width of the objects that you require in your site.

The best way for such applications is to get the height and the width of the client dynamically (using javascript) and then setting the height and the width of the objects dynamically. You can use the following javascript example to get the height and the width of the client.

var myWidth;
var myHeight;

if( typeof( window.innerWidth ) == 'number' ) { 

//Non-IE 

myWidth = window.innerWidth;
myHeight = window.innerHeight; 

} else if( document.documentElement && 

( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 

//IE 6+ in 'standards compliant mode' 

myWidth = document.documentElement.clientWidth; 
myHeight = document.documentElement.clientHeight; 

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 

//IE 4 compatible 

myWidth = document.body.clientWidth; 
myHeight = document.body.clientHeight; 

}

In my case I had to use a google map in my site, therefore I used this code and then set the height and the width of the google map dynamically as follows:

Setting the google map height and width Dynamically using Javascript:

document.getElementById("map").style.height = myHeight+'px';
document.getElementById("map").style.width = myWidth+'px';

Javascript Home | All Javascript Tutorials | Latest Javascript Tutorials

Sponsored Links

If this tutorial doesn't answer your question, or you have a specific question, just ask an expert here. Post your question to get a direct answer.



Bookmark and Share

Comments(1)


1. View Comment

Hi,

I have tried with your script and it works, but not as intended. It returns really big number ih height. Iam using it to calculate height of a sidebar so it pushes footer to the bottom.
any suggestions?


View Tutorial          By: Ivan at 2011-09-08 21:17:36

Your name (required):


Your email(required, will not be shown to the public):


Your sites URL (optional):


Your comments:



More Tutorials by Emiley J.
Error generating R.java from manifest
ERROR 1251: Client does not support authentication protocol requested by server; consider upgrading MySQL client
IIS and Tomcat - how to configure to work together
PHP Warning: Unknown(): Unable to load dynamic library '/usr/local/php4/lib/php/extensions/no-debug ......
Adding your own Application icon for your J2ME application (jar file)
Creating Menus in Code using VB.net
Traversing all files in a directory using Ruby
Using Proxy to connect to URLs in Ruby
POST a form in Ruby
Reading URL content using Ruby (HTTP)
dRuby client/server mode sample program
Benchmark module in Ruby
encoding and decoding in Ruby using Base64 Module
Module Abbrev in Ruby
Standard Library Packages in Ruby

More Tutorials in Javascript
Use WinSCP to transfer log files remotely using Javascript
Verifying user input in JavaScript
Pause execution in JavaScript
Javascript to display client date and time on webpage
Getting Browser's height and width using Javascript
Highlighting text on a page using CSS
Using revealTrans to do page transitions in Javascript
Password protect a web page using Javascript
Diabling Right Click option in a browser using Javascript
Scrolling message on the status bar using Javascript
window.frames[i] in Javascript
Form validation using Javascript
Using && in Javascript
The if statement in Javascript
do-while, while, for and for-in loops in Javascript

More Latest News
Most Viewed Articles (in Javascript )
Typecasting in Javascript
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Show how many characters remaining in a html text box using javascript
List of Keywords and reverved words in Javascript
Scrolling message on the status bar using Javascript
Getting Browser's height and width using Javascript
Javascript Basics
History and evolution of Javascript
Bitwise NOT, AND, OR, XOR operators in Javascript
The if statement in Javascript
do-while, while, for and for-in loops in Javascript
switch in Javascript
call() and apply() methods in Javascript
Pause execution in JavaScript
Using ! and !! in Javascript
Most Emailed Articles (in Javascript)
Diabling Right Click option in a browser using Javascript
Click to remove an element from a select html form using javascript
Bitwise NOT, AND, OR, XOR operators in Javascript
this keyword sample in Javascript
Getting Browser's height and width using Javascript
Show how many characters remaining in a html text box using javascript
History and evolution of Javascript
Using toString() in JavaScript to convert data types to String
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Using ! and !! in Javascript
Using && in Javascript
Highlighting text on a page using CSS
Using revealTrans to do page transitions in Javascript
Javascript to display client date and time on webpage
Verifying user input in JavaScript