Essai en DOM qui fonctionne pas..

Version imprimable

Bonjour,

J' essai de créer un DIV en DOM. Cependant cela ne fonctionne ni sous FF ni sous IE.
Je n'ai aucun message d'erreur, bien qu'au vu du résultat j'ai du en faire au moins une.....

Pourriez vous me dire où je me suis trompé ?

Merci

Code:

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
 
<html>
<head>
<script language="JavaScript">
 
	function NewDiv() {
		var Menu = document.createElement('div');
		Menu.id = 'menu';
		Menu.height = '150px';
		Menu.width = '150px';
		Menu.style.backgroundColor = '#B22222';
		Menu.style.top ='150px';
		Menu.style.left='300px';
		Menu.style.display='block';
		Menu.style.position="absolute"
		Menu.style.zIndex="10"
		Menu.style.visibility = "visible";
		document.getElementById("carre").appendChild(Menu);
		alert('OK');
	}
</script>
</head>
<body>
	<div id="carre" style="background-color:red;display:block;width:100px;height:100px;" onclick="NewDiv();">
	</div>
</body>
</html>

16/12/2009, 15h21
vermine
Bonjour,

Dans un autre post du même type, Bovino proposait de mettre cette ligne-ci avant la modification des styles:
Code:

1 2 document.getElementById("carre").appendChild(Menu);
Et peut-être préciser une position pour le div carre.
16/12/2009, 15h25
E.Bzz

Bonjour,
+1 pour vermine.

Citation:

Envoyé par SPACHFR

Je n'ai aucun message d'erreur, bien qu'au vu du résultat j'ai du en faire au moins une.....

Ça dépend : tu vois l'alert() ou pas ?

A+
16/12/2009, 15h35
SPACHFR

Oui je vois bien l'alert.
Je viens de tester en réalisant l'appendChild avant les styles, effectivement le DIV apparait.
ça limite un peu l'intérêt... il n'y a pas d'autre solution ?
16/12/2009, 15h38
E.Bzz

Citation:

Envoyé par SPACHFR

Je viens de tester en réalisant l'appendChild avant les styles, effectivement le DIV apparait.
ça limite un peu l'intérêt... il n'y a pas d'autre solution ?

8O

Visiblement tu ne nous as pas exposé ton véritable problème :mouarf:

A+
16/12/2009, 15h44
SpaceFrog
Code:

1 2 3 Menu.style.height = '150px'; Menu.style.width = '150px';
Attention DOM != HTML
Pour le DOM un div n'as pas de height, c'est une propriété de son style ...
16/12/2009, 15h45
E.Bzz

Exact Spaffy, on a laissé passer ça :aie:

Par contre je crains qu'il n'y ait un autre loup à débusquer ...

A+
16/12/2009, 15h46
SPACHFR

Une petit erreur de ma part, je suis allé trop vite, ça fonctionne pas mieux. Lors d'un copier/coller j'ai laissé le nom du DIV "carre" au lieu de "menu". en fait retour à la case départ.

En fait l'objet de ce petit test est de réaliser un menu sur le click droit de la sourie. J'ai trouvé l'événement : oncontextmenu qui semble gérer cet évènement.
L'idée est sur un click droit, de faire apparaitre un DIV à coté du pointeur de la sourie.
Donc mon premier test c'est de créer un DIV dynamiquement, mais là j'ai visiblement mon premier problème....
16/12/2009, 15h52
SPACHFR

Merci SpaceFrog ça fonctionne tout de suite mieux.....

Je suis limite un boulet sur ce coup là :oops:
(bon à ma décharge je ne suis pas en grand forme.....)

Merci à tous ceux qui m'ont répondu

:merci:

ceci etant créer un div pour une infobulle ....

mieux vaut qu'elle existe déja et la déplacer ...

Code:

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
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
 
	function AffMenu(obj) {
		obj.appendChild(document.getElementById('Menu'))
		document.getElementById('Menu').style.display='block'
 
		}
	function CacheMenu() {
		document.getElementById('Menu').style.display='none'
		}	
</script>
 
 
<style type="text/css">
html, body {height:100%;
			 width:100%;
			 }
#Menu { height : 150px;
		 width : 150px;
		 background-color : #B22222;
		 top :0em;
		 left:7em;
		 display:block;
 		 position:relative;
		 zIndex:100;
		 display:none;
 
</style>
 
 
</head>
<body>
<div id="Menu">&nbsp;</div>
	<div id="carre" style="background-color:red;display:block;width:100px;height:100px;" onmouseover="AffMenu(this);" onmouseout="CacheMenu()">
	</div>
	<div id="rond" style="background-color:blue;display:block;width:100px;height:100px;" onmouseover="AffMenu(this);" onmouseout="CacheMenu()">
	</div>
 
</body>
</html>

16/12/2009, 16h11
SpaceFrog

sinon au lieu de vouloir réinventer l'eau tiède ... y'a tout ce qu'il faut du coté de walterzon
16/12/2009, 16h21
SPACHFR

Merci pour cette précision

Je vais y faire un tour.
Je me forme seul aux techno Web, je pers pas mal de temps et je me pers souvent sur les différentes normes et terminologies.
Je suis parti de zéro il y a quelques mois (j'avais jamais codé la moindre balise HTML).

C'est certain d'avec une petite formation bien ciblée je gagnerai du temps.
Pour le moment l'essentiel de ma formation est ce que j'ai pu apprendre via ce forum.

Ps:
Mon Div apparait bien maintenant et au niveau de la sourie le plus dur est fait...