Welcome to WebmasterWorld Guest from 54.158.175.78

Forum Moderators: open

Message Too Old, No Replies

bug in Firefox?

   
11:16 pm on Mar 11, 2008 (gmt 0)

5+ Year Member



Hello,
I have a js function that is triggered with the onclick event. In particular, there is a <tr> in a table that is shown when the user clicks on the "Show" button.

In HTML I have:


<tr> <td>
<img id="myimage" src="css/images/show.png" onclick="javascript:HideShow('myrow');"/>
</td>
</tr><tr id="myrow" style="display:none">
<td>Hello all!
</td>
</tr>
and the JS part is:


<script type="text/javascript">
function HideShow(myVar)
{
if (document.getElementById(myVar).style.display == 'none')
{
document.getElementById(myVar).style.display = 'inline'
}
else
{
document.getElementById(myVar).style.display = 'none'
}
}
</script>

The function works fine, that is, when the user clicks on the image, the tr appears and then, if the user clicks again, it disappears... BUT all these work perfectly with IE, whereas in Firefox, the contents of the tr appear and disappear when the image is clicked, however, when the user clicks twice, the "Hello world" data disappears, but a blank row remains...And, if you do that again and again, I end up with as much blank rows as the times that I click the button for the data to disappear...

Is this something like a bug? Can I do anything else?

1:21 am on Mar 12, 2008 (gmt 0)

5+ Year Member



Try .style.display = "block" instead of "inline."
9:48 am on Mar 13, 2008 (gmt 0)

5+ Year Member



I vote for {display:table-row}, thus:
if (document.getElementById(myVar).style.display == 'none')
{
document.getElementById(myVar).style.display = 'table-row'
}
else
{
document.getElementById(myVar).style.display = 'none'
}

or better
var S = document.getElementById(myVar).style;
S.display = (S.display == 'none' && 'table-row') 'none';

or you can 'do it with style', thus:
<style>
#myrow.show{display:table-row}
#myrow.hide{display:none}
</style>
...
<tr> <td>
<img id="myimage" src="css/images/show.png" onclick="this.className=(this.className=='hide'&&'show')'hide'"/>
</td>
</tr><tr id="myrow" class="hide">
<td>Hello all!
</td>
</tr>

[edited by: MarkFilipak at 9:50 am (utc) on Mar. 13, 2008]

5:40 pm on Mar 14, 2008 (gmt 0)

5+ Year Member



I think that
document.getElementById(myVar).style.display = ''
would be best, let the browser decide the style rule.
8:53 pm on Mar 14, 2008 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Just a wild guess, give this a try. Change

<img id="myimage" src="css/images/show.png" onclick="javascript:HideShow('myrow');"/>

to

<a href="#" onclick="HideShow('myrow'); return false;"><img id="myimage" src="css/images/show.png"></a>

If it doesn't fix anything else, it will make it work in IE 6. :-)

12:17 am on Mar 15, 2008 (gmt 0)

5+ Year Member



Hmmm... I run my code again and got a getter-setter error -- don't know what happened. So I reworked it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<style type="text/css">
#myrow.show{display:table-row}
#myrow.hide{display:none}
</style>
</head><body>
<table><tr><td>
<img id="myimage" src="css/images/show.png"
onclick="var x = document.getElementById('myrow'); x.className = (x.className == 'hide' && 'show') ¦¦ 'hide'"/>
</td></tr><tr id="myrow" class="hide">
<td>Hello all!</td></tr></table>
</body></html>

Note: Be sure to replace the bogus pipes (¦¦) -- this forum software does some strange things -- with real pipes.
12:40 am on Mar 15, 2008 (gmt 0)

5+ Year Member



Looking at my last post, maybe the onclick should be:
var x = document.getElementById('myrow'); x.className = ((x.className == 'hide') && 'show') 'hide'
(I added parentheses around the test for 'hide'). FF has no problem with the original, but the above removes any doubt about what is to be tested.

Edit: fixed a typo.

[edited by: MarkFilipak at 1:00 am (utc) on Mar. 15, 2008]