11497 sujets

JavaScript, DOM et API Web HTML5

Tout d'abord, bonjour à la communauté !

J'ai un soucis de JQuery et de .rotate.

Je m'explique : Lorsque l'on clique sur un lien, un texte apparait en dessous (slideToggle) et l'îcone de + à côté tourne de 45° pour former une X. Si on reclique sur le lien, le texte se ré-enroule et la X redevient un +

J'arrive à tout faire sauf la dernière parti (la X qui redevient un +).
La rotation ne fonctionne qu'une fois. la X reste. j'aimerais qu'à chaque fois qu'on clique, l'îcone tourne de 45° (et ainsi, une fois sur deux, ce sera un +, une fois sur deux ce sera une X).

Voilà mon javascript :


<script>
$(document).ready(function(){
	
	$('#lien1').click(function() {
		$('#recette1').slideToggle('slow');
		$('#plus1').rotateAnimation(45);
    });
	});
</script>


#lien1 : le lien cliquable
#recette1 : le texte qui se déroule ou se ré-enroule.
#plus1 : l'icône qui doit tourner.

Si besoin, voilà le lien, cliquez sur "huile sèche anti vergeture" avec un + à côté :

http://dev.african-essentials.ca/www/conseils-beaute-afrique-essentielle.php

Merci d'avance Smiley cligne
Hello !

Apparemment le plugin fonctionne correctement. La fonction n'ajoute pas 45° à la valeur de ton image mais va le tourner de 45° par rapport à sa valeur initiale. C'est pour cela que ton clique semble fonctionner qu'une fois.

Selon la doc du plugin tu peux tester la valeur de rotation d'un objet : .getRotateAngle(). Du coup tu peux savoir quelle valeur d'angle à soumettre.

A+
Merci de ta réponse Oken.

Mais lorsque j'essaie GetRotateAngle, c'est encore pire.

L'animation se fait, le + tourne de 45° mais tout de suite après, il revient à 0.
Et encore une fois, ça ne semble marcher qu'une seule fois (comme tu l'as expliqué sauf que là, il revient à 0 donc ça devrait marcher à chaque clic).


<script>
$(document).ready(function(){
	
	$('#lien1').click(function() {
		$('#recette1').slideToggle('slow');
		$('#plus1').rotateAnimation({
        angle: 45, 
        bind: {
            click : function(){
               $(this).getRotateAngle();
            	}
        	}
		});
	});
});
</script>


Je ne comprends pas pourquoi c'est si compliqué de rajouter 45° à chaque clique, en tout cas, je ne sais pas l'écrire par moi-même Smiley decu
Ça marche ceci ?

<script>
$(document).ready(function(){
	
	$('#lien1').click(function() {
		var angle = $(this).getRotateAngle() + 45;
        $('#recette1').slideToggle('slow');
		$('#plus1').rotateAnimation(angle);
	});
});
</script>

Modifié par Oken (29 Jan 2014 - 11:34)
Merci Oken mais non.

il n'y a plus aucune animation.
Si je déplace la ligne de la variable comme ceci :


 $('#recette1').slideToggle('slow');
var angle = $(this).getRotateAngle() + 45;
$('#plus1').rotateAnimation(angle);


et bien le slideToggle fonctionne mais pas la rotation.
de plus, il me semble le "this" fait référence à "lien1". C'est #plus1 qui doit tourner.

Merci encore Smiley ohwell
Ca marche vous le getRotateAngle() ? Il me dit que c'est pas une fonction moi :x


ca devrait marcher comme ca

$(document).ready(function(){
var angle=45;

$('#lien1').click(function() {
$('#recette1').slideToggle('slow');
$('#plus1').rotateAnimation(angle);
(angle+=45)%90;
});
});
C'est PARFAIT Mathieu 1004 !!

http://dev.african-essentials.ca/www/conseils-beaute-afrique-essentielle.php

Maintenant, j'aimerais comprendre le script :

