Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX - The source code of the previous pop-up application
(Page 2 of 4 )
A good place to start improving this pop-up generating application is by showing its previous source code as it was listed in the preceding tutorial. In this way, you’ll learn more easily how an HTTP requester object can be incorporated into the original structure of this program.
This being said, here is the complete definition of this application that generates pop-up DIVs. Have 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 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 >>
More JavaScript Articles
More By Alejandro Gervasio
/ 15 
