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

As I stated in the beginning of this article, the primary goal here is to improve the original application in such a way that it can work with many pop-up DIVs in the same web page, and certainly not just one.

Therefore, I'll simply define a new JavaScript function that will check to see whether a specific web page element has the value "popupcontainer " for its class attribute. If this condition is true, the appropriate event handlers will be attached to the aforementioned element, in this way "activating" a new pop-up box for that container.

Does this sound a bit confusing? It shouldn't. Now, to clarify any eventual doubts, please examine the signature for this brand new function, which has been named "activatePopupDivs()". It looks like this:

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

As you can see, the definition for the above function is indeed short and straightforward. The referenced function simply loops over all the DIVs included in the corresponding web document and verifies whether these elements have a value of "popupcontainer" for their class attribute. In that case, the pair of "displayPopUpDiv()" and "hidePopUpDiv()"  functions that were shown in the first article are tied to the element in question, which implies that after running the previous function, multiple pop-up DIVs can be included into the same web page. Pretty good, right?

Also, you should notice that the "activatePopupDivs()" function traverses all the DIVs contained in the web document, which can sometimes be an unnecessary and time-consuming process. Nevertheless, this condition can be easily modified to loop over all the elements that belong only to a specific area within the respective web page.

Okay, now that you hopefully learned how to create a short JavaScript function that provides the overall application with the capacity for using multiple pop-up DIVs, it's time to leap forward and see how the complete script looks after incorporating the new function that I explained before. Besides, I'll introduce a small change to the original "displayPopUpDiv()" function to fix the browser compatibility issue related to Internet Explorer that I mentioned in the introduction of this tutorial.

To see how all of these improvements will be incorporated into the original pop-up generating application, click on the link below and read the following section.