EragonJ – A humble navigator

About EragonJ | About this blog

Archive for the ‘jquery’ tag

[JS] jquery.zoomImg.js 1.0

leave a comment

原本我一直不認為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

Written by EragonJ

August 15th, 2010 at 10:36 pm

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

leave a comment

最近在公司開發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。

範例程式碼:

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

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

所以這個很Tricky的方法可以參考下面:

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

下次見囉。

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

Written by EragonJ

August 11th, 2010 at 7:14 pm

[Hax4] Rainbow

leave a comment

測試頁面:在這、專案資訊:在這


這幾天因為心血來潮,想說來練習一下pure javascript,所以就都不用jQuery來做事情(雖然最後還是有用,不過我只用來做特效而已XD)。這個Idea其實是源於我以前做的一個很爛的liu-translator,它只能單方面做字根對字的轉換,所以就想說利用Ajax的概念來實作一個線上的IME,因此我就去找了之前Luke的網蝦米來研究他的UI介面。


研究了一下後就開始著手動工整個JS的架構,邊看深入淺出Ajax邊試著實作他說的一些思惟,像是要怎麼寫的很MVC,所以就開始學著把程式切成粗略的「資料」、「模組」、「樣式」三類,雖然之間還是有些耦合性,但是比較以前的我,這次的實作算是很成功的分離了。


之後又想到行易公司的練習嘸蝦米的打字程式一直沒有跨平台,只支援該死的M$,所以為何不幫他們設計一個Cross Platform的Web Application?反正只要解決Cross Browser的問題就可以了,雖然我在Cross Browser這條路上只是一個剛入門的新手,但總比Cross Platform好多了吧…因此就把分離完的架構再修改,改成有點像是遊戲的小程式。


原本已經接近完工的狀態了,但是Bu因為是「大新倉頡」的愛好者,所以就給個建議要我加入的其字根對應表,去擴充可支援的輸入法,就又經過了一場編碼和正規表達式的戰爭後,終於把切換輸入法的功能也加上了,這完全要歸因於先前的MVC架構,讓我能夠在很短的時間完成這個動作。


最後一個也是最重要的啦,為了提高遊戲性,我設計了一段可以自動去抓使用者給定URL的頁面回來,把該頁面上所有符合UTF-8繁體中文的字全部抓下來當成題目,這又比起以前行易公司設計的那些題目多了一些趣味。多了這個設計,你還可以邊看Yahoo!奇摩新聞邊練打字咧!!

附上程式截圖:




§2010/05/13 補上程式的Demo連結,原來我都沒有放出來= = ,舊的在這,新的在這

§2011/02/05 更新連結、圖片、介紹。

Written by EragonJ

January 27th, 2010 at 2:18 am

[計畫]想做的事

leave a comment

就在剛剛終於逃離了期末考的魔爪,現在要來列個清單是關於我整個寒假的計畫,能完成多少就多少吧。

  • 讀書計畫
    1. read 愛上jQuery & 深入淺出 Ajax
    2. [Done]read Facebook:性愛與金錢、天才與背叛交織的祕辛
    3. read Introduction to Algorithms
    4. …增加中
  • 工作計畫
    1. EatMe 主站規劃
    2. Hax4   主站規劃
    3. 畢業專題構思
    4. ACM解題
    5. …增加中
  • 其餘活動
    1. 食我出遊
    2. [Done]資轉出遊
    3. 死黨聚會
    4. ??
    5. …增加中

結論就是,等著累死吧!!!!!

Written by EragonJ

January 18th, 2010 at 3:27 pm

Posted in Others

Tagged with , , , , , ,