AJAX

ClamShell Menu Not Working in Foxfire

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Nov 2007

Posts: 1

Reputation: movcol is an unknown quantity at this point

Solved Threads: 0

movcol

Offline

Newbie Poster

ClamShell Menu Not Working in Foxfire

Nov 9th, 2007

Hi,

This clamshell menu code works fine in IE and Safari, but level 3 does not work in Firefox. When I click on 3-Level Menu - Level 2, the menu closes. Clicking on 3-Level Menu - Level 1 again shows the level 3 items were indeed opened. The 2-level menu works fine.

Does anyone know why this does not work in Firefox? Thanks!

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<HTML>
<HEAD>
<script>
	function toggleMenu(objectID)
	{
		var objectblock = document.getElementById(objectID).style;
 
		if (objectblock.display == 'block')
		{
			objectblock.display = 'none';
			window.event.cancelBubble = true; 
			window.event.returnValue = false; 
		}
		else
		{
			objectblock.display = 'block';
			window.event.cancelBubble = true; 
			window.event.returnValue = false; 
		}
	}
</script>
</HEAD>
 
<BODY>
	<div onClick="toggleMenu('3level1')">3-Level Menu - Level 1
			<div id='3level1' style='margin-left: 10%; display: none'>
					<div onClick="toggleMenu('3level2')">3-Level Menu - Level 2 (clicking here not working in FF)
							<div id='3level2' style='margin-left: 10%; display: none'>
									<div onclick="event.cancelBubble = 'true'">Level 3 - anchor to desired page here</div>
									<div onclick="event.cancelBubble = 'true'">Level 3 - another anchor here</div>
							</div>
					</div>
			</div>
	</div>
	<div onClick="toggleMenu('2level1')">2-Level Menu - Level 1
			<div id='2level1' style='margin-left: 10%; display: none'>
				<div onclick="event.cancelBubble = 'true'">Level 2 - anchor to desired page here (works in FF)</div>
			</div>
	</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<script>
	function toggleMenu(objectID)
	{
		var objectblock = document.getElementById(objectID).style;
	
		if (objectblock.display == 'block')
		{
			objectblock.display = 'none';
			window.event.cancelBubble = true; 
			window.event.returnValue = false; 
		}
		else
		{
			objectblock.display = 'block';
			window.event.cancelBubble = true; 
			window.event.returnValue = false; 
		}
	}
</script>
</HEAD>

<BODY>
	<div onClick="toggleMenu('3level1')">3-Level Menu - Level 1
			<div id='3level1' style='margin-left: 10%; display: none'>
					<div onClick="toggleMenu('3level2')">3-Level Menu - Level 2 (clicking here not working in FF)
							<div id='3level2' style='margin-left: 10%; display: none'>
									<div onclick="event.cancelBubble = 'true'">Level 3 - anchor to desired page here</div>
									<div onclick="event.cancelBubble = 'true'">Level 3 - another anchor here</div>
							</div>
					</div>
			</div>
	</div>
	<div onClick="toggleMenu('2level1')">2-Level Menu - Level 1
			<div id='2level1' style='margin-left: 10%; display: none'>
				<div onclick="event.cancelBubble = 'true'">Level 2 - anchor to desired page here (works in FF)</div>
			</div>
	</div>
</BODY>
</HTML>