11544 sujets

JavaScript, DOM et API Web HTML5

Rebonjour à toutes et à tous.

Bon, étant donné que mon topic sur la fonction onkeydown est résolue - encore merci à Gothor - je préfère en ouvrir un nouveau.
On reste cependant dans la fonction qui détecte et définie les touches pressées au clavier et leurs actions adjacentes :


function maFonction(evt) {
e = evt || window.event;
switch (e.keyCode) {
case 86 : uneFonction(); break;
case 78 : uneAutreFonction(); break;
 ... etc ...
}
}
et dans la balise body : <body onkeydown="maFonction(event)">


J'ai réussi, pour toutes les fonctions Javascript dans ma page - quelles qu'elles soient - à les appeler via cette fonction des Events.
C'est donc exactement ce que je veux faire sur la toute dernière fonction JQuery qui reste à traiter dans ma page. Seulement voilà : sa structure est assez particulière et pour tout dire, je ne vois même pas son nom, sa définition établie, bref, elle m'échappe totalement.
Elle gère l'affichage/masquage d'une info-bulle au clic sur une image. Il ne reste plus qu'à naviguer dans le contenu de la bulle (3 mentions au choix en fait) pour choisir, au clic, ce que l'on veut.

Maintenant, j'ai bien réussi à mettre "un accesskey=une lettre" dans le <a href> du lien de chaque mention de l'info bulle. Et il fonctionne. Seulement il oblige à en passer par la combinaison de touches Mac ou Win + la lettre, pour ouvrir, choisir une mention et refermer l'infobulle.
Or j'ai un JQuery d'accessibilité dans la page qui permet de n'utiliser que les touches seules, sans les combinaisons tarabiscottées et contre-productives des systèmes et des navigateurs.
Ainsi dois-je appeler la fonction Javascript de l'info-bulle via la fonction JQuery des events(); pour pouvoir utiliser uniquement la lettre choisie afin de manipuler l'ouverture/fermeture de l'info bulle au clavier.

Voici donc le code complet de l'info-bulle :

$(function () {
$('.bubbleInfo').each(function () {
var distance = 30;
var time = 10;
var hideDelay = 30000;  ==> grand délai pour avoir le temps de choisir dans l'info-bulle
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).click(function () {  ==> avant c'était "onmouseover" / j'ai mis "click"
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: 100,
left: 22,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 0.7
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});


Où "bubbleInfo" est la class CSS de la div qui encapsule les mentions (les css n'indiquent que les positions, les fonts, les couleurs, les images de bordures de la bulle, etc..). Si je n'ai pas essayé des dizaines de variantes, je n'en essayé aucune... Je reviens vers vous ici sur ce forum parce que là, vraiment, il faut me montrer et m'exliquer, car je n'arrive plus à rien du tout, seul...

Bref, sauriez-vous comment appeler cette fonction dans une nouvelle ligne du genre :
case : 70 mafonction(); break ????

Par avance, mille mercis pour votre aide.
Cordialement,
Neum
Modifié par Neum (16 Feb 2012 - 15:18)
Bonjour,

Je ne suis pas sûr de bien saisir ta question =°

Le code que tu montres là a l'air d'être fait pour n'être appelé qu'une fois (quand le code est chargé, il s'occupe de créer toutes les infobulles)... A moins que tu n'aies une modification de ton code source en JS...

Enfin, peu importe, ne peux-tu pas simplement donner un nom à ta fonction ?
function genererInfobulles () {
    $('.bubbleInfo').each(function () {
        var distance = 30;
        var time = 10;

... Promenons-nous, dans les bois, pendant que le loup n'y est pas ...

                    shown = false;
                    info.css('display', 'none');
                });
            }, hideDelay);
            return false;
        });
    });
};
Pour l'appeler ensuite ?
case 70 : genererInfobulles();

Modifié par Gothor (16 Feb 2012 - 10:55)
Bonjour Gothor,

et merci de revenir vers moi pour m'aider. Vraiment... Parce que là, je suis vraiment vraiment au bout du rouleau...

Cela étant dit, ça ne fonctionne pas. Et pour tout dire, ça empêche même de cliquer à la souris sur l'image pour afficher la bulle... Donc on perd tout là...

Maintenant, pour te répondre pleinement, rien n'est modifié en annexe. Le code ne sert pas pour autant ailleurs dans la page. Uniquement ici, pour une image et uniquement pour cette bulle.
Pour mieux comprendre, peut-être faudrait-il que je donne aussi le code HTML du bloc qui gère l'image, la bulle et le clic (cette structure va de paire avec le JQuery). C'est un tout.

<div class="bubbleInfo">
<div>
<img class="trigger" src="dossier/<?php echo MONIMAGEenlignepourleCLIC; ?>" border="0" />
</div>
  <table id="dpop" class="popup" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td id="topleft" class="corner"></td>
        <td class="top"></td>
        <td id="topright" class="corner"></td>
      </tr>
     <tr>
      <td class="left"></td>
      <td>
      <table class="popup-contents">
    <tbody>
     <tr>
      <td>
       <table border="0" cellpadding="0" cellspacing="0">
         <?php do { ?>
           <tr>
             <td><a href="<?php echo monURLdeDestination; ?>" accesskey="t"><?php echo Contenu-dans-la-bulle(MENU DE 3 CHOIX POSSIBLES CLIQUABLES); ?></a></td>
           </tr>
           <?php } while ($row_recordset= mysql_fetch_assoc($recordset)); ?>
       </table>
       </td>
        </tr>
      </tbody>
   </table>
  </td>
<td class="right">
</td>    
   </tr>
   <tr>
<td class="corner" id="bottomleft">
</td>
<td class="bottom">
<img width="30" height="29" alt="langues" src="dossier/imageflecheBulleDeParole (façon BD)"></td>
<td id="bottomright" class="corner"></td>
   </tr>
  </tbody>
