Centralize Object
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>
CSS Codes
Reply With Quote
Originally Posted by Twey
Bookmarks