1
I have a popup problem.
When a popup is opened, I want all other popups to close immediatly.
(except for its self and it's child popups)
Here is my code:
code:
[HTML]<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<title>Popup Problem</title>
<style type="text/css">
table.popup {
font-size:100%;
background:white;
border:solid black 1px;
position:absolute;
visibility:hidden;
}
</style>
</head>
<body>
<script type='text/javascript'>
var closeTimer = '';
var closeTimerSub = '';
<!-- Show or Hide an Element -->
function show_element(element, sub) {
document.getElementById(element).style.visibility= "visible";
<!-- Close Timers -->
if(closeTimer && sub != 'sub') { window.clearTimeout(closeTimer); closeTimer = null; }
if(closeTimerSub && sub == 'sub') { window.clearTimeout(closeTimerSub); closeTimerSub = null; }
<!-- Imediatly Close Other Elements -->
hide_elements_now(element); }
<!-- Imediatly Hide Elements -->
function hide_elements_now(element) {
x=document.getElementsByTagName('*');
for(i=0;i < x.length;i++) {
if (x[i].id != element && x[i].id != '') {
// Temporary - Hide all table popups (children don't open because they are closed immediatly)
x[i].style.visibility="hidden";
// Hide all tables popups except if child
//for(var n=0; n < document.getElementById(element).childNodes.length ; n++) {
// if (x[i].id != document.getElementById(element).childNodes[n])
// x[i].style.visibility="hidden";
//}
}
}
}
<!-- Hide an Element and remove form field focus (with time delay) -->
function hide_element(element,sub) {
if (sub == 'sub') closeTimerSub = window.setTimeout('hide_elements_focus(\''+element +'\');', 500);
else closeTimer = window.setTimeout('hide_elements_focus(\''+element +'\');', 500); }
function hide_elements_focus(element) {
if (element) document.getElementById(element).style.visibility= "hidden";
if (document.getElementById(element).style.visibility != 'visible') document.forms[0].elements[0].focus(); }
</script>
<table>
<tr>
<td onmouseover="show_element('table_id1', '');" onmouseout="hide_element('table_id1', '');">
ParentTable1
<table class='popup' id='table_id1'>
<tr>
<td onmouseover="show_element('subtable_id1', 'sub');"
onmouseout="hide_element('subtable_id1', 'sub');">
SubTable1
<table class='popup' id='subtable_id1'>
<tr><td>Sub Content</td></tr>
</table>
</td>
<td onmouseover="show_element('subtable_id2', 'sub');"
onmouseout="hide_element('subtable_id2', 'sub');">
SubTable2
<table class='popup' id='subtable_id2'>
<tr><td>Sub Content</td></tr>
</table>
</td>
</tr>
</table>
</td>
<td onmouseover="show_element('table_id2', '');" onmouseout="hide_element('table_id2', '');">
ParentTable2
<table class='popup' id='table_id2'>
<tr>
<td onmouseover="show_element('subtable_id3', 'sub');"
onmouseout="hide_element('subtable_id3', 'sub');">
SubTable3
<table class='popup' id='subtable_id3'>
<tr><td>Sub Content</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
[/HTML]
The problem is here:
Expand|Select|Wrap|Line Numbers
- // Temporary - Hide all table popups (children don't open because they are closed immediatly)
- x[i].style.visibility="hidden";
- // Hide all tables popups except if child (can't get it to work!)
- //for(var n=0; n < document.getElementById(element).childNodes.length; n++) {
- // if (x[i].id != document.getElementById(element).childNodes[n])
- // x[i].style.visibility="hidden";
- //}
