Discussion :

[Cariboutchou]

Bonjour à tous,


Je désire faire un menu défilant vertical. Mon raisonnement est le suivant :

Je crée une fonction 'defil' dans laquelle j' envoi un paramètre 'sens' +1 ou -1 selon que je click sur la flèche gauche ou droite. Le menu marche parfaitement quand je click uniquement sur gauche ou uniquement sur Droite, le sens est respecté. En revanche dès que j'alterne gauche et droite, ou droite et gauche, le menu défile ds le même sens et prends unqiuement le sens du 1er click.

Le menu et les bouton Nav se présentent sous forme de liste

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="Sous_Menu">
<ul id="S_Menu" class="ListeSM">
<li id="SM_EntreesC" class="SM"><img alt="Entrees_Chaudes" src="Bouton_Entrees_C.png"/></li>
<li id="SM_EntreesF" class="SM"><img alt="Entrees_Chaudes" src="Bouton_Entrees_F.png"/></li>
<li id="SM_Decors" class="SM"><img alt="Decors" src="Bouton_Decors.png"/></li>
<li id="SM_DecorsB" class="SM"><img alt="Decors" src="Bouton_Decors.png"/></li>
</ul>
</div>
<ul id="B_Nav">
	<li id="Previous" onClick='processPrevious();'><img id="imgP" alt="Précédent" src="B_Nav_Prev.png"/></li>
	<li id="Next" onClick='processNext();'><img id="imgN" alt="Suivant" src="B_Nav_Next.png"/></a></li>

le fichier .js se présente ainsi, sachant qu'il y a des variables 'compteur' qui ne sont pas encore utilisées mais que j'utiliserai pour faire disparaitre les flèches quand le menu arrivera en fin de parcours.

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
var decal = 0; /* décalage entre 2 cliks*/
var compteurN = 0; /* Compteur pour arreter le défilement Next */
var compteurP = 0 /* Compteur pour arreter le défilement Prévious */
var position = 0; /* Position du menu */
var sens;
function processNext() {
 
	defil(1);
	decal = 0;
	compteurN++;
	compteurP--;
}
 
function processPrevious() {
 
	defil(-1);
	decal = 0;
	compteurN--;
	compteurP++;
}
function defil(sens) {	
 
 
var deroule = setInterval(function(){defil(sens);},80)
var sousMenu = document.getElementsByClassName('SM');
var nbList = sousMenu.length;
var afficheMenu = 2; /* Nb de Menu à afficher sur la ligne */
var stopDefil = Math.round(nbList / afficheMenu); /* valeur pour arrêt du défilement */ 
var comptAbs = Math.abs(compteurN); /* compteur pour nb de click */
 
 
if (100 == Math.abs(decal)) {
 
	clearInterval(deroule);
}
 
else {
	if (comptAbs != stopDefil) {
 
			var objet = document.getElementById('S_Menu');
			position += sens;
			objet.style.top = position + 'px';
			decal -= sens;
			setInterval(function(){defil(sens);},80)
 
		}
 
}
}

Je ne vois pas où est le problème, j'ai l'impression que le programme n'interprète pas la valeur négative ou positive du paramètre dès que l' on altèrne le sens.

Merci de votre aide.

[Cariboutchou]

Re-bonjour,

J'ai trouvé ma réponse. Cela venait d'un mauvais emploi de setInterval que j'ai remplacé par un setTimeout. Je vous joints le code au cas où quelqu'un serait intéressé.

C'est donc un menu vertical, adaptable (vitesse / défilement / nombre de vignette à afficher ) sans bibliothèque js. Les bouton next et prévious disparaisse en bout ou début de liste.

le code js :


var decal= 0; /* décalage entre 2 cliks*/
var compteur = 1; /* Compteur pour arreter le défilement */
var position = 0; /* Position du menu */
var sens;

/*-----------Mies en place des deux fonctions Next et prévious --------------
-------------Gestion de l'affichage des 2 images les concernants.----------*/

function processNext() {
var sousMenu = document.getElementsByClassName('SM');
var nbList = sousMenu.length;
var afficheMenu = 2; /* Nb de Menu à afficher sur la ligne */
var stopDefil = Math.round(nbList / afficheMenu); /* valeur pour arrêt du défilement */

decal = 0;
defil(-1);
compteur++;

if (compteur == stopDefil) {

var imgN = document.getElementById('imgN');
var imgP = document.getElementById('imgP');
imgN.style.visibility = 'hidden';
imgP.style.visibility = 'visible';
}
else {
imgN.style.visibility = 'visible';
}
}

function processPrevious() {

decal = 0;
defil(+1);
compteur--;
if (compteur == 1) {
var imgN = document.getElementById('imgN');
var imgP = document.getElementById('imgP');
imgP.style.visibility = 'hidden';
imgN.style.visibility = 'visible';
}
else {
imgP.style.visibility = 'visible';
}
}
/*------------------------------------------------------------------------*/
/*-----------Mise en place de la fonction 'défil' générique --------------*/
/*------------------------------------------------------------------------*/
function defil(sens) {


var deroule = setTimeout(function(){defil(sens);},60)

if (Math.abs(decal) < 98) {

var objet = document.getElementById('S_Menu');
position += sens;
objet.style.top = position + 'px';
decal -= sens;
setTimeout(function(){defil(sens);},60);
}
else {

clearTimeout(deroule);
}
}