PDA

View Full Version : browser to abs middle despite res?

Dirk Lance
11-09-2002, 01:55 PM
does anybody have a script that would center the browser on the users screen despite resolution?

i have searched for this on the forum but couldn't find anything

thanks
lpok
11-13-2002, 08:44 PM
This gets a bit complicated due to browser incompatability. First thing you have to do is get the users resolution with:

screen.height;
screen.width;


Then, you got to get the window's outer width using one of the following:

document.body.offsetWidth;
window.outerWidth;
document.body.clientWidth;

The browsers all got these mixed up. Each one has it's own way to get the width, check out this page for more info:
http://www.xs4all.nl/~ppk/js/winprop.html



Then, you get the outer height of each one using similar properties:

document.body.offsetHeight;
window.outerHeight;
document.body.clientHeight;


Then, you have to test if the window is maximized. If not, you now have to move it so it centers. Also, you now have to take in account that IE does not count the toolbars as part of the height, so if you want to center the window, you will have to take this into account. So, I set an offset on my script, and here it is:




<html>
<script>
function centerIt() {
var windowWidth = 0;
var windowHeight = 0;
var screenWidth = screen.width;
var screenHeight = screen.height;
var toolbarOffset = 0;


if (typeof(document.body)!="undefined" && typeof(document.body.offsetWidth)!="undefined" && document.body.offsetWidth!=0)
windowWidth = document.body.offsetWidth;
else if (typeof(window.outerWidth) != "undefined")
windowWidth = window.outerWidth;
else if (typeof(document.body)!="undefined" && typeof(document.body.clientWidth)!="undefined" && document.body.clientWidth!=0)
windowWidth = document.body.clientWidth;


if (typeof(document.body)!="undefined" && typeof(document.body.offsetHeight)!="undefined" && document.body.offsetHeight!=0)
windowHeight = document.body.offsetHeight;
else if (typeof(window.outerHeight) != "undefined")
windowHeight = window.outerHeight;
else if (typeof(document.body)!="undefined" && typeof(document.body.clientHeight)!="undefined" && document.body.clientHeight!=0)
windowHeight = document.body.clientHeight;

if (typeof(screen.width) != "undefined")
screenWidth = screen.width;

if (typeof(screen.height) != "undefined")
screenHeight = screen.height;

if (navigator.appName == "Microsoft Internet Explorer")
toolbarOffset = 140;

if (windowWidth!=0 && windowHeight!=0 && screenWidth!=0 && screenHeight!=0)
if (windowWidth < screenWidth)
{
var xCord = Math.round((screenWidth-windowWidth)/2);
var yCord = Math.round((screenHeight-windowHeight-toolbarOffset)/2);
window.moveTo(xCord, yCord);
}

}
</script>
<body onLoad="centerIt()">
hi
</body>
</html>
gtmitch2
11-13-2002, 09:05 PM
I couldn't have expalined it any better!
Dirk Lance
11-15-2002, 10:03 AM
seriously that was awesome

thanks partner.
lpok
11-15-2002, 06:36 PM
Thanks, glad I could help. :)