my dhtml/javascript will work in IE, but not netscape - I made it so it would work in both! please h
This script was made by me, writtin so that it would change certain parts of the code depending on whether the browser is NS or IE. It looks / works great in IE, but when i opened it up in NS, it doesn't work AT ALL. why??? please help! The script has 5 buttons, and you click on one button, bringing a bunch of text to the front by having 5 divs of text with z-index:0 and it makes your selectiong z-index:1 anyways, check it out in IE and then see if you can figure out what i need to change for netscape.
here's the link to it:
http://ctpball.paintballresource.com/stuff/dan_button2.html
and here is the code:
<html>
<head>
<title>dan's buttons</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//script by Dan Tucker ([email protected])
//button/info script for internet explorer 4+ or netscape 4+
ns = (document.layers)? true:false
ie = (document.all)? true:false
function init() {
lastbutton = 1
button = 0
}
//determine which button to change, and what code to use depending on IE or NS
function push(num) {
if (ie) {
info1Div.style.zIndex="0"
info2Div.style.zIndex="0"
info3Div.style.zIndex="0"
info4Div.style.zIndex="0"
info5Div.style.zIndex="0"
}
if (ns) {
document.info1Div.zIndex="0"
document.info2Div.zIndex="0"
document.info3Div.zIndex="0"
document.info4Div.zIndex="0"
document.info5Div.zIndex="0"
}
if (num==1 && ie) dinfo = info1Div.style
if (num==1 && ns) dinfo = document.info1Div
if (num==2 && ie) dinfo = info2Div.style
if (num==2 && ns) dinfo = document.info2Div
if (num==3 && ie) dinfo = info3Div.style
if (num==3 && ns) dinfo = document.info3Div
if (num==4 && ie) dinfo = info4Div.style
if (num==4 && ns) dinfo = document.info4Div
if (num==5 && ie) dinfo = info5Div.style
if (num==5 && ns) dinfo = document.info5Div
dinfo.zIndex="1"
lastbutton.borderStyle="outset"
lastbutton.background="silver"
lastbutton.color="white"
if (num==1 && ie) button = button1Div.style
if (num==1 && ns) button = document.button1Div
if (num==2 && ie) button = button2Div.style
if (num==2 && ns) button = document.button2Div
if (num==3 && ie) button = button3Div.style
if (num==3 && ns) button = document.button3Div
if (num==4 && ie) button = button4Div.style
if (num==4 && ns) button = document.button4Div
if (num==5 && ie) button = button5Div.style
if (num==5 && ns) button = document.button5Div
lastbutton = button
button.borderStyle="inset"
button.background="gray"
button.color="silver"
}
//when hovered over, the button text turns light blue
function hover(hnum) {
if (hnum==1 && ie) hbutton = button1Div.style
if (hnum==1 && ns) hbutton = document.button1Div
if (hnum==2 && ie) hbutton = button2Div.style
if (hnum==2 && ns) hbutton = document.button2Div
if (hnum==3 && ie) hbutton = button3Div.style
if (hnum==3 && ns) hbutton = document.button3Div
if (hnum==4 && ie) hbutton = button4Div.style
if (hnum==4 && ns) hbutton = document.button4Div
if (hnum==5 && ie) hbutton = button5Div.style
if (hnum==5 && ns) hbutton = document.button5Div
hbutton.color="#B0E1FF"
}
//when not hovered over, the button text returns to original color
function nohover() {
hbutton.color="white"
if (hbutton=button) hbutton.color="silver"
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="init()">
<div ID="button1Div" onClick="push(1)" onMouseOver="hover(1)" onMouseOut="nohover()" STYLE="color:white; position:absolute; border-width:medium; border-style:outset; border-color:#B0E1FF; background:silver; left:50; top:20; height:30; width:100">
<center><B>HOME</B></CENTER>
</div>
<DIV ID="button2Div" onClick="push(2)" onMouseOver="hover(2)" onMouseOut="nohover()" STYLE="color:white; position:absolute; border-width:medium; border-style:outset; border-color:#B0E1FF; background:silver; left:150; top:20; height:30; width:100">
<center><B>PROJECTS</B></CENTER>
</DIV>
<DIV ID="button3Div" onClick="push(3)" onMouseOver="hover(3)" onMouseOut="nohover()" STYLE="color:white; position:absolute; border-width:medium; border-style:outset; border-color:#B0E1FF; background:silver; left:250; top:20; height:30; width:100">
<center><B>RESUMES</B></CENTER>
</DIV>
<DIV ID="button4Div" onClick="push(4)" onMouseOver="hover(4)" onMouseOut="nohover()" STYLE="color:white; position:absolute; border-width:medium; border-style:outset; border-color:#B0E1FF; background:silver; left:350; top:20; height:30; width:100">
<center><B>SERVICES</B></CENTER>
</DIV>
<DIV ID="button5Div" onClick="push(5)" onMouseOver="hover(5)" onMouseOut="nohover()" STYLE="color:white; position:absolute; border-width:medium; border-style:outset; border-color:#B0E1FF; background:silver; left:450; top:20; height:30; width:100">
<center><B>EMAIL US</B></CENTER>
</DIV>
<Div ID="info0Div" STYLE="z-index:1; position:absolute; left:50; top:50; width:500; height:200; color:black; background:#F0F0F0; border-color:#B0E1FF; border-width:4; border-top-width:1; border-style:ridge;">
<P><CENTER>Click on a button to see the information about that topic.</center>
</Div>
<Div ID="info1Div" STYLE="z-index:0; position:absolute; left:50; top:50; width:500; height:200; color:black; background:#F0F0F0; border-color:#B0E1FF; border-width:4; border-top-width:1; border-style:ridge;">
ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE
</Div>
<Div ID="info2Div" STYLE="z-index:0; position:absolute; left:50; top:50; width:500; height:200; color:black; background:#F0F0F0; border-color:#B0E1FF; border-width:4; border-top-width:1; border-style:ridge;">
TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO
</Div>
<Div ID="info3Div" STYLE="z-index:0; position:absolute; left:50; top:50; width:500; height:200; color:black; background:#F0F0F0; border-color:#B0E1FF; border-width:4; border-top-width:1; border-style:ridge;">
THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE
</Div>
<Div ID="info4Div" STYLE="z-index:0; position:absolute; left:50; top:50; width:500; height:200; color:black; background:#F0F0F0; border-color:#B0E1FF; border-width:4; border-top-width:1; border-style:ridge;">
FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR
</Div>
<Div ID="info5Div" STYLE="z-index:0; position:absolute; left:50; top:50; width:500; height:200; color:black; background:#F0F0F0; border-color:#B0E1FF; border-width:4; border-top-width:1; border-style:ridge;">
FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE FIVE
</Div>
</BODY>
</HTML>
----------
Dan Tucker
http://ctpball.paintballresource.com
John Pollock posted this at 02:29 — 3rd September 1999.
He has: 628 posts
Joined: Mar 1999
At a glance, you might try changing the capitalization from
onMouseOver and onMouseOut to
onMouseover and onMouseout.
I'm not sure that is it, but NS is picky about the case of an event handler.
Java Script: A Beginner's Guide
Page Resource
ShortyDCT posted this at 16:54 — 6th September 1999.
They have: 36 posts
Joined: Jul 1999
no, that's not it...
nobody here knows any netscape javascript???
----------
Dan Tucker
http://ctpball.paintballresource.com
lifeform posted this at 21:21 — 7th September 1999.
They have: 7 posts
Joined: Aug 1999
AAGGGHHH!!! I'm having the same problem... My code lets you select different parts of a computer to custom make a package and calculates the price... It works fine with IE5.0, but not with NS.. I dunno what the **** is wrong with it...
the page is: http://www3.sympatico.ca/lifeform7
it's under "products" then "custom make a system"
any help is GREATLY appreciated
----------
Best Wishes and Tuna Fishes
<Language Edit>
John Pollock posted this at 02:17 — 8th September 1999.
He has: 628 posts
Joined: Mar 1999
ShortyDCT:
Yes, there are. I happened to be quite tired when I posted the last message, so I didn't notice the real problem at the time. Please, let's avoid the insults here as not everyone can know everything.
Netscape does not support event handlers in the DIV tag. So it does not use the onMouseover, onMouseout, etc. IE does support this, and that is why it works with IE. If you want it in both browsers, you will probably have to use an anchor tag for the mouseovers etc. so Netscape will use them.
----------
Page Resource: http://www.pageresource.com
JavaScript City: http://www.javascriptcity.com
Java Script: A Beginner's Guide
Page Resource
ShortyDCT posted this at 17:29 — 8th September 1999.
They have: 36 posts
Joined: Jul 1999
so by replacing all the <div ...>'s with <a ...>'s, it should work? great! i'll try it tonight, tell you if you were right.
(didn't mean to insulting...)
----------
Dan Tucker
http://ctpball.paintballresource.com
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.