Variable javascript dans une balise <li>

**Web-Greg** · 15/04/2014, 10h35

Bonjour,

J'utilise la g�olocalisation html5 pour d�terminer l'emplacement de l'utilisateur sur une image.

Le 1er script bas� sur l'API google :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function successCallback(position){
    var LatM = position.coords.latitude;
    var LongM = position.coords.longitude;
    document.getElementById("LatM").innerHTML = position.coords.latitude;
    document.getElementById("LongM").innerHTML = position.coords.longitude;
};

J'obtiens bien la longitude et latitude de l'utilisateur :

Mon 2eme script est une r�gle de 3 pour convertir les coordonn�es g�ographique en pixel

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function calcul() {
	var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
	var Hmarker = ResH * imgheight;
	document.getElementById("repereLpos").innerHTML = Lmarker;
	document.getElementById("repereHpos").innerHTML = Hmarker;
}

J'obtiens bien la hauteur et la largeur en pixel :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
<p>
    Point.Largeur : <span id="repereLpos"></span><br>
    Point.Hauteur : <span id="repereHpos"></span><br>
</p>

J'aimerais reporter repereLpos & repereHpos dans la page html qui affiche le marqueur sous cette forme :

Code html :

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
<!-- MARQUEUR POSITION --> 
<ul data-markers="">
	<li
	  data-marker-type=tooltip
	  data-show-content=yes
	  data-reg-point=centerbottom 
	  data-marker-normal-state-path=marker1.png 
	  data-marker-selected-state-path=marker1-rollover.png 
	  data-marker-left=          <--  ici repereLpos  -->
	  data-marker-top=          <--  ici repereHpos  -->
	  data-marker-width=28
	  data-marker-height=36 
	  data-show-after-zoom-factor=0>
		<div class="InfoDiv">Vous etes ici</div>
	</li>
</ul>

Je vois pas comment inserer / appeler du javascript dans la partie html.

La balise <li> n'accepte pas d'autre balise (<script type="text/javascript"> ...... / data-marker-left id="reperePos) "

Avez vous une solution ?
Merci d'avance

**le_chomeur** · 16/04/2014, 15h31

Bonjour , comme indiqu� dans ton exemple, pass� par les attributs data :

au moment de construire la liste ( en htm ) tu poses les donn�e

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
data-marker-left="XXX"
data-marker-top="YYY"

ou en js , tu r�cup�res le li dont tu as besoins puis tu ajoutes des attributs data :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
monelement.dataset.marker-left = "XXX";
monelement.dataset.marker-top = "YYY";

dataset n'�tant pas g�r� par tous les navigateurs, tu dois v�rifier si cette propri�t� existe, sinon :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
// Modification d'une valeur
monelement.setAttribute('data-marker-left') = 'XXX';
// Récupération de la valeur
var long = monelement.getAttribute('data-marker-left');

cordialement

**Web-Greg** · 17/04/2014, 12h04

Merci pour ton aide !

element.dataset. est en effet une balise que je ne connais pas. J'ai lu pas mal de chose sur internet histoire d'en savoir plus.
�a a l'air simple et pratique mais je vois pas comment l'adapter dans mon cas, les deux scripts sont sur la m�me page, j'ai essay� en me basant sur ton exemple... sans r�sultat.

pour r�sumer, je d�clare mon <li> le plus simplement possible :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<li
	data-marker-type="tooltip"
	data-show-content="yes"
	data-reg-point="centerbottom"
	data-marker-normal-state-path="marker1.png"
	data-marker-selected-state-path="marker1-rollover.png"
	data-marker-left="Lmarker"
	data-marker-top id="repereHpos"
	data-marker-width="28"
	data-marker-height="36"
	data-show-after-zoom-factor="0"
>
	<div class='InfoDiv'>Vous etes ici</div>
</li>

Et ensuite dans un js dans ma page, j�appelle la ligne data.marker.left / .top avec les variables de mon marqueur.

J'oublie une manip, est ce qu'il faut pointer le <li id="" ??

Merci encore une fois pour ton aide

**NoSmoking** · 17/04/2014, 20h19

Bonjour,

J'oublie une manip, est ce qu'il faut pointer le <li id="" ??

pour atteindre un �l�ment il faut effectivement que l'on puisse le retrouver et une des solutions c'est la r�cup�ration via son ID.

Une question quand m�me quel est l'int�r�t de stocker les informations dans un �l�ment DOM et pas directement dans un objet javascript.

**Web-Greg** · 18/04/2014, 15h26

Merci pour ton aide.

Je ne peux pas r�pondre � ta question, une partie du script �tait d�j� en place avant que je reprenne la main...

Pour le moment, mon marker ne bouge pas. Je pense y �tre pour quelque chose. :-(

Mon script de calcul me donne �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
...
var Lmarker = ResL * imgwidth;    // résultat en pixel pour placer le Marker sur l'image.
var Hmarker = ResH * imgheight;
 
//alert("LMarkeur  : " + Hmarker);
//alert("HMarkeur : " + Lmarker);
 
document.getElementById("repereLpos").innerHTML = Lmarker;
document.getElementById("repereHpos").innerHTML = Hmarker;
 
alert("Largeur : " + Lmarker);
alert("Hauteur : " + Hmarker);
...

Mon marker est affich� comme �a :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul data-markers="" id="coo">
     <li       data-marker-type="tooltip"
		data-show-content="yes"
		data-reg-point="centerbottom"
		data-marker-normal-state-path="marker1.png"
		data-marker-selected-state-path="marker1-rollover.png"
		data-marker-left="xx"
		data-marker-top="yy"
		data-marker-width="28"
		data-marker-height="36"
		data-show-after-zoom-factor="0"
     >
          <div class='InfoDiv'>Vous etes ici</div>
     </li>
</ul>

Et c'est l� que �a va pas :

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
<script language="javascript">
function marker() {
 
     var element = document.getElementById('coo');
 
     //Récupérer une valeur :
     //var left = element.dataset.marker.left;
     //var top = element.dataset.marker.top;
 
     //Modifier une valeur
     element.dataset.marker.left = "xx";
     element.dataset.marker.top = "yy";
     //var Lmarker = monelement.getAttribute('data-marker-left');
 
     element.dataset.marker.left = "repereLpos";    //repereLpos ou Lmarker ??
}
</script>

**le_chomeur** · 18/04/2014, 16h49

voici un exemple concret

http://jsfiddle.net/Qgue6/

**Web-Greg** · 21/04/2014, 19h01

Merci pour le lien, j'ai fait plusieurs essais dont celui l� :

Code html :

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
<ul data-markers="" >
	<li id="coo"
		data-marker-type="tooltip"
		data-show-content="yes"
		data-reg-point="centerbottom"
		data-marker-normal-state-path="marker1.png"
		data-marker-selected-state-path="marker1-rollover.png"
		data-marker-left="400"    < -- position de mon marqueur depuis le haut gauche de mon image
		data-marker-top="200"    < -- idem depuis le haut de mon image
		data-marker-width="28"
		data-marker-height="36"
		data-show-after-zoom-factor="0"
        >
	<div class='InfoDiv'>Vous etes ici</div>
	</li>
</ul>

Et le script pour agir sur data-marker-left et top :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
var listeLi,monelement;
 
//listeLi =  document.getElementById('coo');
var monelement = document.getElementById('coo');
 
//recuperation des valeurs
var xx = monelement.getAttribute("data-marker-left")
var yy = monelement.getAttribute("data-marker-top")
 
//modifications des valeurs
monelement.setAttribute("data-marker-left") = "300";
monelement.setAttribute("data-marker-top") = "150";

�a vous semble correct comme syntaxe ?

**Bovino** · 21/04/2014, 19h20

La premi�re chose incorrecte, c'est de mettre une div dans un <ul> !
Une liste ne peut contenir que des balises <li> comme enfant.

**Web-Greg** · 21/04/2014, 20h56

compris, j'utilise le plug in Megazoom Image Viewer pour afficher ma carte.
C'est une partie de leur code que j'ai post� (la partie Liste).

**NoSmoking** · 21/04/2014, 22h23

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
//modifications des valeurs 
monelement.setAttribute("data-marker-left") = "300";
monelement.setAttribute("data-marker-top") = "150";

Ton utilisation de la m�thode setAttribute est incorrecte, objet.setAttribute( nom, valeur);

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
//modifications des valeurs
monelement.setAttribute("data-marker-left", "300");
monelement.setAttribute("data-marker-top", "150");

tu pourrais �galement passer par les dataset mais en prenant garde � la fa�on de les r�cup�rer.

**Web-Greg** · 22/04/2014, 20h07

G�nial, �a fonctionne bien !! Merci

Il est possible d'appeler une variable ici � la place des chiffres ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
//modifications des valeurs 
monelement.setAttribute("data-marker-left") = "300";
monelement.setAttribute("data-marker-top") = "150";

Y a t'il une syntaxe particuli�re pour appeler les variables qui sont dans une fonction en entete de ma page ??

Merci pour votre aide

**NoSmoking** · 24/04/2014, 20h17

Il est possible d'appeler une variable ici � la place des chiffres ?

un petit essai ne t'as pas tent�

[EDIT]
ne pas tenir compte de la proposition ci dessous

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
//modifications des valeurs 
var ma_variable_1 = "300",
    ma_variable_2 = "150";
monelement.setAttribute("data-marker-left") = ma_variable_1;
monelement.setAttribute("data-marker-top")  = ma_variable_2;

**Web-Greg** · 24/04/2014, 21h35

J�appr�cie vraiment ton aide.

Si j'ai bien essay� de faire des test mais l� j'ai l'impression de ramer comme jamais alors que c'est la derni�re �tape du projet.

Je mets en place ta m�thode demain matin et reviens certainement vite....

Merci pour ton aide !

**Web-Greg** · 25/04/2014, 12h10

Bonjour,

Je viens d'essayer avec ta syntaxe, �a ne marche que si je rentre des chiffres ici :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
monelement.setAttribute("data-marker-left", "150");
monelement.setAttribute("data-marker-top", "300");

J'ai l'impression que le probl�me vient du fichier javascript qui g�re l'affichage de l'image et des marqueurs...

A part �a, je vois pas pourquoi je ne pourrais pas indiquer dans ma liste, les variables d'une fonction (dans l'en t�te de ma page)...

**NoSmoking** · 25/04/2014, 20h38

j'ai recopier une grosse ANERIE signal�e au post #10 qui plus est re

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
//modifications des valeurs 
var ma_variable_1 = "300",
    ma_variable_2 = "150";
monelement.setAttribute("data-marker-left", ma_variable_1);
monelement.setAttribute("data-marker-top", ma_variable_2);

**Web-Greg** · 28/04/2014, 12h05

Je pense que le probl�me vient du fichier .js du plug in Megazoom qui gere l'affichage de la carte et des marker :

Vous pouvez me dire si vous voyez quelque chose qui pourrait emp�cher l'affichage de variables (en fait autre chose que des nombres) dans cette portion de code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
m=FWDUtils.hasAttribute(h,"data-marker-left");if(!m){r.showMarkerError("data-marker-left",b);return}
m=FWDUtils.hasAttribute(h,"data-marker-top");if(!m){r.showMarkerError("data-marker-top",b);return}
 
m=FWDUtils.hasAttribute(h,"data-marker-width");if(!m){r.showMarkerError("data-marker-width",b);return}m=FWDUtils.hasAttribute(h,"data-marker-height");if(!m){r.showMarkerError("data-marker-height",b);return}m=FWDUtils.hasAttribute(h,"data-show-after-zoom-factor");if(!m){r.showMarkerError("data-show-after-zoom-factor",b);return}l.type=FWDUtils.getAttributeValue(h,"data-marker-type");f=l.type=="link"||l.type=="tooltip"||l.type=="infowindow";if(!f){r.showMarkerTypeError(l.type,b);return}if(FWDUtils.hasAttribute(h,"data-show-content")){if(FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-show-content"))=="no"){y=false}else{y=true}}else{y=true}l.normalStatePath_str=FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-marker-normal-state-path"));l.selectedStatePath_str=FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-marker-selected-state-path"));l.toolTipLabel=FWDUtils.getAttributeValue(h,"data-tool-tip-label")||undefined;
 
l.markerX=(FWDUtils.getAttributeValue(h,"data-marker-left"));if(isNaN(l.markerX))l.markerX=0;
l.markerY=(FWDUtils.getAttributeValue(h,"data-marker-top"));if(isNaN(l.markerY))l.markerY=0;

Merci !

Variable javascript dans une balise <li>

JavaScript

Discussions similaires

Partager

Partager