Welcome to WebmasterWorld Guest from 23.22.79.235

Forum Moderators: incrediBILL

Message Too Old, No Replies

Dynamic Bordercolor in Firefox

   
8:50 pm on Aug 1, 2005 (gmt 0)

10+ Year Member



I have a page where I present the user with a bunch of color samples and let them click on one to choose it. Clicking on a sample puts a box around it to show which has been chosen. I use JavaScript to change the bordercolor of the td in the table to do this. I set the old one to white to "turn off" the border, and set the new one to brown.

So for a table called 'tblswatches',

document.all.tblswatches.rows(irow).cells(icol).borderColor='#AAAAAA';
turns the border on.

document.all.tblswatches.rows(irow).cells(icol).borderColor='#FFFFFF';
turns the border off.
This works great in IE--better than any other method I had tried. Other methods caused the table to resize as the user clicked different selections. However, Firefox does not support bordercolor. I can't just use CSS because I need to be able to use the JavaScript to change the border colors as the user clicks on different choices.

Any thoughts on how to implement this with Firefox? I certainly don't want to alienate that growing user base.

11:10 pm on Aug 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Firefox does not support bordercolor.

Not true: Javascript borderColor is supported by FF, however, document.all is MSFT proprietary introduced in Internet Explorer 4 and replaced (IE still retains legacy support) by document.all in IE5, Opera6, NN6, Moz/FF and subsequent browsers.

Unless you expect IE4 users you can safely discontinue document.all.

Possible problem - id must be unique, one per page (each td would need its own id) - so your code is closer to requiring document.getElementsByTagName.

Or use CSS and a function similar to following:


<style type="text/css">
* {padding: 0; margin: 0;}
table {width: 400px; background: #00f;
}
.white {border: 1px solid #fff;
}
.red {border: 1px solid #f00;
}
</style>

<script type="text/javascript">
var oPrevTd;
function changeBorder(oTd){
oTd.className='red';
if (oPrevTd && oPrevTd!=oTd){
oPrevTd.className='white';
}
oPrevTd = oTd;
}
</script>

</head>

<body>

<table>
<tr>
<td class="white" onclick="changeBorder(this)">&nbsp;</td>
<td class="white" onclick="changeBorder(this)">&nbsp;</td>
</tr>
<tr>
<td class="white" onclick="changeBorder(this)">&nbsp;</td>
<td class="white" onclick="changeBorder(this)">&nbsp;</td>
</tr>
</table>

7:45 pm on Aug 4, 2005 (gmt 0)

5+ Year Member



I heard that Mac was doing away with the document.all DOM to be more compatible with cross servers. Can it really be canned yet? Or should we implement it in our Javascript still just to be safe?