Topic: Problem With Sub-Popups Pages that link to <a href="https://ozoneasylum.com/backlink?for=29318" title="Pages that link to Topic: Problem With Sub-Popups" rel="nofollow" >Topic: Problem With Sub-Popups\
 
Author Thread
YotamElal
Nervous Wreck (II) Inmate

From:
Insane since: Jan 2006

 IP logged posted posted 06-29-2007 20:17 Edit Quote

Hello,
I am back after a long time . . .

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:
<!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>




The problem is here:
[code]
// 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";
//}
[code]
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 06-30-2007 23:43 Edit Quote

I know you've given the code, but it makes it so much more likely super-lazy people (like me, even though I have little expertise with JS) will help you if you link to a live page that exhibits the malfunction (don't comment it out).

Also regarding your doctype declaration, just FYI: http://hsivonen.iki.fi/doctype/


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu