Discussion :

[spy74]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!!

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.

[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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[spy74]

ho merci de m'éclairer

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
En revanche si il existe une méthode plus concise ou plus optimisée je suis preneur

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementsByClassName

c'est pas ce que ferait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

???

[spy74]

si jamais je fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é