PDA

View Full Version : Need help with javascript menu



joecool85
Mar 19, 2006, 05:09 PM
I got it to toggle back and forth, but I want it to be hidden when first loaded. Would that be a command like onLoad or something?

Here is my code:

<html>
<head>
<script type="text/javascript"></script>
<title>Brother stuff</title>
</head>
<body>

<div>

<a href="javascript:toggle('menu1')">Menu</a><br>
<h2 id="menu1">Contents</h2>

<script type="text/javascript">
document.getElementById('menul').style.listStyle="none";
document.getElementById('tutorioli').style.display="none"; // collapse list
document.getElementById('tutorialsli').style.display="none"; // collapse list
function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else{ listElementStyle.display="none";
}
} </script>
</div>

</body>
</html>


dornoforpyros
Mar 19, 2006, 05:16 PM
Try this, it's how I got the sliding panels to work on my site

I got it to toggle back and forth, but I want it to be hidden when first loaded. Would that be a command like onLoad or something?

Here is my code:

<html>
<head>
<script type="text/javascript"></script>
<title>Brother stuff</title>
</head>
<body>

<div style="display:none;">

<a href="javascript:toggle('menu1')">Menu</a><br>
<h2 id="menu1">Contents</h2>

<script type="text/javascript">
document.getElementById('menul').style.listStyle="none";
document.getElementById('tutorioli').style.display="none"; // collapse list
document.getElementById('tutorialsli').style.display="none"; // collapse list
function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else{ listElementStyle.display="none";
}
} </script>
</div>

</body>
</html>
joecool85
Mar 19, 2006, 05:52 PM
Now it doesn't show up at all lol.
dornoforpyros
Mar 19, 2006, 07:54 PM
Now it doesn't show up at all lol.

doh! sorry! it was worth a shot!
Coolnat2004
Mar 19, 2006, 10:49 PM
I can't tell exactly what you're doing (I'm not a javascript expert by far..) but I know that you can create a function and have it run when the page loads like this:

<body onload="myFunc();">

I use this on pending.be to disable certain fields on load. This ensures that they aren't disabled by default for browsers that have javascript disabled.. But that's off-topic.
joecool85
Mar 20, 2006, 05:21 PM
Got it to work:

<html>
<head>
<script type="text/javascript"></script>
<title>Brother stuff</title>
</head>
<body>


<div>

<a href="javascript:toggle('joe')">Joe</a><br>
<h2 id="joe">This is my poem stuff.</h2>

<a href="javascript:toggle('bad')">Bad</a><br>
<h2 id="bad">This is my other stuff.</h2>

<script type="text/javascript">
document.getElementById('joe').style.display="none";
document.getElementById('bad').style.display="none";

function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else{ listElementStyle.display="none";
}
} </script>
</div>

</body>
</html>

What it does is loads:

Joe
Bad

Then you can click on each one and it pulls down stuff. Don't ask about the words in it, I was just getting the code right. I'll post the final project when I'm done. It's an expanding poem.