Welcome to WebmasterWorld Guest from 54.196.244.245

Forum Moderators: open

Message Too Old, No Replies

bug in Firefox?

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

Junior Member

10+ Year Member

joined:Sept 26, 2005
posts:90
votes: 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>
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)

New User

5+ Year Member

joined:Mar 8, 2008
posts:10
votes: 0


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

Full Member

5+ Year Member

joined:Mar 4, 2008
posts: 210
votes: 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]

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

Full Member

10+ Year Member

joined:Feb 12, 2006
posts:224
votes: 0


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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. :-)

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

Full Member

5+ Year Member

joined:Mar 4, 2008
posts: 210
votes: 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.
12:40 am on Mar 15, 2008 (gmt 0)

Full Member

5+ Year Member

joined:Mar 4, 2008
posts: 210
votes: 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]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members