Sujet Précédent Sujet Suivant

[Javascript] document.getElementById()

Fermé
MoI - 2 janv. 2006 à 02:22
 MoI - 4 janv. 2006 à 01:44
Bonjours

j'aimerai que quand je clique sur un layer (calque) ça me donne son ID
(la fonction qui permet de l'avoir)
je vous remerci :p

17 réponses

Réponse 1 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 15:23
Essaye déjà en mettant le onclick="testClick('MonLayer01')" sur la balise div : 
<div id="MonLayer01" onclick="testClick('MonLayer01')"><table><tr><td></td></tr></table></div>
4
Réponse 2 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 08:55
Tu doit avoir un code HTML du genre : 
<div id="monId" onclick="getId(this)">
</div>

et une fonction javascript : 
function getId(layer){
  alert(layer.id);
}


Parce que pour avoir l'id d'un objet, il suffit de faire "objet.id".
4
Réponse 3 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 16:06
J'ai fait les modifications suivante :
en début du code pense à définir la variable LayerId : 
LayerID=null;

dans la fonction testClick(), quand tu récupère les positions, tu les as de la forme "10px". Il faut les transformer en entier : 
base_x = x-parseInt(document.getElementById(LayerID).style.left);
base_y = y-parseInt(document.getElementById(LayerID).style.top);

Dans la foinction get_mouse, il faut tester si le LayerID est valide, (sinon erreur qui peut ralentir le navigateur, ou stoper le script): 
if(document.getElementById(LayerID)){

Ce qui donne: 
<script>
clickOui = false;
bloc_x=10;
bloc_y=10;
LayerID=null;
function testClick(MonLayer){
  LayerID = MonLayer;
  base_x = x-parseInt(document.getElementById(LayerID).style.left);
  base_y = y-parseInt(document.getElementById(LayerID).style.top);
  clickOui = true;
}
function testClick2(){
  clickOui = false;
}


function get_mouse(e){
	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	if(clickOui && document.getElementById){
  	bloc_x = x-base_x;
  	bloc_y = y-base_y;
	}
	if(document.getElementById(LayerID)){
    document.getElementById(LayerID).style.left = bloc_x;
    document.getElementById(LayerID).style.top = bloc_y;
  }
}
if(navigator.appName.substring(0,3) == "Net"){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = get_mouse;
</script>
<div id="MonLayer01" style="position:absolute; left:10px; top:20px;"><table><tr><td onmousedown="testClick('MonLayer01')" onmouseup="testClick2()">MoVE ME 1</td></tr></table></div>
<div id="MonLayer02" style="position:absolute; left:100px; top:20px;"><table><tr><td onmousedown="testClick('MonLayer02')" onmouseup="testClick2()">MoVE ME 2</td></tr></table></div>
2
Réponse 4 / 17
MoI
2 janv. 2006 à 14:57
Merci ;)

mais perso j'ai un probleme:

<script>
document.write('<style type="text/css">\nA.ejsmenu { color:#000000;text-decoration:none }\n</style>')
document.write('<DIV id=menu_dep STYLE="position:absolute; top:10; left:10"><TABLE BORDER=0 CELLPADDING=1 CELLSPACING=2 WIDTH=150>')
document.write('<TR><TD BGCOLOR=#000000 onMouseDown="testClick()" onMouseUp="testClick2()" style="cursor:move"><FONT SIZE=2 face="Verdana" COLOR=#FFCC00><B>Menu</B></FONT></TD></TR>')
document.write('</TR><TR><TD BGCOLOR=#9FB1D8 NOWRAP><FONT SIZE=2 face="Verdana"> <A HREF=test CLASS=ejsmenu>Lien 1 </A></FONT> </TD></TR></TABLE></DIV>')

clickOui = false;
bloc_x = 10;
bloc_y = 10;

function testClick() {
base_x = x-bloc_x;
base_y = y-bloc_y;
clickOui=true;
}
function testClick2() {
clickOui=false;
}


function get_mouse(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
if(clickOui && document.getElementById)
{
bloc_x = x-base_x;
bloc_y = y-base_y;
}
document.getElementById("menu_dep").style.left = bloc_x
document.getElementById("menu_dep").style.top = bloc_y
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
</script>

un script tout près de chez editeurjavascript
et le probleme c'est que si je porte les modifies à ça:

<script>
clickOui = false;
bloc_x = 10;
bloc_y = 10;

function testClick(MonLayer) {
LayerID = MonLayer;
base_x = x-bloc_x;
base_y = y-bloc_y;
clickOui=true;
}
function testClick2() {
clickOui=false;
}


function get_mouse(e, LayerID)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
if(clickOui && document.getElementById)
{
bloc_x = x-base_x;
bloc_y = y-base_y;
}
document.getElementById(LayerID).style.left = bloc_x
document.getElementById(LayerID).style.top = bloc_y
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
</script>
<div id="MonLayer01"><table><tr><td onclick="testClick('MonLayer01')"></td></tr></table></div>

bah ça marche pas :s

pourtant dans la fonction get_mouse j'ai bien mi LayerID :s je comprend pas...

je vous remerci d'avance :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 15:07
J'ai pas regarder tout ton code mais il y a déjà un probleme ici (à la fin de ton code): 
<div id="MonLayer01"><table><tr><td onclick="testClick('MonLayer01')"></td></tr></table></div>

Ta fonction testClick ne marche que lorsque 'on clique sur une cellule du tableau et non pas sur le layer. On ne pas reprendre l'id aussi facliement.

Dans ta fonction get_mouse(), je pense pas qu'il faille mettre LayerID en parametre (il ne sera pas pris en compte), et de tout facon tu le met en variable global dans la fonction testClick().
0
Réponse 6 / 17
MoI
2 janv. 2006 à 15:20
Donc là :s je suis blocké :s pour que ça marche je deverais faire comment?

j'ai qu'une vague notion du javascript, là je suis blocké...

je te remerci encore pour t'es réponce
0
Réponse 7 / 17
MoI
2 janv. 2006 à 15:30 
<script>
clickOui = false;
bloc_x = 10;
bloc_y = 10;

function testClick(MonLayer) {
        LayerID = MonLayer;
		base_x = x-bloc_x;
		base_y = y-bloc_y;
		clickOui=true;
	}
function testClick2() {
		clickOui=false;
	}


function get_mouse(e, LayerID)
	{
	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	if(clickOui && document.getElementById)
		{
		bloc_x = x-base_x;
		bloc_y = y-base_y;
		}
	document.getElementById(LayerID).style.left = bloc_x
  	document.getElementById(LayerID).style.top = bloc_y
	}
if(navigator.appName.substring(0,3) == "Net")
	document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
</script>
<div id="MonLayer01" onclick="testClick('MonLayer01')"><table><tr><td>MoVE ME</td></tr></table></div>


Voilà mais ça ne fonctionne toujours pas...
0
Réponse 8 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 15:41
J'ai retouché un peu le code et je l'ai testé sous firefox, ca marche (par contre je t'ai dit une bétise, faut laisser le onclick a ca place) : 

<script>
clickOui = false;
bloc_x = 10;
bloc_y = 10;
var LayerID=null;
function testClick(MonLayer){
  LayerID = MonLayer;
  base_x = x-bloc_x;
  base_y = y-bloc_y;
  clickOui=!clickOui;
}
function testClick2(){
  clickOui=false;
}


function get_mouse(e){
	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	if(clickOui && document.getElementById){
  	bloc_x = x-base_x;
  	bloc_y = y-base_y;
	}
	if(document.getElementById(LayerID)){
    document.getElementById(LayerID).style.left = bloc_x
    document.getElementById(LayerID).style.top = bloc_y
	}
}
if(navigator.appName.substring(0,3) == "Net"){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = get_mouse;
</script>
<div id="MonLayer01" style="position:absolute;"><table><tr><td onclick="testClick('MonLayer01')">MoVE ME</td></tr></table></div>
0
Réponse 9 / 17
MoI
2 janv. 2006 à 15:55
Merci ça marche nickel ;)
mais je vouderai rajouté des layers
donc pour les positions :s voilà le code: 
<script>
clickOui = false;

function testClick(MonLayer){
  LayerID = MonLayer;
  base_x = x-document.getElementById(LayerID).style.left;
  base_y = y-document.getElementById(LayerID).style.top;
  clickOui = true;
}
function testClick2(){
  clickOui = false;
}


function get_mouse(e){
	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	if(clickOui && document.getElementById){
  	bloc_x = x-base_x;
  	bloc_y = y-base_y;
	}
    document.getElementById(LayerID).style.left = bloc_x
    document.getElementById(LayerID).style.top = bloc_y
}
if(navigator.appName.substring(0,3) == "Net"){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = get_mouse;
</script>
<div id="MonLayer01" style="position:absolute; left:10px; top:20px;"><table><tr><td onmousedown="testClick('MonLayer01')" onmouseup="testClick2()">MoVE ME 1</td></tr></table></div>
<div id="MonLayer02" style="position:absolute; left:100px; top:20px;"><table><tr><td onmousedown="testClick('MonLayer02')" onmouseup="testClick2()">MoVE ME 2</td></tr></table></div>


donc ça ne fonctionne pas pourtant document.getElementById(LayerID).style.top deverai donnée une position...

Voilà je te remerci encore pour ton aide :)
0
Réponse 10 / 17
MoI
2 janv. 2006 à 16:13
Bon bah voilà, un SUPER MEGA MERCI :)
grace à toi je vais pouvoir faire des fenetres qui bouge dans une page :)

encore merci :) juste une dernière question:
tu sais comment on peux faire pour agrandir? (les fonctions)

ou à tu un site avec toute les référence javascript? (j ai regardé y en à pas qui donne toute les reference (comme parseInt()) :)

je te remerci encore, :)
0
Réponse 11 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 16:16
"tu sais comment on peux faire pour agrandir? (les fonctions)"
J'ai du mal à comprendre la question !

