javascript

**rick8028** · 05-19-2009 03:54 PM

I am going to insert an html javascript code, the script works, but I want the menus hidden on page load.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

<head>

<title> The Pool Gods </title>
<script type="text/javascript">
function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else {
listElementStyle.display="none";
}
}
</script>

</head>

<body>




    <a href="javascript:toggle('menu')">Getting Started</a><br>
<ul id="menu">
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods">Home</a></font></li>
    
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/home/freeSignUp/">Free Sign-Up</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/home/howToPlay/">How To Play</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/home/rules/">Rules</a></font></li>
    </ul>
    
</ul>

<a href="javascript:toggle('menu2')">Standings</a><br>
<ul id="menu2">

    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/standings/dailyBuzz/">Daily Buzz</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/standings/hallOfFame/">Hall Of Fame</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/standings/formalChallenge/">Formal Challenge</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/standings/reportLoss/">Report A Loss</a></font></li>
    </ul>

</ul>

<a href="javascript:toggle('menu3')">Tournaments</a>
<ul id="menu3">

    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/tournaments/tourneyBuxLog/">Tourneys Bux Log</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/tournaments/tourneyAwards/">Awarded Medals</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/tournaments/tourneyRibbons/">Tourney Ribbons</a></font></li>
    <li><font color="red" font size="5"><a href="http://www.myleague.com/thepoolgods/tournaments/overview/">Over View</a></font></li>    
    </ul>

</ul>







</body>

</html>

I can't seem to figure it out, Thanks in advance

**leafypiggy** · 05-19-2009 05:37 PM

Not too sure this will work, but calling onload="toggle()" should hide the list.

so, change <body> to

Code:

<body onload="toggle()" >

and see what happens. =]

**rick8028** · 05-19-2009 06:00 PM

That didn't work, they do collapse when clicked, but the sub-menu items are still visible, those should be hidden, I got this code off a tut, I changed variable to toggle rather than switchit, that's what they had for the variable.. It didn't work with switchit neither.. Any other ideas we can try?

**leafypiggy** · 05-19-2009 06:36 PM

Note: I'm not great at javascript, but this *might* work:

I can't figure it out, been trying for ten minutes. :x

Here's my idea (like I said, i'm not good with JS)

<body onload="toggle('menus')">

Then, the function would contain an array containing all the names of the menus you wish to close. Then:

if(listElementStyle.display=="menus"){
}

inside that, the thing would have a function that sets all the values in the array to
listElementStyle.display="none";

Understand what I'm saying?

That's basically your PsuedoCode, figure it out from there.

Sorry I couldn't help more. =/

**rick8028** · 05-30-2009 11:41 PM

Well, I forgot to mention, this was an older javascript script I found online, maybe it got removed? Other than that, I have no idea... I am fairly new to JS, I'm better with HTML/CSS than anything else, so this scripting stuff is pretty foreign to me, LOL...

**VPmase** · 05-31-2009 12:14 PM

All you need to do is change
<ul id="menu">
<ul id="menu2">
<ul id="menu3">
to
<ul id="menu" style="display:none;">
<ul id="menu2" style="display:none;">
<ul id="menu3" style="display:none;">

**rick8028** · 05-31-2009 12:28 PM

Ttytyty VPMase, it's working now!

Thread: javascript

LinkBack

Thread Tools

Display

javascript

Re: javascript

Re: javascript

Re: javascript

Re: javascript

Re: javascript

Re: javascript

Similar Threads

Checking if a file(url) exists using Javascript (AJAX)

Making a site JavaScript dependent - pros/cons?

drop down menus with JavaScript disabled?

javascript and external javascript files problem

XML and Javascript

Posting Permissions