JAVASCRIPT

Using Multiple Containers to Build Pop Up DIVs with the DOM and AJAX

If you're a web developer who wants to expand your background in building AJAX-based applications, I’m pretty certain that this article will be helpful to you. Welcome to the second part of the series “Building pop-up DIVs with the DOM and AJAX.” This series goes through creating pop-up boxes, which can be used in any web page to display additional information pulled from static or dynamic sources.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

February 07, 2007

TABLE OF CONTENTS:

Before I proceed to modify the original script that was developed in the first part of the series, I'd like to list here its initial definition. Doing so will give you a better idea not only of how the initial pop-up generating application looked at first, but how the changes that I plan to introduce in it are going to affect its structure.

Having clarified that, here is the complete source code that corresponds to this JavaScript-based application, which so far is capable of displaying only one pop-up box. Take a look at it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>JavaScript-based Pop-Up Div</title>
<style type="text/css">
    body{
      padding: 0;
      margin: 0;
      background: #fff;
    }
    h1{
      font: bold 24px Arial, Helvetica, sans-serif;
      color: #000;
    }
    .popupcontainer{
      width: 300px;
      padding: 10px;
      background: #eee;
      border: 1px solid #ccc;
      font: normal 12px Arial, Helvetica, sans-serif;
      color: #000;
    }
    .popupdiv{
      position: absolute;
      width: 200px;
      padding: 5px;
      background: #ffc;
      border: 1px solid #ccc;
      font: normal 12px Arial, Helvetica, sans-serif;
      color: #000;
    }
  </style>
<script language="javascript">
// display Pop Up div element
function displayPopupDiv(e){
     var posx=0;
     var posy=0;
     if(!e){var e=window.event};
     // determine target DIV
     var targ=e.target?e.target:e.srcElement;
     // calculate mouse coordinates
     if(e.pageX||e.pageY){
       posx=e.pageX;
       posy=e.pageY;
     }
     else if(e.clientX||e.clientY){
       posx=e.clientX;
       posy=e.clientY;
     }
     // assign attributes to pop-up DIV element and append it
     // to web document tree
     var div=document.getElementById('popup');
     if(!div){
       var div=document.createElement('div');
       div.setAttribute('id','popup');
       div.className='popupdiv';
       div.appendChild(document.createTextNode('This is a sample
content for pop-up DIV element.'));
       document.getElementsByTagName('body')[0].appendChild
(div);
     }
     // move pop-up DIV element
     div.style.top=posy+5+'px';
     div.style.left=posx+5+'px';
   }
   // remove pop-up DIV element
   function hidePopupDiv(){
      var div=document.getElementById('popup');
      if(!div){return};
      div.parentNode.removeChild(div);
   }
   // display pop-up DIV element when web page has been loaded
   window.onload=function(){
      if(document.getElementById && document.createElement &&
document.createTextNode){
        var div=document.getElementById('container');
        if(!div){return};
      // display pop-up DIV element
        div.onmousemove=displayPopupDiv;
        // hide pop-up DIV element
        div.onmouseout=hidePopupDiv;
      }
   }
</script>
</head>
<body>
    <h1>JavaScript-based Pop-up Div</h1>
    <div class="popupcontainer" id="container">
      <p>Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...</p>
    </div>
</body>
</html>

As you'll possibly recall, the above script has some important limitations. It cannot work with multiple pop-up boxes, and it fails to display the mentioned pop-up DIV with Internet Explorer when the web page is scrolled down. Also, it should be stressed that this application can't fill the pop-up in question with data pulled out from a database table of an XML file, which means that some changes must be applied to its original structure.

Keeping in mind this condition, in the section to come I'll be incorporating a few simple improvements to the previous script to let it handle multiple pop-up DIVs at the same time.

Want to learn how this will be achieved? Jump into the following section and keep reading.

Next: Working with multiple pop-up DIVs >>