homepage Welcome to WebmasterWorld Guest from 23.23.8.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
bug in Firefox?
ktsirig

5+ Year Member



 
Msg#: 3597920 posted 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>
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?

 

chriswo

5+ Year Member



 
Msg#: 3597920 posted 1:21 am on Mar 12, 2008 (gmt 0)

Try .style.display = "block" instead of "inline."

MarkFilipak

5+ Year Member



 
Msg#: 3597920 posted 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

5+ Year Member



 
Msg#: 3597920 posted 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

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



 
Msg#: 3597920 posted 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

5+ Year Member



 
Msg#: 3597920 posted 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

5+ Year Member



 
Msg#: 3597920 posted 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved