IE <object> javascript issue

jayo99

Hi Guys,

I have the following piece of code..

<object width="640" height="385">
 <param name="movie" value="http://www.youtube.com/v/Tuf61OjvoPQ&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1"></param>
 <div>You need Adobe Flash Player to watch this video. </div>
</object>

which works in IE and displays the message "You need Adobe Flash Player to watch this video" if flash is not installed, however when I converted this to javascript/DOM code, I got something like the following -

var divToInsertInto = document.getElementById("idofdivtoInsertInto");

var oOBJECT0 = divToInsertInto.appendChild(document.createElement("object"));
oOBJECT0.setAttribute("width", "640");
oOBJECT0.setAttribute("height","385");

var pParam0= document.createElement("param");
pParam0.setAttribute("name", "movie");
pParam0.setAttribute("value", "http://www.youtube.com/v/Tuf61OjvoPQ&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1");
oOBJECT0.appendChild(pParam0);

var pDiv0= document.createElement("div");
pDiv0.appendChild (document.createTextNode("You need Adobe Flash Player to watch this video."));
oOBJECT0.appendChild(pDiv0);

When I view this is IE, all I get is a small red x in the top corner of the frame where the movie should be instead of the text informing me I need flash.

Is there something peculiar about IE which means you can only add params as children and not divs, spans or text?

Cheers
jayo

mewso

I'd have to go look at quirksmode but I haven't got time at the moment but there are issues with setAttribute. One thing you could try is appending the whole thing at the end instead of the beginning as that can also be a problem in IE:-

var divToInsertInto = document.getElementById("idofdivtoInsertInto");

[B]var oOBJECT0 = document.createElement("object");[/B]
oOBJECT0.setAttribute("width", "640");
oOBJECT0.setAttribute("height","385");

var pParam0= document.createElement("param");
pParam0.setAttribute("name", "movie");
pParam0.setAttribute("value", "http://www.youtube.com/v/Tuf61OjvoPQ&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1");
oOBJECT0.appendChild(pParam0);

var pDiv0= document.createElement("div");
pDiv0.appendChild (document.createTextNode("You need Adobe Flash Player to watch this video."));
oOBJECT0.appendChild(pDiv0);

[B]divToInsertInto.appendChild(oOBJECTO);[/B]

jayo99

Hey Mewso,

I had already tried what you suggested, but it didnt work either.
In the end, for IE, I just created the object in the div using innerhtml= "objectcode.."

Ugly I know... and I know the conerns about innerhtml and memory leaks, but I needed to get something working in damn IE.

Cheers
Jayo