homepage Welcome to WebmasterWorld Guest from 50.19.206.49
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




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>
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




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]

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