Afficher de l'information au clic de la souris

Fermé
VMarvelous Messages postés 1 Date d'inscription samedi 13 juillet 2013 Statut Membre Dernière intervention 13 juillet 2013 - 13 juil. 2013 à 18:03
 Utilisateur anonyme - 14 juil. 2013 à 00:28
Bonjour !

Donc je suis tout à fait nouvelle avec le Javascript, à comprendre, je n'en ai jamais fait du tout ! Par contre j'apprends vite, et je commence à comprendre un peu, donc j'aimerais beaucoup qu'on me guide...

Donc ce que j'essaie de faire, c'est d'avoir plusieurs DIVs cachées sur une page, et de les afficher lors du clic sur un lien.
J'avais trouvé ce code sur l'Editeur Javascript, que j'aime beaucoup puisqu'il fait apparaître les DIVs avec une petite "animation" :

<script type="text/javascript">
function Suite(lien,hauteur){	
//***
//	 levelKro: Ont ajoute le nom a afficher et sa hauteur
//	 tous les tag 'hauteur' sont des remplacement du code d'origine
//	 l'ancien code aussi était fix a 1 div a cause de la première ligne de la fonction, elle aussi est une amélioration du code original
//	 le troisième est un fix du code, sous certain cas le code ne marche pas	car en ce cachant il peut rester afficher, 
//	 pour éviter que ceci arriver la ligne disant la hauteur regle le problème, testé sous IE
//****************************

var objet = document.getElementById(lien); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !	 levelKro +++!
if(objet.style.display == "none" || !objet.style.display){
objet.style.display = "block";
objet.style.overflow = "hidden"; 
lien.innerHTML = "-";
var hFinal = hauteur; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !) levelKro ++!
var hActuel = 0;	 //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function (){
hActuel += 5; //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
objet.style.height =	 hActuel + 'px';
if( hActuel > hFinal){
clearInterval(timer); //Arrête le timer
objet.style.overflow = 'inherit';
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
}
else if(objet.style.display == "block"){
var hFinal = 0; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = hauteur;	 //Hauteur initiale (la hauteur dès le début !)	 levelKro ++!
var timer;
var fct = function (){
hActuel -= 5; //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
objet.style.height =	 hActuel + 'px';
if( hActuel <= hFinal){
clearInterval(timer); //Arrête le timer
objet.style.overflow = 'hidden';
objet.style.display = "none";	
objet.style.height	 =	"0"; // levelkro: Fix du cache de la div +++
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
lien.innerHTML = "+";
}
} 

</script>
[<a href="#" onclick="Suite('popup0','200')">+</a>] popu0
[<a href="#" onclick="Suite('popup1','40')">+</a>] popup1
[<a href="#" onclick="Suite('choufleur','18')">+</a>] choufleur
<hr>
<div id="popup0" style="display: none; border: #000000 1px solid; width: 300px;">
Popup 0	
<br><br><br><br><br><br><br><br>
Simple ?
</div>
<div id="popup1" style="display: none; border: #000000 1px solid; width: 100px;">
Popup 1
</div>
<div id="choufleur" style="display: none; border: #000000 1px solid; width: 200px;">
ici un choufleur
</div>


Le problème d'une part est que les DIVs que l'on a ouvertes précédemment restent ouvertes si on clique sur un autre lien.

Ce que j'aimerais changer, mais que je ne sais pas comment faire, c'est :
- Je ne veux pas que la DIV disparaisse lorsqu'on clique à nouveau sur le lien ;
- Je voudrais que la DIV disparaisse lorsqu'on clique sur un AUTRE lien ;
- Puisque les DIVs risquent de contenir de la vidéo, j'aimerais que le fait de cliquer sur un autre lien arrête la vidéo si elle est en court.

Et tant qu'à y être, y a-t-il une façon de faire apparaître et disparaître les DIVs en largeur plutôt qu'en hauteur (j'imagine que c'est simplement en remplaçant tout ce qui est "height" et "hActuel" par "width" et "wActuel" ?), et peut-on contrôler la direction (par exemple la DIV apparaît à partir de la gauche et s'élargit vers la droite, et si elle disparaît, elle disparaît également de gauche à droite... je ne sais pas si je suis claire) ?

N'hésitez pas à me le dire si j'en demande trop avec cette dernière question... XD

Bref, j'espère que vous pourrez m'aider !
Et je suis vraiment débutante, merci d'être indulgents... ^^


1 réponse

Salut, pour apprendre le JavaScript je te conseil plutôt de développer tes scripts toi même plutôt que de pomper du code sur internet dont tu ne comprend pas son contenu.

Pour ton problème, je te conseil d'utiliser la librairie "Jquery" pour animer tes div lors d'un clique de souris.

Exemple :

Importer la lib depuis son dossier "js" par exemple :
<script type="text/javascript" src="js/jquery.js"></script>


et pour l'animation (disparaître / apparaître une div dont l'id est "mondiv" :

<a href onClick="$('#mondiv').fadeOut('slow');">Disparaître</a>

<a href onClick="$('#mondiv').fadeIn('slow');">Apparaître</a>
0