JAVASCRIPT

Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX

If you’re searching for a straightforward guide on how to create pop-up boxes for displaying additional information in your web site, then look no further because your search is over. Welcome to the concluding installment of the series “Building pop-up DIVs with the DOM and AJAX.” This three-part series walks you through the process of constructing pop-up DIVs, which can be used for showing data coming from static and dynamic sources.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 22

February 14, 2007

TABLE OF CONTENTS:

<!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 DIVS</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;
        margin: 0 0 10px 0;
        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;
           // check for scroll offsets in IE 6
           if(document.documentElement.scrollLeft ||
document.documentElement.scrollTop){
             posx+=document.documentElement.scrollLeft;
             posy+=document.documentElement.scrollTop;
           }
         }
         // 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);
      }
      // activate pop-up DIV elements
      function activatePopupDivs(){
         var divs=document.getElementsByTagName('div');
         if(!divs){return};
         for(var i=0;i<divs.length;i++){
           if(divs[i].className=='popupcontainer'){
             // display pop-up DIV element
             divs[i].onmousemove=displayPopupDiv;
             // hide pop-up DIV element
             divs[i].onmouseout=hidePopupDiv;
           }
         }
      }
      // activate pop-up DIV elements when web page has been
      // loaded
      window.onload=function(){
         if(document.getElementById && document.createElement &&
document.createTextNode){
           activatePopupDivs();
         }
      }
    </script>
  </head>
<body>
    <h1>JavaScript-based Pop-up DIVS</h1>
    <div class="popupcontainer">
      <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>
    <div class="popupcontainer">
      <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>
    <div class="popupcontainer">
      <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>

If you take some time and examine the above script, then you’ll see that all the pop-up DIVs are used only to display static content. Concerning this specific issue, the following lines of code, belonging to the “displayPopUpDiv()” function, illustrate this condition:

div.appendChild(document.createTextNode('This is a sample
content for pop-up DIV element.'));
document.getElementsByTagName('body')[0].appendChild(div);

In this case, all the pop-up boxes are filled with a primitive message, which is simply a mere example. However, I’m going to fix this situation. In the section to come, I’m going to define a couple of new JavaScript functions for reading data from the server and displaying the corresponding results in the client.

Certainly, this new feature will add a dynamic “touch” to the existing application, therefore visit the following section and keep reading.

Next: Adding the functionality of AJAX to the existing application >>