JavaScript Forum

**ratchethosting** · 06-30-2006, 07:18 PM

What im trying to do is make a table with 3 cols and when a user clicks the link in one of the cols it displays another col in a different row and hides the other two... Hard to explain, here is an example that i got working but i cant seem to get my new one working. Like the title says, everything works perfectly in internet explorer but it doesnt work properly in firefox.

Ex: www.ratchethosting.com/test.html

Please help

==============

Here is my javascript (in a file called test.js):

function on() {
document.getElementById("menu1").style.display = ''; td1.className='on';
}
function off() {
document.getElementById("menu1").style.display = 'none'; td1.className='off';
}
function on2() {
document.getElementById("menu2").style.display = ''; td2.className='on2';
}
function off2() {
document.getElementById("menu2").style.display = 'none'; td2.className='off2';
}
function on3() {
document.getElementById("menu3").style.display = ''; td3.className='on3';
}
function off3() {
document.getElementById("menu3").style.display = 'none'; td3.className='off3';
}
---------------------------
Here is my HTML:

<script src="test.js"></script>
<body onload="on();">
<div align="center">
<style>
td.on{background-image: url("image_files/flat_01.jpg")}
td.off{background-image: url("image_files/jmenu_01.gif")}
td.on2{background-image: url("image_files/flat_02.jpg")}
td.off2{background-image: url("image_files/jmenu_02.gif")}
td.on3{background-image: url("image_files/flat_03.jpg")}
td.off3{background-image: url("image_files/jmenu_03.jpg")}
</style>
<script src="test.js"></script>
<table width="400" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td width="100" background="12502.gif" name="td1" id="td1">
<div align="center"><a href="#" onclick="on(); off2(); off3();">Summer Special </a></div>
</td>
<td width="1" valign="top" background="12502.gif">
<div align="center">|</div>
</td>
<td width="100" background="12502.gif" name="td2" id="td2">
<div align="center"><a href="#" onclick="on2(); off(); off3();">Changes</a></div>
</td>
<td width="1" valign="top" background="12502.gif">
<div align="center">|</div>
</td>
<td width="100" background="12502.gif" name="td3" id="td3">
<div align="center"><a href="#" onclick="on3(); off(); off2();" >Contact</a></div>
</td>
</tr>
<tr>
<td colspan="5" valign="top" id="menu1" style="display:none" name="menu1">
<div align="left">
<table width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td bordercolor="#000000">
<div align="center"><img src="http://www.myimages.ratchethosting.c...er-Special.jpg" border="1"></div>
</td>
<td valign="top" bordercolor="#CCCCCC">
<p>Yea, That's right, RatchetHosting Has a summer special for the month of June. Now you can get the Expert Package Free for 1 month! Hurry Only 2 Days Left! </p>
<p>For details on this package <br />
<a href="view.php#expert" target="_blank">Click here </a><br />
<br />
<a href="order_wiz.php?package=expert" target="_blank"><strong>ORDER NOW </strong></a></p>
</td>
</tr>
</table>
</div>
<div align="center"></div>
</td>
</tr>
<tr>
<td height="75" colspan="5" valign="top" id="menu2" style="display:none" name="menu2">
<div align="left">
<ul>
<li><a href="<A href="http://www.hosting.ratchethosting.com">All">http://www.hosting.ratchethosting.com">All New Hosting Page. Easier to use, More Convenient for slower internets. Less Loading and more... </a></li>
<li><a href="#">Our Most Recent add-on has been having some problems lately. The Free Image Hosting site is temporarily down. </a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td colspan="5" id="menu3" name="menu3" style="display:none">
<div align="left">
<table width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td valign="top" bordercolor="#CCCCCC">
<div align="left">
<p>Need to Contact RatchetHosting about any of the news or updates?<br />
<strong>Do so here:</strong> <a href="contact.php" target="_blank">Contact page </a></p>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

**funkdaddu** · 10:31 PM

Works fine if FF 1.0 for Mac. Any errors in the JS console? THough you can streamline your code by doing:

Code:

var lastDiv = 1;

function swap(num) {
     //show div
     document.getElementById("menu"+num).style.display = 'block';
     document.getElementById("td"+num).className='on';
     //hide old div, set new old div
     document.getElementById("menu"+ lastDiv).style.display = 'none';
     document.getElementById("td"+ lastDiv).className='off';
     lastDiv = num;
}

then call it like this: swap(1); or swap(2) or swap(3), depending on which one you want to show.
Just set the first div to show with the CSS and you can simplify the on3(); off(); off2(); thing...

**vangogh** · 07-01-2006, 01:12 AM

Seems to be working for me as well in Firefox 1.5.4