471,354 Members | 1,187 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,354 software developers and data experts.

created element won't show up in Safari browser

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:

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.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;
showOrHideBox('abox', 'true', color);

// Display (if bool is true) or make invisible (if bool is false) the
// indicated by id (e.g. <div id="id">). If displaying the element,
// 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');">


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!
Jul 23 '05 #1
1 1785
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.
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

27 posts views Thread by Nicholas Couch | last post: by
reply views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.