PDA

View Full Version : Centralize Object



navink
08-21-2007, 10:43 AM
1) CODE TITLE: Place any HTML object to the center of the window/screen.

2) AUTHOR NAME/NOTES: Navin Kaushal, India

3) DESCRIPTION: Some time we really need to place specific objects to the center of the window/screen, specially some DHTML window containing some message.

4) URL TO CODE:

or, ATTACHED BELOW (see #3 in guidelines below):


<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>

<title> Test Doc </title>
<script language="javascript">
<!--
var Centralize={

init:function(id)
{
obj = document.getElementById(id);
this.MoveObject(obj);
},

MoveObject:function(obj)
{
this.GetCentralPoints() //Get current viewpoint numbers
obj.style.left = this.scroll_left+(this.docwidth-obj.offsetWidth)/2+"px";
obj.style.top = this.scroll_top+(this.docheight-obj.offsetHeight)/2+"px";
},

GetCentralPoints:function(){ //get window viewpoint numbers
var ie=document.all && !window.opera
var domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000 //Preliminary doc width in non IE browsers
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
this.scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
this.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
this.docwidth=(ie)? this.standardbody.clientWidth : (/Safari/i.test(navigator.userAgent))? window.innerWidth : Math.min(domclientWidth, window.innerWidth-16)
this.docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
}
} //End Centralize object

//-->
</script>
</head>

<body>

<div id="testwin" style="background-color:#FFFFCC;border:2px dashed red;width:200px;height:100px;left:0px;top:0px;position:absolute;">
Test Pop up
</div>

<form method=post action=""><br><br><br><br><br><br>
<Input type="button" value="Place Div to Center" onclick="Centralize.init('testwin');">
</form>
</body>
</html>

jscheuer1
08-21-2007, 02:37 PM
Don't you think you think a minimum value of 0 for both the top and left property would be good?

I'd like to see:

(ie)? and (/Safari/i.test(navigator.userAgent))? both eliminated in favor of direct testing of the object concerned. For example, instead of:


this.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset


you could have:


this.scroll_left=window.pageXOffset | this.standardbody.scrollLeft | 0;

Twey
08-21-2007, 03:29 PM
Erm, I think you mean ||. | is bitwise OR, not boolean, and should result in NaN if any one of those values is undefined.

jscheuer1
08-21-2007, 04:31 PM
Erm, I think you mean ||. | is bitwise OR, not boolean, and should result in NaN if any one of those values is undefined.

Try it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
onload=function(){
alert(window.pageXOffset | document.documentElement.scrollLeft | 0);
}
</script>
</head>
<body>

</body>
</html>

Actually, you probably cannot though, because I don't think you have a browser that will find any of the values undefined. IE does find window.pageXOffset undefined and returns the left scroll state or 0.

Twey
08-21-2007, 04:35 PM
js> undefined | 4
4Hm. Interesting. NaN appears to count for 0 in bitwise operations.