Discussion :

[westernz]

Bonjour,

J'ai un code sympa pour un menu qui bouge en mouseover/out.
http://www.an16test.org/viewforum.ph...k=0&fap=0&ap=1

Mais il me reste un problème que je n'arrive pas annihiler.
Tant que je reste dans la div, là où il n'y a aucun contenu ca marche nikel.
Mais si je passe la souris sur un lien ou sur une des bordures de célulles de la table ca action onmouseover.

Comment faire pour que onmouseover ne s'active que si on quitte la div entière ?

Bonne journée

[arno15]

Salut,

Tu propages tes évènements à tous les éléments présents dans ton div ?

[westernz]

Je ne comprend pas trop la question.

Voici la partie du code correspondante :

Code html :

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

<div id="div_menu" class='bulle_deco menu_header' style="top:-10px; left:-440px; width:500px; height:120px; padding:10px; border:solid; border-width:1; " onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu('out',1)">

Et de dans donc je colle tous mon contenu.
Un tableau avec des liens, des boutons... comme un menu

[arno15]

En fait je voulais savoir si les élements qui sont contenus dans ton div ont aussi quelque chose comme :

Code :

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

onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu('out',1)"

Mais j'ai ma réponse.

A mon avis le plus simple est d'utilisé une librairie comme JQuery
qui te permettra faire en sorte que le survol d’éléments interne à ton div ne provoque pas les évènements onmouseout/onmouseover. Par exemple :

Code :

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

1
2
3
4
5
$('#test').hover(function() {
// le curseur passe sur l'élément
},function() {
// le curseur sort de l'élément
});

Sinon, il faut que tu modifie le code de la fonction "menu" pour détecter que la souris est entré ou sortie d'un élément interne à ton div et donc qu'aucune action est requise

[westernz]

C'est aussi ce que m'a dit un ami. Mais il n'était pas certain qu'il n'y ai pas d'autre solution.

Est-ce que Jquery va me demander de refaire tout mes codes ?
Je viens de passer des heures à réussir ce fichu menu qui bouge (j'en suis a minimiser le code).

Il va me falloir quelques basse, celles nécessaire à l'accomplissement de ce que j cherche à faire

Tu aurait un lien ?

EDIT :
Je suppose que je dois commencer par ecrire ca :
<script src="http://code.jquery.com/jquery-latest.js"></script>


J'ai essayé de modifier un script déjà existant et le problème est le même
http://www.an16test.org/test.php

Quand on passe la souris sur un element ca joute +1 au compte
Tu peux editer la page, il n'y a que le script dedans

Bonne journée

[Watilin]

Est-ce que Jquery va me demander de refaire tout mes codes ?

Oui. Arno a fait cette erreur que beaucoup de membres du forum font depuis quelques temps : proposer l'installation de la lib jQuery complète pour « simplifier » le codage d'une seule situation particulière. Ça revient à utiliser un bazooka pour tuer une mouche...

En JavaScript pur, je te conseille fortement d'utiliser les gestionnaires d'évènements. Tu dois pour cela laisser tomber les attributs HTML onmouseover et ses semblables. Un petit exemple :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="carre"></div>
<style>
#carre { width:100px; height: 100px; background: green }
</style>
<script>
var $carre = document.getElementById('carre');
 
$carre.addEventListener('mouseover', function( e ) {
   this.style.background = 'red';
}, false);
 
$carre.addEventListener('mouseout', function( e ) {
   this.style.background = '';
}, false);
</script>

Comme tu le vois, avec cette méthode, le code HTML n'est pas « pollué » par du script.
Ce qu'on appelle les gestionnaires d'évènements, ce sont ces fonctions anonymes passées en argument à la méthode addEventListener. Elles ont en paramètre un objet Event que j'ai appellé e ici (mais je ne l'utilise pas dans cet exemple). Cet objet possède des propriétés importantes, notamment la propriété relatedTarget qui te permet de savoir sur quel élément le curseur était juste avant que l'évènement mouseover se produise.

Il te suffit de vérifier, par un bref parcours du DOM, si le relatedTarget est contenu par l'élément que tu surveilles, auquel cas ton gestionnaire ne fait rien. C'est ni plus ni moins ce que fait jQuery sous le capot.

