Jquery, Mootools

這個navigation 令chowky 眼前一亮,真的很難明白為什麼一個developer 會有這麼高的design sense 呢~ 令人羨慕。 見到效果是否覺得不錯呢~。 最難得是簡單直接~~(當然這個東西不太適用於cms 的template design 上,他的做法不是dynamic 的~但得到的是design 上的空間) HTML 方面都是利用ul (unordered list) <ul id="topnav"> <li class="home"><a href="index.htm">Home</a></li> <li class="about"><a href="about.htm">About Us</a></li> <li class="services"><a href="services.htm">Services</a></li> <li class="portfolio"><a href="portfolio.htm">Portfolio</a></li> <li class="contact"><a href="contact.htm">Contact</a></li> <li class="blog"><a href="blog.htm">Blog</a></li> </ul>

Share
Read More

chowky 覺得類似 outlook , ical 的 AJAX 的calendar好似很散,所以決定整理一下。 1. Day Pilot 這是一個為ASP.NET 而寫的一個component。成熟程度好高。還備有schedule 的 version 。 有Lite (免費,但功能會少一點)和P和Pro (當然要收錢的) version 。 Source: http://www.daypilot.org 2. dhtmlxScheduler 這都是一個很成熟的component. 非常smooth。有齊daily , weekly, monthly,commercial application 其實是必定要完整的。否則一定沒有人買。 不過如果你個想寫的都要是GNU (opensource) 才可以免費使用這個calendar ,否則就要收錢了。(Dual Licensing 亦不能用的呢) Demo: http://dhtmlx.com/docs/products/dhtmlxScheduler/livedemo.shtml Source: http://dhtmlx.com/docs/products/dhtmlxScheduler/

Share
Read More

1. 要注意用相同的 name and id attributes for Form Inputs chowky 很久以前都覺得奇怪,不過這是因為IE系列和其他不同的browser的分別,ie 是會search 左name attribute先,再search id attribute,但是其他browser是不會的。所以兩個attributes 都要用相同的名。避免發生問題 1 <input type="text" name="full_address" id="address" value="5th Avenue" /> 2. 不要放name attribute 在form tag 入面。 和上面的情況非常相似,要避免IE的問題。 不過chowky 不知道name 是deprecated (哈) Also, the name attribute for forms is deprecated in XHTML Strict, so it’s not…

Share
Read More

完成圖 構成的structure HTML tag 1 2 3 4 <div class="container"> <div id="sidenav><!–Fixed Sidenav Goes Here–></div> <div id="content"><!–Content Goes Here–></div> </div> 利用簡單的技巧, 把sidenav 的加上position 和fix的properties. position: fixed; float: left; CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .container { width:…

Share
Read More

Chowky 一向欣賞這位作者所做的simple and elegent 效果和教學。 只是簡單的4個steps 就可以做到以下的效果。 Step 1: HTML 都是利用ul 和li 1 2 3 4 5 6 7 8 <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> Step 2. CSS 要留意的是,現在是還未add span 的,span 會在之後用jquery 加上去。 1 2 3 4 5 6 7…

Share
Read More

這個其實不太算是jquery 的,因為jquery 只是幫助解決ie6 支援問題而已。 Menu Navigation 好像已經有很多了,不過chowky 欣賞這作者的simplicity。 大概的structure: 先用 ul ,包住不同的li ,再在li 中加入 [第一層] 和 span 之內的[第二層(subnav)] <ul id="topnav"> <li><a href="#">Link</a></li> <li> <a href="#">Link</a> <!–Subnav Starts Here–> <span> <a href="#">Subnav Link</a> | <a href="#">Subnav Link</a> | <a href="#">Subnav Link</a> </span> <!–Subnav Ends Here–></li> <li><a href="#">Link</a></li> </ul> 通常的都不是html困難,多數都是css方面的問題。因為要支援很久以前的browser ie6。(ie6 =…

Share
Read More

下一個web standard,如無意外,應該會是html5+css3。 This example only works in Firefox 3.5 and Safari 4 but here’s a quick tour of how it works. IE始終都未support。這對於web developer 來說,是一個nightmare,一方面要支援ie,又要支援firefox,safari。 但是,要利用新的html5的function就要放棄ie的support。 chowky對這方面還是樂觀的。later可能會好一點(仍然抱有信念)。 (說完未?) ok…back to topic 原來要make drag and drop 都不太困難。 會否,因為html5會令html 更普及? 1 2 3 4 5   <li draggable="true" id="file1" ondragstart="drag(this, event)"><span>filename.txt</span></li> To create a draggable area you can do this.  …

Share
Read More

這幾天,真是太忙,是經濟轉好的signal? 希望快點轉好。(chowky 持有很多股票….哈)~ 回歸主題。 可以選擇horizontal 和vertical flip,而且reflection 效果都可以turn off. 加入website 之中,立即可以提昇水準。(哈 chowky 一向不相信即時見效的東西) License:  License Free Demo: http://webmuch.com/demos/image_flip_demo/flip.html Source: http://webmuch.com/image-flip-using-jquery/

Share
Read More