Discussion :

[Lideln]

Bonjour,

Je suis nouveau en tout ce qui concerne javascript/php etc.
J'utilise un script javascript (dans un fichier .js que j'inclus) qui permet d'afficher/cacher un élement "div" d'une page html, dans le but de n'afficher le menu de navigation du haut que si l'utilisateur s'est enregistré.

Le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
var DHTML = (document.getElementById || document.all || document.layers);
 
function getObj(name)
{
	if (document.getElementById)
	{
		this.obj = document.getElementById(name);
		this.style = document.getElementById(name).style;
	}
	else if (document.all)
	{
		this.obj = document.all[name];
		this.style = document.all[name].style;
	}
}
 
function layerDisp(lyr,flag)
{
	if(!DHTML) return;
	var x = new getObj(lyr);
	x.style.display = (flag)? 'block' : 'none';
}
 
function toggleVisible(lyr)
{
	alert("Appel a toggleVisible");
	if(!DHTML) return;
	alert("etape 1...");
	var x = new getObj(lyr);
	alert("etape 2...");
	var flag = (x.style.display == 'none')? 1 : 0;
	alert("etape 3...");
	layerDisp(lyr,flag);
	alert("etape 4...");
}
 
function maskLayer()
{
	styleCalque("message").display="none";
}

Lorsque j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a class="CLink" href="javascript:toggleVisible('div_menu');" target="_top">TEST DE LA FONCTION</a>

Ca marche impeccablement (j'ai mis des "alert" dans tout mon code javascript pour etre sur).

Par contre, ce que je veux, c'est pas ca ! J'aimerais que ca se fasse automatiquement soit au onLoad de la page HTML si possible, soit que j'appelle ca directement dans le code.

Et voici mes problemes :
1) Si j'appelle au onLoad ou plus loin dans le code, la fonction javascript appelée quitte subitement apres le alert("etape 1...");
J'utilise ce code pour appeler la fonction dans le body du HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script type="text/JavaScript">toggleVisible('div_menu');</script>

2) Avec ce code, la fonction est appelée 2 fois
Tandis que si j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script language="javascript">toggleVisible('div_menu');</script>

Ca ne l'affiche qu'une fois (mais bon ca marche pas quand meme ! lol)

Voilà, si quelqu'un peut me dire comment appeler cette fonction directement dans le body du HTML (sans passer par un clic sur un lien), et si quelqu'un peut me dire pourquoi ca ne marche qu'avec un clic et pourquoi ca plante avec un appel direct....

Merci beaucoup de votre aide

Lideln

[Lideln]

*bump*

[sekaijin]

moi j'aurais fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function toggleVisible(lyr) {
   try {
      myDiv = document.getElementById(lyr);
      if (myDiv) {
         if (myDiv.style.display == 'none') {
            myDiv.style.display == 'block';
         } else {
            myDiv.style.display == 'none';
         }
      }
   } catch e {
   }
   return false;
}

je ne ferais pas d'appel dans le onLoad car il suffit de mettre la bonne valeur initiale dans le dic lui même ou dans la feuille de style

et enfin sur le a href

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="CLink" href="?" onclick="return toggleVisible('div_menu');">TEST DE LA FONCTION</a>

ECMAScript est le seul élément qui soit suporté à 100% par tous les navigateur sauf la fonction sleep qui pose un pb à IE sinon tout le reste est supporté.

je trouve ton code bien compliqué pour si peu.
A+JYT
PS: je n'ai pas testé mon code mais c'est en général le principe que j'adopte.

[Lideln]

Sekaijin,

Merci pour ta réponse. Par contre ca m'aide pas beaucoup !

je ne ferais pas d'appel dans le onLoad car il suffit de mettre la bonne valeur initiale dans le dic lui même ou dans la feuille de style

Si ca avait été si simple tu crois vraiment que je me serais pris la tete ?
J'ai une valeur par défaut pour cette barre (caché), et quand je me connecte il faut que je CHANGE cette valeur, mais cette barre n'est pas dans le fichier php depuis lequel j'appelle la fonction.

Pour le href mon code marche déjà très bien, merci tout de même.

Ma question reposait sur l'appel DIRECT de la fonction, comme une ligne de code banale, SANS passer par un clic sur un lien.

Je me demandais ce que ca pouvait bien changer entre ces deux méthodes (clic sur un lien et appel direct dans le code) pour que ca marche pour l'un (clic) et pas pour l'autre (appel direct).

Ce soir j'essaierai en effet avec un try catch, peut etre que ca me montrera l'erreur, mais je pige toujours pas la différence entre ces deux appels qui fait que ca marche ou que ca crash.

Si quelqu'un a la réponse...

PS : ce code n'est pas de moi, je débute en javascript c'est la 1ere fois que j'en vois...

[Auteur]

bonjour,

j'ai testé ton code sous IE et Firefox, je n'ai pas de souci. J'ai testé avec le lien puis avec le onload, le menu s'affiche.
-N'as-tu pas fait une erreur lors de l'appel ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<body onload="toggleVisible('div_menu')">

-un détail qui peut avoir son importance. Tu utilises dans ton code style.display="valeur". Pour éviter des problèmes d'affichage, il faut que ce style soit déclaré dans la balise div et non dans le CSS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="div_menu" style="display: none">

-pour la balise script préfère cette syntaxe (avec ou sans les balises commentaires) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<script type="text/javascript">
<!--
 
 
//-->
</script>

-si tu veux appeler ta fonction dans le body de ta page écris ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<script type="text/javascript">
toggleVisible('div_menu')
</script>

Mais il faut placer cette ligne d'appel après ta balise div : il faut d'abord charger le div avant d'appeler la fonction, sinon le script plante.

[Lideln]

Hello Auteur !

Merci pour cette réponse vraiment complète !
Je n'ai pas mon code sous les yeux car je suis au bureau là (stage de fin d'études).

Pour éviter des problèmes d'affichage, il faut que ce style soit déclaré dans la balise div et non dans le CSS.

C'est bien le cas, je l'initialise dans le fichier php, à "none".

Merci pour les conseils d'appel de la fonction, je vais tester ca en rentrant et je te dirai.
Par contre pour

Mais il faut placer cette ligne d'appel après ta balise div : il faut d'abord charger le div avant d'appeler la fonction, sinon le script plante.

Peut être que mon problème vient de là ?

Je m'explique :
j'ai un fichier index.php, dans lequel j'ai 3 iframes. La 1ere contient le menu du haut, placé dans une balise div (le fameux div_menu) et initialisé à : invisible.
J'ai un autre iframe pour le menu de gauche (initialisé avec menu_gauche.php) et un autre encore pour le container.

J'arrive sous index.php, en mode visiteur. Je peux me connecter grace au menu de gauche. Quand je le fais et que ca marche, le menu de gauche est remplacé par une autre page php : menu_gauche_connected.php (oui, je me suis pas embêté pour les noms lol)

Et c'est dans ce fichier php que je souhaite appeler la fonction d'affichage du div. Alors est ce que le div (contenu dans index.php) n'est accessible QUE apres avoir fini de parcourir ce fichier (menu_gauche_connected.php) ? Car quand je clic sur le lien (la page a donc fini de charger) ca marche, mais si je mets l'appel a la fonction dans le code, ca ne marche pas, ca plante apres l'appel a getElementByID.

Si tu as une idée pour comment bypasser ce probleme, je t'en serais tres reconnaissant.

Merci,

Lideln

[Lideln]

Bon alors je vais résumer la situation, car j'ai de nouveaux éléments :

J'ai une page index.php qui contient 3 iframe.
* 1er iframe : contient un <div> dont l'ID est "div_menu". Ce div contient le menu du haut, accessible seulement en mode connecté (c'est a dire qu'il est caché par défaut, avec style="display:none")
* 2eme iframe : contient une page par défaut : menu_gauche.php, qui permet de s'identifier ou de commencer une nouvelle inscription.
* 3eme iframe : container pour les différentes pages de données

Lorsque l'on s'identifie, la page menu_gauche.php est remplacée par menu_gauche_connected.php.
De plus, lors de l'affichage de cette page de menu, j'aimerais appeler la fonction qui affiche le div d'ID div_menu.
Cette fonction s'appelle toggleVisible(name) et se trouve dans un fichier .js.

Le résultat de mes tests, et avec l'aide des forumers :

Si j'appelle cette fonction lors du clic sur un lien, ca marche impeccable.
Si j'appelle cette fonction dans le body de la page php appelante (menu_gauche.php) ou meme celle chargée (menu_gauche_connected.php), l'élément n'est pas trouvé !

Voici le code de mon script (simplifié grace a Sekaijin) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
function toggleVisible(name)
{
	alert("Appel a toggleVisible");
	myDiv = document.getElementById(name)
	if (!myDiv)
	{
		alert("Element introuvable !");
		myDiv = document.all[name];
	}
	if (myDiv)
	{
		if (myDiv.style.display == 'none')
		{
			myDiv.style.display = 'block';
		}
		else
		{
			myDiv.style.display = 'none';
		}
	}
	else
	{
		alert("Element introuvable 2 !");
	}
}

Voilà, donc j'en déduis que s'il ne trouve pas l'élément lors de l'appel direct dans body, c'est parcequ'il n'a pas fini de "créer" sa table d'éléments, et que si ca marche lors d'un clic sur un lien c'est parceque tous les éléments ont été analysés ?

Si oui, comment faire s'il vous plait.... ?
(vu que ca ne marche pas non plus lorsque je valide mes infos de connexion...)

Merci de votre aide,

Lideln