Un point important : Microsoft rend les choses compliquées (comme d'hab quoi) en ayant sa propre syntaxe de gestionnaires d'évènements. Je te conseille de faire des recherches à propos de attachEvent, ainsi que les propriétés fromElement et toElement de l'objet Event sous MSIE. Si tu es à l'aise en anglais, le site Quirksmode est une très bonne source. Par exemple : http://www.quirksmode.org/js/events_...#relatedtarget

Bonne lecture

[westernz]

Je sen venir le code compliqué.
en plus si IE me fait créer des variation sur les variable ca va me prendre un max de temps. Surtout que je ne suis pas un bon codeur.

Certes c'est agréable d'en apprendre plus mais faut aussi que j'avance.
Je me tate encore pour m'y coller ou non.
Tu es au moins certain que ce sera possible ?

Merci pour les liens et infos.

[westernz]

Je tente de résumer ce que je dois faire pour y arriver.

1/
Je conserve ma div et je la déclare comme variable
var $ma_div = document.getElementById('ma_div');

2/
$ma_div.addEventListener('mouseover', function( ma_func )
{
this.style.background = 'red';
}, false);

2a/
'mouseover' c'est le nom de la fonction d'origine qui va detecter si la souris est dessus .?

2b/
( ma_func ) ce sera le nom de l'évenement à lancer ?
Qui remplacera onmouseover ?

2c/
{ this.style.background = 'red'; } Je met dans les crochets ce que je eux que ca fasse. Donc je peux mancer ma fonction déjà crée ? { menu('over',1) }

2d/ flase); Je suppose que ca veux que ca fait rien si c'est pas 'mouseover'

J'ai juste ?
Je suppose que non lol

[NoSmoking]

Bonsoir,
l'appel à menu('out',1); ne devrait être appelé qu'UNE fois dans ta page, sur la DIV conteneur div_menu et rien d'autre.

[westernz]

Ce sera le cas.
Quand on passe la souris dessus.

Tu peux regarder ici : en haut de la page à gauche.
J'aime beaucoup mon menu même s'il est vide mais quand passe sur la table (en haut de la div, pas les grande en arrière plan, que je vais enlever de ce pas)...
http://www.an16test.org/viewforum.ph...k=0&fap=0&ap=1

C'est le seul souci que j'ai à régler.
Seule cette div aura cette fonction.
Seule mouseout déconne, car en mouseover ca laisse tel que c'est dajà, ca lance la fonction mais la termine dessuite car déjà accomplie..
Au besoin j'en ferai une autre pour une autre div.

Je suis pret a apprendre mais je suis pas très doué et je sature, j'ai déjà passé presque 20h sur ce bug.

[Watilin]

Regarde sur cette page : http://api.jquery.com/mouseenter/
Vers le milieu de la page il y a un exemple (les deux blocs jaunes) qui illustre bien la différence entre l'évènement standard mouseover et l'évènement jQuery mouseenter, que tu cherches à reproduire.

Sinon, quelques explication à propos de addEventListener : cette fonction permet, comme je te l'ai montré, de surveiller un évènement. Elle prend 3 paramètres : une chaîne, une fonction et un booléen.

• La chaîne est le nom de l'évènement ; dans notre cas c'est mouseover.
• La fonction est ce qui doit être exécuté lorsque l'évènement est déclenché. Elle est appelée par le navigateur et reçoit comme argument un objet Event.
• Le booléen indique si on doit utiliser la capture ou pas. C'est une notion un peu avancée. Ça aurait pu être pratique si tous les navigateurs implémentaient cette fonctionnalité, mais en général on préfère ne pas l'utiliser, alors on met false.

Sous MSIE, la fonction s'appelle attachEvent et il y a deux différences : d'abord, les noms d'évènements commencent par « on », et ensuite, il ne propose pas d'utiliser la capture.
Par conséquent, on trouve souvent sur le Web une fonction qui permet d'assurer la compatibilité de son script sous la plupart des navigateurs et qui ressemble, avec peu de variations, à ceci :

Code JS :

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

1
2
3
4
5
6
7
function addListener( elem, event, func ) {
   if (elem.addEventListener) {
      elem.addEventListener(event, func, false);
   } else {
      elem.attachEvent('on' + event, func);
   }
}