$(document).ready(function(){ ----- Quand le document a fini de se charger
var angle=45; ----- Vous définissez une variable qui s'appelle angle et qui vaut 45

$('#lien1').click(function() { ----- Lors que l'on clique sur #lien1
$('#recette1').slideToggle('slow'); ----- #recette1 fait un slidetoggle
$('#plus1').rotateAnimation(angle); ----- #plus1 fait une rotation grâce à la variable "angle"
(angle+=45)%90; ----- Là, je comprends rien Smiley biggrin
});
});
</script>
Ok, je pense que je ne suis pas sur le bon plugin jQuery, car je ne trouve pas la méthode .rotateAnimation() dans la documentation. Désolé c'est ma faute.

Par contre avec le plugin que je t'ai indiqué, tu devrais essayer ce bout code :

var value = 0
$("#lien1").rotate({ 
   bind: 
     { 
        click: function(){
            value +=45;
            $("#plus1").rotate({ animateTo:value});
            $('#recette1').slideToggle('slow');
        }
     }  
});


Ou m'indiquer quel plugin tu utilise.
mathieu1004 a écrit :
Ca marche vous le getRotateAngle() ? Il me dit que c'est pas une fonction moi :x


Comme indiqué sur mon message précédent, il y a eu surement confusion sur le plugin utilisé. Smiley decu
Merci de ton aide Oken.

Mais c'est ma faute, je n'ai pas précisé quel plugin j'utilisais. Et franchement, je ne me souvient plus sur quel site je l'ai récupéré. Merci de m'avoir consacré du temps en tout cas.

Dernière petite question pour améliorer le script.

J'ai 7 boutons à animer.

J'aimerais que le script fonctionne pour #lien1, #lien2, #lien3, ... sans pour autant écrire 7X le script.
Existe t-il un moyen (j'en suis sûr) de faire en sorte que le script fonctionne quelque soit le chiffre ?

Si j'aoute un 8e bouton un jour par exemple.

Encore une fois, je connais pas la syntaxe javascript à mettre Smiley ohwell
Re,
Alors pour cette ligne :
(angle+=45)%90;


Ça revient a écrire angle=(angle+45)%90.
et du coup %90 ça veux dire modulo 90, en gros on prend le reste de la division par 90.
Donc premier coup (45+45)%90 , ça fait 90/90 il reste 0 et hop on repars a 0
Et ensuite (0+45)%90 ça fait 45/9à , il reste 45 du coup angle vaut 45.

En gros, c'est pour que ça fasse 45, 0, 45, 0 au lieu de faire 0, 45, 90, 135, 180, et ça augmente sans fin.
Il n'y a pas forcement une grande utilité au %90 mais bon...
Alors pour optimiser, ça va être un peu plus galère car il y a plein de truc à gérer en même temps.
Le slideToggle du bon élément, le rotateAnimation du bon autre élément, et je ne sais pas encore pour l'angle pour chacun ou pas ( dans le principe j'aurai dis que oui mais bon ^^ )