</table>
</div>


Voilà. Les CSS ne servent qu'à donner les positions (absolute, relative, etc..), puis pour les fonts, les couleurs, les curseurs, etc, etc... c'est tout.
Il n'y a donc que la fonction JQuery que j'ai donnée et que ce bloc HTML. Eux deux seuls créent et gèrent la bulle : ils sont, en leurs états, indissociables.
On remarquera donc ainsi que l'image sur laquelle pourtant on clique, n'a pas de lien href dans le code html... C'est d'ailleurs là où je nage... Voilà pourquoi j'ai mis mon accesskey="t" directement dans la bulle, au niveau de l'affichage des mentions au choix cliquables pour aller aux urls. Mais ce faisant donc, cela rend obligatoire la combinaison de touches au clavier + la clé, et là c'est ingérable.

J'espère donc que j'ai été plus clair et plus précis, que ça va donner l'éclairage suffisant pour enfin - ENFIN ! - trouver la solution. A nouveau un grand Merci à toi Gothor. J'espère à très vite. Sincèrement,
Neum
Modifié par Neum (16 Feb 2012 - 11:23)
Gothor,

l'infobulle s'ouvre au clic de la souris ET DOIT AUSSI le faire via une touche choisie au clavier.

J'ai choisi la 84 = "t", parce que la bulle en s'ouvrant affiche en fait un listing de 3 langues au choix (fr - en - es). Donc "t" pour Traduire, Translate, Traduccion...

Bref, j'ai besoin des 2 fonctions : clic ET clavier.....

Bien à toi,
Neum
Modifié par Neum (16 Feb 2012 - 11:56)
Coucou,

Tu peux t'inspirer de la réponse d'Heyoan.


$(document).ready(function(){

	$(window).keydown(function(e){

		switch (e.keyCode) {

			case 37: // flèche gauche

				$("slides").quelquechose qui fait prev...

				break;

			case 39: // flèche droite

				$("slides").quelquechose qui fait next...

				break;

		}

	});

});


Tu mets la case 84 et tes instructions Smiley smile
pour le double event, tu peux utiliser .bind comme ceci :

    $('.go').bind('click hover', function(e)
    {
        if (e.type == 'click')
        {
            alert ('click');
        }
        else
        {
            alert ('hover');
        }
 
    });
Bonjour,

merci de venir participer. Vraiment. Toutes les aides sont les bienvenues.

Pour autant, la question n'est pas de détecter le "onKeyDown", ou de switcher les cases via des Breaks, etc, PARCE QUE TOUT CECI EST DÉJÀ OK. D'autre part, il n'y a pas que ces éléments qui sont détectés dans la page en question. Et tous passe par la fonction de events et le "onkeydown" dans la balise Body.

BREF, il faut s'en tenir strictement et uniquement aux éléments que j'ai donnés pour ne répondre qu'à la seule question que j'ai posée : comment appeler la fonction qui gère l'info-bulle. Merci.

Le problème reste donc totalement entier.... je suis catastrophé...
As-tu plusieurs infobulles de ce type ?
Si non, j'ai réussi à l'ouvrir en faisant ça :
$(".popup")[0].click()
Par contre, elle ne se ferme pas (à moins que je ne rentre et sorte la souris...) Difficile de simuler l'entrée et sortie de la souris...

Pour moi, faudrait peut-être faire un objet pour se simplifier un brin la vie ^^'
Modifié par Gothor (16 Feb 2012 - 15:08)
Bon dieu.....

Alors, j'ai dû enlever la mention "[0]" dans la code et refermer la ligne par la syntaxe ";" et le break. Mais cela étant dit :

CA MARCHE!!!!!!!!!!!!!!!!!!!

Ah! Je n'arrive pas à y croire.... je suis arrivé à un tel degré de lassitude et de défaitisme sur ce code que j'en suis hébété!... Je le suis d'autant plus que j'avais essayé d'appeler la mention $('popup') mais en lui adjoignant le reste de sa ligne dans la fonction... Je n'avais pas songé à l'appeler seul... Bon sang, quand j'y pense, j'ai dû trouver 30 ou 40 mauvaises façons d'appeler la fonction...

Que te dire sinon MERCI? MERCI MERCI MERCI. Mes mots de reconnaissance ne seront jamais à la mesure de ma gratitude. Vraiment MERCI Gothor. Pour tout.

Je redonne donc le code final opérationnel:

case 84 : $(".popup").click(); break;


Ah, et puis, pardon, pour te répondre sur la fermeture de la bulle :
En fait, 2 options :
- A la souris : après avoir cliqué sur l'image-lien qui ouvre la bulle, on clique sur l'une des trois mentions de langues qu'elle contient en guise de menu, pour changer la langue à la volée de la page où on se trouve, moyennant en quoi cela referme la bulle en même temps qu'on change de langue.
- Au clavier : après avoir ouvert la bulle au clavier (le lettre "t" donc...), on navigue dans la bulle via la touche tabulation (j'ai mis une tabindex dans le menu) et en validant la langue via "enter", on change là encore la langue de la page en même temps que cela referme là aussi la bulle...

Voilà, Gothor, tu sais tout ! Encore Mille merci et bonne fin de semaine. A une prochaine fois.
Bien sincèrement,
Neum
Modifié par Neum (16 Feb 2012 - 16:20)
Neum a écrit :
il faut s'en tenir strictement et uniquement aux éléments que j'ai donnés pour ne répondre qu'à la seule question que j'ai posée : comment appeler la fonction qui gère l'info-bulle.


En même temps mon but était plus de te donner des pistes sur les choses que tu demandais (deux évènements), que de te pondre du code déjà fait ^^