11491 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Afficher / Masquer une <DIV> en Javascript avec un effe

Bonjour,

Je suis en train de réaliser un thème pour un blog wordpress.
J'ai ajouté un petit javascript pour afficher/masquer les commentaires avec le code ci-dessous:


<script type="text/javascript"> 

	function ToggleDiv(elementId)
	{
		var el = document.getElementById(elementId);
		if (el.style.display != 'block')
			{ el.style.display = 'block'; }
		else
			{ el.style.display = 'none'; }
	}		

</script>


puis le code HTML:


<div id="affichagecommentaire" onclick="ToggleDiv('commentaires');">
	<a href="#comment">Afficher/Masquer commentaires</a>
</div>
<a name="comment"></a>

<div id="commentaires">
...
</div>



Tout cela fonctionne bien, mais je trouve la transition un peu brutale, car lorsque l'on clique sur le lien l'ensemble des commentaires sont affichés d'un coup.

Je souhaiterais donc modifier le javascript afin d'ajouter un effet déroulant ou de fondu pour rendre la transition plus douce.

J'ai bien essayé différente solutions trouvées sur le net, mais je n'arrive pas à les appliquer à mon cas.

Si quelqu'un peu me donner un coup de main, je suis preneur.

Merci.
Modifié par mamax (25 Aug 2009 - 15:08)
Les effets de transition demandent une modification régulière des styles de l'élément, par exemple pour augmenter une hauteur progressivement on va rajouter 1px à la hauteur toutes les 20ms. En JavaScript, on utilise les méthodes window.setTimeout et window.setInterval. Personnellement je n'ai jamais réussi à les faire fonctionner (je dois être un peu teubé), mais je ne doute pas que ce soit possible.

Une autre solution consiste à profiter des bibliothèques JS qui gèrent (notamment) ces effets, comme jQuery ou Mootools. Comme tu ne veux pas imposer le chargement de telle ou telle bibliothèque (en général assez conséquente) juste pour un petit effet, tu peux éventuellement tester l'existence de ces dernières et adapter ta fonction:
function ToggleDiv(elementId) {
  if(jQuery) {
    // Ta fonction réécrite en jQuery, avec les effets souhaités
  }
  else {
    // Ta fonction de base
  }
}

Ceci dit, si tu te sens capable de reproduire certains effets de bibliothèques telles que jQuery sans utiliser ces bibliothèques (analyser leur code source peut être utile dans ce cas), pourquoi pas, je t'y encourage même.
Salut,

Comme dit Florent.V tu peux utiliser cette méthode :

 function Timer() {
       alert('coucou')
       setTimeout("Timer()",1000);
   }
  var temps=Timer();

Là toutes les secondes il va t'afficher "coucou" en alerte, pour arrêter la chose tu fais un:

clearTimeout(temps);


Aparemment SetInterval dont le principe est le même n'est pas compatible avec tous les navigateurs.
Sinon je te conseillerais aussi d'utiliser une librairie javascript du type Jquery, mootools ou prototype (avec scriptaculous, plus lourd). Elles permettent de faire des choses du genre:


$('idDeTonElement').hide('slow')
$('idDeTonElement').hide(tempsEnMillisecondes)


Ce qui raccourcis ton temps de codage Smiley cligne
OK,

Je vais aller faire un tour du côté de JQuery...
Y aurais-t-il des site pas mal qui donnent des infos claires et simples sur les fonctions apportées par cette bibliothèque?
Bein je peux te les donner comme ça:
- un code plus propre, moins de lignes à faire pour le même résultat
- Des effets, selections css, gestion de fonctions, ajax simplifiés et valables sur tous les navigateurs
- Une documentation claire avec exemples
- Une grosse communauté pour t'aider et améliorer ton code
- Des plugins par centaine qui fonctionnent avec (genre lightbox, modalbox, menus accordéons et autres menus..)

Si tu veux apprendre la plupart des choses et que l'anglais ne te fais pas peur:
Apprendre Jquery en 30 minutes Smiley cligne
+1 pour jQuery, vraiment fantastique cette librairie Smiley cligne

Gérer des effets de transition en Javascript "tout seul", sans librairie, c'est rapidement ingérable. Utiliser jQuery pour ça (ou Prototype, pour ceux qui aiment), c'est carrément mieux, voire la marche à suivre.
Par contre, j'ai un petit souci:
La <div> pour laquelle je veux appliquer mon effet contient un grand nombre de <div> et de <class>.

Dans mes tests que j'ai fait précédemment, cela fonctionnait avec une <div> "seule" que je créait pour tester, mais quand j'intégrait le script au cas réel, cela ne fonctionnait plus...
Bonjour,

Ca y est, cela fonctionne. C'est vrai qu'avec jQuery c'est vraiment simple, et cela demande que peu de ligne de code.

voici le javascript:


<script type="text/javascript" src="./wp-content/themes/maxkv2/js/jquery-1.3.2.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $("#commentaires").hide();
  //toggle the componenet with class msg_body
  $("#affichagecommentaire").click(function()
  {
    $(this).next("#commentaires").slideToggle(600);
  });
});
</script>


puis le code HTML:


<div id="affichagecommentaire" style="cursor: pointer;">
	<a href="#commentaires">Afficher/Masquer commentaires</a>
</div>
<div id="commentaires">
        Le contenu que l'on veux afficher/masquer
</div>


Par contre j'ai un petit souci car lorsque l'on clique sur le lien afficher/masqué, On se ballade un peu dans la page est ce n'est pas très esthétique.

c'est visible sur ce lien:
http://portfolio.maxk.fr/?p=40#commentaires

Si quelque sais comment régler cela...
J'ai trouvé mon pb (il fallait retirer le lien avec la balise <a>).
Tout fonctionne maintenant.
Sujet clos
Aller à