Home » JavaScript - Cross Browser Window Size And Centering
Jul
04

JavaScript - Cross Browser Window Size And Centering

JavaScript/Ajax

It seems all I talk about lately is extending JavaScript functionality. Well, I am going to talk about it again. Today we are going to look at some code that makes cross browser calculations of window size very easy.

I use Mootools a lot in my projects, mostly for it’s ajax capabilities and it’s FX classes. One thing that I was a bit disappointed and surprised to find was it’s Window.Size.js. It is full of great and easy methods but it requires an XHTML strict doctype to function correctly. Sometimes though it is not possible (or maybe not favorable) to use a strict doctype. Occassionaly I have to use a transitional doctype (usually to support old code) and in situations like this Mootools Window.Size fails to function correctly.

I thought surely it can’t be that hard to determine whether IE is in strict or quirks mode. As it turns out it wasn’t hard at all to tell the difference. So the functions I will be providing you are fully cross browser, strict or quirks mode compatible.

Window.Size.js

window.size = function()
{
	var w = 0;
	var h = 0;

	//IE
	if(!window.innerWidth)
	{
		//strict mode
		if(!(document.documentElement.clientWidth == 0))
		{
			w = document.documentElement.clientWidth;
			h = document.documentElement.clientHeight;
		}
		//quirks mode
		else
		{
			w = document.body.clientWidth;
			h = document.body.clientHeight;
		}
	}
	//w3c
	else
	{
		w = window.innerWidth;
		h = window.innerHeight;
	}
	return {width:w,height:h};
}

window.center = function()
{
	var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};

	var _x = 0;
	var _y = 0;
	var offsetX = 0;
	var offsetY = 0;

	//IE
	if(!window.pageYOffset)
	{
		//strict mode
		if(!(document.documentElement.scrollTop == 0))
		{
			offsetY = document.documentElement.scrollTop;
			offsetX = document.documentElement.scrollLeft;
		}
		//quirks mode
		else
		{
			offsetY = document.body.scrollTop;
			offsetX = document.body.scrollLeft;
		}
	}
	//w3c
	else
	{
		offsetX = window.pageXOffset;
		offsetY = window.pageYOffset;
	}

	_x = ((this.size().width-hWnd.width)/2)+offsetX;
	_y = ((this.size().height-hWnd.height)/2)+offsetY;

	return{x:_x,y:_y};
}

Sample Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title></title>
	<script type="text/javascript" src="Window.Size.js"></script>
	<script type="text/javascript">

		function showCenter(point)
		{
			var div = document.createElement("div");
			div.style.background = "#dedede";
			div.style.position = "absolute";
			div.style.top = point.y + "px";
			div.style.left = point.x + "px";
			div.style.width = "100px";
			div.style.height = "100px";
			document.body.appendChild(div);
		}

	</script>
</head>
<body>

	<div style="height:1200px"></div>
	<input type="button" value="Get Center" onclick="showCenter(window.center({width:100,height:100}))"/>

</body>
</html>

Enjoy

9 comments on this post

Akshay Raje says:
Aug 21, 2007 - 01:08:33

Hey.. thanks a ton dude.

startoy says:
Oct 26, 2007 - 05:10:33

there is also a large and comprehensive database of 800+ ajax scripts available with over at ajaxflakes’s ajax scripts compound

thought i should add it might be helpful to others…

here

Chris says:
Dec 23, 2007 - 04:12:29

Many thanks!

Pera says:
Apr 15, 2008 - 04:04:51

thanks a lot!!!

giux says:
Oct 10, 2008 - 05:10:22

very good! tnx!

darkness says:
Feb 17, 2009 - 02:02:06

awesome ! i am finding this for a long time, this was solve all my problem of innerHeight and centering div.

thanks a lot again :)

Vu Hong says:
Feb 18, 2009 - 01:02:16

I want to get window.outerHeight it works in firefox but not in IE. Can you help me?

2 Trackback(s)

{ Jul 7, 2007 - 05:07:59 } All in a days work…

Post a Comment