Javascript Menu Help?

ButtermilkJack · 21-04-2006 12:08pm #1

Hey, I've found a perfect menu for what I want... well, almost

The tutorial is here.

I've set-up the menu as instructed and have it working fine. But if I try to implement the new javascript mentioned by 'isobar' in Comment #7 at the end of the page (which I need to do), I run into problems.

Can anyone tell me how much of the 'old' javascript do I replace? Is it all of it, or only part of it?

The problem I have is the submenus no longer open at all

Bear with me, I am a javascript novice!

Thanks!

Ph3n0m · 21-04-2006 12:12pm

can you post a link the page you have set up?

ButtermilkJack · 21-04-2006 12:43pm

Ph3n0m wrote:

can you post a link the page you have set up?

Sure...

http://www.visco.ie/temp/iq/

Any help appreciated

cgarvey · 21-04-2006 3:37pm

ButtermilkJack wrote:

Can anyone tell me how much of the 'old' javascript do I replace? Is it all of it, or only part of it?

All of it, so his comment has the full function. Some characters have been snipped from his comment, so here's my stab at it (not tested)...

function showHide(theidPrefix, theidNum) {
    // show/hide clicked menu element
    if (document.getElementById) {
        var switch_id = document.getElementById(theidPrefix + theidNum);
        if(menu_status[theidPrefix + theidNum] != 'show') {
            switch_id.className = 'show';
            menu_status[theidPrefix + theidNum] = 'show';
        }
        else {
            switch_id.className = 'hide';
            menu_status[theidPrefix + theidNum] = 'hide';
        }

        // hide non-clicked menu elements
        n = 1;
        while( document.getElementById(theidPrefix + n) ) {
            if(n !== theidNum) {
                var hide_id = document.getElementById(theidPrefix + n);
                hide_id.className = 'hide';
                menu_status[theidPrefix + n] = 'hide';
            }
        }
    } // end if doc.getElByID
} // end function

Try something like that

Ph3n0m · 21-04-2006 4:19pm

Tested and working on Firefox and IE 6 (although your menu is hidden in IE - sort the CSS out)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>[Title]</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all" />
<meta name="description" content="Description" />
<meta name="keywords" content="keywords" />
<link rel="shortcut icon" href="/favicon.ico" />

<link rel="stylesheet" type="text/css" media="all" href="styles/iq_global.css" />

 <script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theidPrefix, theidNum){

// show/hide clicked menu element
if (document.getElementById){
	var switch_id = document.getElementById(theidPrefix + theidNum);
	if(menu_status[theidPrefix + theidNum] != 'show'){
	switch_id.className = 'show';
	menu_status[theidPrefix + theidNum] = 'show';
	}
	else {
	switch_id.className = 'hide';
	menu_status[theidPrefix + theidNum] = 'hide';
	}
	// hide non-clicked menu elements
	for(n=1; n<=4; n++){
	if(n != theidNum) {
	var hide_id = document.getElementById(theidPrefix + n);
	hide_id.className = 'hide';
	menu_status[theidPrefix + n] = 'hide';
	}
	}
}
}
//-->
</script>

<script type="text/javascript" src="javascript/newwindow.js"></script>

</head>

<body>

<div id="container">

	<div id="hdr1">

		<p><span class="name1">Name</span><br />

		<span class="tagline">tagline</span></p>

	</div>

	<div id="main1">

		<div id="nav1">

			<a href="#" class="menu1">home</a>
			<a class="menu1" onclick="showHide('mymenu', 1)">company</a>

				<div id="mymenu1" class="hide">
					<a href="#" class="submenu">company one</a>
					<a href="#" class="submenu">company two</a>
				</div>
			<a class="menu1" onclick="showHide('mymenu', 2)">expertise</a>
				<div id="mymenu2" class="hide">
					<a href="#" class="submenu">expertise one</a>

					<a href="#" class="submenu">expertise two</a>
					<a href="#" class="submenu">expertise three</a>
					<a href="#" class="submenu">expertise four</a>
				</div>
			<a class="menu1" onclick="showHide('mymenu', 3)">services</a>
				<div id="mymenu3" class="hide">
					<a href="#" class="submenu">services one</a>

					<a href="#" class="submenu">services two</a>
					<a href="#" class="submenu">services three</a>
					<a href="#" class="submenu">services four</a>
					<a href="#" class="submenu">services five</a>
				</div>
			<a class="menu1" onclick="showHide('mymenu', 4)">projects</a>

				<div id="mymenu4" class="hide">
					<a href="#" class="submenu">project one</a>
					<a href="#" class="submenu">project two</a>
					<a href="#" class="submenu">project three</a>
					<a href="#" class="submenu">project four</a>
					<a href="#" class="submenu">project five</a>

				</div>
			<a href="#" class="menu1">contact us</a>

		</div>

		<h1>Main Heading</h1>

		<h2>sub heading</h2>

		<p>Paragraph and <a href="#">links</a>.</p>

	</div>

	<div id="ftr1">

		<p><a href="javascript:poptastic('http://www.visco.ie');">design</a> &raquo; <a href="#">xhtml</a> &raquo; <a href="#">css</a></p>

	</div>

