Menu
Hi everybody ! It’s me again, with my div menu…
First, a little summary of the past episodes.
I wanted to know how it was possible to hide and show multpile divs by clicking on a link. The point was to make a menu.
Palros gave me a fine working script ( THANKS ! ), and then, I wanted to make something a bit funnier : to have the different divs slide in when we click on the link. Of course, I didn’t want them to slide in all together, that would be too easy ( and ugly ). I wanted them to come one after the other, from the right of the page. ( or the left, or the top, or the bottom, it doesn’t really matter).
Palros again gave me a script : delaySlide() and Slide(), but I can’t get them to work. I’m sure I’ve done something wrong with the html part, and it certainly has something to do with the ” and the ‘…
If somebody could help me out of this, I would be very gratefull !!!
Here is the code
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”fond.css” rel=”stylesheet” type=”text/css”>
<script language=”JavaScript” type=”text/javascript”>
<!–
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function slide(div)
{
var div_left = document.getElementById(div).style.left;
if (div_left < 0){
document.getElementById(div).style.left = div_left + 10+”px”;
setTimeout(“slide(‘”+div+”‘)”,500)
}
}
function delaySlide(div,delay)
{
if(arguments.length == 2)
setTimeout(“slide(‘”+div+”‘)”,delay);
else
{
for (var i=0; i<arguments.length; i+=2)
{
setTimeout(“slide(‘”+arguments[i]+”‘)”,arguments[i+1]);
}
}
}
function showHide(div_id)
{
if (arguments.length == 1) {
if (document.getElementById(div_id).style.display == “block”)
document.getElementById(div_id).style.display=”none”;
else
document.getElementById(div_id).style.display=”block”;
}
else {
for (var i=0; i<arguments.length; i++) {
if (document.getElementById(arguments[i]).style.display == “block”)
document.getElementById(arguments[i]).style.display=”none”;
else
document.getElementById(arguments[i]).style.display=”block”;
}
}
}
//–>
</script>
<script>
var styleSheet=’violet.css’;
</script>
</head>
<body>
<div id=”Layer3″ style=”position:absolute; left:45px; top:64px; width:390px; height:66px; z-index:3; background-color: #0000FF; layer-background-color: #0000FF; border: 1px none #000000;”><a onClick=”showHide(‘barre1′,’barre2′,’barre3′,’oneone’); delaySlide(‘barre1’,1000);”><img src=”site/pixel.gif” width=”100%” height=”100%”></a></div>
<div id=”Layer1″ style=”position:absolute; left:20px; top:144px; width:489px; height:428px; z-index:1″>
<iframe allowtransparency=”true” frameborder=”0″ height=”100%” width=”100%” id=”cadre” name=”cadre” src=”edito.htm” style=”FILTER: chroma(color=#ffcc99)” >
</iframe>
</div>
<div id=”Layer2″ style=”position:absolute; left:542px; top:183px; width:177px; height:367px; z-index:2; display:block”>
<table width=”177″ border=”0″ cellspacing=”5″ cellpadding=”0″>
<tr>
<td height=”37″><div id=”barre1″ style=”display: none”><div id=”oneone” style=”display: none”><a href=”http://enfantsdelo.free.fr”>Tafa</a></div></div></td>
</tr>
<tr>
<td height=”38″><div id=”barre2″ style=”display: none”><div id=”onetwo” style=”display: none”><a href=”http://enfantsdelo.free.fr”>Tafa</a></div></div></td>
</tr>
<tr>
<td height=”38″><div id=”barre3″ style=”display: none”><div id=”onethree” style=”display: none”><a href=”http://enfantsdelo.free.fr”>Tafa</a></div></div></td>
</tr>
<tr>
<td height=”37″><div id=”barre4″ style=”display: none”></div></td>
</tr>
<tr>
<td><div id=”barre5″ style=”display: none”></div></td>
</tr>
<tr>
<td><div id=”barre6″ style=”display: none”></div></td>
</tr>
<tr>
<td><div id=”barre7″ style=”display: none”></div></td>
</tr>
<tr>
<td><div id=”barre8″ style=”display: none”></div></td>
</tr>
</table>
</div>
</body>
</html>
it’s just a test version, so don’t attach yourself to the strangeness of the page… lol !!!
I wonder about the Slide and showHide together… Maybe there is some conflict, as the div need to be diplayed as block when it slides, and… yeah… I don’t know…
Also, I would know if it’s possible to have an array or something with all the div id’s, and put that into the function.
Like : menu1 = oneone + onetwo + barre1 + barre2
menu2 = twoone +twotwo + twothree + barre1 + barre2 + barre 3
don’t pay attention to the syntax, it’s just because I haven’t checked the correct syntax yet. I just want to know if it’s possible, because then, the getElementById wouldn’t work, or is there any solution to make it work ???
Thanks for all suggestions !!!
Ness