JeuWeb Créez votre jeu par navigateur !

phenix · (Modification du message : 18-04-2009, 01:17 AM par phenix.)

Bonjour à tous,

Voila, j'ai eu envie de crée mon propre système d'info bulle avec l'aide de jQuery.

Malheureusement je bloque dès le premier niveau :toilette: )

Voici ce que j'ai fais:

Dans le Body:

<div id="tips" style="position:absolute; visibility:hidden; z-index:1000;"></div>

C'est la div que je veux faire apparaitre.

Le support:

<a href="#" onmouseover="tips('teste','Banzai !');">teste info bulle</a>

Et enfin le code qui ne marche malheureusement pas Sad

(function($) {



	$.valmetips = {



		tips: function(message, title) {

			

			//Injection du message

			$("div.tips").append("<h1>"+title+":</h1>"+message);

			//Div visible

			$("div.tips").css({visibility: visible; width: 400px; height: 400px;});



		}



	}



	//Accès rapide

	tips = function(message, title) {



		$.valmetips.tips(message, title);



	}

})(jQuery);

Le code n'est absolument pas exécuté, il ne ce passe strictement rien... j'ai du louper une étape quelques par...

Merci d'avance de votre aide.

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



$.valmetips = {

	tips: function(message, title) {

		//Injection du message

		$("div#tips").append("<h1>"+title+":</h1>"+message);

		//Div visible

		$("div#tips").css({visibility:"visible", width:400, height:"400px"});

	}

}

Mauvais sélecteur css, les id c'est avec un "#". et paramètre mal former dans $.css()
Ah aussi, pourquoi mettre un onmouseover alors qu'il y a une fonction jQuery fait pour (mousemove ?

phenix · 17-04-2009, 10:36 PM

Merci pour ton aide.

Pour le mousemove, cela semble approprier, seulement, comme je fais pour passer des paramètres ?

jo_link_noir · (Modification du message : 18-04-2009, 12:25 AM par jo_link_noir.)

En fait c'est la fonction dans le mousemove qui va chercher les infos dont t'as besoin. Si tu veux passer des paramètres différent selon l'info-bulle, ça risque d'être un peu dur. Mais j'imagine qu'il n'y aura que du texte, non ? Dans ce cas le plus simple est d'afficher le texte dans le html, le cacher avec le css et avec le js joué sur la visibilité.
J'te montre un exemple

<html>

<head>

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript"><!--

$(document).ready(function(){

	//sélectionne les infobulles

	$('a.infoBulle')

	//quand la sourie passe dessus

	.mousemove(function(){

		//sélectionne le texte de l'infobulle.

		//(div.infoBulleTexte situé à la suite de a.infoBulle)

			//l'affiche

		$(this).next('div.infoBulleTexte').css({visibility:"visible", width:400, height:400});

	})

	//quand la sourie quitte l'élément

	.mouseout(function(){

		//sélectionne le texte de l'infobulle et le fait disparaître

		$(this).next('div.infoBulleTexte').css({visibility:"hidden"});

	});

});

--></script>

</head>

<body>



<a href="#" class="infoBulle">teste info bulle</a>

<div class="infoBulleTexte" style="position:absolute; visibility:hidden; z-index:1000;">

	<h1>Banzai !</h1>teste

</div>



<a href="#" class="infoBulle">teste info bulle 2</a>

<div class="infoBulleTexte" style="position:absolute; visibility:hidden; z-index:1000;">

	<h1>Bambou !</h1>teste 2

</div>



</body>

</html>

phenix · 18-04-2009, 01:15 AM

Ce que tu propose est intéressant, seulement sa m'obligerais à revoir une très grosse partie du jeu. De plus les texte change souvent, cela peux aller jusqu'à 400 voir plus, alors pour la lisibilité, je pense que ce ne sera pas top.

Pour le moment j'en suis a ce niveau:



$(document).ready(

function ()

	{  

//Position de la souris

		$().mousemove(function(e){

    			sourisLeft = e.pageX;

      			sourisTop = e.pageY;

   		}); 

	}



);

