Forum Moderators: not2easy
I have a problem to solve.
I have a table whose rows can be either in edit or view mode. For that I need to toggle the visibility and the display of both of them. I had all of this working in MSIE 5.5...but I thought it would be a lot better if I could make it work in Opera. And I made it work...it took some code refining, adjusting firmly to w3 standards but...I end up with a solution that was working in Opera 7 but not working in IE 5.5. And from what I have seen in forums, the solotion for Opera 7 its not supported by MSIE...
This is a mockup of my code in Opera:
<table>
<tr style="visibility: visible; display: table-row">
<td> Some data</td>
</tr>
</table>
whereas in MSIE I would use display: inline...
I inmediately thought of browser sniffing...but that means keeping two sets of code for the javascript file ...and then I have to take care too of the embedded styles in the html pages. This puts me off a bit. I would also like to achieve the ideal of one code works for both...
I have been playing with the idea of not using a table and using divs instead of rows...but I would like to keep it in that way...
Has anyone got any idea of how can I do it keep the rows, and make it work both in Opera and MSIE? That would be very useful? Has anyone solved this problem before?
Thanks in advance for your help!
Belen
I dont now about this specific case, but what i have on a site toggles visibility cross browser. Take a look and see if you can use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Foo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="JavaScript">
function WM_toggle(id){
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
return false;
}
}
</script>
</head>
<body>
<p><a href="#" onClick="WM_toggle('foo'); return false">Foo</a></p>
<p id="foo" style="display: none">more foo...</p>
</body>
</html>
Kind Regards
Hafnius
belen
I have an "almost baked" solution that goes on those lines...replace all display: inline; or display: table-row; with display:;.
Both browsers are happy so far!
Thanks.
