Geek Daily » JavaScript - Cross Browser Window Size And Centering

Jul 04

JavaScript - Cross Browser Window Size And Centering

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

There are many courses that can help one get on his way to creating a successful home based business website. Some of these courses are 70-270 for development and 640-801 for networking. Also needed for a successful business is ecommerce web hosting which provides shopping cart facilities. To promote the business email marketing can be carried out side by side with affiliate marketing. With the implementation of javascript in the site, more cutting edge features can be provided.

Did You Enjoy This Post?

Be sure to grab my RSS feed so you don't miss out on more great articles.

This Post Was Brought To You By

How do I save time? I use FreshBooks for invoicing.

Get Information Technology magazine subscriptions and white papers for FREE!