...

View Full Version : small problem with Simple menu (showHide)



ian_iam
10-18-2008, 06:59 PM
hi
I'm using this script for a simple collapsible menu. It works great except when the class begins as "show" on a page, in which case the menu takes two clicks to hide the menu. It is as if on the first click the script is setting "show" to "show", and then only on the second click to "hide" as desired.

Sorry if this is a novice question, I'm only just starting.

thanks ian



<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

//-->
</script>


and here's the div tag:



<a onclick="showHide('mymenu2')">programs</a>

<div id="mymenu2" class="show">
<span class="submenu">
<a href="earn.html">earn-a-bike</a>
<a href="rentals.html">rentals</a>
<a href="volunteer.html">volunteering</a>
<a href="donate.html">donations</a>
</span>

</div>


and finally the link to it all in action if you desire,
- link. (http://www.oberlin.edu/stuorg/bikecoop/bchome/rentals.html)

jmrker
10-19-2008, 04:30 AM
Add in head:


var Smenu = ['mymenu2','mymenu3'];
function InitShow() {
for (i=0; i<Smenu.length; i++) {
var IDS = Smenu[i];
document.getElementById(IDS).style.display = 'none';
}
}


Then in body:


<body onload="InitShow()">

That way, if JS is not enabled, the submenus will show anyway.

ian_iam
10-19-2008, 06:10 PM
thanks jmrker,
i put that code in, but unfortunately still having the same little bug... it's just that when the menu starts open on a page, for some reason it takes two clicks to hide it, weird.

thanks all.

best ian

vwphillips
10-19-2008, 06:55 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.show{
display:block;
}

.hide{
display:none;
}
/*]]>*/
</style><script language="JavaScript" type="text/JavaScript">
<!--

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(switch_id.className != 'show') {
switch_id.className = 'show';
}else{
switch_id.className = 'hide';
}
}
}

//-->
</script></head>

<body>
<a onclick="showHide('mymenu2')">programs</a>

<div id="mymenu2" class="show">
<span class="submenu">
<a href="earn.html">earn-a-bike</a>
<a href="rentals.html">rentals</a>
<a href="volunteer.html">volunteering</a>
<a href="donate.html">donations</a>
</span>

</div>
</body>

</html>

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.show{
display:block;
}

.hide{
display:none;
}
/*]]>*/
</style><script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if (!menu_status[theid]) menu_status[theid] = 'show';
if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

//-->
</script></head>

<body>
<a onclick="showHide('mymenu2')">programs</a>

<div id="mymenu2" class="show">
<span class="submenu">
<a href="earn.html">earn-a-bike</a>
<a href="rentals.html">rentals</a>
<a href="volunteer.html">volunteering</a>
<a href="donate.html">donations</a>
</span>

</div>
</body>

</html>

ian_iam
10-22-2008, 07:28 PM
problem solved! I used your first solution, I actually already had the css style in an external style sheet. But I really liked how you cleaned up the jscript code! I guess I didn't need to be using menu_status, just className.. thanks for the help. you rock.
ian



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum