472,804 Members | 1,165 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

created element won't show up in Safari browser

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
1 1872
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

27
by: Nicholas Couch | last post by:
I have a little form with a couple of dynamically generated list boxes. When the user makes a selection from the first box, the second box is refreshed. When they make a selection from the second...
21
by: Michael Bierman | last post by:
Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does...
6
by: NoCopy na | last post by:
Using the following example: domiframetest.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
7
by: Lau Lei Cheong | last post by:
Hello, I'm using javascript's insertAdjacentHtml() to insert images to the webform at runtime. This runs fine(image successfully displayed at the browser) but when I tried to access the...
3
by: Arodicus | last post by:
This is bugging me: how do I reference the topmost node (HTML) within a document? I'd like to set a class on it, which specifies various browser/os/versions so that several...
6
by: raknin | last post by:
I am creating a dynamic list on the server using php file,when I run the PHP script in all 4 browsers (IE 6, Firefox 2, opera and safari 3) every think go Ok and the list is created. but when I call...
5
tjc0ol
by: tjc0ol | last post by:
Hi all, I made contact page which allows visitors to input their name, email address, phone number, comments and select a comment type by using <select> element in html with javascript. Among the...
6
by: liketofindoutwhy | last post by:
It seems that iPhone 3G will not show the scrollbar for the following simple page: http://www.0011.com/html/test-iphone.html so if you are looking at the page using an iPhone, then you are...
5
by: thatcollegeguy | last post by:
Below are my 3php and 2js files. I create a table using ajax/php and then want to change the values in the tables add(+ number for teamid) id's for each specific td in the table. I don't know...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: lllomh | last post by:
How does React native implement an English player?
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

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.