Discussion :

[laurentSc]

Bonsoir,

je souhaite, lorsque l'utilisateur clique sur un lien passer le display de 2 div de block � none. J'ai donc attribu� la classe "cacher" � ces 2 divs, et lorsque l'utilisateur clique sur le lien, �a envoie sur une page o� j'ai mis ce code

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
	<script>
	var classCacher = document.getElementsByClassName("cacher");
	for (i=0;i<classCacher.length;i++) {
	     i.style.display=none;
	}
	</script>

mais le display des 2 div reste � block. Comment faudrait-il faire ?

[danielhagnoul]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
var classCacher = document.getElementsByClassName("cacher");
 
for ( var i = 0; i < classCacher.length; i++ ){
  classCacher[i].style.display = "none";
}

[laurentSc]

Merci

[Invit�]

Ca se fait aussi plus facilement en jQuery (que tu utilises par ailleurs...).

[SylvainPV]

Euh je ne suis pas s�r de comprendre... Pourquoi parcourir les �l�ments en JavaScript et modifier leur style en inline quand on peut simplement utiliser CSS ?

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

.cacher { display: none; }

[laurentSc]

La raison est que �a doit �tre dynamique : au d�part, le display est � block et c'est seulement quand l'utilisateur clique sur un des 2 liens de navigation que je passe le display � none.

[SylvainPV]

C'est l'attribution de la classe qui est dynamique non ? Autrement tu pourrais avoir des �l�ments avec une classe "cacher" qui sont visibles...*

exemple: http://jsfiddle.net/yuLmcqhr/

[laurentSc]

Oui, tout-�-fait, c'est bien l'attribut...

[Invit�]

Bonjour Laurent,

explique-nous un peu comment tu effectues le "onclick"* sur le lien
(code � l'appui)

* :

• en Javascript pur
• en jQuery

[laurentSc]

Je viens d'�crire une r�ponse (assez longue) ; ma connexion s'est termin�e donc au moment d'envoyer le post, �a m'a demand� de me reconnecter, ce que j'ai fait, mais apr�s, post disparu...donc je recommence :

d�sol� mais pas de onclick. Les liens sont de ce genre : <a href="'.$_SERVER['PHP_SELF'].'?page=planning&m='.$monthValue.'&y='.$yearValue.'&eff=1">&lt;&lt;</a>. Le PHP_SELF indique qu'on reste sur la m�me page ; mais cette page en inclut une deuxi�me dont le nom est donn� par le param�tre page, donc ici, on inclue la page planning.htm (l'extension est toujours htm). Le fait de changer l'attribut display de la classe "cacher" est donn� par le param�tre eff et ensuite dans planning.htm :

Code php :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
	if (isset($_GET['eff'])) {?>
	<script>
	var classCacher = document.getElementsByClassName("cacher");
	for (i=0;i<classCacher.length;i++) {
		classCacher[i].style.display = "none";
	}
	</script>

[Invit�]

Bonjour,
c'est donc bien ce qu'avait flair� SylvainPV.

Nul besoin de JavaScript ici :

Code php :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
<?php if (isset($_GET['eff'])) { ?>
<style type="text/css">.cacher { display: none; }</style>
<?php } ?>

A mettre avant </head>.


En dehors du fait que tu manques de technique(s), c'est surtout la LOGIQUE* qui te fait le plus d�faut.
*Ici, il s'agissait de trouver la solution la plus simple.

N.B. Et comme tu n'as QUE 2 div � masquer, je me serais m�me pass� d'ajouter une class, en mettant directement sur chaque div :

Code php :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
<div<?php if (isset($_GET['eff'])) { echo ' style="display: none;"'; }; ?>>
.....
</div>

[SylvainPV]

J'irais m�me plus loin, quitte � recharger toute une page g�n�r�e via PHP, autant virer compl�tement les blocs cach�s du HTML g�n�r�. Ce sera �a de moins � charger c�t� client.

Mais bon, si on commence � faire la fine bouche niveau performances, autant se passer de PHP compl�tement

[laurentSc]

Il y a une impossibilit� dans les propositions de J�r�me au post #11 : la variable $_GET['eff'] n'existe pas dans les fichiers qui contiennent les div ; en effet, ces fichiers sont inclus dans celui sur lequel je fais le lien.