High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

[Javascript] document.getElementById()

Dernière réponse le 4 jan 2006 à 01:44:21 MoI, le 2 jan 2006 à 02:22:36 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [Javascript] document.getElementById() » dans :
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - La notion d'objet VoirNotion d'objet Le but de cette section n'a pas pour ambition de traîter de la programmation orientée objet mais de donner une idée de ce qu'est un objet, concept nécessaire à la création de scripts Javascript. Le Javascript traite les éléments qui...
Javascript: les méthodes associées aux objets VoirQu'appelle-t-on une méthode? Une méthode est une fonction associée à un objet, c'est-à-dire une action que l'on peut faire exécuter à un objet. Les méthodes des objets du navigateur sont des fonctions définies à l'avance par les normes HTML, on ne...
Posez votre question Répondre

1

GallyNet, le 2 jan 2006 à 08:55:41

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

   
Répondre à GallyNet

2

MoI, le 2 jan 2006 à 14:57:58

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

   
Répondre à MoI

3

GallyNet, le 2 jan 2006 à 15:07:01

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

   
Répondre à GallyNet

4

MoI, le 2 jan 2006 à 15:20:54

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

   
Répondre à MoI

5

GallyNet, le 2 jan 2006 à 15:23:53
  • +3

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>

   
Répondre à GallyNet

6

MoI, le 2 jan 2006 à 15:30:49

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

   
Répondre à MoI

7

GallyNet, le 2 jan 2006 à 15:41:54

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>

   
Répondre à GallyNet

8

MoI, le 2 jan 2006 à 15:55:29

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

   
Répondre à MoI

9

GallyNet, le 2 jan 2006 à 16:06:05

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>

   
Répondre à GallyNet

10

MoI, le 2 jan 2006 à 16:13:23

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

   
Répondre à MoI

11

GallyNet, le 2 jan 2006 à 16:16:50

"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

   
Répondre à GallyNet

12

MoI, le 2 jan 2006 à 16:41:01

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

   
Répondre à MoI

13

GallyNet, le 2 jan 2006 à 16:46:47

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

   
Répondre à GallyNet

14

MoI, le 2 jan 2006 à 17:15:10

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

   
Répondre à MoI

15

GallyNet, le 2 jan 2006 à 17:22:55

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

   
Répondre à GallyNet

16

MoI, le 2 jan 2006 à 17:32:03

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

   
Répondre à MoI

17

 MoI, le 4 jan 2006 à 01:44:21

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)

   
Répondre à MoI
Posez votre question Répondre
Ils ont besoin de votre aide