You are here: irt.org | FAQ | DHTML | Q1157 [ previous next ]
Try:
<html>
<head>
<title></title>
<!--
Note about the popup code: it was heavily influenced by the
main page of irt.org. It should downgrade well on all browsers.
-->
<style type="text/css">
<!--
.popup {
position: absolute;
visibility: hidden;
left: 25%; right: 25%; top: 50;
}
.popup table { background-color: #ffffcc }
//-->
</style>
<script type="text/javascript" language="JavaScript"><!--
var showing = null;
function show(what, x, y) {
if (document.layers && document.layers[what]) {
object = document.layers[what];
object.visibility = 'visible';
object.left = xPos;
object.top = yPos;
if (showing) hide(showing);
showing = object;
return false;
}
else if (document.all) {
object = document.all[what];
object.style.visibility = 'visible';
object.style.zIndex = 100;
object.style.posLeft = xPos;
object.style.posTop = yPos;
if (showing) hide(showing);
showing = object;
return false;
}
return true;
}
function hide(object) {
showing = null;
if (document.layers && object)
object.visibility = 'hidden';
else if (document.all)
object.style.visibility = 'hidden';
return false;
}
var xPos = yPos = 100;
if (document.all)
document.onmousedown=down;
else if (document.layers) {
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=down;
}
function down(e) {
if (document.all && window.event.srcElement.parentElement)
hide(window.event.srcElement.parentElement);
else if (document.layers) {
var clickX = e.pageX, clickY = e.pageY, testObj;
for (var i = 0; i<document.layers.length; i++) {
testObj = document.layers[i];
if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) {
hide(testObj);
}
}
}
if (document.all) {
xPos = window.event.offsetX;
yPos = window.event.offsetY;
}
else if (document.layers) {
xPos = e.layerX;
yPos = e.layerY;
}
}
//--></script>
</head>
<body bgcolor="white">
<h1>Popup Test</h1>
<table border='0'>
<thead>
<tr>
<th><!-- metric name --></th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th><!-- [Graph] buttons --></th>
</tr>
</thead>
<tbody>
<tr>
<td align='right'>
Foo
[<a href="#foo" onClick="return show('foo')">?</a>]
</td>
<td align='center'>
value
</td>
<td align='center'>
</td>
<td align='center'>
value
</td>
<td align='center'>
value
</td>
<td align='center'>
value
</td>
<td align='center'>
value
</td>
<td>
</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td>lots more rows</td>
</tr>
<tr>
<td align='right'>
Bar
[<a href="#bar" onClick="return show('bar')">?</a>]
</td>
<td align='center'>
value
</td>
<td align='center'>
value
</td>
<td align='center'>
value
</td>
<td align='center'>
value
</td>
<td align='center'>
value
</td>
<td align='center'>
</td>
<td>
<small></small>
</td>
</tr>
</tbody>
</table>
<p></p>
<a name="foo"></a>
<div id='foo' class='popup' onClick="hide('foo')">
<table border='1' width='100%'>
<tr>
<td>
<table width="100%">
<thead>
<tr>
<td valign='top'><h3>Foo</h3></td>
<td align='right' valign='top'>
<p>
</p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<p>
This is some text all about Foo
</p>
<p>
<em>
more junk
<br>
blah
</em>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<a name="bar"></a>
<div id='bar' class='popup' onClick="hide('bar')">
<table border='1' width='100%'>
<tr>
<td>
<table width="100%">
<thead>
<tr>
<td valign='top'><h3>Bar</h3></td>
<td align='right' valign='top'>
<p>
</p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<p>
Text all abour bar
</p>
<p>
<em>
hello
<br>
yawn
</em>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>