Sujet Précédent Sujet Suivant

Demande d'amélioration d'un code Javascript

Fermé
David - 3 mai 2014 à 19:14
 David - 5 mai 2014 à 18:59
Bonjour à tous


Voila j'ai un code JS tous simple qui me permet d'utiliser un ascenseur personnel avec mes propres images qui fonctionne très bien.


Le souci c'est qu'il est vraiment basique et n'y connaissant rien en javascript je sais pas comment faire.


Ce que je souhaite faire :
- Pouvoir monter ou descende dans la div avec les touches fléchées ainsi qu'avec les touches PgUp / PgDown.


- J'aimerai également pouvoir utiliser le clic gauche de la souris pour une sélection en dessous du div, vue que les overflow sont en hidden pour laisser place au js. et monter ou descendre dans la div avec la molette de la souris.

Mon Javascript : 
var Timer;
var Pas = 6;
function moveLayer(Sens) {
	Objet=document.getElementById("contenu");
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);
	}
	else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support").offsetHeight)) {
		clearTimeout(Timer);
	}
    else {
        Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
	}
	Timer = setTimeout("moveLayer(" + Sens + ");", 50);
}


La mise en place des boutons : 
<div id="support" class="support">
	<div id="contenu" style="position:relative; top:0;">
    
    <div id="fleche_haut" onclick="return false;" onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);"></div>
    <div id="fleche_bas" onclick="return false;" onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);"></div>
    <!-- Ici est le contenu qui scroll-->
    </div></div>

Merci à tous ceux qui pourrais m'aider.
A voir également:

7 réponses

Réponse 1 / 7
Utilisateur anonyme
4 mai 2014 à 07:55
Salut, pour le clavier je pense que si tu rajoute : 

document.body.onkeydown = function(e) {
		if (e.which == 38 || e.which == 33) {
			moveLayer(1);
		}
		if (e.which == 40 || e.which == 34) {
			moveLayer(-1);
		}
	}



sa devrais rouler. Si sa continue à bouger tu rajoute : 

document.body.onkeyup = function(e) {
		if (e.which == 38 || e.which == 33 || e.which == 40 || e.which == 34) {
			clearTimeout(Timer);
		}
	}


pour le reste j'ai pas compris...
1
Réponse 2 / 7
Utilisateur anonyme
4 mai 2014 à 13:56
salut, je commence pour home et fin , je regarde après pour le reste. J'ai déplacé cette ligne : Objet = document.getElementById("contenu");

et j'ai rajouté :

if (e.which == 36) {
parseInt(Objet.style.top)=0;
}
if (e.which == 35) {
parseInt(Objet.style.top)=(Objet.offsetHeight - document.getElementById("support").offsetHeight);
}

voici au complet : 

<script type="text/javascript">
			var Timer;
			var Pas = 6;
			Objet = document.getElementById("contenu");
			function moveLayer(Sens) {
				
				if (parseInt(Objet.style.top) + (Pas * Sens) > 0) {
					clearTimeout(Timer);
				} else if (parseInt(Objet.style.top) + (Pas * Sens) < -(Objet.offsetHeight - document.getElementById("support").offsetHeight)) {
					clearTimeout(Timer);
				} else {
					Objet.style.top = (parseInt(Objet.style.top) + (Pas * Sens)) + "px";
				}
				Timer = setTimeout("moveLayer(" + Sens + ");", 50);
			}


			document.body.onkeydown = function(e) {

				if (e.which == 38) {
					moveLayer(2);
					clearTimeout(Timer);
				}
				if (e.which == 40) {
					moveLayer(-2);
					clearTimeout(Timer);
				}

				if (e.which == 33) {
					moveLayer(15);
					clearTimeout(Timer);
				}
				if (e.which == 34) {
					moveLayer(-15);
					clearTimeout(Timer);
				}
				if (e.which == 36) {
					parseInt(Objet.style.top)=0;
				}
				if (e.which == 35) {
					parseInt(Objet.style.top)=(Objet.offsetHeight - document.getElementById("support").offsetHeight);
				}
			}
		</script>

je regarde pour le reste

1
Réponse 3 / 7
Utilisateur anonyme
4 mai 2014 à 17:45
salut désolé j'ai du monde à la maison

pour le scroll essaye ceci : 

                <script type="text/javascript" src="jquery-1.11.0.js"></script>
		<script type="text/javascript" src="jquery.mousewheel.js"></script>
		<script type="text/javascript">
			var Timer;
			var Pas = 6;
			Objet = document.getElementById("contenu");
			function moveLayer(Sens) {
				if (parseInt(Objet.style.top) + (Pas * Sens) > 0) {
					clearTimeout(Timer);
				} else if (parseInt(Objet.style.top) + (Pas * Sens) < -(Objet.offsetHeight - document.getElementById("support").offsetHeight)) {
					clearTimeout(Timer);
				} else {
					Objet.style.top = (parseInt(Objet.style.top) + (Pas * Sens)) + "px";
				}
				Timer = setTimeout("moveLayer(" + Sens + ");", 50);
			}

			$(function() {
				var i = 0;
				$(document).bind('mousewheel', function(event) {
					if (event.deltaY == -1) {
						moveLayer(-2);
						clearTimeout(Timer);
					} else {
						moveLayer(2);
						clearTimeout(Timer);
					}

				});
			});
</script>



les fichiers js jquery sont là :

http://pour-ccm.zz.mu/js.zip
1
Réponse 4 / 7
David
Modifié par David le 4/05/2014 à 12:44
Bonjour et merci lobotoFix

Déjà un grand merci pour ton aide.

Après plusieurs essais, j'ai réussi avec ton code en le transformant un peu.
Dès que je mettait le premier code, ou les 2, sa défilais automatiquement. J'ai donc essayer de comprendre le code et je l'ai fusionner en 1.

En cherchant le code numéroté indiquer, j'ai trouver à quelle touches elles correspondait ce qui ma permis de modifier la cadence par rapport aux touches taper.

Le code modifier est : 

document.body.onkeydown = function(e) {

  if (e.which == 38){
   moveLayer(2);
   clearTimeout(Timer);
  }
  if (e.which == 40){
   moveLayer(-2);
   clearTimeout(Timer);
  }

  if (e.which == 33){
   moveLayer(15);
   clearTimeout(Timer);
  }
  if (e.which == 34){
   moveLayer(-15);
   clearTimeout(Timer);
  }
 }


PS : J'ai déjà fait une première recherche sur c'est code clavier. Est t'il possible avec la touche "Home"(36) de revenir tout au début de la page et avec la touche "Fin"(35) d'aller directement en bas de la page ?

Pour la seconde partie, j'ai du mal m'expliquer pour la sélection souris.

Il se peu q'on fasse une sélection et que le texte voulu se trouve plus en haut ou plus bas de la partie de départ visible à l'écran. Donc les ascenseurs travail tous seul pour faire défiler la page et aller ou bon nous semble.

Le souci dans mon cas est que je suis en overflow:hidden; donc les ascenseurs ne travail pas tous seul comme à l'habitude. Cela me sélectionne que la partie visible sur l'écran. Je peu ni remonter ni redescendre au delà de la partie visible.

Admet-on que j'ai 3 paragraphes à sélectionner et que seulement 2 sont visible à l'écran. le 3ième est visible si on descend la page. Mais si je veux sélectionner c'est 3 paragraphes avec la souris, je pourrais en avoir que 2, vue que la souris ne réagit pas pour descendre la page automatiquement.

Comment puis-je rendre cette sélection possible ?

Comment puis interagir avec la molette de la souris de manière à faire défiler la page si on monte ou on descend la molette ?

Voilà j'espère été plus explicite que que se sois mieux compréhensible.

Merci d'avance.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
David
4 mai 2014 à 14:33
Bonjour

Si j'applique les 2 touches, j'ai 2 erreurs non pas au lancement mais dès que j'appuis sur les touches en question.

Erreur : Impossible d'affecter à un résultat de fonction.

Pour la touche Home : Ligne 38
Pour la touche Fin : Ligne 41

Merci pour le temps consacré
0
David
4 mai 2014 à 14:48
Je viens de résoudre la touche "Home" 

if (e.which == 36) { 
					Objet.style.top = 0;
				}


Je cherche pour la touche fin.

PS : J'ai oublier de signaler. Tous les test se font chez moi sous IE6.

Merci
0
Réponse 6 / 7
David
4 mai 2014 à 16:37
Pour la touche FIN, j'ai avancer un peu

Vue que dans la page, les personnes on le choix de modifier la taille de la police, le height est variable par rapport a celui qui visionne la page.

J'ai donc réussi à avoir la capturer le height au moment de l'appuis sur la touche. J'ai vérifier avec un alert(); on modifiant les tailles des polices et la hauteur change bien.

Par contre j'ai pas réussi a interagir avec la valeur trouver au moment de l'appuis.

Le code avec le calcul du height est : 
if (e.which == 35) {
var divHeight;
var obj = document.getElementById('contenu');
var y = - obj.offsetHeight

	if(obj.offsetHeight) {
	divHeight=obj.offsetHeight;
	}
	else if(obj.style.pixelHeight){
	divHeight=obj.style.pixelHeight;
	}
					
alert(y);

}


J'ai essayer avec :moveLayer(y); (aucun effet).

Puis avec : window.scrollBy(0,y); (aucun effet).

J'ai également tester avec : Objet.style.top = y; (aucun effet).

Comment puis je faire pour qu'il prenne directement la valeur Y au moment de l'appuis ?

merci
0
Réponse 7 / 7
David
5 mai 2014 à 18:59
Bonjour à tous

Désole pour cette réponse tardive.

Le code marche impeccable je te remercie énormément pour ta patience.

merci
0

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses
Réinitialisation d'un téléphone mobile chinois avec touche
Nadjitam -
Papounet17000 -

1 réponse