Geek Daily

Your source for daily geek news

welcome

As a web developer there are many important issues I have ran into over the years. I will try to cover them in this blog so hopefully you can avoid them...

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

One Response to “JavaScript - Cross Browser Window Size And Centering”

  1. […] JavaScript - Cross Browser Window Size And Centering (tags: JavaScript) […]

    All in a days work…

Leave a Reply