Discussion :

[Ztinm]

Bonjour, je suis un débutant en javascript/jquery
J'ai crée un script qui lance le défilement des images. Le script fonctionne correctement sauf que la arriver à l'étape 2, le script n'éxécute plus les instructions comme je le souhaite, car il fait une pause plus importante que prévu puis éxécute 2 fois de suite la fonction.

voici l'adresse de la démo :http://www.godartmartin.com/test/

et voici le code

Code javascript :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
/*//// Cette fonction actionne le déplacement du chariot contenant les images. Elle est appeller une fois dans le à l'inialisation. //*/
function scrollUl(u){
 
jQuery('ul.category-moduleimageSlider').stop();
jQuery('ul.category-moduleimageSlider').clearQueue();
clearTimeout(mytimer);
timeIn= true;
jQuery('ul.category-moduleimageSlider').animate({left: (u)},{duration: 3000, complete: nextStep});
};
/*// Cette fonction sert à déterminer ou déplacer le chariot contenant les images pour la prochaine étape//*/
function nextStep (){
jQuery('ul.category-moduleimageSlider').stop();
jQuery('ul.category-moduleimageSlider').clearQueue();
clearTimeout(mytimer);
if ( positionTableau<(counterImage-1)){
positionTableau++;
var ld = document.getElementById('imgdot'+ (positionTableau-1) +'');
ld.removeClass("selectedDot");
ge = (positionTableau);
var leftStep = arrayMidImage[ge];
var id = document.getElementById('imgdot'+ ge +'');
id.addClass("selectedDot");
 
var leftStep = arrayMidImage[ge];
mytimer=setTimeout(function(){
scrollUl(leftStep);
},6000);
delete ld;
delete id;
 
}
 
};
 
/*// les boutons de paginations déclanche cette fonction à l'évènement click//*/
jQuery('.dot').click(function() {
 
jQuery('ul.category-moduleimageSlider').stop();
jQuery('ul.category-moduleimageSlider').clearQueue();
clearTimeout(mytimer);
jQuery('div.imgCounter div').each(function(){
jQuery(this).removeClass("selectedDot");
});
 
var id = jQuery(this).attr('id');
var childNbClick = id.split('imgdot');
var childNb = parseInt(childNbClick[1]);
 
var ghb = document.getElementById('imgdot'+ childNb +'');
positionTableau= childNb;
 
ghb.addClass("selectedDot");
 
if (childNb == 0){
jQuery('ul.category-moduleimageSlider').animate({ "left": startPosition}, "fast" );
}else{
stepPosition = arrayMidImage[childNb-1];
jQuery('ul.category-moduleimageSlider').animate({ "left": stepPosition}, "fast" );
}
ge = (positionTableau);
var leftStep = arrayMidImage[ge];
mytimer=setTimeout(function(){
scrollUl(leftStep);
},6000);
delete ghb;
});

merci à ceux qui pourront m'aider, le problème vient incontestablement des variables entre la position 1 et 2 mais je ne comprends pas pourquoi.

[danielhagnoul]

Bonsoir

1) console, erreur ligne 270 : jQuery('ul.category-moduleimageSlider').parent('div').height() = jQuery('ul.category-moduleimageSlider').height();.

Code :

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

1
2
3
// http://api.jquery.com/height/#height-value
 
jQuery('ul.category-moduleimageSlider').parent('div').height( jQuery('ul.category-moduleimageSlider').height() );

2) Suggère de remplacer les :

Code :

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

1
2
jQuery( selector).stop();
jQuery( selector ).clearQueue();

par :

Code :

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

jQuery( selector ).finish(); // http://api.jquery.com/finish/

3) setTimeout() ! Non, delay() : http://api.jquery.com/delay/

[Ztinm]

J'ai bien tenté de remplacé les setTimout par des delay.

Le problème est que le code s'éxecute correctement de l'image 1 à 2 (autrement dit avec l'id 0 et 1) seulement après cela se gâte, il n'éxécute plus les pause et slide directement.

[danielhagnoul]

Bonsoir

Je n'ai pas beaucoup de temps libre ce soir (peut être cette nuit) et pour l'instant j'ai des problèmes avec les yeux, mais j'ai tout de même eu le temps de voir que la console de Chrome (touche F12) signale deux erreurs :

Uncaught TypeError: Cannot read property 'delay' of undefined script.js:159

scrollUl( leftStep );.

Un delay() doit se mettre avant une animation pas après un appel de fonction.

Uncaught ReferenceError: fast is not defined script.js:208

jQuery('ul.category-moduleimageSlider').animate({ "left": startPosition}, { "duration": "fast", "complete": nextStep} );.

"fast" est un texte.

[Ztinm]

Merci beaucoup pour ton aide, j'ai beau tout essayer je ne comprends ou mon code pose problème. Je vois bien que le soucis est avec mes variables de positions etc car tous ce dérègle entre l'image 2 et 3.
Je continue de chercher, n'hésite pas si tu pense savoir d'ou cela peut éventuellement venir.

et Encore Merci !