PDA

View Full Version : JavaScript not working in FireFox, IE and Safari OK

EmC
2006-04-05, 19:49
I am trying to use JavaScript to alternate the visibility of two divs on my pages. So far i have this code,

<script language="JavaScript">
function toggleVisibility(hide, show){
show.style.visibility="visible";
hide.style.visibility="hidden";

}

function hideOnLoad(hide){
hide.style.visibility="hidden";
}
</script>


I have two images one named Artifact 1 and the other Artifact 2. When I click them I want them to show the appropriate div, "Artifact 1" or "Artifact 2."

So I have this in the HTML,


<td width="340"><img style="border:0px" src="images/artifact1_172_74.png" alt="" width="172" height="74" onclick="toggleVisibility(Artifact2,Artifact1)"/></td>
<td width="340"><img style="border:0px" src="images/artifact2_172_74.png" alt="" width="172" height="74" onclick="toggleVisibility(Artifact1,Artifact2)"/></td>


It works in IE and Safari, but not FireFox. Is there anything I am missing. I know nothing about JavaScript and I pieced this together on a trial and error type learning experience.

One of the pages this is on is Performace Standard 7 (http://www.ecarlsen.com/portfolio/ps/ps7.html) if you check with FireFox or Camino it does not work, Safari does.
chucker
2006-04-05, 19:52
I assume "Artifact1" and "Artifact2" are the ids of the two divs?

Seems it should work better if you change it to this:
function toggleVisibility(hide, show){
document.getElementById(show).style.visibility="visible";
document.getElementById(hide).style.visibility="hidden";

}

function hideOnLoad(hide){
document.getElementById(hide).style.visibility="hidden";
}
chucker
2006-04-05, 20:01
Also, change all references to use quotes (single or double):

<body onload="hideOnLoad('Artifact1'); hideOnLoad('Artifact2')">
and
<td width="340"><img style="border: 0px none ;" src="ps7_files/artifact1_172_74.png" alt="" onclick="toggleVisibility('Artifact2','Artifact1')" height="74" width="172"></td>
<td width="340"><img style="border: 0px none ;" src="ps7_files/artifact2_172_74.png" alt="" onclick="toggleVisibility('Artifact1','Artifact2')" height="74" width="172"></td>
EmC
2006-04-05, 20:01
Thanks chucker, its working after seeing your follow up post.
EmC
2006-04-05, 20:23
Does any one know how I can include another html file within another using javascript.
The page has to be able to run off of a disk I turn in, will SSI run or does the page acutally need to be being served off a server to get SSI to work?
chucker
2006-04-05, 20:27
SSI means "server-side includes", which, y'know, should answer your question ;)

You could use JavaScript in conjunction with, say, document.write, and insert code that way.
EmC
2006-04-05, 20:30
Yeah, I thought so. Doesn't hurt to ask though.:lol: Off to look up document.write .
JayReding
2006-04-11, 22:55
Do you want to insert a new document from a separate file?

document.write is a rather clumsy way of doing things. The way I'd go is to use XMLHttpRequest to grab the file and insert it into the contents of your page. It's all the rage with web developers now, and it's a pretty convenient thing to know. Here's Apple's docs on it (http://developer.apple.com/internet/webcontent/xmlhttpreq.html) - the only caveat is that the file must be on the same domain as the page that's calling it. It's a little more complex code, but it's also more useful than trying to use document.write to throw more code on a page.
chucker
2006-04-11, 22:58
Not to mention document.write is also impossible on (proper) XHTML.