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.createElement("div"); //create download
container div
containerDiv.setAttribute("id", "statusContainer");
containerDiv.style.position = "absolute";
//containerDiv.style.left = x + "px";
//containerDiv.style.top = y + "px";
containerDiv.style.left = 100 + "px";
containerDiv.style.top = 100 + "px";
containerDiv.style.width = "293px";
containerDiv.style.height = "80px";
//containerDiv.style.visibility = "hidden";
containerDiv.style.borderStyle = "groove";
containerDiv.style.borderColor = "#b7b7b7";
containerDiv.style.borderWidth = "2px";

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

document.body.appendChild(containerDiv);

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.createElement) 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]

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.createElement("div"); //create download
container div
containerDiv.setAttribute("id", "statusContainer");
containerDiv.style.position = "absolute";
//containerDiv.style.left = x + "px";
//containerDiv.style.top = y + "px";
containerDiv.style.left = 100 + "px";
containerDiv.style.top = 100 + "px";
containerDiv.style.width = "293px";
containerDiv.style.height = "80px";
//containerDiv.style.visibility = "hidden";
containerDiv.style.borderStyle = "groove";
containerDiv.style.borderColor = "#b7b7b7";
containerDiv.style.borderWidth = "2px";

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

document.body.appendChild(containerDiv);

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.

 

[Lasse Reichstein Nielsen]

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.createElement("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.setAttribute("id", "statusContainer");

I would just write
containerDiv.id = "statusContainer";

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

I did that, using:
containerDiv.appendChild(document.createTextNode("XXX"));
and

document.body.appendChild(containerDiv);

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

 

[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.appendChild(containerDiv);
At unknown location
{event handler trampoline}

Source code follows:

<head>
<head>
<title>Download Test Page </title>

<script type="text/javascript" language="javascript">
function pageInit()
{
containerDiv = document.createElement("div"); //create download container
div
containerDiv.setAttribute("id", "statusContainer");
containerDiv.style.position = "absolute";
//containerDiv.style.left = x + "px";
//containerDiv.style.top = y + "px";
containerDiv.style.left = 100 + "px";
containerDiv.style.top = 100 + "px";
containerDiv.style.width = "293px";
containerDiv.style.height = "80px";
//containerDiv.style.visibility = "hidden";
containerDiv.style.borderStyle = "groove";
containerDiv.style.borderColor = "#b7b7b7";
containerDiv.style.borderWidth = "2px";

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

//dotImageOne = document.createElement("img"); //create download text dot
images (3)
//dotImageOne.setAttribute("id", "msgDot_1");
//dotImageOne.src = "./scripts/dlPageDot.png";
//dotImageOne.style.position = "relative";
//dotImageOne.style.top = "4px";
//dotImageOne.style.visibility = "hidden";

//dotImageTwo = document.createElement("img");
//dotImageTwo.setAttribute("id", "msgDot_2");
//dotImageTwo.src = "./scripts/dlPageDot.png";
//dotImageTwo.style.position = "relative";
//dotImageTwo.style.top = "4px";
//dotImageTwo.style.visibility = "hidden";

//dotImageThree = document.createElement("img");
//dotImageThree.setAttribute("id", "msgDot_3");
//dotImageThree.src = "./scripts/dlPageDot.png";
//dotImageThree.style.position = "relative";
//dotImageThree.style.top = "4px";
//dotImageThree.style.visibility = "hidden";

//statusLine = document.createElement("span"); //create status text span
//statusLine.setAttribute("id", "statusMsg");
//statusLine.style.position = "absolute";
//statusLine.style.left = "70px";
//statusLine.style.top = "50px";
//statusLine.style.fontFamily = "arial";
//statusLine.style.fontSize = "13px";
//statusLine.style.fontWeight = "bold";
//statusLine.innerHTML = "( ... Image " + currentImage + " of " +
itemArray.length + " ... )";

//containerDiv.appendChild(textImage); //construct download status
graphic
//containerDiv.appendChild(dotImageOne);
//containerDiv.appendChild(dotImageTwo);
//containerDiv.appendChild(dotImageThree);
//containerDiv.appendChild(statusLine);

document.body.appendChild(containerDiv); //append download status
graphic to document note: this is line 74
alert("boo");

//flagDL = 1;

}

onload=pageInit;
</script>

</head>

<body">

</html>