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);
}
}