+- 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 : [jQuery] Création d'une info-bulle (/showthread.php?tid=3906)
Pages :
1
2
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 18-04-2009
Chez moi l'info-bulle reste. Met un background dessus, tu la quitte peut-être sans t'en rendre compte. Vu qu'il n'y a pas de bordure c'est facile de passé à coté.
Sinon c'est pas mal, j'aurais sûrement fait un truc similaire.
RE: [jQuery] Création d'une info-bulle - phenix - 22-04-2009
Bonjour,
C'est de nouveau moi, j'ai voulut rendre l'effet un peu plus agréable à l'oeil en utilisant la fonction fadeIn() pour faire apparaître l'info-bulle et fadeOut() pour la faire disparaître.
J'ai commencer par modifier la div:
<!-- Div de l'infobulle -->
<div id="tips" style="position:absolute; display:none; z-index:1000;"></div>
Ensuite, je pensait que 2 ou 3 adaptations suffirait:
(function($) {
$.valmetips = {
freeze: false,
//Affichage de l'info-bulle
over_tips: function(ths, message, title) {
var moveHandler = function(e) {
//On affiche
$("div#tips").stop().fadeIn("fast");
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
//On vide les piles
var outHandler = function() {
jQuery(ths)
.unbind("mousemove",moveHandler)
.unbind("mouseout",outHandler);
};
//je pointe sur le lien où est la souris
if (!$.valmetips.freeze)
{
//Injection du message
$("div#tips").append(title+message);
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind("mousemove", moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind("mouseout",outHandler);
}
}
,
cache_tips: function() {
if (!$.valmetips.freeze)
{
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeOut("fast");
}
}
,
click_tips: function(ths, message, title) {
//on zappe tout.
jQuery(ths).unbind();
//On zappe la div
$("div#tips").empty();
$("div#tips").stop().fadeIn("fast");
//On ajoute le contenu
$("div#tips").append(title+message);
//on affiche la div
$("div#tips").css({top: (sourisTop)+"px", left: (sourisLeft)+"px"});
//On active le freeze
$.valmetips.freeze = true;
//sortie de l'infobulle
$("div#tips").mouseout(function () {
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeOut("fast");
//On désactive le freeze
$.valmetips.freeze = false;
}
);
}
}
//Accès rapide
over_tips = function(message, title) {
$.valmetips.over_tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
click_tips = function(message, title) {
$.valmetips.click_tips(this, message, title);
}
})(jQuery);
Il semble que ce fut naïf de ma part, plus rien ne marche...
Quelqu'un sait pourquoi ?
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 22-04-2009
Salut,
Il sert à quoi le stop() dans $("div#tips").stop().fadeIn("fast") ?
Et ça sert à rien de faire un fadeIn() à chaque mouvement de sourie, suffit de le faire après avec injection un message dans l'info-bulle.
RE: [jQuery] Création d'une info-bulle - madri2 - 22-04-2009
le stop arrete l'animation
ça sert si par exemple l'animation se fait lorsque tu passe sur un objet, ça l'anime, si jamais on va sur l'objet et on repars puis revient sur ce même objet avant que l'animation soit finie, l'animation ne se fasse pas 2 fois mais qu'une seule fois
RE: [jQuery] Création d'une info-bulle - OncleJames - 23-04-2009
Il est vrai que d'avoir son propre code est toujours plaisant, mais il est dur à chaque fois de réinventer la roue.
Le plugin jquery tooltip existe et est tres bien commenté, de plus il offre des options des options quasi complète.
J'ai du l'étudier pour un projet, son code est super clair, bien commenté et bien indenter, que demander de plus.
demo jquery
Dans le code source, il y a tout : implantation html + code js
Peut être est il plus intéressant de partir de ce plugin et de l'améliorer/adapter à son besoin.
Si tu as des questions dessus, je pourrai y répondre l'ayant étudié et utilisé.
RE: [jQuery] Création d'une info-bulle - phenix - 23-04-2009
Citation :Il est vrai que d'avoir son propre code est toujours plaisant, mais il est dur à chaque fois de réinventer la roue.
Le plugin jquery tooltip existe et est tres bien commenté, de plus il offre des options des options quasi complète.
C'est bien, mais j'ai envie d'apprendre et de comprendre comment fonctionne jQuery. Si j'utilise toujours des truc tout fait, jamais j'apprendrais quoi que ce soit. Hors, je serais un jour ou l'autre amener a créer mes propres effets, je dois donc maitriser les effets :p.
Bon, sa marche pas encore top top:
Voici le code complet, avec son implantation dans le jeu:
$(document).ready(
function ()
{
//Position de la souris
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
}
);
Les fonctions info-bulle:
(function($) {
$.valmetips = {
freeze: false,
//Affichage de l'info-bulle
over_tips: function(ths, message, title) {
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
//On vide les piles
var outHandler = function() {
jQuery(ths)
.unbind("mousemove",moveHandler)
.unbind("mouseout",outHandler);
};
//je pointe sur le lien où est la souris
if (!$.valmetips.freeze)
{
//Injection du message
$("div#tips").append(title+message);
$("div#tips").stop().fadeIn("slow");
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind("mousemove", moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind("mouseout",outHandler);
}
}
,
cache_tips: function() {
if (!$.valmetips.freeze)
{
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeOut("slow");
}
}
,
click_tips: function(ths, message, title) {
//on zappe tout.
jQuery(ths).unbind();
//On zappe la div
$("div#tips").empty();
//On ajoute le contenu
$("div#tips").append(title+message);
$("div#tips").stop().fadeIn("slow");
//on affiche la div
$("div#tips").css({top: (sourisTop)+"px", left: (sourisLeft)+"px"});
//On active le freeze
$.valmetips.freeze = true;
//sortie de l'infobulle
$("div#tips").mouseout(function () {
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeOut("slow");
//On désactive le freeze
$.valmetips.freeze = false;
}
);
}
}
//Accès rapide
over_tips = function(message, title) {
$.valmetips.over_tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
click_tips = function(message, title) {
$.valmetips.click_tips(this, message, title);
}
})(jQuery);
et enfin, une petite couche a moi pour facilité l'implantation dans le jeu:
/************ DEBUT de l'Overvalme **************************************************************/
/* Ceci est une surcouche permettant facilement de changer le rendu */
function overvalme(texte,titre)
{
return over_tips('<div class="infobulle"><div class="infobulle_gauche"><div class="infobulle_droit"><div class="infobulle_texte">'+texte+'</div></div></div></div>', titre);
}
function overvalme_clic(titre,texte)
{
return click_tips('<div class="infobulle"><div class="infobulle_gauche"><div class="infobulle_droit"><div class="infobulle_texte">'+texte+'</div></div></div></div>', titre);
}
function overvalme_large(texte,titre)
{
return over_tips('<div class="infobulle">'+texte+'</div>', titre);
}
/************ Fin de l'Overvalme ******************************************************/
Le problème sont:
- Apparait quelques passage de la souris le système ce block et ne fonctionne plus.
- Si je ne met pas de taille en hauteur, le fadeIn ne fonctionne pas correctement.
- Lorsque je quitte la première ligne de l'info bulle elle disparait, quelques soit sa taille réel.
Voila, je sais absolument pas d'ou sa vient, si quelqu'un veux bien éclairer ma lanterne. :heuuu:
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 25-04-2009
Salut
En fait je croit que le problème vient du stop...
FadeIn va rentre visible la bulle jusqu'à l'opacité spécifier avec css, mais avec le stop cette opacité change s'il est lancé avant l'apparition complète de la bulle.
<p style="opacity:0.3">§ avec opacité à 30%</p>
<p>§ de comparaison</p>
$(document).ready(function(){
$("p:first").click(function(){
$(this)
//modifie l'opacité
.css("opacity", 0.1 + Math.random()/1.2)
//fait disparaitre puis réaparaitre le paragraphe
.fadeOut("slow", function(){
$(this).fadeIn("slow");
});
});
});
Alors je pense que le mieux c'est de remplacer les fadeIn("slow") par un fadeTo("slow", 1) ou directement animate({opacity:1},"slow").
Par contre avec les fadeTo le "display:none" du div empêche l'apparition de la bulle alors soit tu fait un "display:block" avec js soit tu le vire du div
Tu peux aussi faire une petite amélioration dans le code :
$("div#tips").html(title+message);$("div#tips").empty();
$("div#tips").append(title+message);RE: [jQuery] Création d'une info-bulle - phenix - 26-04-2009
Citation :En fait je croit que le problème vient du stop...
FadeIn va rentre visible la bulle jusqu'à l'opacité spécifier avec css, mais avec le stop cette opacité change s'il est lancé avant l'apparition complète de la bulle.
Non, le stop() fonctionne bien, il empêche l'animation de ce lancer plusieurs fois de suite, j'ai fait les teste avec et sans, sa fonctionne moi bien sans.
J'ai presque réussi à viré tout les problème, il ne reste que quelques truc bien chiant:
Les codes a jour tout d'abord:
le CSS de la bulle:
#tips
{
position:absolute;
z-index:1000;
background: #ff0000;
width: 200px;
}
Le document.ready:
$(document).ready(
function ()
{
//Position de la souris
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
//Fade de la tips
$("div#tips").fadeTo(0,0);
}
);
Le code de l'info-bulle:
(function($) {
$.valmetips = {
freeze: false,
//Fonction qui ajuste la hauteur de la div
taille_tips: function() {
height = $("div#tips").height();
$("div#tips").height(height);
}
,
//Affichage de l'info-bulle
over_tips: function(ths, message, title) {
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
//On vide les piles
var outHandler = function() {
jQuery(ths)
.unbind("mousemove",moveHandler)
.unbind("mouseout",outHandler);
};
//je pointe sur le lien où est la souris
if (!$.valmetips.freeze)
{
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind("mousemove", moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind("mouseout",outHandler);
//Injection du message
$("div#tips").html(title+message);
//on ajuste la taille de la bulle
$.valmetips.taille_tips();
//On affiche
$("div#tips").stop().fadeTo("slow",1);
}
}
,
cache_tips: function() {
if (!$.valmetips.freeze)
{
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeTo("slow",0);
}
}
,
click_tips: function(ths, message, title) {
//on zappe tout.
jQuery(ths).unbind();
//cachage de la div rapide
$("div#tips").stop().fadeTo(0,0);
$("div#tips").html(title+message);
//On ajuste la taille de la bulle
$.valmetips.taille_tips();
//on affiche la div
$("div#tips").css({top: (sourisTop)+"px", left: (sourisLeft)+"px"});
$("div#tips").stop().fadeTo("slow",1);
//On active le freeze
$.valmetips.freeze = true;
$("div#tips").mouseout(function() {
$.valmetips.unclick_tips();
});
}
,
unclick_tips: function() {
//On la rend invisible
$("div#tips").stop().fadeTo("slow",0);
//On désactive le freeze
$.valmetips.freeze = false;
}
}
//Accès rapide
over_tips = function(message, title) {
$.valmetips.over_tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
click_tips = function(message, title) {
$.valmetips.click_tips(this, message, title);
}
unclick_tips = function() {
$.valmetips.unclick_tips();
}
})(jQuery);
Et enfin, ma petite surcouche qui sert a intégre le script dans le jeu:
/************ DEBUT de l'Overvalme **************************************************************/
/* Ceci est une surcouche permettant facilement de changer le rendu ou le moteur des info-bulle */
function overvalme(texte,titre)
{
return over_tips(texte, titre);
}
function overvalme_clic(titre,texte)
{
return click_tips(texte, titre);
}
function overvalme_large(texte,titre)
{
return over_tips(texte, titre);
}
/************ Fin de l'Overvalme ******************************************************/
Le html pour le teste:
Code :
<br /><a onclick="overvalme_clic('Freeze','Banzai freeze !');" onmouseover="overvalme('teste','Banzai !');" onmouseout="cache_tips();">teste info bulle</a>
<br /><a onclick="overvalme_clic('Freeze 2','Banzai freeze2 !');" onmouseover="overvalme('teste2','Banzai 2!');" onmouseout="cache_tips();">teste info bulle2</a>Le système de Fade fonctionne au poil, exactement comme je veux.
Mais il y a des bug
:La taille de la div n'est pas correctement mise à jour quand on clique.
Après un click, la bulle disparait sitôt que l'on quitte le texte, ou que l'on ne reste pas sur la bande rouge (tester pour voir de quoi je parle, c'est lier a la taille de la div je pense). Ce n'est pas logique vu que la fonction est relivé à la div et non au contenu de la div...
Si je met une taille directement dans le css pour forcer la div a s'ajuster en hauteur, la div disparait quand même si je quitte le texte.
Je sais pas trop quoi faire la... Si quelqu'un peu m'aider.
Merci d'avance.
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 27-04-2009
Citation :Non, le stop() fonctionne bien, il empêche l'animation de ce lancer plusieurs fois de suite, j'ai fait les teste avec et sans, sa fonctionne moi bien sans.Oui j'ai comprit bien comprit à quoi servais le stop mais je parler du cas où
- je pose la sourie sur le lien
->opacité 10%
->opacité 20%
- j'enlève la sourie
->stop()
- je ré-affiche
->opacité max 20% (au lieu de 100%)
C'est ça que je voulais dire
Sinon c'est taille_tips qui fait tout planter, si tu vide la fonction ça marche, mais je sais pas pourquoi oO