Pour ce qui est des référence Javascript, j'ai pas de site à te donner, j'en connait pas de vraiment bien. Par contre il existe des bouquin qui ont ce qu'il faut. Comme "Javascript la référence" de O'reilly
0
Réponse 12 / 17
MoI
2 janv. 2006 à 16:41
Bon bah demain ;) je vais a la FNAC :)

Pour ce qui est d'agrandir :) c'est le layer :)
y'a left et top pour les positions, je pense qu'il y a un truc comme width et height pour la largeur et hauteur du layer :)

sinon franchement je te remerci :) tien: http://www.walterzorn.com/dragdrop/demos/demos.htm si tu veux regardé rapidement une bibliotheque simpa que tu me fais pas utilisé grace à toi :)

je te remerci :)
0
Réponse 13 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 16:46
Effectivment pour la taille du layer faut faire la même chose mais avec height et width.

Sion, c'est pas mal les exemples fournit. Parc ontre pour ce qui est de la fenetre, j'avais fait presque la même chose (sans le buoton pour réduirela fenetre). Par contre j'avais fait en sorte que ce soit grace à n'importe quel bord que le'on puisse redimmentioner la fenetre (comme windows quoi).
0
Réponse 14 / 17
MoI
2 janv. 2006 à 17:15
Pour que ce sois tout les bords? tu fais comment?