(function($) {

	$.valmetips = {		

		

		//Affichage de l'info-bulle

		tips: function(message, title) {

			

			//Injection du message

			$("div#tips").append("<h1>"+title+":</h1>"+message);

			//Div visible

			$("div#tips").css({visibility: "visible", width: "400px", height: "400px", top: sourisTop+20+"px", left: sourisLeft+30+"px"});



		}

		,

		cache_tips: function() {

			//On vide la div.

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

			//On la rend invisible

			$("div#tips").css({visibility: "hidden"});

		}

	}



	//Accès rapide

	tips = function(message, title) {



		$.valmetips.tips(message, title);



	}

	cache_tips = function() {

		$.valmetips.cache_tips();

	}



})(jQuery);

Il y a un petit soucis, la mise à jour de la position de la souris ne ce fait pas en temps réel. Si quelqu'un a une solution, je suis preneur. Moi je cherche toujours Sad

.

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

Ouai ok, si tous change est trop compliquer, autant laisser le onmouseover.

$(document).ready(function(){

//Position de la souris

		$().mousemove(function(e){

    			sourisLeft = e.pageX;

      			sourisTop = e.pageY;

   	});

});



(function($) {

	$.valmetips = {		

 

		//Affichage de l'info-bulle

		tips: function(ths, message, title) {



			//Injection du message

			$("div#tips").append("<h1>"+title+":</h1>"+message);



			var moveHandler = function(e) {

				//Div visible (e.PageX ou sourisLeft)

				$("div#tips").css({visibility: "visible", width: "400px",height: "400px",

					top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});

			};

			var outHandler = function() {

				jQuery(ths)

				.unbind('mousemove',moveHandler)

				.unbind('mouseout',outHandler);

			};

			jQuery(ths)

				.bind('mousemove', moveHandler)

				.bind('mouseout',outHandler);



		}

		,

		cache_tips: function() {

			//On vide la div.

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

			//On la rend invisible

			$("div#tips").css({visibility: "hidden"});

		}

	}

 

	//Accès rapide

	tips = function(message, title) {

 

		$.valmetips.tips(this, message, title);

 

	}

	cache_tips = function() {

		$.valmetips.cache_tips();

	}

 

})(jQuery);

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

Merci, cela marche à merveille !

Malheureusement, il y a quelques petites choses que je n'ai pas comprit:

- A quoi sert la ths ? Si j'ai bien comprit, elle contient le "this". Mais, je ne comprend pas ce que sa vient faire ici. (Et pour tout dire, j'ai toujours eu du mal a comprendre ce que c'était le this.)

var moveHandler = function(e) {

				//Div visible (e.PageX ou sourisLeft)

				$("div#tips").css({visibility: "visible", width: "400px",height: "400px",

					top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});

			};

Tu mes une fonction dans une variable, cela veux dire que la variable permet d'exécuter la fonction ?

Et pour finir, j'ai rien comprit aux fonction unbind et bind, même après avoir lut la doc sur ces fonctions. D'après ce que j'ai comprit cela permet de jouer avec des événements.

Voila, si tu pouvais le commenter tes codes, cela m'aiderais, vu que je ne veux pas me limiter à afficher une info-bulle (Il faut encore faire l'info-bulle persistante aux click de la souris, mais je pense que je dois comprendre tout sa avant.)

Merci de ton aide en tout cas, sa m'aide beaucoup à comprendre le fonctionnement de jQuery.

jo_link_noir · 18-04-2009, 05:35 PM

Ouaip, le ths correspond au this, en fait this se rapporte toujours au « propriétaire » de la fonction. Par exemple, quand tu passe la sourie sur ton lien il appelle la fonction tips. Alors this correspond à la balise qui appelle tips (ici ton lien), un peu comme si tu fessais document.getElementsByTagName("a")[numero_de_mon_lien].
Le jQuery(ths) sélectionne ton lien avec jQuery pour faire les traitement dessus.

Le moveHandler c'est le principe des variables fonctions (je sais pas si ça à un nom), mais ça consiste à créé une variable qui ce comporte comme une fonction. si je fait moveHandler() il va l'exécuter comme si c'était une fonction.
La fonction que tu donne au mousemove dans le début de ton script, t'aurait très bien pu la passé par une variable fonction.



//principe des fonctions anonymes

$().mousemove(function(e){

	sourisLeft = e.pageX;

	sourisTop = e.pageY;

});



//revient à faire 



//variable fonction

maFonc = function(e){

	sourisLeft = e.pageX;

	sourisTop = e.pageY;

};

$().mousemove(maFonc);

Quand à bind, c'est une méthode qui permet de rajouter des actions.
Quand je bouge ma sourie je lance moveHandler. Et quand je quitte le lien, j'enlève moveHandler. Pareil avec outHandler.



//je pointe sur le lien où est la sourie

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



//on aurait très bien pu faire

jQuery(ths)

.mousemove(moveHandler)

.mouseout(upHandler);

Mais je préférée avec bind pour ce cas, vu que qu'après y a un unbind je trouve ça plus homogène ^.^
Autre exemple



$().mousemove(function(e){

	sourisLeft = e.pageX;

	sourisTop = e.pageY;

});



//équivalent à :



$().bind("mousemove", function(e){

	sourisLeft = e.pageX;

	sourisTop = e.pageY;

});

Dans ce code, aucun moyen de détacher la fonction avec unbind (à moins de faire le bourrin et de détacher toute les fonctions attacher à mousemove). Pour ça que dans le code que je t'ai passé je passe une variable fonction en paramètre dans bind, pour pouvoir la détacher avec unbind sans enlever les probables autres fonctions attaché à mousemove.

Un truc qui est pas dit dans la doc que je t'es montré, c'est qu'avec bind (et d'autre j'imagine) tu peux mettre plusieurs événement en même temps :



$().bind("mousemove | click", myfonc)

//au lieu de

$().mousemove(myfonc).click(myfonc)

Faudrait que je trouve une doc française plus récente ^.^

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

Merci beaucoup pour ces éclaircissements.

J'avais des questions, mais en testant le code que tu m'as donné, j'ai répondu à mes questions.

En faites, tu empile au passage de la souris et désempile quand elle quitte d'où la présence des unbind (qui vide la pile).

Bon je vais m'attaquer au freeze de la div si on clique. C'est pas gagné...

[Edit]
Voila, j'ai presque fini, je poste pour que tu voie ce que j'ai fais, je sais pas si tu l'aurais fait comme sa:



(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({visibility: "visible", width: "400px",height: "400px",

					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("<h1>"+title+":</h1>"+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").css({visibility: "hidden"});

				}

		}

		,

		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("<h1>"+title+":</h1>"+message);

			//on affiche la div

			$("div#tips").css({visibility: "visible", width: "400px",height: "400px",

					top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});

			$.valmetips.freeze = true;

		}



	}

 

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

J'appelle la fonction click_tips via un onclick Smile

.

Sa marche, reste a crée un bouton croix qui efface la bulle.
Merci beaucoup pour ton aide, quand j'aurais fini totalement, je mettrais le script dans les ressource, cela peu servir a d'autre Wink

.

phenix · 18-04-2009, 09:56 PM

Bon, voila, j'y suis presque, j'ai un soucis.

Voici le code complet:



(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({visibility: "visible", width: "400px",height: "400px",

					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").css({visibility: "hidden"});

				}

		}

		,

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

			//on affiche la div

			$("div#tips").css({visibility: "visible", width: "400px",height: "400px",

					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").css({visibility: "hidden"});

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

sa fonctionne, il y a juste un petit bug. Quand on clique, l'info bulle ce freeze bien, seulement la zone de la bulle semble incorrect, lorsque je descente pour parcourir l'infobulle, elle disparait alors que ma souris de devrait pas l'avoir quitté.

Voila, ce code est presque finis, il reste la touche finale.

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	info bulle un peu spéciale	php_addict	7	3 488	29-01-2013, 05:06 PM Dernier message: Ter Rowan
	cherche plugin jquery info bulle, oui mais...	php_addict	13	4 791	21-01-2012, 08:07 PM Dernier message: Murthy
	Info bulle personnalisé	Argorate	11	4 910	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