Rapidement le principe ^^ :
En gros la première étape on va récupérer tous les liens, et tous les spans ( et dans l'absolu tous les p qui sont en display:none, mais pour cela il faudrait remplacer le style en ligne par une classe ca sera bien plus simple^^ )
Vu qu'il n'y a pas de classe particulière je passe via l'arborescence.




var lesliens = $('article p a'); //on récupère les liens
//var lesspans = $('article p span');//on récupère les spans (en considérant que tu vas aussi mettre des spans sur toutes les images, pas que les 3 premiers)
//var lespcaches =$('article .cache'); // je considère que tu as mis une classe .cache dans le css au lieu du style en ligne)

var nblien=lesliens.size(); //on récupère le nombre de lien
var angle=new Array(nblien+1);//on crée un tableau d'angle pour chaque élément ( je rajoute 1 car on utilise pas la case 0 avec tes identifiants)
for (i = 0; i <= nblien; i++){  // J'initialise les valeurs des angles a 45 pour chaque case ( désolé je ne sais pas instancier et initier en même temps en javascript .. )
angle[ i]=45; //hop je rajoute un espace entre [ et i] sinon le forum interprète une balise d'italique ...
}
//lorsque l'on clique sur un des liens
lesliens.click(function(){
	var LienNumero=$(this).attr('id').charAt(4);  // la seule chose que l'on peut récupérer c'est l'identifiant, du coup je m'en sers pour avoir le numéro du lien que l'on a cliqué, on va s'en servir pour toggle les bons éléments. (id='lienX'-> On récupère la 5e lettre avec charAt(4))

$('#recette'+LienNumero).slideToggle('slow');
$('#plus'+LienNumero).rotateAnimation(angle[LienNumero]);
(angle[LienNumero]+=45)%90;
 });


Bon après j'ai tester vite fait via firebug, mais j'entre en conflit avec les scripts que tu as mis sur tes 3 premier éléments du coup ça me fait des effets bizarres, mais normalement, ça marche... et j'ai l'impression que le code source change en cours de route par moment ( les spans notamment qui étaient que sur 3 sont sur tous je crois maintenant)
j’espère que les commentaires sont assez claires Smiley smile

Edit : Bon en fait en faisant le code les spans et lespcaches servent pas finalement du coup je les commentes, mais au lieu de faire $('#recette'+LienNumero) par exemple on aurait sélectionner le LienNumero_ieme span pour éviter les ids numéroté.
Modifié par mathieu1004 (29 Jan 2014 - 14:38)
Personnellement j'utiliserais des class en les ajoutant là ou il y a les id.

<p>
<img id="plus4" class="marges plus" ...>
<a id="lien4" class="lien">...</a>
</p>
<p id="recette4" class="recette">...</p>


	var angle = 45;
	$('.lien').click(function () {
	    $(this).parent().next(".recette").slideToggle('slow');
	    $(this).parent().find(".plus").rotateAnimation(angle);
	    (angle += 45) % 90;
	});
Salut,
je pense qu'avec ta solution, il risque d'y avoir des bugs vis à vis de la variable angle.
Par exemple si tu clique sur le 1er lien, ça va faire tourner le + et mettre l'angle à 0. Du coup si tu cliques sur le 2e lien + ne va pas tourner.

Vu que la fonction getRotateAngle() ne fonctionne pas, je ne pense pas que l'on puisse se passer du tableau d'angle (1 pour chaque lien).
Ha oui, c'est pas faux. Sauf si le client clique dans la bonne séquence. Smiley lol

Effectivement le tableau d'angle est indispensable.
Merci à tous les 2 en tout cas.

Effectivement, ça complexifie énormément le code.

Je pensais que ce serait plus simple. je vais essauyer quand même.

Merci en tout cas.
Non ça change pas grand chose, et au final ça simplifie le jour où tu changeras un truc.
Avant 7 variables angles, la un tableau de 7 cases, c'est kif kif ( faut l'initialiser mais c'est pas une grosse difficulté.

Et pour le reste c'est presque le même code au final, mais une seule fois. Avant tu en ciblais un de manière précise, la maintenant celui qu'on clique s'appelle 'this' et il faut juste trouver une méthode pour déterminer qui c'est ce this pour savoir qui on va faire changer.

Sur ma méthode je récupère le numéro de l'id pour savoir qui c'est, et ensuite je me sers du numéro pour déterminer ce qu'on va faire changer ( parce qu'ils ont le même numéro au final).

Sur la méthode de Oken, il trouve les gens à modifier sans déterminer le numéro. globalement il utilise la logique de ta construction pour accéder aux éléments à coté qui sont les éléments à changé au final.

Au final j'aurai tendance à préférer ma méthode parce que dans ton cas il y a besoin du tableau d'angle pour gérer quel élément on a fait tourner, et donc d'un numéro pour chaque cas.
Cependant , je pense que mettre en place un système de classe 'lien' sur tes liens (comme il recommande) serait judicieux par rapport au 'article p a' que j'ai utilisé (car il n'y avait pas de classe ^^ ) qui ne sera pas nécessairement unique sur le site...