On peut donc surveiller un évènement comme ceci :

Code JS :

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

1
2
3
addListener($ma_div, 'mouseover', function( e ) {
   // ... ton code ici
});

En résumé, tu avais bon en 1/, 2a/ et 2c/
Pour 2c/, en effet, tu peux réutiliser ta fonction menu mais il te faudra quand même la modifier si tu veux pouvoir utiliser les informations de l'objet Event comme je t'ai expliqué.
Pour 2b/, je pense que ce qui te met dedans, c'est le fait que mes fonctions n'ont pas de nom (ce sont des fonctions anonymes), du coup tu as confondu le nom du paramètre (e) avec le nom de la fonction. Il est tout à fait possible de nommer la fonction :

Code JS :

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

addListener($ma_div, 'mouseover', function bidule( e ) { ... });

ou encore de la déclarer à l'avance pour pouvoir l'utiliser plusieurs fois :

Code JS :

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

1
2
3
4
function bidule( e ) {
   ...
}
addListener($ma_div, 'mouseover', bidule);

Note que je ne mets pas de parenthèses quand je passe bidule à la fonction addListener : je veux que la fonction soit référencée, et pas appelée directement.

Voilà, j'espère que ça lève le voile sur certaines zones d'ombres dans ton esprit



PS : Ce n'est que mon point de vue personnel, mais je trouve que ton effet de rebond est un peu maladroit :/ J'ai moi-même fait pas mal d'essais et de recherches il y a quelques temps pour parvenir à un effet qui me convienne, et j'ai découvert que ça porte un nom : easing. D'après les rumeurs, le terme a été introduit par Adobe pour son Flash Player, mais il a été popularisé par la communauté jQuery. En tout cas,fais des recherches à propos de l'easing sur le Web, ça ne peut que t'enrichir

[westernz]

Merci pour la lecteur.
Je m'y penche dans une bonne heure.
Je sature sur les heures passées.

Donc mon but si j'ai bien compris va être de reproduire la fonction mouseentre de Jquery pour n'avoir qu'elle en ram au lieu de stocker tout jquery juste pour une seul function ?

Au passage je vais aussi apprendre comment mieux manipuler les sources JS non ? S'il s'agit bien de cela. Ca m’intéresse bien car je suis souvent bloqué par des bug et impossibilité d'avoir ce que je veux.

Bonne journée
A bientôt quand j'aurais tout lu

[westernz]

J'ai essay é a nouveau Jquery.
J'ai l'impression que ce code est fait pour être utilisé avec 2 div minimum.
Je n'arrive pas a l'employer pour une seule div qui contient une table.
Sachant que c'est la 1ere et seule div qui doit bouger.

Même en gardant les 2 div je n'arrive pas a faire bouge la 1ere (out).

J'arrive a mettre div.width(500) au lieu de du texte qui change mais je n'arrive pas à lancer une function JS depuis Jquery.

Je n'y comprend rien.



Je passe a tes écrits en Français après mangé.

[Auteur]

bonjour westernz,


je t'invite à lire ces discussions sur le sujet :
http://www.developpez.net/forums/d64...t-div-boutons/

http://www.developpez.net/forums/d68...oppropagation/

http://www.developpez.net/forums/d59...nts-imbriques/

Tu verras d'autres discussions sur ce sujet avec les mots-clefs cancelbubble et stoppropagation.

[NoSmoking]

sans oublier Présentation des évènements du DOM

[NoSmoking]

dans ton code on trouve cette ligne

Code :

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

var bound_next 	= action; // ne pas toucher

or action est définie nulle part ce qui entraine un "malaise" sur ton code.

En reprenant ton premier code, difficile de suivre attendu que cela change vite, le script se déroule correctement en supprimant cette erreur.

On trouve également des commentaires du type

Code :

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

<!-- FUNCTION FILTRE -->

qui sont des commentaires HTML mais en aucun cas javascript.

Il y a d'autres erreurs qu'il serait bon que tu supprimes avant de pouvoir bien appréhender ce qui ce passe.

[westernz]

Apres quelques heures de sommeil ...

Pour répondre à NoSmoking :
J'ai corrigé mes erreurs de commentaire.
La var action est définie dans : function menu(action,user_action)

