[DOM] construction DOM pour IE

Version imprimable

bonjour,

Voici un bout de code qui marche sous firefox mais pas sur IE....

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
44
45
46
47
48
49
50
51
52
53
54
55
56
 
function centrageFlashContour (type,flashwidth,flashheight)
{
 
	var flash = document.createElement("DIV");
	flash.style.position = "absolute";
	flash.style.width = flashwidth+"px";
	flash.style.height = flashheight+"px";
	flash.style.zIndex = 1;
 
	if( type == 1 ) //en haut à gauche
	{
		flash.style.left = 200+"px";
		flash.style.top = 100+"px";
	}
	if( type == 2 ) //en haut à droite
	{
		flash.style.right = 200+"px";
		flash.style.top = 100+"px";
	}
	if( type == 3 ) //en bas à droite
	{
		flash.style.right = 200+"px";
		flash.style.bottom = 100+"px";
	}
	if( type == 4 ) //en bas à gauche
	{
		flash.style.left = 200+"px";
		flash.style.bottom = 100+"px";
	}
 
	flash.style.backgroundColor = "yellow";
	document.body.appendChild(flash);
 
	var baliseObject = document.createElement("object");
	baliseObject.setAttribute("type","application/x-shockwave-flash");
	baliseObject.setAttribute("data","blclock.swf");
	baliseObject.setAttribute("width","200");
	baliseObject.setAttribute("height","200");
	flash.appendChild(baliseObject);
 
	var baliseParam1 = document.createElement("param");
	baliseParam1.setAttribute("name","movie");
	baliseParam1.setAttribute("value","blclock.swf");
	baliseObject.appendChild(baliseParam1);
 
	var baliseParam2 = document.createElement("param");
	baliseParam2.setAttribute("name","wmode");
	baliseParam2.setAttribute("value","transparent");
	baliseObject.appendChild(baliseParam2);
 
	var baliseParam3 = document.createElement("param");
	baliseParam3.setAttribute("name","quality");
	baliseParam3.setAttribute("value","high");
	baliseObject.appendChild(baliseParam3);
}

Avec Firefox 2.0 j'obtiens bien l'affichage de mon swf, alors qu'avec IE j'obtient un carré blanc.... (trouve pas l'image a priori)

Je comprends plus...J'ai look la FAQ sur les différence d'interprétation entre IE et Firefox mais je pense pas qu'elle s'applique a mon cas..

Quelqu'un a til une idée ?

Merci en tout cas !!

20/11/2006, 12h10
denisC
Citation:

Envoyé par sebus

Quelqu'un a til une idée ?

Utilise FFx :aie:

Non, sérieusement, la création d'élements compliqué avec IE, ça doit se faire brutalement. Du style:
Code:

1 2 3 var baliseObject = document.createElement("<object type='application/x-shockwave-flash' data='blclock.swf' width='200' height='200'>"); flash.appendChild(baliseObject);
Avec un peu de chance, ça devrait marcher avec IE (mais pas avec FFx, bien entendu ça serait trop simple). Voila au moins une piste de solution (fait pareil avec les params).

Bonne chance!

IE a du mal avec le setAttribute.

Tu peux faire comme ça sinon :
Code:

1 2 3 4 var baliseObject = document.createElement("object"); baliseObject.type = "application/x-shockwave-flash"; baliseObject.data = "blclock.swf"; etc..

20/11/2006, 12h26
sebus

Ben mon probleme c'est qu'il faut que cela marche sur Firefox et IE .....

Déja pour centrer un block, j'utilise un test parceque les 2 navigateurs réagissent pas pareil....
Donc je suis près a faire de meme pour cette fonction...

Mais la pour l'instant avec la modif de bisûnûrs, ca marche toujours sur Firefox mais pas sous IE....

:'(
20/11/2006, 12h43
denisC

Citation:

Envoyé par sebus

Ben mon probleme c'est qu'il faut que cela marche sur Firefox et IE .....

Déja pour centrer un block, j'utilise un test parceque les 2 navigateurs réagissent pas pareil....
Donc je suis près a faire de meme pour cette fonction...

Mais la pour l'instant avec la modif de bisûnûrs, ca marche toujours sur Firefox mais pas sous IE....

:'(

Essaye de contourner ton problème sous IE (si c'est faisable). Ensuite, la compatibilité, ça ira vite :)

Bon je pense que j'ai une méthode pourcontourner sous IE.

Idée: je positionne mon image avec un style du genre:
Code:

1 2 <div id="flash" style="position: absolute; width: 200px; height: 200px; top: -500px; left: -500px; display:none">
puis quand j'ai besoin de l'image je fait
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 function placementFlash (type,flashwidth,flashheight) { var flash = document.getElementById("flash") flash.style.display = "inline"; if( type == 1 ) //en haut à gauche { flash.style.left = 200+"px"; flash.style.top = 100+"px"; } if( type == 2 ) //en haut à droite { flash.style.left = 800+"px"; flash.style.top = 100+"px"; } if( type == 3 ) //en bas à droite { flash.style.left = 800+"px"; flash.style.top = 400+"px"; } if( type == 4 ) //en bas à gauche { flash.style.left = 200+"px"; flash.style.top = 400+"px"; } }
OK c cool, ca marche sous IE, par contre cette méthode marche pas sous FireFox !!!
Je deviens dingue !!!

Quelqu'un peut il me dire pourquoi ca marche pas sous FireFox (encore un probleme de DOM ?)

Bon ben sinon, je vais monter une version hybride des 2 solutions....

20/11/2006, 16h29
Bisûnûrs
Heu, fais tout simplement comme ça :
Code:

1 2 flash.style.left = "200px"; flash.style.top = "100px";
:question:

voici le code modifié:
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 function placementFlash (type) { var flash = document.getElementById("flash") flash.style.display = "inline"; if( type == 1 ) { flash.style.left = "200px"; flash.style.top = "100px"; } else if( type == 2 ) { flash.style.left = "600px"; flash.style.top = "100px"; } else if( type == 3 ) { flash.style.left = "600px"; flash.style.top = "350px"; } else if( type == 4 ) { flash.style.left = "200px"; flash.style.top = "350px"; } }
Ca marche sous IE mais toujours pas sous firefox !!!

J'ai meme fait un test qui me mettais une boite d'alerte avec alert(flash.style.position) et ca marchait sur Firefox !!!!!! (me retournait le bon résultat !!)

Je pige plus rien.....il devrais donc me les trouver les style.left et compagnie !!!