Category: Javascript

[JS] plurkable – lightweight jQuery plugin for your own Plurk widget

Demo、載點與解說

好吧，我真的是過年太無聊才在那邊用 Javascript 寫一個輕量級的 plugin 讓你可以客制化自己的 widget，其實使用方式在 github 及 demo page 上面都寫的很詳細了，這邊就不多談（或是參考下面的 js code）。
https://gist.github.com/814690.js?file=gistfile1.js

現在開始愈來愈覺得 javascript 非常的 powerful，只要有 browser 就可以跟著老師帶你上天堂，也不用做什麼煩雜的設定，再加上自身對 JSON 格式的 support 及 browser 間內建的 functions 就可以很輕易的完成自己的需求，然後現在這幾年又出現了改變世界的 jQuery，更是把入門的門檻拉低了許多（至少解決了很多問題，雖然也產生了一些問題 xD），不過愈是如此，Javascript 就愈讓人覺得深不可測 …

而且現在又有許多好用的工具像是 PhoneGap 可以幫助我們來實作 mobile applications，而之後也會有許多的 desktop applications 可以用 Javascript 來實作，整個就是拉近了平台間的距離了呀。

ㄜ … 這篇應該是要介紹 plurkable ，但是我好像一直離題呀 … 管他的 xD ~ 祝大家新年快樂啦（????）

[Note] Useful tools for F2E

這篇用來整理一下與 F2E 相關的 tool，以供日後參考用（持續更新）：

Javscript | CSS Compressor（壓縮器）

  • YUI compressor

  • 好用的 YUI compressor ，支援 JS | CSS 的壓縮，使用說明、載點

Obfuscator（混淆器）

Test（測試）

  • Qunit

  • Javascript 單元測試的 Framework，適用於 jQuery plugin，使用說明、載點

[Notes] Interesting animation in jQuery

剛剛意外再次看到tzangms的部落格，沒想到已經過了幾年的時間了！因為這段日子對javascript開始有了一些研究，所以對它的Banner scrolling 的特效很感興趣，就順手研究了一下它的 js code，沒想到這麼簡單就能做到，不知道該說 jQuery 太厲害了，還是想到這種實作方法的人太聰明呢:P

上面這張是他網站的截圖，光是版面的配置以及使用的自製圖案來看，其實就看得出小巧精美的一面，不過今天的重點是那個Banner，我對於他可以做到捲動的效果感到很好奇，而實際做法其實也就是想像中這麼容易，只是他利用了一個CSS background-position的特性，原來當div的background設定成無限延展的時候（預設），就可以利用把position拉到無限遠的地方並搭配 Timer（jQuery可以用animate）設定好一個時間差，然後讓頁面在這個時間內一直偏移position的值來完成捲動的特效。

最後附上測試用程式碼，而圖檔的部分則是以tzangms的banner為例。
https://gist.github.com/757436.js?file=gistfile1.html

[JS] jquery.zoomImg.js 1.0

原本我一直不認為Javascript是一個很特別的Script Language，但是直到最近因為工作的因素所以逼不得以要去維護相關的Javascript的程式，結果沒想到Javascript竟然是如此的博大精深，甚至目前的Desktop application或是 Mobile application都開始使用Javascript來做開發。

直到最近剛結束的Coscup，我想效法一些朋友對自由軟體的態度來激勵自己，一來可以為這個世界盡一份心力，二來也可以訓練自己的能力，就當打怪練功吧:P

這個jquery.zoomImg.js 1.0是因為想要先寫好放著，等之後要做Blog的Image特效時使用的XD，不過既然有這個想法，那就打鐵趁熱，先把基本的功能刻出來，以後再做整理並加強功能吧。

這個plugin是在jquery-1.4.2.min.js的環境下開發的，不過我並沒有用到1.4才特有的一些寫法，所以應該在1.3也還能夠使用。jquery.zoomImg.js In Github

[JS] jQuery.css() problem when using Firefox

最近在公司開發JS的程式的時候，很多時候都會利用到快速又方便的jQuery Library，而這次就很剛好的遇到了Bug，花了很多時間才解出來，以下為測試環境（FF 3.59 , 3.6 ）：

假設我現在有一個DOM的元素，是一個img，當我設定其CSS為「display:none;」時，在FF上就會沒辦法利用
「jQuery.css(‘left’) or jQuery.css(‘top’)」來把這個值取出。就算你已經設定好left或是top的值，都只會抓到0px。

範例程式碼：
http://gist.github.com/518809.js?file=gistfile1.html

所以為了要解決在元素被hidden時不能取值的問題，就只能用比較髒的手段來抓到這個值，就是利用「visibility」。

什麼是visibility？它和display不同的地方在於說，display:none會直接不顯示這個元素並不佔用空間；而visibilty:hidden則是不顯示這個元素但是卻仍存在並佔用空間。

所以這個很Tricky的方法可以參考下面：
http://gist.github.com/518819.js?file=gistfile1.html

這樣就可以成功的取到left的值（top亦同）而不會影響UI的部分了，算是這次遇到最無言的Bug吧。

下次見囉。

δ 2011/01/20： 又開始繼續維護這個專案，其實對 FF 3.6.8 來說（不確定其他版本是否也會有相同問題），就算是最新版本的 jQuery 1.4.* 都無法從 display:none 的元素中利用 .css() 來取得特定的屬性值，因此我利用 jsfiddle 寫了一組完整測試，包含 display:none 及 visibility:hidden 元素的各種可能，請自己用你的瀏覽器來測試一下吧。

[JS] Image preload

The way a browser normally works, images are loaded only after an HTTP request is sent for them, either passively via an tag or actively through a method call.

所以這就是為什麼圖片都會有Delay抓不到的情況…因為他通常是被觸發時才會自動去抓src的圖。可是如果真的是這樣的話，那就要想個辦法來避免這個問題。不過該怎麼辦咧?

The simplest way to preload an image is to instantiate a new Image() object in JavaScript and pass it the URL of the image you want preloaded , and load it simultaneously to the page with the onLoad() event handler:

哦酷哦，直覺上的想法就是要讓頁面load完時就先onload 一個function，這樣就可以把執行時間提前，因此只要寫個function包起來讓onload去讀就可以了。

DEMO CODE:
http://gist.github.com/251380.js?file=gistfile1.js