</div>

</body>

</html>

ButtermilkJack · 21-04-2006 4:39pm

One step further cgarvey, thank you! The javascript however doesn't seem to have the desired effect (closing other submenus), although at least it is showing a working menu again. I've uploaded the revised files at the link above. Maybe you can spot something I've missed, perhaps I haven't got the 'onclick' call correctly in the html?

It seems to be working in IE now too, at least it does on my mac (IE v5.2) where it didn't before. The only issue is the CSS path to the images seems to be wrong in IE. I know IE and Firefox clash when it comes to implementing CSS standards but I would've thought the core functions were the same? It's 'looking' fine in Firefox!

ButtermilkJack · 21-04-2006 4:57pm

Ph3n0m, thanks. Although I've just tested it Firefox (Mac v1.5.0.2) and it doesn't seem to close the open submenu when you click on a closed one?

Any thoughts?

Ph3n0m · 21-04-2006 5:00pm

ButtermilkJack wrote:

Ph3n0m, thanks. Although I've just tested it Firefox (Mac v1.5.0.2) and it doesn't seem to close the open submenu when you click on a closed one?

Any thoughts?

Nope because I dont have access to a Mac - chances are the way the events are handled on a Mac are different to a PC. I would also think that IE on the Mac is going to give you a lot of headaches

ButtermilkJack · 21-04-2006 5:04pm

Sorry, ignore that last comment

, it's working fine in Firefox! Perfect, thanks! I tested also in IE 5.2 on the Mac and it's working as well but giving me the same issue as I posted previously. It's not bringing in the images from the CSS. Although it's the same CSS file as Firefox?

I'll wait 'til I get home this evening to test on my PC (IE 7) to see what's happening re hidden menu.

Thanks for your help guys!

Ph3n0m · 21-04-2006 5:22pm

problems in IE with your old HTML - fixed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>[Title]</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all" />
<meta name="description" content="Description" />
<meta name="keywords" content="keywords" />
<link rel="shortcut icon" href="/favicon.ico" />

<link rel="stylesheet" type="text/css" media="all" href="styles/iq_global.css" />

<script type="text/javascript">
<!--
menu_status = new Array();

function showHide(theidPrefix, theidNum) {
    // show/hide clicked menu element
    if (document.getElementById) {
        var switch_id = document.getElementById(theidPrefix + theidNum);
        if(menu_status[theidPrefix + theidNum] != 'show') {
            switch_id.className = 'show';
            menu_status[theidPrefix + theidNum] = 'show';
        }
        else {
            switch_id.className = 'hide';
            menu_status[theidPrefix + theidNum] = 'hide';
        }

        // hide non-clicked menu elements
        n = 1;
        while( document.getElementById(theidPrefix + n) ) {
            if(n !== theidNum) {
                var hide_id = document.getElementById(theidPrefix + n);
                hide_id.className = 'hide';
                menu_status[theidPrefix + n] = 'hide';
            }
        }
    } // end if doc.getElByID
} // end function
//-->
</script>
<script type="text/javascript" src="javascript/newwindow.js"></script>

</head>

<body>

<div id="container">

	<div id="hdr1">

		<span class="name1">Name</span><br />

		<span class="tagline">tagline</span></p>

	</div>

	<div id="main1">

		<div id="nav1">

			<a href="#" class="menu1">home</a>
			<a class="menu1" onclick="showHide('mymenu', 2)">company</a>

				<div id="mymenu2" class="hide">
					<a href="#" class="submenu">company one</a>
					<a href="#" class="submenu">company two</a>
				</div>
			<a class="menu1" onclick="showHide('mymenu', 3)">expertise</a>
				<div id="mymenu3" class="hide">
					<a href="#" class="submenu">expertise one</a>

					<a href="#" class="submenu">expertise two</a>
					<a href="#" class="submenu">expertise three</a>
					<a href="#" class="submenu">expertise four</a>
				</div>
			<a class="menu1" onclick="showHide('mymenu', 4)">services</a>
				<div id="mymenu4" class="hide">
					<a href="#" class="submenu">services one</a>

					<a href="#" class="submenu">services two</a>
					<a href="#" class="submenu">services three</a>
					<a href="#" class="submenu">services four</a>
					<a href="#" class="submenu">services five</a>
				</div>
			<a class="menu1" onclick="showHide('mymenu', 5)">projects</a>

				<div id="mymenu5" class="hide">
					<a href="#" class="submenu">project one</a>
					<a href="#" class="submenu">project two</a>
					<a href="#" class="submenu">project three</a>
					<a href="#" class="submenu">project four</a>
					<a href="#" class="submenu">project five</a>

				</div>
			<a href="#" class="menu1">contact us</a>

		</div>

		<h1>Main Heading</h1>

		<h2>sub heading</h2>

		<p>Paragraph and <a href="#">links</a>.</p>

	</div>

	<div id="ftr1">

		<a href="javascript:poptastic('http://www.visco.ie');">design</a> &raquo; <a href="#">xhtml</a> &raquo; <a href="#">css</a></p>

	</div>

</div>

</body>

</html>

css fix for IE on PC - negative margins were killing it

body {
	background-image: url(../images/bg_body.gif);
	background-position: top left;
	background-repeat: repeat;
	margin: 50px;
	padding: 0;
	font-size: 62.5%;
	text-align: center;
	}

h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 2.2em;
	font-weight: 100;
	color: #fe9d20;
	margin: 0 0 10px 0;
	padding: 0;
	}

h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.4em;
	font-weight: 600;
	font-variant: small-caps;
	color: #000000;
	margin: 0 0 10px 0;
	padding: 0;
	}

p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	line-height: 1.6em;
	color: #333333;
	margin: 0 0 10px 0;
	padding: 0;
	}

a {
	color: #fe9d20;
	text-decoration: none;
	}

a:hover {
	color: #000000;
	text-decoration: underline;
	}

.name1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.6em;
	font-weight: bolder;
	color: #fe9d20;
	}

.tagline {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-variant: small-caps;
	color: #666666;
	word-spacing: 2px;
	}

.highlight2 {
	color: #000000;
	font-weight: 600;
	text-transform: uppercase;
	}

#container {
	width: 810px;
	margin: 0 auto 20px auto;
	padding: 0;
	}

#hdr1 {
	background-image: url(../images/bg_hdr1.gif);
	background-position: top left;
	background-repeat: no-repeat;
	height: 40px;
	margin: 0;
	padding: 25px;
	text-align: left;
	}

#hdr1 img {
	float: right;
	clear: none;
	}

#main1 {
	background-image: url(../images/bg_main1.gif);
	background-position: top left;
	background-repeat: repeat-y;
	height: 300px;
	margin: 0;
	padding: 10px 35px 10px 30px;
	text-align: left;
	}

#nav1 {
	float: left;
	border: 1px solid #dddddd;
	width: 145px;
	height: 300px;
	padding: 5px;
	overflow: hidden;
	}
	
#nav1 a {
	background-image: url(../images/bg_nav1btn_up.gif);
	background-position: bottom left;
	background-repeat: repeat-x;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-variant: small-caps;
	margin: 0 0 1px 0;
	padding: 4px 20px;
	text-decoration: none;
	cursor: pointer;
	cursor: hand;
	}

#nav1 a.submenu {
	background-image: url(../images/bg_nav1_subbtn_up.gif);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-color: #dddddd;
	display: block;
	margin: 0 0 1px 0;
	padding: 4px 20px;
	color: #333333;
	}

.menu1 {
	background-color: #fe9d20;
	display: block;
	color: #000000;
	}

.hide {
	display: none;
	}

.show {
	display: block;
	}
	
#ftr1 {
	background-image: url(../images/bg_ftr1.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
	height: 50px;
	margin: 0;
	padding: 0 25px;
	text-align: left;
	word-spacing: 4px;
	}

#ftr1 p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	color: #cccccc;
	margin: 0;
	padding-top: 10px;
	}

#ftr1 a {
	color: #bbbbbb;
	font-weight: normal;
	font-variant: small-caps;
	text-decoration: none;
	}

#ftr1 a:hover {
	color: #666666;
	}

ButtermilkJack · 21-04-2006 7:59pm

Cheers, Ph3n0m. Is it IE6 for PC you were testing in? I've just tested it in IE7 (as well as Opera and Firefox for PC) and it works fine.

If it is IE 6 that's giving problems, can you just point out where the problem was in the html. I saw your note about the negative margins in CSS (was that all?) but can't quite see what changes you made to the html.

Just out of interest and for future reference really

Thanks a million!

Ph3n0m · 21-04-2006 8:57pm

the html changes I made were to remove the <p> tags as they were causing spacing on IE6

the negative margin I removed from the CSS

Javascript Menu Help?

Comments