Discussion :

[Gnidhal]

bonjour,
Je rencontre un petit problème de syntaxe ou de fonctionnement :
j'affiche un bloc html sur une action puis dans ce bloc j'ai ajouté :
onmouseover="this.style.display=\'block\'" onmouseout="this.style.display=\'none\'" afin que mon bloc reste affiché tant que la souris est au dessus (c'est du javascript dans du php ce qui explique la présence des \), jusque là ça va tout fonctionne.
Cependant, je voulais ajouter une tempo pour que le bloc ne disparaisse pas immédiatement quand on le quitte, j'ai donc fait une fonction :

Code :

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

1
2
3
4
5
<script type="text/javascript">
  function masque(bloc_id){
    document.getElementById(bloc_id).style.display="none";
  }
</script>

et modifié mon onMouseOut en conséquence :
onmouseout="masque(\'block'. $rubriques['rubriques_id'] .'\');"
ça marche toujours ! cool
et j'ai ajouté un setTimeout et là... ça ne va plus:

Code :

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

1
2
  function masque(bloc_id){
    setTimeout(function(){document.getElementById(bloc_id).style.display="none"},500);

ne fonctionne pas comme je voudrais car la tempo se fait à l'envers.
Curieusement le bloc se masque tout seul à la fin de tempo sur le onMouseOver (que je n'ai pas touché) alors que je voulais que le onMouseOut démarre avec retard.
vu que ça fait 4 heures que je tourne en rond sur ces deux lignes élémentaires, je viens demander aide.

[RomainVALERI]

En effet c'est curieux ^^
Montre-nous ton html (la source générée plutot que le php stp), peut-etre qu'on y trouvera quelque chose ?

[Gnidhal]

Argh, la bonne question que voilà!
hé oui, tellement le nez dans le code que j'avais oublié que le code en question n'est pas directement inséré dans la page mais passe par une fonction class javascript qui affiche le code.
je ne vais donc pas étaler tout le code ici, ça ferait cochon, mais juste une portion qui contient le bloc qui fait le malin...

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type='text/javascript'>
		<!--
		d = new dTree('d');
d.add(137,
                  117,
                  'Baron',
                  'http://serveur/chantperlesnoires/Edition/rubriques.php?Rubr=117&rID=137',
                  ''
                  ,'','','','',
                  '<img class="PagePlus" src="img/pixel_trans.gif" width="16" height="16" title="Options supplémentaires pour cette page" onmouseOver="this.style.cursor=\'pointer\'" onclick="document.getElementById(\'block137\').style.display=\'block\'" onmouseout="document.getElementById(\'block137\').style.display=\'none\'"><div class=\"BlocPlus\" id=\"block137\" onmouseover=\"this.style.display=\'block\'\" onmouseout=\"masque(\'block137\');\">  //.. ça continu mais c'est là que ça coince

je vais donc aller fouiller dans ma class pour voir ce qui bloque.
C'est vrai que du dhtml dans du javascript, ça passe mais si on ajoute un appel à une fonction externe, ça commence à être portnawak...

Merci donc de ta judicieuse remarque.
Je ne vais pas polluer ce forum avec une tartine de la fonction class dTree.
Excellent script OpenSource soit dit en passant dont voici le copyright :
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö |
fonction que j'ai un peu tordue d'ailleurs pour en faire ce que je souhaite.

Pour info, j'ai aussi essayé de placer mon setTimeout directement derrière le onMouseOver= sans plus de succès.
Le fonction add() reprend l'argument qui contient mon code foireux pour l'afficher dans la page avec un escape, il me reste donc a essayer de faire tourner le setTimeout dans ce contexte. Ce qui n'est pas gagné.

Si tu as une idée lumineuse...

[Gnidhal]

Alors après recherche, à moins de modifier la fonction class pour entrer un argument spécifique pour un timeOut, je ne vois pas.
Cette solution n'est pas à retenir car j'utilise cette class de plusieurs manières, et une modif là me ferait suer.

Question subsidiaire, existe-t-il une autre solution pour temporiser ma fonction function masque(bloc_id) présenté en 1 qui n'utilise pas setTimeout() (une boucle de comptage simple)
car cette fonction toute seule marche très bien...

[RomainVALERI]

Je sais que la suggestion te paraitra peut-etre étrange ^^ mais essaie de remplacer ton setTimeout() (qui pourtant est tout indiqué) par un setInterval() (qui ne correspond pas vraiment au besoin puisqu'on ne veut pas de périodicité mais une seule exécution différée, mais en rajoutant un clearInterval juste apres l'appel, ça ne déclenchera qu'une seule exécution sans boucler. Pourquoi faire me demanderas-tu ? (pour peu que tu aies un minimum de curiosité et de répartie, ce dont je ne doute pas vu le ton de tes propos ^^)

>>> eh bien, techniquement, je ne sais pas

MAIS je me souviens que j'ai eu ce genre de souci et cette solution assez irrationnelle me fait une impression de déjà-vu...

ps : si on te répond souvent d'une manière aussi vague et mystique à des questions sensées, fuis : tu es dans une secte.

[Gnidhal]

bien, voilà, résolu !
alors le petit js qui va bien :

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
   var a;
       function masque(bloc_id){
        a = setTimeout(function(){document.getElementById(bloc_id).style.display="none"},250);
       }
      function afficher(bloc_id){
        clearTimeout(a);
        document.getElementById(bloc_id).style.display="block";
      }
</script>

En fait j'appelle afficher(bloc_id) au clic sur une icone et le bloc_id est positionné juste à coté de l'icone. La zone de recouvrement étant faible, j'avais placé un onMouseOut=masque(bloc_id) sur l'icône et le bloc.
En fait au départ, le mouseOut sur l'icône ne passait pas par la fonction masque(). Curieusement il intervenait après le mouseOver sur le bloc, ce qui faisait que ça disparaissait de manière erratique.

Merci Romain de tes bonnes idées.
J'ai essayé le setInterval() ça fonctionne aussi à un petit détail que je n'ai pas cherché à creuser : au bout de quelques clics (affichage du bloc) et effacement, le clic n'affiche plus le bloc.
Pas d'info dans la console d'erreur, pas d'erreur apparente...

[RomainVALERI]

Pas d'info dans la console d'erreur, pas d'erreur apparente...

Eh oui ce sont les pires à trouver

ok merci d'avoir expliqué ta solution et a + ^^