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

Minimal Usability for DHTML Popups

As seen in the previous example, we forced the popup to be display at a certian place in the browser window, by setting the position as absolute, right offset to 0 (zero), and the top offset to 500px. Now that was not very professional, just educative, so we must find a way to display our DHTML popup in a convenient place. A good one would be the center of the window since it has better focus.

The following JavaScript code will determine the center of the window. Please note this is not the center of the page; imagine we have a mile long HTML page, and we haven't scrolled it down not even a bit. Therefore we will include the scrolled amount along with the center of the browser's window in our formulae to make sure the popup will be visible when the button is clicked.

<!-- Due to different browser naming of certain key global variables, we need to do three different tests to determine their values -->
<script type='text/javascript'>

// Determine how much the visitor had scrolled

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;
}

// Determine the coordinates of the center of the page

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;
}
</script>

OK, we have the two pairs of coordinates, what's next? We will average the values in order to determine the actual center we are interested in and the width (for X axis) and the height (for the Y axis) of the popup to center it.

<script type='text/javascript'>
var leftOffset = scrolledX + (centerX - 250) / 2;
var topOffset = scrolledY + (centerY - 200) / 2;
</script>

Yep, that would be all :-) now in order to set these new coordinates, we must write a function with the above code and some new lines to set these values into the DIV style. Do not forget to set the "Fire!" button's onClick clause to 'fireMyPopup();' instead of 'document.getElementById("mypopup").style.display="block"'

<script type='text/javascript'>
function fireMyPopup() {
  ...
  // ABOVE CODE GOES HERE
  ...

  document.getElementById("mypopup").style.top = topOffset + "px";
  document.getElementById("mypopup").style.left = leftOffset + "px";
  document.getElementById("mypopup").style.display = "block";
}
</script>

Before testing, let's add a close button in the popup body (you can place it anywhere, but we want it to be focused). The following code will go in the popup DIV:

<input type='submit' value=' Close me! ' onClick='document.getElementById("mypopup").style.display = "none"'>

Ready to go? Let's test it!

And it worked! Please note that you had to scroll down a bit to reach the fire button, and the popup gained the maximum focus by centering it properly within the page. If you want non-fragmented source of this example, please use the download link from the top of the page (this goes for all example pages in this site).

In the next lesson ("Other Optimal Popup Placements") I will explain other possible placements that are highly focused when the fire button is hit.

Copyright © 2006 Ciprian Dosoftei. All rights reserved.