Essai en DOM qui fonctionne pas..

**SPACHFR** · 16/12/2009, 15h19

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 :

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

**vermine** · 16/12/2009, 15h21

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("carre").appendChild(Menu);

Et peut-être préciser une position pour le div carre.

**E.Bzz** · 16/12/2009, 15h25

Bonjour,
+1 pour vermine.

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+

**SPACHFR** · 16/12/2009, 15h35

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 ?

**E.Bzz** · 16/12/2009, 15h38

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 ?

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

A+

**SpaceFrog** · 16/12/2009, 15h44

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**E.Bzz** · 16/12/2009, 15h45

Exact Spaffy, on a laissé passer ça

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

A+

**SPACHFR** · 16/12/2009, 15h46

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

**SPACHFR** · 16/12/2009, 15h52

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

Je suis limite un boulet sur ce coup là

(bon à ma décharge je ne suis pas en grand forme.....)

Merci à tous ceux qui m'ont répondu

**SpaceFrog** · 16/12/2009, 16h07

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

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

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

**SpaceFrog** · 16/12/2009, 16h11

sinon au lieu de vouloir réinventer l'eau tiède ... y'a tout ce qu'il faut du coté de walterzon

**SPACHFR** · 16/12/2009, 16h21

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

Essai en DOM qui fonctionne pas..

JavaScript

Discussions similaires

Partager

Partager