javascript

R

rick8028

New Member
Messages
5
Reaction score
0
Points
0
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

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
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. =]
 
R

rick8028

New Member
Messages
5
Reaction score
0
Points
0
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

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
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. =/
 
R

rick8028

New Member
Messages
5
Reaction score
0
Points
0
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

VPmase

New Member
Messages
914
Reaction score
1
Points
0
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;">
 
Last edited:
You must log in or register to reply here.
Top