Archive for March, 2010

Javascript Clock

Thursday, March 11th, 2010


一個提供Javascript時鐘的網站
http://randomibis.com/coolclock/

這是利用HTML5 Canvas的技術做的,Firefox、Safari、Chrome都可以跑沒問題。唯獨白痴IE需要另外import一個ExplorerCanvas的js檔才跑的了。Run是可以Run,不過更新速度會比較慢。

依據使用者電腦IP查看連線的地理位置

Wednesday, March 10th, 2010

Google有提供這個新Feature
http://code.google.com/intl/zh-TW/apis/ajax/documentation/#ClientLocation
當應用程式使用 AJAX API 載入程式時,載入程式會根據 IP 位址找出用戶端的地理位置。只要載入google提供的js library後,便可抓取 google.loader.ClientLocation 這個變數取得用戶的Location資料。詳細規格,請參考Google的文件說明。

可抓到的資訊有: 城市、國家、國碼、區域、經緯度

App範例

如何得知HTML Page裡目前Focus的Element?

Friday, March 5th, 2010

document.activeElement 這個變數會指向目前取得focus的element

所以,我們可以利用這個變數來判斷某一個element (如:input)是否有focus
依據有無focus,然後做不同的處理方式

Example:

if( document.activeElement == element ) {
    if( text == "" || text == defaultText ) {
        inp.removeClass("ghost");
        inp.val("");
    }
} else {
    if( text == "" || text == defaultText ) {
        inp.addClass("ghost");
        inp.val(defaultText);
    } else {
        inp.removeClass("ghost");
    }
}

這段code是用來做下面ghost(輸入欄位預設文字)這個效果:

滑鼠點了Twitter的輸入欄位後:

Reference:
http://stackoverflow.com/questions/497094/how-do-i-find-out-which-javascript-element-has-focus