Building Pop-Up DIVs with the DOM and AJAX

In consonance with the concepts that I expressed in the previous section, the next step to take to attach a single pop-up DIV to the web page that was shown before consists of defining some comprehensive JavaScript functions. These will be tasked with displaying the referenced pop-up box when the mouse is over a selected element, and hiding it when the cursor is out.

Having explained how the pop-up DIV is going to work into the web page, here are the two JavaScript functions responsible for showing and hiding the mentioned element respectively:

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

As you may have noticed, the first JavaScript function, called “displayPopUpDiv(),” is responsible for performing some crucial tasks, such as creating a DIV element on the fly, and finally appending it to the web document tree. Besides, the pop-up box is positioned relatively to the mouse coordinates, which means that it‘s possible to create a “chasing” effect if the appropriate event handler is annexed to a particular element of the web page.

Finally, the “hidePopUpDiv()” function is definitely simpler, since all it does is remove the pop-up box from the document tree. Period. That was really easy, was it?

However, I’d like to mention that the two above JavaScript functions are completely useless if I don’t attach some event handlers to the DIV element identified as “container,” in this way turning the pop-up box into a functional component. Thus, in response to this, below I included a simple JavaScript code which assigns the corresponding event handlers to the “container” DIV element. Here is the short code block:

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

As you can see, the above script will fire up the “displayPopUpDiv()” function when the mouse cursor is over the selected element, and will hide the pop-up box when the mouse is out, in this way achieving the “mouse chasing” effect that I mentioned previously.

Naturally, I’d like to clarify some important points regarding how the pop-up DIV works. First, if you study the previous JavaScript functions, you’ll realize that the pop-up box won’t be displayed by Internet Explorer if the web page is scrolled down. Also, at least for the moment, the DIV in question isn’t capable of displaying content pulled out from a remote source, like a database table.

However, don’t worry about all these issues, since they’ll be properly fixed in the next article of the series.

Okay, having clarified the limitations of this simple pop-up DIV, let’s move on to the following section, where I’ll be listing the full source code that corresponds to this basic DHTML application.

Go ahead. I’ll be there, waiting for you.