JeuWeb Créez votre jeu par navigateur !

jo_link_noir · (Modification du message : 18-04-2009, 11:01 PM par jo_link_noir.)

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.

phenix · 22-04-2009, 01:43 AM

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 ?

jo_link_noir · 22-04-2009, 09:36 PM

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.

madri2 · 22-04-2009, 09:44 PM

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

OncleJames · 23-04-2009, 12:10 AM

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é.

phenix · (Modification du message : 23-04-2009, 07:28 AM par phenix.)

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:

jo_link_noir · (Modification du message : 25-04-2009, 11:26 PM par jo_link_noir.)

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);

A la place de

$("div#tips").empty();

$("div#tips").append(title+message);

phenix · (Modification du message : 26-04-2009, 10:18 PM par phenix.)

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 Sad

:

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.

jo_link_noir · 27-04-2009, 12:04 AM

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

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	info bulle un peu spéciale	php_addict	7	3 489	29-01-2013, 05:06 PM Dernier message: Ter Rowan
	cherche plugin jquery info bulle, oui mais...	php_addict	13	4 795	21-01-2012, 08:07 PM Dernier message: Murthy
	Info bulle personnalisé	Argorate	11	4 911	20-09-2010, 08:47 PM Dernier message: Sephi-Chan
	Création d'une Info Bulle 100% paramétrable. IE / Mozilla	Ssin	6	11 547	06-08-2009, 07:05 PM Dernier message: Argorate
	[Reglé] ToolTip / Info Bulle qui ouvre une fenetre	Ssin	0	1 851	28-08-2006, 11:18 AM Dernier message: Ssin