Google Reader's Toggle Icon

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.

Read More

Convert rgb color to hex color

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

Read More