+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : gritter (jquery + css) : affichage de "notifications" (/showthread.php?tid=4263)
gritter (jquery + css) : affichage de "notifications" - jeDavu - 04-08-2009
Bonjour,
actuellement dans le jeu que je suis en train de réaliser, j'ai besoin d'afficher des notifications sur l'écran du joueur, du genre un "conseiller" qui donne toutes sortes de conseils : "attention si vous vous déplacez sur cette zone vous allez être attaqué", en gros un message au dessus de tout les autres.
J'ai trouvé mon bonheur ici même :
http://boedesign.com/demos/gritter/
Je trouve ca très bien sauf un petit détail :
j'aimerai que lorsque l'on clique sur "Add regular notification" (dans la démo), la notification soit positionné au niveau du lien qui déclenche celle ci. Et je ne sais pas du tout comment faire: jquery, css ect c'est vraiment pas mon truc.
L'auteur dans son css il affiche la notification toujours au même endroit :
Code :
#gritter-notice-wrapper {
position:fixed;
top:20px;
right:20px;
width:301px;
z-index:9999;
}Au haut, à gauche de l'écran.
Il faudrait que je récupére la position "du déclencheur" (le lien "add notification ...", voir démo) par rapport au document, la page web, je sais pas comment ? et ensuite que je change la position de ma notification avec les nouvelles valeurs.
J'ai entendu parler d'éléments parents :
http://www.cssbasics.com/chapter_17_css_position.html
Citation :Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of its nearest parent element that has a position declared other than static.
Apparemment c'est ca qu'il me faudrait ?
Est ce qu'il y a mieux ? comment faire ?
merci de votre aide
RE: gritter (jquery + css) : affichage de "notifications" - Johy - 04-08-2009
Je pense qu'il te sera plus simple sur une base telle que
http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
ou
http://jqueryfordesigners.com/coda-popup-bubbles/
Et tu n'auras plus qu'à modifier le moment où l'évènement se déclenche, au lieu d'être au passage de la souris, ce serait quand tu cliques dessus !
RE: gritter (jquery + css) : affichage de "notifications" - Morningkill - 05-08-2009
Effectivement, il me semble que tu veux un tooltip clickable
j'ai utilisé ceci, pour ma part :
http://plugins.learningjquery.com/cluetip/demo/
Je me mets de coté Gritter, parce que c'est un usage legerement différent, mais trés utile potentiellement
RE: gritter (jquery + css) : affichage de "notifications" - jeDavu - 06-08-2009
Ok merci pour vos réponses,
donc j'ai choisit ceci :
(05-08-2009, 11:35 AM)Morningkill a écrit : http://plugins.learningjquery.com/cluetip/demo/
mais j'ai un petit problème,
je charge les .js et .css.
puis je rajoute le code suivant :
Code :
<script type="text/javascript">
$(document).ready(function()
{
$('#sticky').cluetip({sticky: true,closePosition: 'title', arrows: true,splitTitle: '|'});
});
</script>Puis je rajoute un lien :
Code :
<a id="sticky" title="titre|coucou">aaa</a>Je clique dessus, ca marche, le "sticky" apparait, mais si je rajoute un deuxième lien dans la même page :
Code :
<a id="sticky" title="titre2|coucou2">bbb</a>Le premier marche toujours mais le second et les autres qui suivent non.
Merci
RE: gritter (jquery + css) : affichage de "notifications" - Morningkill - 06-08-2009
Je suis pas encore trés fort en jquery, mais a mon avis, tu ferais mieux de faire une recherche par class, plutot que par id.
Si tu debuggues ton js (genre firebug), combien d'elements te renvoie $('#sticky') ?
RE: gritter (jquery + css) : affichage de "notifications" - Anthor - 06-08-2009
il ne doit renvoyer que le premier, l'id étant supposé unique.
Dans jQuery:
Code :
var elem = document.getElementById( match[3] );Et pour le getElementById : Returns the Element whose ID is given by elementId. If no such element exists, returns null. Behavior is not defined if more than one element has this ID.
Voir specification du W3C : http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId
RE: gritter (jquery + css) : affichage de "notifications" - jeDavu - 06-08-2009
(06-08-2009, 05:41 PM)Anthor a écrit : Et pour le getElementById : Returns the Element whose ID is given by elementId. If no such element exists, returns null. Behavior is not defined if more than one element has this ID.
Et donc ce n'est pas possible ce que je souhaite faire ?
Si je dois mettre des id uniques, autant faire des :
Code :
<a onclick="mafonction(1)">
...
<a onclick="mafonction(2)">non ?
Enfin c'est bizarre que cluetip qui a l'air d'un plugin assez poussé ne propose pas cela. Si jamais vous connaissez autre chose qui le permet merci à vous.
RE: gritter (jquery + css) : affichage de "notifications" - Allwise - 06-08-2009
En fait ce qu'ils voulaient dire, c'est qu'avec ta fonction $('#sticky'), tu ne récupères qu'un seul élément, parce que #sticky est un id et qu'un id est unique. Si tu veux appliquer ton truc à plusieurs éléments dans ta page, donne leur une classe commune, non pas un id. Au lieu d'avoir <a id="sticky">, tu devrais avoir <a class="sticky">.
Et pour les récupérer via Jquery, je suppose qu'il faut faire un $('.sticky').
RE: gritter (jquery + css) : affichage de "notifications" - Anthor - 07-08-2009
Allwise a tout dit.
L'id et la classe étant la base des frameworks javascripts et de leurs sélecteurs, je ne peux que te conseiller de revoir un minimum le CSS avant de t'y lancer