DOM and Opera

[Michael Phillips]

Hello

I am trying to use DOM to create an object in a document and wish to be
compativle with Opera

My code is

containerDiv = document.create Element("div"); //create download
container div
containerDiv.se tAttribute("id" , "statusContaine r");
containerDiv.st yle.position = "absolute";
//containerDiv.st yle.left = x + "px";
//containerDiv.st yle.top = y + "px";
containerDiv.st yle.left = 100 + "px";
containerDiv.st yle.top = 100 + "px";
containerDiv.st yle.width = "293px";
containerDiv.st yle.height = "80px";
//containerDiv.st yle.visibility = "hidden";
containerDiv.st yle.borderStyle = "groove";
containerDiv.st yle.borderColor = "#b7b7b7";
containerDiv.st yle.borderWidth = "2px";

(put stuff in div).... and finally......

document.body.a ppendChild(cont ainerDiv);

This works in IE 6+ and gecko, but does not work in Opera ( I currently
have verson 7.11)

I've tried to filter on if (document.creat eElement) but Opera passes the
test.

I've read the Opera support documentation it it seems that this should
work. Can anyone let me know if I am barking up the wrong tree?

Many Thanks

Michael

[Martin Honnen]

Michael Phillips wrote:

I am trying to use DOM to create an object in a document and wish to be
compativle with Opera

My code is

containerDiv = document.create Element("div"); //create download
container div
containerDiv.se tAttribute("id" , "statusContaine r");
containerDiv.st yle.position = "absolute";
//containerDiv.st yle.left = x + "px";
//containerDiv.st yle.top = y + "px";
containerDiv.st yle.left = 100 + "px";
containerDiv.st yle.top = 100 + "px";
containerDiv.st yle.width = "293px";
containerDiv.st yle.height = "80px";
//containerDiv.st yle.visibility = "hidden";
containerDiv.st yle.borderStyle = "groove";
containerDiv.st yle.borderColor = "#b7b7b7";
containerDiv.st yle.borderWidth = "2px";

(put stuff in div).... and finally......

document.body.a ppendChild(cont ainerDiv);

This works in IE 6+ and gecko, but does not work in Opera ( I currently
have verson 7.11)

Try to be more specific, does not work can mean a lot of things. Have
you looked at the JavaScript console, does it show any errors?
Does the div show up in the document? Is content missing?

I have tried your code with Opera 7.20, extended it to put a text node
with some text into the div and after removing the broken comment the
code works without showing errors in the JavaScript console and the div
shows up in the document.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Lasse Reichstein Nielsen]

Michael Phillips <mi********@yah oo.com> writes:

I am trying to use DOM to create an object in a document and wish to be
compativle with Opera
Just follow the W3C DOM and it should work.
containerDiv = document.create Element("div"); //create download
container div
Beware of newsclients wrapping lines. Yours does, so you should always
make sure the code you post is no longer than ~72 characters per line.
containerDiv.se tAttribute("id" , "statusContaine r");
I would just write
containerDiv.id = "statusContaine r";
(put stuff in div).... and finally......
I did that, using:
containerDiv.ap pendChild(docum ent.createTextN ode("XXX"));
and
document.body.a ppendChild(cont ainerDiv);
and it worked in Opera 7.5 (preview) and 7.23 (most recent official release).
I guess the problem is in the (put stuff in div) part.
This works in IE 6+ and gecko, but does not work in Opera ( I currently
have verson 7.11)
I don't have O7.11 installed any more, but I don't see anything in the
code above that I haven't used since 7.0 beta.
I've tried to filter on if (document.creat eElement) but Opera passes the
test.
Yes, it exists and is functional.
I've read the Opera support documentation it it seems that this should
work.
It should.
Can anyone let me know if I am barking up the wrong tree?

Try posting the remainder of the code (or give a link, so you won't
have to worry about lines being wrapped).

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Phillips]

To All

I appreciate the responses. I have loaded 7.2 and get the same results. I
am stumped. I know I must be missing something really obvious, but just
cannot see it.

I posted my source code below. I commented out all the internal stuff. In
Mozilla and IE I do see the div wth boarder. In Opera I see nothing. I
tried eveything I could think of to isolate the error but get no where.

The message in the Opera javascript console is:

Event thread: onload
Error:
name: TypeError
message: Statement on line 74: Expression evaluated to null or undefined and
is not convertible to Object: document.body
Backtrace:
Line 74 of inline#1 script in file://localhost/C:/HTML Projects/Projects
In Development/Walter G Meyer/Sandbox/dltest.htm
document.body.a ppendChild(cont ainerDiv);
At unknown location
{event handler trampoline}

Source code follows:

<head>
<head>
<title>Downlo ad Test Page </title>

<script type="text/javascript" language="javas cript">
function pageInit()
{
containerDiv = document.create Element("div"); //create download container
div
containerDiv.se tAttribute("id" , "statusContaine r");
containerDiv.st yle.position = "absolute";
//containerDiv.st yle.left = x + "px";
//containerDiv.st yle.top = y + "px";
containerDiv.st yle.left = 100 + "px";
containerDiv.st yle.top = 100 + "px";
containerDiv.st yle.width = "293px";
containerDiv.st yle.height = "80px";
//containerDiv.st yle.visibility = "hidden";
containerDiv.st yle.borderStyle = "groove";
containerDiv.st yle.borderColor = "#b7b7b7";
containerDiv.st yle.borderWidth = "2px";

//textImage = document.create Element("img"); //create download text
message image
//textImage.setAt tribute("id", "msgText");
//textImage.src = "./scripts/dlPageMsg.png";

//dotImageOne = document.create Element("img"); //create download text dot
images (3)
//dotImageOne.set Attribute("id", "msgDot_1") ;
//dotImageOne.src = "./scripts/dlPageDot.png";
//dotImageOne.sty le.position = "relative";
//dotImageOne.sty le.top = "4px";
//dotImageOne.sty le.visibility = "hidden";

//dotImageTwo = document.create Element("img");
//dotImageTwo.set Attribute("id", "msgDot_2") ;
//dotImageTwo.src = "./scripts/dlPageDot.png";
//dotImageTwo.sty le.position = "relative";
//dotImageTwo.sty le.top = "4px";
//dotImageTwo.sty le.visibility = "hidden";

//dotImageThree = document.create Element("img");
//dotImageThree.s etAttribute("id ", "msgDot_3") ;
//dotImageThree.s rc = "./scripts/dlPageDot.png";
//dotImageThree.s tyle.position = "relative";
//dotImageThree.s tyle.top = "4px";
//dotImageThree.s tyle.visibility = "hidden";

//statusLine = document.create Element("span") ; //create status text span
//statusLine.setA ttribute("id", "statusMsg" );
//statusLine.styl e.position = "absolute";
//statusLine.styl e.left = "70px";
//statusLine.styl e.top = "50px";
//statusLine.styl e.fontFamily = "arial";
//statusLine.styl e.fontSize = "13px";
//statusLine.styl e.fontWeight = "bold";
//statusLine.inne rHTML = "( ... Image " + currentImage + " of " +
itemArray.lengt h + " ... )";

//containerDiv.ap pendChild(textI mage); //construct download status
graphic
//containerDiv.ap pendChild(dotIm ageOne);
//containerDiv.ap pendChild(dotIm ageTwo);
//containerDiv.ap pendChild(dotIm ageThree);
//containerDiv.ap pendChild(statu sLine);

document.body.a ppendChild(cont ainerDiv); //append download status
graphic to document note: this is line 74
alert("boo");

//flagDL = 1;

}

onload=pageInit ;
</script>

</head>

<body">

</html>
</body>