By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,519 Members | 1,209 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,519 IT Pros & Developers. It's quick & easy.

created element won't show up in Safari browser

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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.