Menu
Hi all,
I am trying to modify the visibility of objects in Javascript and I am wondering if there is a way to use the same properties of the objects in all the browsers.
Here is a piece of code that has a weird behavior depending on the browser you use.
[CODE]
<html>
<head>
<title>test</title>
</head>
<body>
<table>
<tr id=”tr1″>
<td>tr1</td>
</tr>
<tr id=”tr2″>
<td>tr2</td>
</tr>
<tr>
<td>
<input type=”button” value=”visibility=collapse tr1″
onClick=”document.getElementById(‘tr1′).style.visibility=’collapse’;” />
<input type=”button” value=”visibility=visible tr1″
onClick=”document.getElementById(‘tr1′).style.visibility=’visible’;” />
</td>
</tr>
<tr>
<td>
<input type=”button” value=”display=none tr1″
onClick=”document.getElementById(‘tr1′).style.display=’none’;” />
<input type=”button” value=”display=block tr1″
onClick=”document.getElementById(‘tr1′).style.display=’block’;” />
</td>
</tr>
</table>
</body>
</html>
You can test it on [URL=http://caractereschinois.free.fr/test.php]my website
Here is what I would like to get:
– a button that collapses a row (the row below goes up);
– a button that makes it reappear.
Basically here is what I noticed:
Firefox 2.0:
– the two buttons visibility-collapse/visibility-visible do what I want;
– the display-block button adds a weird shift to the right;
– the two buttons block, none work well the first time and then they make new empty rows to appear, shifting the row tr2 to the bottom.
Safari:
– the visibility-collapse button does not collapse the row but makes it invisible;
– the display-block button adds the same weird shift to the right;
– the buttons display-block/display-none do what I would like (except from the slight shift).
I haven’t tried neither Konqueror nor IE but I am wondering if there is a browser-safe way to have this result without having to take care of the version of the browser.
Thanks a lot,
Figo