Sunday, May 4, 2008

Firefox DHTML

After many years of corporate (Internet Explorer only) web development, I got my first taste of Firefox DHTML and it wasn't pretty. Here's the code (minus some styles to counteract the default blog stylesheet):

<table border="1" cellspacing="1">
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
    <tr id="trhidden">
        <td>x1</td>
        <td>x2</td>
    </tr>
    <tr>
        <td>y1</td>
        <td>y2</td>
    </tr>
</table>
<script>
function Toggle()
{
    var h = document.getElementById('trhidden').style;
    if (h.display == 'none')
        h.display = 'inline';
    else
        h.display = 'none';
}
</script>
<button onclick="Toggle(); return false;">Show/Hide</button>

And the result is:
Column 1Column 2
x1x2
y1y2



Click the button a few times in Firefox and IE to see the difference. How Firefox can screw up something so basic is beyond me.

No comments: