created element won't show up in Safari browser

Discussion in 'Javascript' started by liberty, Sep 29, 2004.

  1. liberty

    liberty Guest

    Hi,
    I have looked everywhere to try and solve my problem-- looked at W3C
    DOM Compatibility charts, read articles, tried debuggers, and still my
    script is not working.
    The problem I have is this. I am working on a script that dynamically
    generates maps with research sites that show up when selected from a
    pulldown list. The sites show up in every browser except for Safari,
    and I can't figure out why. I have made a simple function that
    illustrates what I want to do, and this still doesn't work in Safari.
    I call it in my html file by using a button. Pressing the button
    should cause a colored box to show up on top of the map layer. Here
    is the script:

    <snip>
    function drawABox(color) {
    var parent=document.getElementById("groupsBox");
    var sitebox = document.createElement("div");
    var imagefill = document.createElement("img");
    imagefill.setAttribute("src", "/images/site.png");
    sitebox.appendChild(imagefill);
    sitebox.setAttribute("id", "abox");
    sitebox.setAttribute("class", "site");
    sitebox.style.visibility = "visible";
    sitebox.style.position = "absolute";
    sitebox.style.left = "100px";
    sitebox.style.top = "100px";
    sitebox.style.right = "100px";
    sitebox.style.bottom = "100px";
    sitebox.style.width = "40px";
    sitebox.style.height = "40px";
    sitebox.style.borderStyle = "solid";
    sitebox.style.borderWidth = "thick";
    sitebox.style.color = color;
    parent.appendChild(sitebox);
    showOrHideBox('abox', 'true', color);
    }

    // Display (if bool is true) or make invisible (if bool is false) the
    element
    // indicated by id (e.g. <div id="id">). If displaying the element,
    this
    // function sets the border-color style to color.
    function showOrHideBox (id, bool, color) {
    var box = document.getElementById(id);
    if (color) {
    box.style.borderColor = color;
    }
    if (bool) {
    box.style.visibility = 'visible';
    } else {
    box.style.visibility = 'hidden';
    }
    }

    .................
    Then the HTML is like this:
    <input type="button" value="red box!" onClick="drawABox('red');">

    </snip>

    If anyone could tell me if this is fixable, or whether it's a bug in
    Safari, or anything to help, I would greatly appreciate it.
    Thanks in advance!
    Liberty
     
    liberty, Sep 29, 2004
    #1
    1. Advertising

  2. liberty

    liberty Guest

    I guess I spoke too soon. It turns out that Safari doesn't like
    putting things in hidden <div>s. So I set the attributes of each to
    visible, and it worked.
     
    liberty, Sep 30, 2004
    #2
    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. HANM
    Replies:
    2
    Views:
    729
    Joseph Kesselman
    Jan 29, 2008
  2. David M. Gauntt
    Replies:
    1
    Views:
    130
    Thomas 'PointedEars' Lahn
    Aug 11, 2004
  3. ted benedict
    Replies:
    3
    Views:
    147
  4. Replies:
    2
    Views:
    405
  5. Replies:
    13
    Views:
    288
    Laurent Bugnion
    Oct 11, 2006
Loading...

Share This Page