Comparing Colors with JavaScript
If you try to compare two colors in JavaScript, you will find that Firefor chages HEX values to rgb values. Microsoft internet explorer does not do that. So we need to make a function that determines what format the color code is in and then compare them.
<div id="div1" style="background-color:#33AA33">asdf</div>
<div id="div2" style="background-color:#00FF00">asdf</div>
<script>
window.onload= function(){
var color1 = document.getElementById("div1").style.backgroundColor;
var color2 = document.getElementById("div2").style.backgroundColor;
alert(color1.compareColor(color2) + " ~ False!")
color2 = "#33AA33";
alert(color1.compareColor(color2) + " ~ true")
color2 = "rgb(51, 170, 51)"
alert(color1.compareColor(color2) + "~ True")
}
String.prototype.compareColor = function(){
if((this.indexOf("#") != -1 && arguments[0].indexOf("#") != -1) ||
(this.indexOf("rgb") != -1 && arguments[0].indexOf("rgb") != -1)){
return this.toLowerCase() == arguments[0].toLowerCase()
}
else{
xCol_1 = this;
xCol_2 = arguments[0];
if(xCol_1.indexOf("#") != -1)xCol_1 = xCol_1.toRGBcolor();
if(xCol_2.indexOf("#") != -1)xCol_2 = xCol_2.toRGBcolor();
return xCol_1.toLowerCase() == xCol_2.toLowerCase()
}
}
String.prototype.toRGBcolor = function(){
varR = parseInt(this.substring(1,3), 16);
varG = parseInt(this.substring(3,5), 16);
varB = parseInt(this.substring(5,7), 16);
return "rgb(" + varR + ", " + varG + ", " + varB + ")";
}
</script>
As you can see I created two prototype functions. The compareColor function is attached to one color string and the second color is send as an argument. The compareColor function returns a Boolean value back.
The second prototype function chnages a hex color value to an rgb color value.
Hope this helps in your color comparisons.
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
TrackBacks[0]
Comments[4]
Posted by pascarello on May 19, 2005 9:36:06 AM EST
Convert Table Row to Hyperlink
Well I saw a post here on the asp.net forums wanting to take a single column that contains a hyperlink and make the whole row clickable.
Well, I talked about making the whole row clickable here on my blog before, but the user wants to take a hyperlink from one of the columns and do it. A light bulb went off in my head and I coded this in two minutes.
<html>
<head>
<style type="text/css">
table{
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
th, td{
border: 1px solid black;
padding: 3px;
width: 25%;
}
th{
background-color: #A0A0A0;
}
tr{
background-color: white;
}
tr.highlight{
background-color: #B8CDDC;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
ConvertRowsToLinks("table1");
}
function ConvertRowsToLinks(xTableId){
var rows = document.getElementById(xTableId).getElementsByTagName("tr");
for(i=0;i<rows.length;i++){
var link = rows[i].getElementsByTagName("a")
if(link.length == 1){
rows[i].onclick = new Function("document.location.href='" + link[0].href + "'");
rows[i].onmouseover = new Function("this.className='highlight'");
rows[i].onmouseout = new Function("this.className=''");
}
}
}
</script>
</head>
<body>
<table id="table1">
<tr>
<th>Website</th>
<th>Subject</th>
<th>Content</th>
</tr>
<tr>
<td><a href="http://www.JavaRanch.com">JavaRanch</a></td>
<td>Java</td>
<td>Content and Forums</td>
</tr>
<tr>
<td><a href="http://www.asp.net">ASP.NET</a></td>
<td>.NET</td>
<td>Content and Forums</td>
</tr>
<tr>
<td><a href="http://radio.javaranch.com/Pascarello">Eric's Blog</a></td>
<td>JavaScript,.NET,and Stuff</td>
<td>Programming Discussion</td>
</tr>
</table>
</body>
</html>
Basically we are grabbing the table's rows. We than loop through each of the rows looking for a link. If a link exists, we grab the href and attach an onclick event to the element. To make it fancier, I added some mouse events so the row is highlighted.
Hope this is helps,
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
TrackBacks[0]
Comments[27]
Posted by pascarello on May 19, 2005 8:37:03 AM EST