Mais j'ai remarque qu'en fait quand on passe sur un élément, le lien se relance, tant le on mouse out que over. Dommage qu'i n'y ai pas de "if ( mousein() )".

Je vais lire le reste et persévéré car je veux se menu mobile au survol.

nb, le menu est de nouveau actif sur ma page de test. Mais risque de bugger encore vu que je vais tester dessus souvent (des que ca marche +/- dans un fichier sans les polutions de phpbb).


Pour répondre à Watilin
Tu trouve mon menu bof sur le visuel ou sur le code. Je voulais quelque chose de plus naturel. les mouvements habituels ne le sont pas du tout. C'est comme passer d'un page plate à une page avec ombres et des effets de profondeur. Là mon menu a une inertie. Certes c'est pas le plus beau rebond que je pourrais faire mais je suis pas doué

Sinon coté codage, oui c'est un codage de noob lol

J'ai mieux compris le code que tu énonce et dois quand même encore relire.

Donc mon but va être de vérifier si mon souris est toujours mouseout avant d'exécuter la function d'un eventuel mouseout. Ca peut marché ça ? JE parle de vérifier si la souris est dessus. Car en JS on ne peut que déclencher depuis un mouseover, me semble-t-il qu'on ne ne peut pas vérifier à tout moment si le mouseover est true ou flase.

Peut on mélanger JS et ce type de code ?
C'est à dire mettre de ce type code dans du JS ou l'inverse.
Je sais déjà que tu m'a dit que je pourrai lancer ma function depuis ce code. donc un peu.


Et ca s'appel comment ce type de code ? "gestionnaires d'évènements" il n'y a pas d'abrégé ?

Merci

[NoSmoking]

La var action est définie dans : function menu(action,user_action)

donc non définie au moment où elle est vue dans la partie script

le code suivant est incorrect

Code :

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

1
2
3
4
var test = variable;          // typeof variable => undefined
function fctTest( variable){  // variable est un paramètre
  test = variable;
}

[westernz]

Ok donc faut la redéfinir une fois dans la funtion.
C'est noté.
Je suppose que ca bug sur certain navigateur, car sur firefox ca marche.
Des truc qui sont censé par marcher qui marchent et des truc qui sont censé marcher qui ne marchent pas... Le JS est un animal compliqué.

EDIT :
et je viens de comprendre
Oui j'ai pas déclaré comme variable vide avant
var truc = '';
Je ne sais pas pourquoi je faisait une exception pour les variable inclues au lancement d'une functon.

J'ai corrigé presque partout dans a page (j'ai d'autres page a nettoyer... beaucoup d'autres lol

[westernz]

Houla la !

La vérité était ailleurs !

lol mais pas lol, car c'est lourd.
C'est typique de moi ça.

J'ai testé une pseudo solution efficace et simple issue des lien de "Auteur" (merci)

J'ai séparé le mouseout pour lui coller un delai :

Code :

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

1
2
3
4
function menu_out(action,user_action)
	{
	t = setTimeout("menu('action',user_action)",1000);
	}

En principe ce delai permet dégommer le mouseout et le remplacer par mouseover ou rien en passant par un cleartimeout avant.

Ne constant pas de différence j'ai fais plus de test.
Mon code était déjà bon..., pas de souci avec les éléments internes et les mouseout.
C'est avec mon rebond.
Je vais donc chercher dans l'autre sens.

J'étais partie dans le mauvais sens car, au début, comme tous les noob, je n'ai pas assez sécurisé avec du cleartimeout en masse. Donc au départ c'était un souci de out. Mais le dernier truc qui restait ressemblé en tout point au même problème... d'où la confusion.

J'ai dégommer mon rebond, ca marche.
Je vais donc essayer de réparer le rebond.
Des les jeu les rebond des menu sont mieux fait, mais les jeux sont pas fait par des noobs.

Quoi qu'il en soit je ne quitte pas ce type de code des yeux, je sens que c'est une solution à bien des problèmes. J'y reviendrai que j'arrive ou non a finir ce code moi même. Mais faut que j'avance aussi un peu dans le travail.

nb : votre site est top , bien accueillit, vous m'avez pas prit de haut, vous m'avez offert plus de servies que demandé... ca change de phpbb-fr lol

Bonne journée