Scroll to different positions to verify the division centers when it is called. Clicking anywhere on the example text should call the pop over and display it in the middle/center of the available viewport. The JavaScript is cross-browser, and it looks perfect in IE 8 and Firefox 3.5.5. It seems just a tad low in Safari 4.0.4 and Google Chrome 3.0.195.33. (Dec 17, 2009). That would indicate Safari and Chrome are returning a slightly incorrect value for either pageYOffset or clientHeight. It is a minimal difference.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dolor. Sed sed neque. Duis eros justo, bibendum in, placerat eget, ullamcorper vel, nibh. Praesent urna arcu, sagittis eget, semper laoreet, tempus non, augue. In a pede. Vestibulum consequat eleifend sem. Duis tristique tortor ultricies massa. Duis sapien eros, posuere sit amet, rhoncus non, venenatis bibendum, tellus. Donec dui tortor, dignissim quis, eleifend eget, fermentum a, massa. Maecenas vel enim vitae sapien condimentum eleifend. Duis hendrerit luctus dui. Donec sem dui, posuere a, consectetuer eget, pretium aliquet, turpis. Vestibulum posuere porta lacus. Sed convallis molestie purus. In hac habitasse platea dictumst.
Mauris aliquam orci vel enim aliquam venenatis. Aenean nec nisl. Phasellus tincidunt. Quisque diam. Donec cursus convallis sapien. Sed at libero sed nulla euismod accumsan. Sed eget turpis eu purus aliquam facilisis. Curabitur vestibulum, massa eu sodales pulvinar, purus urna mollis augue, ac consequat nisi augue eget magna. Nunc aliquet urna id felis. Etiam magna arcu, lobortis ut, feugiat et, hendrerit a, tortor. Duis porttitor vestibulum nisi. In quis dolor non pede tempus tempus. Donec et libero. Sed non est non sapien aliquet interdum.
Donec urna magna, rhoncus venenatis, consectetuer ut, imperdiet ac, nulla. Quisque commodo. Cras sed enim. Proin diam urna, venenatis nec, porttitor at, tincidunt sed, felis. Cras dictum dolor nec justo. Pellentesque at odio vel metus tempus nonummy. Fusce cursus nulla sed eros. Cras in purus. Nulla sit amet libero. Morbi convallis, orci vel consectetuer vehicula, velit ligula accumsan lorem, sit amet tincidunt quam turpis vel urna. Cras nulla neque, mattis fermentum, molestie vel, mollis non, lacus. Donec commodo justo in quam. Nullam sodales nisi et magna. Phasellus ut lectus quis pede iaculis pellentesque. Fusce in massa. Proin fermentum ligula eget mauris.
Ut a mauris et ipsum posuere ultricies. Fusce semper. Nulla sapien. Donec a risus. Duis nec sapien. Proin vel augue sed sapien pharetra nonummy. Curabitur ornare pretium metus. Morbi auctor nisi eget elit luctus semper. Integer pretium adipiscing nulla. Vivamus eget orci. Vivamus pretium justo eget ligula. Sed varius nulla at est. Sed purus nunc, dictum sed, congue vel, sodales ac, est. Quisque lorem ante, ornare quis, gravida volutpat, auctor ac, elit. Fusce sed lectus et pede suscipit mollis. Donec at lorem sed metus aliquet rutrum. Nulla orci. In commodo, justo et vulputate blandit, mauris purus ornare eros, et accumsan ipsum sem fringilla nulla. Donec mauris nunc, gravida eget, suscipit eget, viverra at, metus. Nam tortor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2009 Roderick Divilbiss">
<title>Center A Pop-Over Division</title>
<script type="text/javascript">
function openCopyMessage() {
var top=0;
var left=0;
var scrollTop = 0;
document.getElementById('copyPopOver').style.display='block';
// The pop-over division is 262px high by 375px wide
// We need to know where the top of the document is...and
scrollTop = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
// if top is set at the clientHeight minus the division height divided by 2 plus the scrollTop it will be in the middle;
top = ((document.documentElement.clientHeight-262)/2)+scrollTop;
// if left = the clientWidth minus the division width divided by two is the division will center.
left = (document.documentElement.clientWidth-375)/2;
document.getElementById('copyPopOver').style.top=(top)+'px';
document.getElementById('copyPopOver').style.left=(left)+'px';
}
function closeCopyMessage() {
document.getElementById('copyPopOver').style.display='none';
return false;
}
</script>
<style type="text/css">
<!--
#copyPopOver {
position:absolute;
/* Hide The Pop-Over */
display:none;
top:-400px;
left:-400px;
width:350px;
color:#000000;
border:3px solid #FF9900;
padding:10px;
background-color:#FFE6BF;
}
#copyPopOver a {
color:#FF9900;
}
#copyPopOver a:hover {
color:#000000;
background-color:#FF9900;
}
#cpoBtnDiv {
text-align:center;
}
-->
</style>
</head>
<body>
<div onclick="openCopyMessage();">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dolor. Sed sed neque. Duis eros justo, bibendum in, placerat eget, ullamcorper vel, nibh. Praesent urna arcu, sagittis eget, semper laoreet, tempus non, augue. In a pede. Vestibulum consequat eleifend sem. Duis tristique tortor ultricies massa. Duis sapien eros, posuere sit amet, rhoncus non, venenatis bibendum, tellus. Donec dui tortor, dignissim quis, eleifend eget, fermentum a, massa. Maecenas vel enim vitae sapien condimentum eleifend. Duis hendrerit luctus dui. Donec sem dui, posuere a, consectetuer eget, pretium aliquet, turpis. Vestibulum posuere porta lacus. Sed convallis molestie purus. In hac habitasse platea dictumst.</p>
<p>Mauris aliquam orci vel enim aliquam venenatis. Aenean nec nisl. Phasellus tincidunt. Quisque diam. Donec cursus convallis sapien. Sed at libero sed nulla euismod accumsan. Sed eget turpis eu purus aliquam facilisis. Curabitur vestibulum, massa eu sodales pulvinar, purus urna mollis augue, ac consequat nisi augue eget magna. Nunc aliquet urna id felis. Etiam magna arcu, lobortis ut, feugiat et, hendrerit a, tortor. Duis porttitor vestibulum nisi. In quis dolor non pede tempus tempus. Donec et libero. Sed non est non sapien aliquet interdum.</p>
<p>Donec urna magna, rhoncus venenatis, consectetuer ut, imperdiet ac, nulla. Quisque commodo. Cras sed enim. Proin diam urna, venenatis nec, porttitor at, tincidunt sed, felis. Cras dictum dolor nec justo. Pellentesque at odio vel metus tempus nonummy. Fusce cursus nulla sed eros. Cras in purus. Nulla sit amet libero. Morbi convallis, orci vel consectetuer vehicula, velit ligula accumsan lorem, sit amet tincidunt quam turpis vel urna. Cras nulla neque, mattis fermentum, molestie vel, mollis non, lacus. Donec commodo justo in quam. Nullam sodales nisi et magna. Phasellus ut lectus quis pede iaculis pellentesque. Fusce in massa. Proin fermentum ligula eget mauris.</p>
<p>Ut a mauris et ipsum posuere ultricies. Fusce semper. Nulla sapien. Donec a risus. Duis nec sapien. Proin vel augue sed sapien pharetra nonummy. Curabitur ornare pretium metus. Morbi auctor nisi eget elit luctus semper. Integer pretium adipiscing nulla. Vivamus eget orci. Vivamus pretium justo eget ligula. Sed varius nulla at est. Sed purus nunc, dictum sed, congue vel, sodales ac, est. Quisque lorem ante, ornare quis, gravida volutpat, auctor ac, elit. Fusce sed lectus et pede suscipit mollis. Donec at lorem sed metus aliquet rutrum. Nulla orci. In commodo, justo et vulputate blandit, mauris purus ornare eros, et accumsan ipsum sem fringilla nulla. Donec mauris nunc, gravida eget, suscipit eget, viverra at, metus. Nam tortor.</p>
</div>
<div id="copyPopOver"><p>This code is © 2005-2010 Roderick Divilbiss.</p>
<p>Except where otherwise noted, this site, all content, and all source code and markup is licensed under a Creative Commons License <a rel="license" href="http://creativecommons.org/licenses/by-nc/2.0/">Creative Commons License</a>. Any code based or inspired by this code requires that code to also be available under the same license and requires attribution to this author and website.</p>
<p>Please read and honor the <a href="http://www.rodsdot.com/termsofuse.asp">Terms Of Use</a> to use this code.</p>
<div id="cpoBtnDiv"><input type="button" value="Close Message" onclick="closeCopyMessage();"></div>
</div>
</body>
</html>Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
This code is © 2005-2010 Roderick Divilbiss.
Except where otherwise noted, this site, all content, and all source code and markup is licensed under a Creative Commons License Creative Commons License. Any code based or inspired by this code requires that code to also be available under the same license and requires attribution to this author and website.
Please read and honor the Terms Of Use to use this code.
