Home   |   The Basics   |   Using Delays   |   Movable Popups   |   Adding Fade Effects   |   Drop-down Effects   |   Slide In   |   Tips & Tricks

Optimal DHTML Popup Placement

In the previous example we learnt how to optimally center the popup on the screen. But what happens if the visitors scrolls the page vertically or horizontally? The popup will stick to the whole page, no longer being centred. In order to fix this, we must set up an event function that will trigger when the whole page is scrolled. Therefore we will add a new function named myPopupRelocate() which recomputer the correct center and set it to the popup, and rewrite fireMyPopup() to use this function initially and to set it to the onscroll event trigger of the page:

<script type='text/javascript'>
function myPopupRelocate() {
 var scrolledX, scrolledY;
 if( self.pageYOffset ) {
   scrolledX = self.pageXOffset;
   scrolledY = self.pageYOffset;
 } else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
   scrolledY = document.documentElement.scrollTop;
 } else if( document.body ) {
   scrolledX = document.body.scrollLeft;
   scrolledY = document.body.scrollTop;
 }

 var centerX, centerY;
 if( self.innerHeight ) {
   centerX = self.innerWidth;
   centerY = self.innerHeight;
 } else if( document.documentElement && document.documentElement.clientHeight ) {
   centerX = document.documentElement.clientWidth;
   centerY = document.documentElement.clientHeight;
 } else if( document.body ) {
   centerX = document.body.clientWidth;
   centerY = document.body.clientHeight;
 }

 var leftOffset = scrolledX + (centerX - 250) / 2;
 var topOffset = scrolledY + (centerY - 200) / 2;

 document.getElementById("mypopup").style.top = topOffset + "px";
 document.getElementById("mypopup").style.left = leftOffset + "px";
}

function fireMyPopup() {
 myPopupRelocate();
 document.getElementById("mypopup").style.display = "block";
 document.body.onscroll = myPopupRelocate;
 window.onscroll = myPopupRelocate;
}
<script>

Ready to go? Let's test it! Please scroll the page to see the new code in action.

I think these examples are enough for perfect centering of the popup. Before learning how to stlye a popup, I will show you how easy is to make the popup stick while scrolling to other elements as well. Let's assume you desire to place it somewhere in the top left corner with 5 pixels padding. Since we excluded the relocation code out of the fireMyPopup() function, we will only alter myPopupRelocate().

In terms of CSS, is fairly easy to note that if the page is not scrolled at all, the styling declaration is "left: 5px; top: 5px". Now what happens when the page is scrolled? We will add the scrolled amount on both axis to the top and right offset. Since I once defined myPopupRelocate() on this page, I will not alter it, but create a myPopupRelocate_2() new function (the same goes for fireMyPopup() too):

<script type='text/javascript'>
function myPopupRelocate_2() {
 var scrolledX, scrolledY;
 if( self.pageYOffset ) {
   scrolledX = self.pageXOffset;
   scrolledY = self.pageYOffset;
 } else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
   scrolledY = document.documentElement.scrollTop;
 } else if( document.body ) {
   scrolledX = document.body.scrollLeft;
   scrolledY = document.body.scrollTop;
 }

 // We just add the scrolled amount to 5 (the desired padding)
 // to find the new coordinates

 var leftOffset = scrolledX + 5;
 var topOffset = scrolledY + 5;

 document.getElementById("mypopup2").style.top = topOffset + "px";
 document.getElementById("mypopup2").style.left = leftOffset + "px";
}

function fireMyPopup_2() {
 myPopupRelocate_2();
 document.getElementById("mypopup2").style.display = "block";
 document.body.onscroll = myPopupRelocate_2;
 window.onscroll = myPopupRelocate_2;
}
</script>

<div id='mypopup2' name='mypopup2' style='position: absolute; width: 250px; height: 200px; display: none; background: #ddd; border: 1px solid #000; z-index: 100'>
<p>My second popup!<br>As you can see is top-left aligned :-)</p>
<input type='submit' value=' Close me! (2) ' onClick='document.getElementById("mypopup2").style.display="none"'>
</div>

<input type='submit' value=' Fire! (2) ' onClick='fireMyPopup_2()'>

OK, now let's check it out:

Please note the new attribute set in the inline CSS statement: "z-index: 100". On WebArticles Media Network we use our toolbar for all sites, which is also dynamically generated and gains the top position. Therefore our popup would be under it, so to set it on top we assigned a higher z-index. This is a particular case, but could happen to anyone if you mix DHTML popups with other elements on the same web page.

Now let's see how far can we go in graphic enhancement of our popup to make our cold grey popup look better :-)

Copyright © 2006 Ciprian Dosoftei. All rights reserved.