Using Multiple Containers to Build Pop Up DIVs with the DOM and AJAX - Going backwards: the original pop-up generating script
(Page 2 of 4 )
Before I proceed to modify the original script that was developed in the first part of the series, I'd like to list here its initial definition. Doing so will give you a better idea not only of how the initial pop-up generating application looked at first, but how the changes that I plan to introduce in it are going to affect its structure.
Having clarified that, here is the complete source code that corresponds to this JavaScript-based application, which so far is capable of displaying only one pop-up box. Take 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 Div</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;
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;
}
// 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);
}
// 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;
}
}
</script>
</head>
<body>
<h1>JavaScript-based Pop-up Div</h1>
<div class="popupcontainer" id="container">
<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>
As you'll possibly recall, the above script has some important limitations. It cannot work with multiple pop-up boxes, and it fails to display the mentioned pop-up DIV with Internet Explorer when the web page is scrolled down. Also, it should be stressed that this application can't fill the pop-up in question with data pulled out from a database table of an XML file, which means that some changes must be applied to its original structure.
Keeping in mind this condition, in the section to come I'll be incorporating a few simple improvements to the previous script to let it handle multiple pop-up DIVs at the same time.
Want to learn how this will be achieved? Jump into the following section and keep reading.
Next: Working with multiple pop-up DIVs >>
More JavaScript Articles
More By Alejandro Gervasio