j'aurais une petite dernière question, sur getElementById() y'a pas moyen de savoir le nom de tout les elements sur la page?

j'ai une dernière chose aussi en parlant de la fenetre,
faire que quand on prend le layer ça fasse une chose comme ça:http://www.walterzorn.com/dragdrop/demos/dnd_trackingimg.htm

(comme google personnaliser et http://www.live.com/)
merci :)
0
Réponse 15 / 17
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 387
2 janv. 2006 à 17:22
Pour faire le redimendionnement sur tout les bords, j'ai créer des calques (div) qui sont collé à chaque bords et c'est lorsque l'on clique sur l'un d'eux que l'on fait le redimentionnment (marche très bien sous Firefox, pas sous IE mais je suis dessus).

Pour le fait de faire que le l'image soit transparente, je sais pas trps comment on le fait. Il existe une magouille avec IE mais je sais pas avec Firefox.

Pour récupérer le nom de tout les élément d'une page. Tu peut pas, par contre le nom de toutes les DIV, ca tu peut : 
document.getElementsByTagName('DIV');

Ce qui te renvoie un tableau avec toutes les DIV de la page. Apres tu fait une petite boucle dessus pour avoir l'id : 
var tab_div=document.getElementsByTagName('DIV');
for(var i=0;i<tab_div.length;i+){
  alert(tab_div[i].id);
}
0
Réponse 16 / 17
MoI
2 janv. 2006 à 17:32
Voilà http://config.lan.free.fr/ccm/

la ça enregistre les configs selon les adresse IP...

Tien, voilà ce que j'ai fais avec la librairie wz_dragdrop.js

c'est en cours mais je preférerai faire plus simple (avec un script que je fais moi même...)

je te remerci encore ;) pour ton aide sur les Element de pages :)

maintenant j'ai plus qu'a cherché a faire que quand on clique ça recrée l'elements et qu'il s'efface quand on lache le click...

merci
0
Réponse 17 / 17
MoI
4 janv. 2006 à 01:44
Voilà ;)

grâce à toi j'ai réussi la première parti de ce que je voulais faire ;)

tien pour la transparence ;) http://www.javascriptkit.com/dhtmltutors/opacityns6.shtml

document.getElementById('DIV').style.MozOpacity=0.5; (de 0 à 1)

je te remerci encore ;) (mais jamais trop :p)
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
java activée mais ne fonctionne pas !
chating -
chating -

4 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses