Using Multiple Containers to Build Pop Up DIVs with the DOM and AJAX - Listing the improved version of the pop-up generating application
(Page 4 of 4 )
At this point, and after seeing how the original application was modified to include many pop-up DIVs in the same web page, I'm sure that you're intrigued about how the improved version of the program now looks. So, in response to this situation, below I listed the full source code that corresponds to this application. I included all the changes that were properly covered in the previous section, and the respective CSS rules and markup as well.
Here is the pertinent code listing:
<!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>
That's all the source code that you need to have at your disposal a web application that's capable of displaying multiple pop-up DIVs in the same web document. In this case, I also included three pop-up containers within the respective markup code, so each time the mouse is over them, the corresponding pop-up boxes will be displayed.
Finally, I'd like to highlight a final detail concerning the signature of the "displayPopupDiv()" function. As you can see, this function incorporates the following new lines of code:
// check for scroll offsets in IE 6
if(document.documentElement.scrollLeft || document.documentElement.scrollTop){
posx+=document.documentElement.scrollLeft;
posy+=document.documentElement.scrollTop;
}
As you might have guessed, the above code snippet simply fixes an Internet Explorer bug, and it makes all the pop-up DIVs display correctly when the web document is scrolled down.
All right, now that you know how all the previous improvements fit into the general structure of the application, have a look at the following image. It illustrates how different pop-up DIVs can be attached to multiple containers. Here is the picture:
As usual, feel free to incorporate your own modifications to the original pop-up generating script to suit your personal needs. Possibilities are really numerous!
Final thoughts
We've come to the end of this tutorial. In this second article of the series, I showed you how to improve the original application so it is able to handle many pop-up DIVs in the same web document. As you saw, the process was really straightforward and painless.
However, the application hasn't used the capabilities of AJAX. So, how does this technology fit into the whole picture? Well, as you may have noticed, the pop-up DIVs weren't capable of displaying data pulled from a remote source, like a database table or a file located in the server.
That's why I saved the best for the last. In the final installment, I'll teach you how to use AJAX to populate different pop-up DIVs with dynamic data. Based on this premise, I don't think that you're going to miss the last part!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
