bonjour le monde,
edit une documentation est désormais disponible sur mon site: MWD :: Atooltip
Je viens vous partager un petit code jquery que j'ai fait.
J'ai été amené à le construire face à un epreventDefault inefficace.
Je cherchais à gérer un évènement au clic sur un lien sans que le lien ne s'exécute quand on relâchait le bouton après x secondes.
Et cet évènement devait être valable pour tout les liens ayant un certaine classe.
Dans le code que je partage, je créer une tooltip qui lors du clic prolongé sur le lin.
Cette tooltip s'affiche juste au dessus du pointeur de la souris.
Je l'ai posté sur github: https://github.com/murelh/atooltip
Essayez le , améliorons le ! :)
# c'est quoi la difference
Posté par NeoX . Évalué à 4.
la difference avec le tooltip normal ou tu passes la souris sur le lien, sans cliquer, et tu as le tooltip ?
le mien est dans le code HTML, c'est standard, ne necessite meme pas javascript.
ca s'ecrit comme ca dans la page :
[^] # Re: c'est quoi la difference
Posté par NomadSoul (site web personnel) . Évalué à 3. Dernière modification le 04 avril 2014 à 12:39.
Salut,
La différence par exemple c'est que tu pourras mettre du contenu HTML ou AJAX dans ton tooltip.
Ça ne t’empêche pas d'avoir aussi un title en même temps…
[^] # Re: c'est quoi la difference
Posté par NeoX . Évalué à 3.
tu veux dire que ca devient un popup sans en etre un ?
c'est quoi alors la difference entre :
- un clic sur un bouton qui ouvre un popup
- et un clic long qui ouvre ton tooltip ?
parce que franchement, je penses que tu vas avoir des problemes avec tes utilisateurs pour leur expliquer qu'il faut un clic long sur l'icone pour ouvrir l'aide relative à ce bouton (cas d'usage d'un tooltip)
et que le clic court c'est pour cliquer sur le bouton (action normale)
en plus, c'est quoi un clic long par rapport à un clic court ?
1ms, 1s, 3s ?
[^] # Re: c'est quoi la difference
Posté par NomadSoul (site web personnel) . Évalué à 3.
C'est bizarre, je pensais que ça semblerait évident.
Mets toi en situation. Imagine que sur ton site, en faisant un clic long sur un lien (n'importe lequel), une toolbox s'affiche. Pas la toobbox normale, une autre que tu auras faite toi même. Tu l'auras biensur dit à tes utilisateurs dans un message du genre:
"Hey ! si tu cliques longtemps sur un lien, une tuto apparait !"
Tu ne veux pas que cette toolbox s'affiche automatiquement. Ni même automatiquement au bout de x secondes.
Tu veut que quand on clic d'une certaine façon, cette toolbox apparait.
Pour l'exemple, si tu test le script, le clic prolongé est réglé sur 1 seconde.
Au bout d'une seconde de clic prolongé ta toolbox apparaitra et le lien ne s’exécutera pas.
En revanche si tu avait fait un clic normal, le lien serait exécuté et la toolbox n'aurait pas apparu…
Évidement, il faut en avoir besoin. Si tu n'as pas besoin d'un tel comportement, ce que je partage ici est inutile.
[^] # Re: c'est quoi la difference
Posté par NeoX . Évalué à 1.
comme dit plus haut, tu vas avoir des problemes
avec les gens qui ne sont pas assez rapides pour avoir le clic simple.
pourquoi ne pas simplement faire un bouton à coté qui propose l'aide (un peu comme on fait partout finalement)
ca peut etre une icone '?'
1°) ca reste conforme html
2°) ca ne joue pas sur la durée du clic, qui je peux presque le garantir, n'est pas le meme entre le tiens, le mien, celui de papi moujo
[^] # Re: c'est quoi la difference
Posté par NomadSoul (site web personnel) . Évalué à 3.
C'est de la mauvaise foi ? ^
Je ne comprend pas: "ne pas être assez rapide pour le simple clic"
Si tu trouve que 1s est trop rapide pour considérer qu'on veut la toolbox u peux toujours passer à 2s
Entre nous, quand je clique sur un lien, je ne garde pas la souris enfoncé pendant 1s..
C'est juste esthétique. C'est si tu as envie que ton aide s'enclenche sur n'importe quel élément qui en possède quand tu clic dessus pendant x secondes.
Si le comportement clic prolongé ne t’intéresse pas, ce code n'aura aucun intérêt !
Moi j'ai eu besoin d'avoir ce comportement et je ne l'ai pas trouvé ^
alors je l'ai fait. Puis, comme j'ai bien aimé le résultat, je l'ai partagé.
On ne sait jamais qui en aura aussi besoin et qui en fera de l'or ^
Je trouve qu'un événement clic prolongé peut franchement être cool. Si des astuces similaires sont déjà largement diffusées, je ne les ai pas trouvé.
[^] # exemple
Posté par NomadSoul (site web personnel) . Évalué à 2.
Tu pourras faire ca par exemple
Avant de cliquer sur la petite icône graphique j'ai
Puis quand je double clique
L’intérêt c'est surtout que ça marche sur les liens avec le clic prolongé !
Quand tu fais un clic prolongé sur un lien, sa toolbox s'affiche. Et pour l'enlever tu ferait pareil (ou bien tu t'installe un bouton close…)
[^] # Re: c'est quoi la difference
Posté par Nÿco (site web personnel) . Évalué à 3.
Il y a sans doute un intérêt sur mobile aussi, comme le hover n'existe pas (encore)…
# de l’intérêt mis à part.
Posté par maboiteaspam . Évalué à 3. Dernière modification le 04 avril 2014 à 14:58.
Hello,
quelques idées,
la documentation est vraiment travaillée, par contre il me semble que tu pourrais en affiner le formatage pour générer une meilleure documentation.
Dans ton cas, je t'invite à regarder docco
Des exemples concrets ici
http://maboiteaspam.github.io/phantomizer_demo/demo/documentation/js/docco-style.html
Ici pour le setup
https://github.com/search?q=grunt%20docco
Tu me fais mal aux yeux avec ton indentation, je préfère la reco de nodejs@joyent deux espaces.
Beaucoup plus approprié pour javascript selon moi,
https://github.com/felixge/node-style-guide
plus spécifiquement pour jquery, qui au passage fournit le fichier de validation syntaxique
http://contribute.jquery.org/style-guide/js/
lire aussi
http://caolanmcmahon.com/posts/nodejs_style_and_structure/
Et puis la doc, encore.
La doc utilisateur.
Stp, donnes nous des exemples et un pavé de texte à lire dont nous ne sommes pas certains de bien le comprendre, mais sait on jamais, cela peut s'avérer utile.
Utilise les pages github pour fournir quelques exemples concrets.
Aussi, si tu souhaites que d'autres participent, écris des batteries de tests, perso je trouve vraiment difficile de rentrer dans un projet qui n'est pas le mien si celui ci ne possède pas de tests. J'ai le sentiment de marcher sur des oeufs, que le projet soit bien foutu ou non, petit ou gros.
https://github.com/search?q=mocha&ref=reposearch + https://github.com/kmiyashiro/grunt-mocha
ou
http://qunitjs.com/ + https://github.com/search?q=qunit++grunt&type=Repositories&ref=searchresults
Autrement, en mode lecture à froid, à la ligne 73
Outre l'effet comique de la lecture.
Je pense que ta variable devrait être déclaré dans le scope supérieur pour libérer le timeout lorsque qu'un autre mousedown survient.
(tu me diras que c'est peu probable puisque l'user est déjà mousedown, sait on jamais)
A la ligne 6, pourquoi ce selecteur ?
Pourquoi s'abonner à tous les liens de la page ? Et pas juste $(body).on("a","mouse… ?
Éventuellement lorsque tu test le tag name, force la casse, il n'y a pas de raisons de croire que toutes les implémentations suivent le même comportement (majuscule).
Par ailleurs, le mouseup devrait être déclaré dans le premier timeout.
Si ce dernier ne s’exécute pas, les événements ne seront pas déclarés.
Aussi, tu dis conseiller mettre le script en bas de page, je demande alors pourquoi tu as mis un document.ready.
Si je mets déjà le script en bas de page, qui est une bonne recommendation, je ne dois pas avoir besoin de faire appel à ready.
Aussi², ton script n'est ni déchargeable / rechargeable (bind / unbind) et il n'est pas non plus discret (? en français c'est weird..) (ie, unobtrusive).
Donc si un display survient après l’exécution de celui ci, les tooltips du display ne fonctionneront pas.
https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
regardes la méthode $.data
Là j'ai un gros doute. Mais amha, e est déjà copié dans le scope, puis référencé par les fonctions de timeout. Donc il n'est pas nécessaire de le re copier ainsi. Mais j'avoue que j'ai un doute.
$(body).on("a.atooltip","mouse… ?
$(body).on(".have_helpbox","mouse… ?
Et pourquoi ce changement de syntaxe de on a dblclick ?
Mais jute pourquoi supprimer le href du noeud ? Retournes false, ou annule l’événement au clic/mousedown non ? Je ne trouves pas de bonnes raisons à s'arroger le droit de modifier un élément partagé de la sorte lorsqu'une alternative existe.
J'ai la flemme de l'essayer pour être honnête, et j'ai peut être dis des bêtises ici. Relu à froid.
Mais bon, voilà le genre de relecture que je ferais.
[^] # relou, obliger de me répondre
Posté par maboiteaspam . Évalué à 1.
En beaucoup plus bref, il ne suffit pas de poster sur github, faut il encore faire les efforts afin que d'autres puisse modifier sereinement ton travail.
[^] # Re: relou, obliger de me répondre
Posté par Anonyme . Évalué à 5.
Et c'est en postant sur github qu'il aura un retour comme celui que tu as pu lui apporter et qu'il s'améliorera dans ce domaine: j'ai apprécié ton premier commentaire qui était constructif et instructif; celui-ci beaucoup moins.
[^] # Re: relou, obliger de me répondre
Posté par maboiteaspam . Évalué à -1.
Je crois plutôt que c'est le ton, la tournure qui ne te conviens pas.
Ce que j'y ai dit n'est que la suite logique du post précédent.
Que j'ai pu être maladroit, soit, éventuellement, mais je n'ai pas le sentiment d'avoir besoin de faire la preuve quatre du bon sens, je laisse le soins aux autres de s'y coller. Par contre je veux bien montrer une manière d'y arriver, ce que j'ai fait.
Finalement, je ne penses pas une seconde qu'en postant cela sur github il trouvera beaucoup d'echo à son appel de pied, je peux toujours me tromper, supposons, mais mon constat est que sur github il y à plus de pleureurs que de faiseurs.
mes 2 cents car je suis très soulé que ton poste paternaliste soit applaudit ainsi.
Conformisme quand tu nous tiens … .
[^] # Re: relou, obliger de me répondre
Posté par NomadSoul (site web personnel) . Évalué à 2.
la vérité vraie c'est que ton dernier post ne collait pas avec le précédent.
Ça faisait: conclusion très bâclée, une bache gratuite
Après on pense ce qu'on veut de github, çà n'est pas non plus le sujet.
Le but c'était de partager le code.
[^] # Re: relou, obliger de me répondre
Posté par maboiteaspam . Évalué à 0.
/hs/ Ce que j'aurais voulu exprimer plus tôt, ce que je crois c'est que Github est une plateforme profondément élitiste.
Oui c'était bâclé. Le code était court, mais il y avait de quoi travailler, alors après ma re lecture j'ai eu un coup de mou.
Mis il faut croire que ton post m'à redonné un coup de sang :D
[^] # Re: relou, obliger de me répondre
Posté par Anonyme . Évalué à 1. Dernière modification le 04 avril 2014 à 17:14.
je te confirme: j'ai trouvé le ton condescendant, ce qui tranchait avec ta réponse précédente.
En tout cas, c'est parce que son code a été mis sur github qu'il a pu bénéficié de tes conseils
ne pleure pas si vite: mon poste paternaliste a démarré à 2 et ne semble avoir été applaudi, à cet instant, que par NomadSoul, pour atteindre le score extraordinairement mirifique de 3 ! On est donc loin de l'encensement de masse du paternalisme.
bouh les méchants … ;)
Si on remettait les choses à leur place ?
1/ tu fais une réponse constructive,
2/ tu rajoutes une commentaire pour expliquer que finalement il aurait du bosser plus avant de rendre public son code, sur un ton qui tranche avec ta première réponse,
3/ je te fais remarquer qu'il y a une contradiction, sur le fond comme sur la forme, entre tes deux commentaires
Ça te semble vraiment culminer à un seuil si intolérable pour se vexer ou crier à la domination paternaliste de la pensée unique ?
si c'est le cas, toutes mes excuses pour t'avoir soulé, mais honnêtement, ne devrais-tu pas essayer la camomille ? (ok, la c'est moi qui suis condescendant … et pour le coup réellement paternaliste :) )
Sans rancune si je passe à autre chose ?
et pour finir sur du positif, merci pour les différents liens de ton premier commentaire.
[^] # Commentaire supprimé
Posté par maboiteaspam . Évalué à -4. Dernière modification le 06 avril 2014 à 19:04.
Ce commentaire a été supprimé par l’équipe de modération.
[^] # Commentaire supprimé
Posté par Anonyme . Évalué à 1. Dernière modification le 06 avril 2014 à 19:04.
Ce commentaire a été supprimé par l’équipe de modération.
[^] # Commentaire supprimé
Posté par maboiteaspam . Évalué à -2. Dernière modification le 06 avril 2014 à 19:05.
Ce commentaire a été supprimé par l’équipe de modération.
[^] # Commentaire supprimé
Posté par NomadSoul (site web personnel) . Évalué à 0. Dernière modification le 06 avril 2014 à 19:05.
Ce commentaire a été supprimé par l’équipe de modération.
[^] # Re: relou, obliger de me répondre
Posté par Nÿco (site web personnel) . Évalué à 3.
Prière de rester zen.
https://linuxfr.org/regles_de_moderation
Le sujet était pas mal, dommage de l'avoir pollué…
[^] # Commentaire supprimé
Posté par Anonyme . Évalué à 1. Dernière modification le 06 avril 2014 à 19:05.
Ce commentaire a été supprimé par l’équipe de modération.
[^] # Re: relou, obliger de me répondre
Posté par Benoît Sibaud (site web personnel) . Évalué à 4.
Merci de rester courtois dans les échanges, conformément aux règles de modération en vigueur sur le site.
[^] # Re: relou, obliger de me répondre
Posté par maboiteaspam . Évalué à 2.
Je ne pensais pas que mon terme de nazi virerait à l'horreur noir de la censure.
Bref, vous l'aurez remarqué j'était bancal ce jour là (enfin ce soir là ; ),
désolé.
[^] # Re: de l’intérêt mis à part.
Posté par NomadSoul (site web personnel) . Évalué à 2.
Va pour les exemples.
J'en ferai.
Pour l'indentation on me le dit souvent mais bon, pour moi c'est autrement que ça me fait mal aux yeux. Au final, c'est plus une question de flemme d'essayer qui vous rebute.
C'est mon impression en tout cas.
Au niveau de la doc, c'est effectivement pas cool de lire. Et pour des personnes averties il y a des passages très "lol". Mais le but était surtout d'aider aussi les bricoleurs du dimanche qui veut regarder comment certaines choses peuvent fonctionner.
Pour ce code de quelque lignes à peine on peut se passer des commentaire et l'essayer. C’est une astuce…
On essaye d'abord, puis on apporte des améliorations à sa sauce si on y trouve un début d’intérêt.
Ensuite tu vas sur des détails précis:
Pour le if(elem.get(0).tagName == "A")
J'avais juste besoin d'un moyen de savoir sur quel élément on avait cliqué.
Si c'est un lien il fallait supprimer momentanément le lien.
Tu as tout à fait raison pour la casse.
Pour le reste teste quand même le code. Il n'est certes pas parfait mais tu y verras peut être moins d'inutilité.
En tout cas cette bout de code était un solution à un problème que j'ai eu:
afficher ma tooltip au clic sur un lien
Et merci pour tes conseils.
[^] # Re: de l’intérêt mis à part.
Posté par maboiteaspam . Évalué à 2.
Je n'ai pas dit que c'était dégueulasse, je t'ai juste donné des pistes pour l'améliorer. Que j'espère bonne, restant ouvert à la critique, puisque j'ai posté publiquement et car tout évolue si vite dans ce domaine.
Pour le reste il ne tient qu'à toi d'y voir le bon côté.
Par contre mon titre disait bien que j'y voit assez peu d’intérêt, mais ce n'est que moi, et actuellement je n'ai pas besoin d'un tooltip au mousedown.
Take it easy et merci quand même : )
[^] # Re: de l’intérêt mis à part.
Posté par NomadSoul (site web personnel) . Évalué à 2.
d'où le "merci pour tes conseils" ^
il n'y a pas de mal.
Je suis conscient qu'il faut avoir besoin cet évènement "clic prolongé" pour que ce partage soit utile.
Enfin bref, c'est là. Ce qui en auront besoin le bidouilleront et l'amélioreront.
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.