[Javascript] document.getElementById()

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>

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".

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>

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

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().

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

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

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>

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

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

"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

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

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).

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

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

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

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)