11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Faire apparaitre/disparaitre un <div>

Bonjour,

J'aimerai pouvoir faire disparaitre le <div> au chargement de la page, pour avoir toute la largeur de la page disponible. Le faire apparaitre/disparaitre grace au lien, à un accesskey ou autre...

Au chargement le <div> disparait. Le lien le fait réaparaitre mais ne le fais pas redisparaitre.
Sur la bare web de Firefox, j'ai cela:

Erreur: document.getElementById("smenu") has no properties

Je croyais que soit if, soit else était "lu" mais il semble que non ?
J'ai regroupé le code sur une page html:

<html>
<head>
	<style type="text/css">
	<!--
	#menu {
		display: block;
		}

	#smenu {
		display: none;
		}
	-->
	</style>

	<script type="text/javascript">
	<!--
		function choisir(style) {
			if (style == "smenu")
				document.getElementById("menu").id = style ;
			else
				document.getElementById("smenu").id = style ;
			}
	//-->
	</script>
</head>

<body onload="choisir('smenu')" onafterupdate="choisir('smenu')">

	<a href="javascript:choisir('menu')">Menu</a>

	<div id="menu">
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
		</ul>
	</div>
</body>
</html>

Si quelqu'un peux essayer de m'expliquer mon erreur...
Modifié par DSC (19 Mar 2005 - 20:44)
salut,
tu as mis des " plutot que des '

il faut mettre : 
document.getElementById('menu').id = style ;

plutôt que : document.getElementById("menu").id = style ;

sinon pour les cacher et les afficher tu peux te servir de pour l'afficher :
document.getElementById('menu').style.display = '';

et pour l'effacer de :
document.getElementById('menu').style.display = 'none';
j'ai essayé les ' mais cela n'a rien changé... puis j'ai utilisé display, c'est mieux, je n'ai plus d'erreur mais...
Le <div> ne redisparait pas pour autant.
On dirait que la var n'est pas mémorisé ou que la fonction n'est pas relancé?

Enfin, je continue a cherché Smiley confus .

Merci, du plus Smiley cligne

Dans les deux, plus d'erreur mais toujours pas résolu...
Modifié par DSC (18 Mar 2005 - 23:32)
sérieursement le mieux c'est de faire une fonction qui le cachet et une fonction qui l'affiche ton div

et aussi dans ton di v il faut rajouter des paramètres :
exemple de mon div : 
<div style="z-index:10;border: 2px solid;border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;" id="popup" onClick="javascript:hideMenu2();" nowrap="true" style="display:'none';" ></div>


sinon mon code (qui tourne impec sous IE mais qui merde sous firefox)

<script language="javascript">
function showMenu(contenu, largeur, top){
var divPopUp = '';
divPopUp += '<table width="'+largeur +' px" cellpadding="0" cellspacing="0">';
divPopUp += '<tr><td align="center">Le résultat</td></tr>';
divPopUp += '<tr><td align="justify">'+contenu+'</td></tr>';
divPopUp += '<tr><td align="center"><a href="#" onClick="javascript:hideMenu2();" title="Vous pouvez aussi cliquer sur l\'image pour la fermer ">Cliquez sur l\'image pour fermer la fenêtre</a></td></tr>';
divPopUp += '</table>';
var element = document.all('popup');
element.style.width = "10"; // init par défaut (utile sur ie4SP1A)
element.innerHTML = divPopUp;
element.style.left = "50px";
if (top < 0)element.style.top = "10px";
else element.style.top = window.event.y + document.body.scrollTop - 12;
element.style.position = 'absolute';
element.style.border = 'navy 1px solid';
element.style.backgroundColor = "#ABC6f3";
element.style.fontSize = "11pt";
element.style.fontColor = "darkblue";
element.style.lineHeight = "16px";
element.style.fontFamily = "Comic Sans MS";
element.style.fontweight = "bold";
if (divPopUp!="")element.style.display = '';
}
function hideMenu2(){
var element;
element = document.all('popup');
element.style.display = 'none';
return null;
}
</script>


voilà mon dernier conseil car preès je n'en sais rien Smiley confused
heuuuuuuu,
désolé le E majuscule ne marche que sous FireFox
et sous IE il faut un e minuscule

voilà a+
Voilà, une solution pour FF et IE 6

<html>
<head>
	<style type="text/css">
	<!--
	#menu {
		display: block;
	}

	#smenu {
		display: none;
	}
	-->
	</style>

	<script type="text/javascript">
	<!--
		function zero() {
			document.getElementById("menu").id = "smenu";
			}
			
		function montrer() {
			document.getElementById("smenu").id = "menu";
			document.getElementById("entremenu").href = "javascript:cacher()";
			}
			
		function cacher() {
			document.getElementById("menu").id = "smenu";
			document.getElementById("entremenu").href = "javascript:montrer()";
			}
	//-->
	</script>
</head>

<body onload="zero()" onafterupdate="zero()">

<a id="entremenu" href="javascript:montrer()">Menu</a>

<div id="menu">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</body>
</html>

- Au chargement/actualisation le menu disparait ((css) #smenu),
- L'activation du lien déclenche sa href qui au début est "montrer()". Cela fait réapparaitre le menu ((css) #menu) et dans le meme temps change la href du lien en "cacher()",
- Activer de nouveau le lien fera se cacher le menu tout en changeant la href du lien en "montrer()"... Smiley cligne

1. si l'EcmaScript est désactivé le menu reste présent,
2. sur de petit écran, il est possible d'avoir un menu plus grand que la hauteur et de faire scroller la page (certains menus dynamiques disparaissent pendant le scroll),
3. on peut facilement l'adapter et y ajouter lien, accesskey...

J'espère que cela pourra te servir, à toi ou quelqqu'un d'autre d'ailleur.
Modifié par DSC (19 Mar 2005 - 20:43)
a écrit :
J'avais fait un truc (pas terminé ni super optimisé ni comme je voulais, mais la flemme)

Smiley biggrin c'est jolie tout de meme...

Je connais plutot bien le (x)html, css et l'accessibilité. Commence à trafiquer et coder le PHP. Et initie l'emacscript depuis hier (j'ai enfin commence, flemme et manque de temps)...

Je peux regarder et trafiquer ton code ?
Sers toi Smiley cligne , c'est fait pour ça !

Mais c'est loin d'être parfait et pas encore tout à fait super accessible.
Sujet clos
Aller à