selecteur et ciblage

Version imprimable

Bonjour,

Je Cherche à afficher un petit popup à chaque fois qu'on survole une petitie image en l'occurrence "tronche.jpg".
ma construction html est fait comme ceci (code test) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div class="UL-mseg-header"> <img class="UL-mseg-herder-tronche ui-corner-all " src="tronche.jpg" alt=""> <div class="UL-msg-herder-info ui-corner-all"> <div> > Ttest <hr /> > Test Test <hr /> > test@test.net </div> </div> </div>
L'élément ayant la classe UL-msg-herder-info est volent et est caché.
propriété CSS(code test) :
Code:

1 2 3 4 5 6 7 8 9 10 .UL-msg-herder-info{ -moz-box-shadow: 1px 1px 10px #999; -webkit-box-shadow: 1px 1px 10px #999; box-shadow: 1px 1px 10px #999; top:-50px; left:-60px; width:200px; position: absolute; }
Donc je cherche a repositionner et a afficher la div ayant la class "UL-msg-herder-info" au bonne endroit.

Je code vite fait avec jquery un petit event pour faire mes test.
(code test)
Code:

1 2 3 4 5 $(".UL-mseg-header").click( function (){ var cord = $(this).position(); var plop = $(this+" .UL-msg-herder-info").html(); alert(cord.left+' '+cord.top+plop); });
Le problème c'est que je n'arrive pas a cibler ma petite fenêtre info !!! :cry:

Voici l'erreur que me renvoi le navigateur :
jquery-1.4.2.js:2904 | Uncaught Syntax error, unrecognized expression: [object HTMLDivElement]

je suis un peut perplexe sur cette erreur surtout que le cheminement entre les différents éléments me semble cohérent.

19/06/2010, 21h30
spy74
quand je test le code suivant j'arrive bien à cibler ma div info mais vue que ce n'est pas en fonction de l'élément clické la div info est toujours la même :roll:
Code:

1 2 3 4 5 $(".UL-mseg-header").click( function (){ var cord = $(this).position(); var plop = $(".UL-mseg-header .UL-msg-herder-info").html(); alert(cord.left+' '+cord.top+' '+plop); });
Je n'y comprend pas grand chose :aie:
20/06/2010, 00h10
Bovino

Code:

var plop = $(this+" .UL-msg-herder-info").html();

this est un objet HTMLElement (la représentation JavaScript d'une balise HTML en gros).
Donc additionner un élément HTML et une chaine n'a aucun sens et provoque une erreur.

ho merci de m'éclairer :ccool:

du coups j'ai employer une petite pirouette pour que ça marche
Code:

1 2 3 4 5 6 $(".UL-mseg-header").click( function (){ var cord = $(this).position(); var obj=getElementsByClassName("UL-msg-herder-info","*",this); $(obj).css({'left':cord.left+60,'top':cord.top}); });
En revanche j'ai vue que getElementsByClassName n'était pas supporter par tous les navigateurs donc il faut l'implanter dans le code.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function getElementsByClassName(className, tag, elm){ var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; }
le code fonctionne :P
En revanche si il existe une méthode plus concise ou plus optimisée je suis preneur ;)

20/06/2010, 09h40
SpaceFrog

Code:

getElementsByClassName

c'est pas ce que ferait

Code:

$(".UL-msg-herder-info")

???
20/06/2010, 10h50
spy74
si jamais je fait
Code:

1 2 $(".UL-msg-herder-info")
ça cible toutes les div ayant la classe .UL-msg-herder-info alors que mon bute est de cibler la classe UL-msg-herder-info a l'intérieur de la classe qui est cliké ;)

Bonsoir.

Code:

1
2
3
4
5
6
7
8
$(".UL-mseg-header").click(function(){
	var cord = $(this).position();
 
	$(this).find(".UL-msg-herder-info").css({
		'left':cord.left+60,
		'top':cord.top
	});
});

super :ccool:

de ce fait j'ai pu finir ma petite fonction qui permet de positionner un élément par rapport a un autre en indiquant ça position.
Le résulta donne une espèce de petit menu persistent fait a partir de n'importe quel éléments de la page.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
function UPpopu(data)
{
	//Définition des valeurs par défaut
	var defaults = {$Parent:null,$Enfant:null,cord:{left:0,top:0}};
	var odata = $.extend(defaults, data);
 
	//Cache les popus
	$(odata.$Enfant).css({'visibility':'hidden','position':'absolute'});
 
	$(odata.$Parent).ready(function(){
		$(odata.$Parent).bind('click mouseenter', function(){
			$(odata.$Enfant).css({'visibility':'hidden'});
			var cord = $(this).position();//Détection de la position du parent
			$(this).find(odata.$Enfant).css({'left':cord.left+odata.cord.left,'top':cord.top+odata.cord.top,'visibility':'visible'});//Positionnement et affichage
		});
 
		//Petite fonction qui permet de masqué l'élément (à configurer sois même ...)
		$("body").bind('click', function(){
			$(odata.$Enfant).css({'visibility':'hidden'});
		});
		$(".UL-msg-corp").bind('mouseenter', function(){
			$(odata.$Enfant).css({'visibility':'hidden'});
		});
	});
}
 
//Exécution de la fonction
UPpopu({
      $Parent:".UL-msg-header",
      $Enfant:".UL-msg-herder-info",
      cord:{
          left:60,
          top:0
}});

Code html correspondant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
			<div class="UL-msg-header">
				<img class="UL-msg-herder-tronche ui-corner-all " src="tronche.jpg" alt="">
				<div class="UL-msg-herder-info ui-corner-all ui-widget-header">
					<div>
						> Ttest
						<hr />
						> Test Test
						<hr />
						> test@test.net
						<hr />
						> Envoyer un message privé
					</div>
				</div>
			</div>

Il reste à paufiner la fonction surtout la méthode de masque de l'élément apret son apparition ;)