TKSham - More than just a Developer » jQuery http://www.tksham.com/blog Just another weblog from CUHK's student Fri, 20 Aug 2010 09:49:58 +0000 http://wordpress.org/?v=2.9 zh hourly 1 HTML5 placeholder http://www.tksham.com/blog/2010/06/15/html5-placeholder/ http://www.tksham.com/blog/2010/06/15/html5-placeholder/#comments Tue, 15 Jun 2010 02:42:44 +0000 Kwong http://www.tksham.com/blog/?p=1049 前陣子上上海的時候, 在有空的時候進修一下HTML5
(老實說上班實在太忙, 沒有太多學習的時間, 只好在排隊 / 乘車 / 無聊 的時候用iPhone 看一下電子書…)

想不到原來html 5 support placeholder 這種UI -
(Placeholder – When you click on (or tab to) the input form, the placeholder text disappears )

這種提示不單比較可有更多visible area (不用在旁邊再寫這個field 要填什麼),
更有方向去令user 按下去
(我也忘了這個placeholder 的script 是不是自己寫了, 但用jQuery 來寫真的簡單易明)

add class=”auto-clear placeholder” to the input / textarea

CSS
.placeholder {
color:#999999;
}*

$(‘.auto-clear’).focus(function(){
if($(this).val() == $(this).attr(‘defaultValue’))
{
$(this).val(”);

$(this).removeClass(‘placeholder’);
}
});

$(‘.auto-clear’).blur(function(){
if($(this).val() == ”)
{
$(this).val($(this).attr(‘defaultValue’));
$(this).addClass(‘placeholder’);
}
});

至於這一個就是用真實的html 5 來做testing, 你可以試試用不同的browser 來試試看

Reference -
HTML5 Draft Standard — 9 June 2010
Create modern Web sites using HTML5 and CSS3
WOORK – HTML 5 Cheat Sheet.pdf

]]>
 http://www.tksham.com/blog/2010/06/15/html5-placeholder/feed/ 0 jQuery animation-related plugin http://www.tksham.com/blog/2010/04/18/jquery-animation-related-plugin/ http://www.tksham.com/blog/2010/04/18/jquery-animation-related-plugin/#comments Sat, 17 Apr 2010 16:00:07 +0000 Kwong http://www.tksham.com/blog/?p=744 很久沒有寫過比較Technical 的文章~哈哈
這陣子比較忙, 寫Technical要專業要慢工出細貨嘛, 不然就不要寫~
這次為大家介紹一下自己近來見過jQuery 有趣的plugin
Portfolio of Kay Lo.

http://ohmygodhavemercy.com/folios/

YoxView

Demo: http://www.yoxigen.com/yoxview/

http://workshop.rs/projects/jqfancytransitions/
QueryLoader

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

Demo: http://www.gayadesign.com/scripts/queryLoader/

Demo with self-customized animation: http://tksham.com/cuace/

Other Related Blog Post:

http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

http://www.queness.com/post/222/10-jquery-photo-gallery-and-slider-plugins

]]> http://www.tksham.com/blog/2010/04/18/jquery-animation-related-plugin/feed/ 0 jQuery Animation + IE z-index bug http://www.tksham.com/blog/2010/02/02/jquery-animation-ie-z-index-bug/ http://www.tksham.com/blog/2010/02/02/jquery-animation-ie-z-index-bug/#comments Mon, 01 Feb 2010 16:00:01 +0000 Kwong http://www.tksham.com/blog/?p=541

近來很多人罵iPad 不支授Flash (最少Developer 都在罵…)
反正學習在I.T. 是少不了的環節,
還是乖乖的練習一下不用Flash 來做Animation.
星期六沒有Daily Inspiration
就是要幫學長設計簡單的網頁

http://www.tksham.com/cuace/

因為不擅長出Graphic Design…
用了很多時間去處理字型跟排版的問題

花了更多時間去處理IE 的問題…

Opening IE6, IE7, IE8, Firefox, Chrome...

因為IE 6 跟IE 7 的z-index bug…

簡單的fix bug 的方法就是 child 的z-index 要跟parent 的比一比

伸延閱讀 -

iPad – The iPad provides the ultimate browsing experience?
“Millions of websites use Flash. Get used to the blue legos.”

IE z-index bug: http://livebinders.com/play/play_or_edit/1808

Original animation inspiration-
http://ohmygodhavemercy.com/folios/
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

css hack used for IE -
http://bradkellett.com/p/documenting-the-hacks-css-browser-targeting/

]]> http://www.tksham.com/blog/2010/02/02/jquery-animation-ie-z-index-bug/feed/ 0