Closed Thread Icon

Topic awaiting preservation: show/hide a table row Pages that link to <a href="http://ozoneasylum.com/backlink?for=27434" title="Pages that link to Topic awaiting preservation: show/hide a table row" rel="nofollow" >Topic awaiting preservation: show/hide a table row\

 
Author Thread
butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted posted 02-02-2006 14:37

I have an example of what I'm trying to do here and it works fine in IE but really screws the pooch in Firefox. I've tried the few different things that my limited javascript knowledge will allow so I'm here to ask you guys.

What do I need to do to make this work as well in Firefox as it does in IE?

Here's the js:

code:
<script language="javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'inline') {
state = 'none';
}
else {
state = 'inline';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


and the html that I'm trying to show/hide:

code:
<td><a href="#" onclick="showhide('div1');">Show/Hide</a></td>
</tr>
<tr id="div1" style="display: none;">
	<td colspan="4">
<table width="100%"  border="1">
<tr>
	<th width="50%">Answer Text</th>
	<th width="25%">Answer Type</th>
	<th width="25%">Edit Answer</th>
</tr>
<tr>
	<td>Under 18</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=1">Edit Answer</a></td>
<tr>
	<td>18 - 21</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=2">Edit Answer</a></td>
<tr>
	<td>21 - 30</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=3">Edit Answer</a></td>
<tr>
	<td>31 - 40</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=4">Edit Answer</a></td>
</tr>
</table>


I've tried inline, block and I've tried it with visibility too but nothing seems to get it to work correctly in FF.

Thanks

- Butcher -

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 02-02-2006 19:55

This page works fine with me:

Note one change is that I'm calling it using

<a href="javascript: showhide('div1');">

You don't really want to use the # sign, if you want to call something using the onclick handler do

<a href="javascript: void(0)" onclick="showhide('div1');">

Also this:

code:
if (state == 'inline') {
state = 'none';
}
else {
state = 'inline';
}



can be cleaned up to

code:
state = ( state == 'inline') ? 'none':'inline';





.:[ Never resist a perfect moment ]:.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 02-03-2006 00:35

Table rows, cells, etc have different display types:

http://www.w3.org/TR/CSS21/visuren.html#display-prop

try "table-row".


 

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted posted 02-04-2006 03:25

Thanks for the help guys.

Bitdamaged:

I tried changing from the onclick to the javascript href like you suggested, but it still doesn't work in Firefox. It loads properly, and shows correctly the first time, but it never collapses properly.

Slime:
You were right on the money. Using table-row makes it work right as rain in Firefox, but kills it in IE. It seems like there should be a simple if else statement that will accomodate both browsers, but I've either been looking at it to long to see it... or I'm just to dense to.

Any help with combining the 2 would be appreciated.

Thanks

- Butcher -

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted posted 02-07-2006 02:55

I was right about 1 thing... There was a simple statement to do the job and between your 2 posts the answer was there right in front of me.

code:
function showHide(id,vis)
{
  var val;
  val = (vis != 'none')?'none':((document.all && !window.opera)?'inline':'table-row');
  document.getElementById('div'+id).style.display = val;
}



I just pass it the div id number and the current display state and those 2 lines take care of the rest. In IE6 and Firefox 1.5 at least.

Thanks again for the help.

- Butcher -

(Edited by butcher on 02-07-2006 02:58)

« BackwardsOnwards »

Show Forum Drop Down Menu