/    Sign up×
Community /Pin to ProfileBookmark

Dropdown menu won’t work in Firefox

I’m fairly new to website development and I wanted a dropdown menu. So I found some javascript from SimplytheBest.net. The menu works fine in IE but I can’t get it to work in Firefox. Can anyone help please????

The menu is in the dark purple – there are 3 menu items that should drop down into a submenu – “About Guided Hands”, “Spiritual Enlightenment”, and “Services”.

I would really appreciate your help – you might see the problem in 2 seconds and I’ve been searching for HOURS!!! Thank you!
Sandi

Link to the website (WARNING: there’s music but you can turn it off when you open the page): [URL=http://www.guidedhands.net/~NEW/index.html]http://www.guidedhands.net/~NEW/index.html[/URL]

My js file: [URL=http://www.guidedhands.net/~NEW/script_files/menu.js]http://www.guidedhands.net/~NEW/script_files/menu.js[/URL]

Here is the menu code in index.html:

[CODE]<div>
<table border=0 cellspacing=0 cellpadding=2 bgcolor=#660099 align=center width=100% >
<tr>
<td>

<!– Menu items –>
<table cellspacing=”0″ cellpadding=”2″ border=”0″ bgcolor=”#660099″ bordercolor=”#ff6633″ bordercolorlight=”#CCCCFF” bordercolordark=”#CCCCFF”>
<tbody>
<tr>
<td height=”20″> <a onmouseover=”openclose(‘dropdown1’)” onmouseout=”timerID=setTimeout(‘closeall()’,2000)” href=”index.html” class=”header”>Home</a> &nbsp;&nbsp;|&nbsp;&nbsp; </td>
<td height=”20″> <a onmouseover=”openclose(‘dropdown2’)” onmouseout=”timerID=setTimeout(‘closeall()’,2000)” class=”header”>About Guided Hands</a> &nbsp;&nbsp;|&nbsp;&nbsp; </td>
<td height=”20″> <a onmouseover=”openclose(‘dropdown3’)” onmouseout=”timerID=setTimeout(‘closeall()’,2000)” class=”header”>Spiritual Enlightenment</a> &nbsp;&nbsp;|&nbsp;&nbsp; </td>
<td height=”20″> <a onmouseover=”openclose(‘dropdown4’)” onmouseout=”timerID=setTimeout(‘closeall()’,2000)” class=”header”>Services</a> &nbsp;&nbsp;|&nbsp;&nbsp; </td>
<td height=”20″> <a onmouseover=”openclose(‘dropdown5’)” onmouseout=”timerID=setTimeout(‘closeall()’,2000)” href=”classes.htm” class=”header”>Classes</a> &nbsp;&nbsp;|&nbsp;&nbsp; </td>
<td height=”20″> <a onmouseover=”openclose(‘dropdown6’)” onmouseout=”timerID=setTimeout(‘closeall()’,2000)” href=”forum.htm” class=”header”>Message Forum</a> &nbsp;&nbsp;|&nbsp;&nbsp; </td>
<td height=”20″> <a onmouseover=”openclose(‘dropdown7’)” onmouseout=”timerID=setTimeout(‘closeall()’,2000)” href=”guest.htm” class=”header”>Guestbook</a> </td>
</tr>
</tbody>
</table>

<table cellspacing=”0″ cellpadding=”2″ border=”0″ bgcolor=”#660099″ bordercolor=”#ff6633″ bordercolorlight=”#CCCCFF” bordercolordark=”#CCCCFF”>
<tbody>
<tr>
<td> <a href=”request.htm” class=”header”>Send a Request</a>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
<td> <a href=”tell.htm” class=”header”>Tell A Friend About This Website</a>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
<td> <a href=”contact.htm” class=”header”>Contact Info</a> </td>
</tr>
</tbody>
</table>

<!– Menu items end–>

<!– Dropdowns –>
<div id=”dropdown1″ style=”left: 117px; visibility: hidden; position: absolute; top: 185px; height: 23px”>
<table class=”popup” onmouseover=”clearTimeout(timerID)” onmouseout=”timerID=setTimeout(‘closeall()’,1000)” cellspacing=”0″ cellpadding=”2″>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id=”dropdown2″ style=”left: 25%; visibility: hidden; position: absolute; top: 185px; “>
<table class=”popup” onmouseover=”clearTimeout(timerID)” onmouseout=”timerID=setTimeout(‘closeall()’,1000)” cellspacing=”0″ cellpadding=”2″>
<tbody>
<tr>
<td align=left width=130>
<img src=”images/bullet4.gif” border=”0″>
<a href=”mary.htm” class=”subheader”> About Mary</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”contact.htm” class=”subheader”> Contact Info</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”hours.htm” class=”subheader”> Hours</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”testimonies.htm” class=”subheader”>Testimonies</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id=”dropdown3″ style=”left: 35%; visibility: hidden; position: absolute; top: 185px; “>
<table class=”popup” onmouseover=”clearTimeout(timerID)” onmouseout=”timerID=setTimeout(‘closeall()’,1000)” cellspacing=”0″ cellpadding=”2″>
<tbody>
<tr>
<td align=left width=200>
<img src=”images/bullet4.gif” border=”0″>
<a href=”reiki.htm” class=”subheader”> About Reiki</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”affirmations.htm” class=”subheader”>Affirmations</a><br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”beams.htm” class=”subheader”> Beams of Light</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”children.htm” class=”subheader”> Children of Light</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”divine.htm” class=”subheader”> Divine Source</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”masters.htm” class=”subheader”> Messages from the Masters</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”monthly.htm” class=”subheader”> Monthly Prayer</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”resources.htm” class=”subheader”> Resources</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”sponsors.htm” class=”subheader”> Sponsors</a><br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”dictionary.htm” class=”subheader”> The Light Workers Dictionary</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id=”dropdown4″ style=”left: 50%; visibility: hidden; position: absolute; top: 185px; “>
<table class=”popup” onmouseover=”clearTimeout(timerID)” onmouseout=”timerID=setTimeout(‘closeall()’,1000)” cellspacing=”0″ cellpadding=”2″>
<tbody>
<tr>
<td align=left width=150>
<img src=”images/bullet4.gif” border=”0″>
<a href=”gift.htm” class=”subheader”> Gift Certificates</a><br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”group.htm” class=”subheader”> Group Sessions</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”links.htm” class=”subheader”> Holistic Links</a><br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”referrals.htm” class=”subheader”> Holistic Referrals</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”offerings.htm” class=”subheader”> Offerings</a><br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”phone.htm” class=”subheader”> Phone Readings</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”prayers.htm” class=”subheader”> Prayer Requests</a> <br>
<img src=”images/bullet4.gif” border=”0″>
<a href=”request.htm” class=”subheader”> Unsubscribe</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id=”dropdown5″ style=”left: 484px; visibility: hidden; position: absolute; top: 185px; height: 23px”>
<table class=”popup” onmouseover=”clearTimeout(timerID)” onmouseout=”timerID=setTimeout(‘closeall()’,1000)” cellspacing=”0″ cellpadding=”2″>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id=”dropdown6″ style=”left: 564px; visibility: hidden; position: absolute; top: 185px; height: 23px”>
<table class=”popup” onmouseover=”clearTimeout(timerID)” onmouseout=”timerID=setTimeout(‘closeall()’,1000)” cellspacing=”0″ cellpadding=”2″>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id=”dropdown7″ style=”left: 604px; visibility: hidden; position: absolute; top: 185px; height: 23px”>
<table class=”popup” onmouseover=”clearTimeout(timerID)” onmouseout=”timerID=setTimeout(‘closeall()’,1000)” cellspacing=”0″ cellpadding=”2″>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<!– Dropdowns end –>

</td>
</tr>
</table>
</div>[/CODE]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@UltimaterMay 16.2006 — The following logic works on old IE and old Netscape however is out of date.
<i>
</i>n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

<i> </i> if (ie){
<i> </i> dropdown1.style.visibility="hidden";
<i> </i> dropdown2.style.visibility="hidden";
<i> </i> dropdown3.style.visibility="hidden";
<i> </i> dropdown4.style.visibility="hidden";
<i> </i> dropdown5.style.visibility="hidden";
<i> </i> dropdown6.style.visibility="hidden";
<i> </i> dropdown7.style.visibility="hidden"
<i> </i> }
<i> </i> else if (n){
<i> </i> document.dropdown1.visibility="hide";
<i> </i> document.dropdown2.visibility="hide";
<i> </i> document.dropdown3.visibility="hide";
<i> </i> document.dropdown4.visibility="hide";
<i> </i> document.dropdown5.visibility="hide";
<i> </i> document.dropdown6.visibility="hide";
<i> </i> document.dropdown7.visibility="hide"
<i> </i> }

Should be using document.getElementById now.
<i>
</i>dom =(document.getElementById) ? 1:0;
n = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;


<i> </i> if(dom){
<i> </i> document.getElementById("dropdown1").style.visibility="hidden";
<i> </i> document.getElementById("dropdown2").style.visibility="hidden";
<i> </i> document.getElementById("dropdown3").style.visibility="hidden";
<i> </i> document.getElementById("dropdown4").style.visibility="hidden";
<i> </i> document.getElementById("dropdown5").style.visibility="hidden";
<i> </i> document.getElementById("dropdown6").style.visibility="hidden";
<i> </i> document.getElementById("dropdown7").style.visibility="hidden";
<i> </i> }
<i> </i> else if (ie){
<i> </i> dropdown1.style.visibility="hidden";
<i> </i> dropdown2.style.visibility="hidden";
<i> </i> dropdown3.style.visibility="hidden";
<i> </i> dropdown4.style.visibility="hidden";
<i> </i> dropdown5.style.visibility="hidden";
<i> </i> dropdown6.style.visibility="hidden";
<i> </i> dropdown7.style.visibility="hidden"
<i> </i> }
<i> </i> else if (n){
<i> </i> document.dropdown1.visibility="hide";
<i> </i> document.dropdown2.visibility="hide";
<i> </i> document.dropdown3.visibility="hide";
<i> </i> document.dropdown4.visibility="hide";
<i> </i> document.dropdown5.visibility="hide";
<i> </i> document.dropdown6.visibility="hide";
<i> </i> document.dropdown7.visibility="hide"
<i> </i> }

Gonna need to do that for each instance.

Then you will also need to change:
<i>
</i> if (n){ document.layers[drop].visibility="show" }
else if (ie){ document.all[drop].style.visibility="visible" }

into:
<i>
</i> if(dom){document.getElementById(drop).style.visibility="visible"}
else if (n){ document.layers[drop].visibility="show" }
else if (ie){ document.all[drop].style.visibility="visible" }
Copy linkTweet thisAlerts:
@SandiDauthorMay 16.2006 — Ultimater - I am updating my code right now to test this out. I am so excited! I hope this works. Thanks for your help!!!
Copy linkTweet thisAlerts:
@SandiDauthorMay 16.2006 — Oh my gosh - YOU ROCK, Ultimater!!! Thanks tons!!!!!!
×

Success!

Help @SandiD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...