DOM and Opera

Discussion in 'Javascript' started by Michael Phillips, Jan 19, 2004.

  1. 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
    Michael Phillips, Jan 19, 2004
    #1
    1. Advertising

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

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Jan 19, 2004
    #2
    1. Advertising

  3. Michael Phillips <> 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.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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jan 19, 2004
    #3
  4. 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>
    </body>


    >
    Michael Phillips, Jan 20, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thorsten Meininger
    Replies:
    0
    Views:
    421
    Thorsten Meininger
    Jul 28, 2004
  2. Bob
    Replies:
    24
    Views:
    1,508
  3. Reinhold Schrecker
    Replies:
    2
    Views:
    142
    Reinhold Schrecker
    Jun 7, 2006
  4. Javascript DOM Opera vs IE

    , Jul 27, 2006, in forum: Javascript
    Replies:
    2
    Views:
    93
  5. Jorge
    Replies:
    3
    Views:
    125
    Gregor Kofler
    Jul 2, 2008
Loading...

Share This Page