My studying notebook

2010/07/07

Google Reader's Toggle Icon

7/07/2010 03:13:00 PM Posted by Kai-Chu Chung , No comments

If you have used Google Reader. There is a toggle icon you can click and expand all items view size. This toggle icon is a small blue arrow. Is it a image? No. It's just a CSS tips and tricks. How does CSS do it?
Toggle icon DOM element
...
<td id="chrome-lhn-toggle">
    <div id="chrome-lhn-toggle-icon"></div>
</td>
...

Toggle icon CSS
{
    width: 0;
    height: 0;
    border-color: #ebeff9 #68e #ebeff9 #ebeff9;
    border-style: solid;
    border-width: 5px 5px 5px 0;
}

You just need to assign the "border" CSS to toggle icon DOM element like ahove.
You may have to assign others CSS if you want this toggle icon in that correct position you want.



border Css order style
#right{
border-style:solid;
border-color: red green blue yellow;
border-style: solid;
border-width: 50px 50px 50px 50px;
width:0;
height:0;
display:inline-block;
}
#left{
border-style:solid;
border-color: #ebeff9 #68e #ebeff9 #ebeff9;
border-style: solid;
border-width: 50px 50px 50px 50px;
width:0;
height:0;
display:inline-block;
}

Whole DOM and CSS code
//DOM
...
<td id="chrome-lhn-toggle">
    <div id="chrome-lhn-toggle-icon"></div>
</td>
...
//CSS
#chrome-lhn-toggle:hover {
background: #C2CFF1;
}
#chrome-lhn-toggle, #chrome-viewer {
padding: 0px;
vertical-align: top;
}
#chrome-lhn-toggle {
background: #EBEFF9;
cursor: pointer;
width: 8px;
}
#chrome-lhn-toggle:hover #chrome-lhn-toggle-icon {
border-color: #C2CFF1 white #C2CFF1 #C2CFF1;
}
#chrome-lhn-toggle-icon {
border-color: #EBEFF9 #68E #EBEFF9 #EBEFF9;
border-style: solid;
border-width: 5px 5px 5px 0px;
height: 0px;
margin-left: 1px;
margin-top: -5px;
position: absolute;
top: 50%;
width: 0px;
}
#chrome-lhn-toggle-icon {
font-size: 1px;
line-height: 1px;
}

Conclusion
This is a simple way to make a arrow icon by pure CSS instead of assigning image.

2010/07/02

Convert rgb color to hex color

7/02/2010 11:00:00 AM Posted by Kai-Chu Chung , , , No comments
If you have written HTML file, you must know that how to assign color to DOM element. You just need to assign CSS style to
DOM element like

<span style="color:#ff0000">This is text</span>
It is very simple. But, we may want to change the color
by Javascript like color picker. What's the problem? You may get the "rgb(255, 0, 0)" color value by Javascript.
Then, you have to convert rgb to hex color or convert hex to rgb color. The following is simple code.

rgb to hex


function rgb2hex(rgb){
var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
var hex = function(x){
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
};
var tmp = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var color = hex(tmp[1]) + hex(tmp[2]) + hex(tmp[3]);
return color;
}

hex to rgb

function hex2rgb(v){
if (/^[0-9A-F]{3}$|^[0-9A-F]{6}$/.test(v.toUpperCase())) {
if (v.length == 3) {
v = v.match(/[0-9A-F]/g);
v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2];
this.value = v;
}

var r = parseInt(v.substr(0, 2), 16);
var g = parseInt(v.substr(2, 2), 16);
var b = parseInt(v.substr(4, 2), 16);
return [r, g, b].join(',');
}
return v;
}

Result

var input = $(this).css('color'); // rgb(255,0,0)

var hex = rgb2hex(input); //ff0000
var rgb = hex2rgb(hex); //255,0,0