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é

[danielhagnoul]

Bonsoir.

Code :

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

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

[spy74]

super

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 :

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

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

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