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

[Chrome Extensions] QuietRead V2.1.0 Released

Chrome Extension - Quietread V2.1.0 Released

My last updated (v2.0.1) was one month ago. The biggest changed on Chrome extension Quietread V2.x was using Google OAuth for authorization. The Users don't type their Google Account and Password. It's more convenient and safe to access user's data on Google Spreadsheet.

Then, what's updated at version V2.1.0. The following list is simple summary.

• Add Tags and Notes feature for each Item. Now, you could add tags or notes to help you find out specific item you haven't finished.
• Search and tags support auto complete. You could use multiple keywords (ex: tags:jquery 2010). The results will highlight also.
• Quietread supports auto fetch your data from Google Docs spreadsheet in background in specific period. Default setting is 300 secs. You also could update immediately by clicking refresh button.
• You could share link what you read to your friend by email button.
• Add page and remove page by keyboard short keys.

The summary above are new features. Then, what features are pull off at this version.

• Sorting. I take searching instead of sorting.
• Show list by keyboard short keys. This feature does not work very well because of some specific pages like Chrome Home page.
• Automatic add page by clicking Quietread icon. It seems a little bit annoy.

Layout

Edit Notes

Edit Tags

Search box

Search for specific tag

Search for specific tag and keyword

Options

Notices

There may have problem when you update Quietread to version 2.1.0. You have to make sure "QuietreadQueue" that on your Google Docs has 7 columns at least.

Download Quietread V2.1.0

Read More

Blogger Template Testing

section subject

Google Search

• Rearrange related posts code.

blockquote area

this.etag = json.gd$etag;
var row = {};
row.faviconurl = Url.decode(json.entry.gsx$faviconurl.$t);
row.url        = Url.decode(json.entry.gsx$url.$t);
row.title      = Url.decode(json.entry.gsx$title.$t);
row.createdate = json.entry.gsx$createdate.$t;
row.click      = json.entry.gsx$click.$t;
row.edit       = json.entry.link[1].href;
row.etag       = json.entry.gd$etag.$t;
result.push(row);

Read More