My mistakes

popup dialog creation using html DIV

Posted on: August 7, 2008

Images not attached

<html>
<head>
<style>
div#popup_dialog {
width:400px;
background-color:white;
}
div.top-left {
float:left;
background-image:url(“header_left.png”);
width:350px;
background-repeat:no-repeat;
}
div.top-right {
float:left;
background-image:url(“header_right.png”);
background-repeat:no-repeat;
width:50px;
clear:right;
}

div.footer-left {
float:left;
background-image:url(“footer_left.png”);
width:350px;
background-repeat:no-repeat;
}
div.footer-right {
float:left;
background-image:url(“footer_right.png”);
background-repeat:no-repeat;
width:50px;
}

div.dialog-content{
border-right:1px solid #88b187;
border-left:1px solid #88b187;
padding-left:4px;
padding-right:4px;
margin-top:-2px;
}

div.dialog-content span.content{
padding-left:4px;
padding-right:4px;
}

li {
padding-top:10px;
}

h1{
margin-top:-2px;
margin-bottom:0px;
}
div#popup_dialog span.title{
float:left;
}
div#popup_dialog span.date{
float:right;
}

</style>
<script>
function getPos(elem) {
var curleft = curtop = 0;
if (elem.offsetParent) {
do {
curleft += elem.offsetLeft;
curtop += elem.offsetTop;
} while (elem = elem.offsetParent);
return {x:curleft,y:curtop};
}
}
function getLeft(elem){
var x=0;
if (elem.calcLeft)
return elem.calcLeft;
var oElem=elem;
while(elem){
if ((elem.style)&& (!isNaN(parseInt(elem.style.borderLeftWidth)))&&(x!=0))
x+=parseInt(elem.style.borderLeftWidth);
x+=elem.offsetLeft;
elem=elem.offsetParent;
}
oElem.calcLeft=x;
return x;
}

function getTop(elem){
var x=0;
if (elem.calcTop)
return elem.calcTop;
var oElem=elem;
while(elem){
if ((elem.style)&& (!isNaN(parseInt(elem.style.borderTopWidth)))&&(x!=0))
x+=parseInt(elem.style.borderTopWidth);
x+=elem.offsetTop;
elem=elem.offsetParent;
}
oElem.calcTop=x;
return x;

}
function showpopup(id){
var left = getLeft(id) – 10;
var top = getTop(id) + 25;
var mainDiv = document.getElementById(‘popup_dialog’);
mainDiv.style.display = ‘block’;
mainDiv.style.position = ‘absolute’;
mainDiv.style.top = top+’px’;
mainDiv.style.left = left+’px’;
mainDiv.style.zIndex = 100;
}

function closeWindow() {
var mainDiv = document.getElementById(‘popup_dialog’);
mainDiv.style.display = “none”;
}
</script>
</head>
<body>
<ul>
<li><a id=”one” onmouseout=”closeWindow()” onmouseover=”showpopup(this)” href=”#”>One</a>
<li><a id=”two” onmouseout=”closeWindow()” onmouseover=”showpopup(this)” href=”#”>Two</a>
</ul>

<div style=”display:block;” id=”popup_dialog”>
<div class=”top-left”>&nbsp;</div>
<div class=”top-right”>&nbsp;</div>
<div style=”clear:both;”></div>
<div class=”dialog-content”>
<span class=”title”>
<p>Hai</p>
</span>
<span class=”date”>
<p>May 28th, 9PM</p>
</span>
<span class=”content”>
<p>
Yes, offsetLeft was an IE property first. However since it is now in
use by other browsers, particularly Safari as concerns Dashboard
development, it is valid to use it. XmlHttpRequest was an IE property
as well but that hasn’t stopped its adoption.
</p>
</span>
</div>
<div class=”footer-left”>&nbsp;</div>
<div class=”footer-right”>&nbsp;</div>
</div>
</body>
</html>

Advertisements

1 Response to "popup dialog creation using html DIV"

I’m glad that I’ve found your pvibeesh.wordpress.com website.
You definitely can write and teach and inspire. Keep writing – I’ll keep reading.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: