homepage Welcome to WebmasterWorld Guest from 50.17.109.248
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library : Charter : Moderators: incrediBILL & tedster

Firefox Browser Usage and Support Forum

    
Dynamic Bordercolor in Firefox
w_s_o




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

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.

 

iamlost




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

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>


Conscientious Reject




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

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?
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved