11497 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
j'avais besoin de faire un menu dans une hauteur limitée, j'ai donc ajouté un comportement de scroll sur la position de la souris en javascript. La fonction utilisée est celle trouvée ici :
http://jsfiddle.net/davidThomas/bw6Xw/3/
que j'ai un peu modifié.

Voila le résultat : http://www.fermit.com/test_menu/index4.html

Tout fonctionnait correctement mais je devais faire 2 menus l'un au dessus de l'autre (un bleu et un rouge) et j'ai donc dédoublé la fonction javascript en essayant de dédoubler également les variables. Mais je dois louper quelque chose car je n'arrive pas à faire fonctionner le 2e menu, le rouge. Le comportement du 1er menu (le bleu) est bon, je scroll vers le bas, puis vers le haut sans soucis.
Par contre, pour le 2e menu, le rouge, je peux scroller vers le bas, mais je n'arrive pas à faire remonter.


		$(window).load(function()
		{
			var div1 = $('#accordion1'),
				wrapHeight1 = div1.height(),
				listHeight1 = div1.find('#menu_bleu ul').outerHeight();
		
			div1.on('mousemove',
						function(e1)
						{
							var cPointY1 = e1.pageY,
								cST1 = div1.scrollTop();
							if (cPointY1 >= (wrapHeight1/2)) 
							{
								div1.scrollTop(cST1 + 5);
							}
							else 
							{
								div1.scrollTop(cST1 - 5);
							}
						}
			);

			var div2 = $('#accordion2'),
				wrapHeight2 = div2.height(),
				listHeight2 = div2.find('#menu_rouge ul').outerHeight();
		
			div2.on('mousemove',
						function(e2)
						{
							var cPointY2 = e2.pageY,
								cST2 = div2.scrollTop();
							if (cPointY2 >= (wrapHeight2/2))
							{
								div2.scrollTop(cST2 + 5);
							}
							else {
								div2.scrollTop(cST2 - 5);
							}
						}
			);
		});


Est ce qu'un expert en javascript veut bien m'aider ?
merci d'avance
Bonjour Smiley biggrin ,

Alors déjà en fait dans ta page test que tu nous donne en lien #accordion1 c'est le menu rouge et #accordion2 le menu bleu... il y a surement un conflit à ce niveau.
De plus, il y a une erreur 404 sur une image background : /test_menu/css/accordeon/images/ui-bg_highlight-hard_100_ff9c9c_1x100.png

c'est déjà une piste car au niveau du script pur il n'y a à première vue pas de raison pour que cela ne fonctionne pas.
Bonjour.

En fait ton menu avec ce code là ne peut fonctionner que s'il est tout en haut de ta page car il n'y a pas de détection de positionnement en hauteur de tes menus.

Par exemple ICI si l'on regarde les valeurs scrolltop sur les deux blocs elles devraient identiques sur une même zone, et surtout devraient aller de 0 jusqu'à la hauteur du bloc.

Il faut donc prendre en compte la position verticale de l'élément (ici la fonction offset) -> LIEN

PS : cela semble sympa au départ cette idée de menu, mais quand on essaye de cliquer sur un lien ça devient vite pénible, sans compter sur le fait que su tactile je sais pas ce que ça donne, mais ça ne doit pas être joli.
merci bcp pour votre aide les gars, sincerement...
et l'exemple sur JSFiddle c'est génial merci et je te confirme que ca fonctionne !
effectivement, ce systeme est un peu contraignant et pas du tout adapté au tactile on est d'accord, mais il répond à un besoin de limite de hauteur pour un menu, mais vous avez raison, je vais essayer de faire passer une refonte du site pour que le menu puisse avoir la place de s'afficher en hauteur parce que sinon on va pleurer si un utilisateur se rend sur le site avec une tablette par exemple...