Sujet Précédent Sujet Suivant

Menu Défilant Vertical ...Problème de récupération de données

Romje1 Messages postés 2 Date d'inscription lundi 22 février 2010 Statut Membre Dernière intervention 1 mars 2010 - 22 févr. 2010 à 16:20
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 3 mars 2010 à 19:00
Bonjour,

J'essaie de faire un menu défilant vertical au click gauche (le menu descends ) ou droite (le menu monte) sans aide de framework, avec un pas déterminé.
En fait tout se passe bien, si je ne fais que cliquer sur Next ou que cliquer sur Previous. Si j'alterne l'un après l'autre, le Menu ne veut pas changer de sens alors que j'ai mis sa position en variable globale. Il prends le sens du premier click, alors qu'encore une fois si je fais soit tout l'un ou tout l'autre, le Menu défile convenablement.

Je suis parti du raisonnement où j'allais faire varier la position (Top) de la liste , en fonction du click. J'incrémente la position soit positivement, soit négativement selon le sens recherché. Lorsque l'on est au bout de la liste le bouton concerné disparait.


le code Html est simple une Div avec une liste pour le menu et une liste indépendante pour les bouton de Nav




<li id="SM_EntreesC" class="SM"></li>
<li id="SM_EntreesF" class="SM"></li>
<li id="SM_Decors" class="SM"></li>
<li id="SM_DecorsB" class="SM"></li>




<li id="Previous" onClick='processPrevious();'></li>
<li id="Next" onClick='processNext();'></li>


Voici le code JS , je débute donc peut être il ya-t-il des choses redondantes.

var position = 0; /* Variable globale pour la position du menu*/
var vitesse = 1;
var maxPos = 0; /* Décalage max entre 2 clicks*/

function processNext() {

next();
maxPos = 0;
}
function next() {

var objetA = setInterval('next();',80);
var listNav = document.getElementsByClassName('SM');
var listNavLg = listNav.length;
var pas = -100;
var stopNext = (pas) * (listNavLg); /* Fin du défilement*/
var imgN = document.getElementById('imgN');


if (maxPos == 100 && maxPos !== 0) {

clearInterval(objetA);
}

else {
if (position != stopNext) {

var objet = document.getElementById('S_Menu');
position -= vitesse;
objet.style.top = position + 'px';
maxPos += vitesse;
setInterval('next();',80);
}
else {
imgN.style.visibility = 'hidden';
clearInterval(objetA);
}
}
}

function processPrevious() {

previous();
maxPos = 0;

}

function previous() {

var objetA = setInterval('previous();',80);
var listNav = document.getElementsByClassName('SM');
var listNavLg = listNav.length;
var pas = 100;
var stopPrev = (pas) * (listNavLg);
var imgN = document.getElementById('imgP');

if (maxPos == 100 && maxPos !== 0) {

clearInterval(objetA);
}

else {
if (position != stopPrev) {
var vitesse = 1;
var objet = document.getElementById('S_Menu');
position += vitesse;
objet.style.top = position + 'px';
maxPos += vitesse;
setInterval('previous();',80);
}
else {
imgN.style.visibility = 'hidden';
clearInterval(objetA);
}
}
}

Merci de votre aide.

2 réponses

Réponse 1 / 2
Romje1 Messages postés 2 Date d'inscription lundi 22 février 2010 Statut Membre Dernière intervention 1 mars 2010
1 mars 2010 à 08:33
Je cloture le topic, j'ai trouvé la solution à mon problème. Je mets les codes ça peut servir. C'est donc un menu vertical défilant sans bibliothèque js. Il est adaptable selon que vous désirez afficher sur une même ligne 1, 2 ou x images. Le code est surement perfectible.

code html du menu 




<li id="SM_EntreesC" class="SM"></li>
<li id="SM_EntreesF" class="SM"></li>
<li id="SM_Decors" class="SM"></li>


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

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

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

clearTimeout(deroule);
}
}
0
Réponse 2 / 2
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
3 mars 2010 à 19:00
Bonjour,
Je cloture le topic, j'ai trouvé la solution à mon problème
pense donc valider en appuyant sur le bouton Réponse acceptée !, cela pourra aider...
;O)
0

Discussions similaires

TextBox, défilement vertical automatique
zark92 -
zark92 -

5 réponses
recuperation de données d'un serveur distant dans android
jasminejas -
BunoCS -

6 réponses
Erreur de conversion du type de données varchar en numeric.
cs_houba80 -
SharpMao -

3 réponses
Prob de Restauration base de données
cindyb -
Orange -

3 réponses
Récupération nom de serveur
Ant8386 -
Ant8386 -

3 réponses
Rejoignez-nous