| bug in Firefox?
|
ktsirig
msg:3597922 | 11:16 pm on Mar 11, 2008 (gmt 0) |
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>
<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?
|
chriswo
msg:3598049 | 1:21 am on Mar 12, 2008 (gmt 0) |
Try .style.display = "block" instead of "inline."
|
MarkFilipak
msg:3599364 | 9:48 am on Mar 13, 2008 (gmt 0) |
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]
|
mehh
msg:3600803 | 5:40 pm on Mar 14, 2008 (gmt 0) |
I think that document.getElementById(myVar).style.display = '' would be best, let the browser decide the style rule.
|
rocknbil
msg:3601009 | 8:53 pm on Mar 14, 2008 (gmt 0) |
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. :-)
|
MarkFilipak
msg:3601143 | 12:17 am on Mar 15, 2008 (gmt 0) |
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.
|
MarkFilipak
msg:3601152 | 12:40 am on Mar 15, 2008 (gmt 0) |
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]
|
|
|
