發表文章

目前顯示的是 七月, 2013的文章

最近應用在專案上的adapt.js

圖片
[此圖截圖來源:http://adapt.960.gs/]



adapt.js是什麼?
adapt.js其實一個蠻輕量的JavaScript,可以透過使用他,實現在不同px的螢幕大小,載入不同的css。我想透過他實現RWD的網站,不過adpat.js的原意應該不是針對RWD,是我自己想要這麼用。
因為RWD的精神涉及兩件事情,第一件事是浮動的寬度(fluid width,或稱流體寬度); 第二件事是@Media Query。而我覺得adapt.js強調的是管理css,可以一目瞭然地看出在何種條件下載入哪一支CSS.



寫法:
主要的sample寫法如下:
// 寫入符合你的網站需求的設定 var ADAPT_CONFIG = { // 在這裡設定你的css資料夾路徑 path: 'assets/css/', // 是否要動態載入? 如果是false,只會在網頁第一次load進來的時候跑那一次 // 如果是true,那就會去監聽window的resize,當你改變你browser大小的時候,就會去偵測網頁size載入不同css dynamic: true, //然後你可以自己寫callback,不過這部分我還沒試過 callback: myCallback, // 接下來設定range的範圍跟相對應的css // Separate ranges by "to" keyword. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1940px to 2540px = 1920.css', '2540px = 2520.css' ] };<script src="assets/js/ada…

[PHP]定義常數我們都會,但是如果我的常數的值是Array呢?

身為一個知識粗淺的前端
寫php,遇到問題就是求救stackoverflow...


php是怎麼定義常數的?
常數是什麼,我都這樣記的:固定的數字。
什麼是固定的數字呢?絕對不是你的三圍,舉個例子來說,數學的pi是3.14159..
pi是一個不會改變的數字,因此如果是我,並不會把它(pi)拿來當變數
(簡單來講變數是會變的數字,比方說我的三圍),而常數就是不變的數字。



因此我會這樣定義pi:
defind('常數命名',常數的值可以是字串或是數字);
define('PI',3.14159);
這樣就是定義好PI這個常數了。




定義常數有幾個特性:

'通常'常數的命名會以英文大寫表示,主要是想跟一般的變數做區隔,或是讓其他coding的人知道,該變數之所以是大寫,是有特定的意義存在,如沒有必要,盡量不要去更動。通常常數只會宣告一次,常見的情況是一個網站裡面有一個congif檔案,裡面可能寫入整個網站會用的常數。常數的前面是沒有$符號,這點跟變數不太一樣例,echo一個變數:echo $my_weight;例,echo一個常數:echo WEB_SITE_NAME;常數的值只能是數字或字串...m...



因此我今天就在想,我該如何定義一個常數,可是值是Array呢? 第一次我就這樣寫: define('MY_HOUSE_LOCATION',array("台北"=>"忠孝東路", "台中"=>"XXX路", "嘉義"=>"XXX路") ); 天真的以為可以這樣寫,但這真是一個很慘的寫法啊..完全不能用。




其中一個答案是可以使用serialize(); 不過我不確定是否有其他方式,我只能說我查到了這個方法。
定義的時候這樣用: define("MY_HOUSE_LOCATION", serialize(array("台北"=>"忠孝東路", "台中"=>"XXX路", "嘉義"=>"XXX路"))); 用的時候這樣寫,要記得unseria…

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

有一次我在開branch的時候:
$ git checkout -b winwu/dev
發生了這個錯誤:
fatal: Not a git repository (or any of the parent directories): .git
不過,起因不是重點,因為就算我今天不是開branch,也有可能發生這個錯誤~

這個錯誤是在告訴你,你所在的目錄,並不是一個git的repository,換句話說,其實就是git在你這個目錄下找不到.git這個目錄,沒有這個目錄,有很多事很難再往下做,因此解決方法就是下git init,git init就是創造一個空的git repo或是重新初始化一個git repo。

$ git init Reinitialized existing Git repository in h:/your_docs/your_web/.git 下了git init就會重新初始化這個git repo.
參考:git-init(1) Manual Page

使用Fancybox的一個bug:Cannot read property 'msie'

事由:
最近使用最新版的fancybox,jquery.fancybox-1.3.4.js
但是console.log出現了這個bug : Cannot read property 'msie'
也因為無法讀取到msie這個property,因此頁面上有使用fancybox的地方無法正常運作fancybox
看到msie讓我推測是不是因為1.3.4版的fancybox是搭配jQuery.1.9以上的版本
(因為jQuery1.9以上的版本不支援瀏覽器的判斷)


Issue:
我看到的類似的問題在github上可以參考
https://github.com/fancyapps/fancyBox/issues/485


Stackoverflow上的解決方式,有效!
http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read
解決cannot read property 'msie'的方法是 :

請先打開 jquery.fancybox-1.3.4.js將大約第29行取代成 : isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,將所有的 $.browser.msie 取代成 navigator.userAgent.match(/msie [6]/i) 另外這個stackoverflow也提到,如果使用fancybox2.1.4的版本,這個issue就不會有了。:)



結論:
Stackoverflow的解法還蠻俐落的,我其實是還蠻不想再load一個Migrate XDD 使用這類的套件如果遇到問題只能上網求解了,不然就是要很爭氣地自己有辦法寫出一個類似的plugin。

[Tip]對調垂直的jQuery UI Silder的min與max

圖片
[此圖截自 :http://jqueryui.com/slider/#slider-vertical ]

最近在使用jQuery UI silder時遇到一個問題
就是當使用orientation: "vertical"時,最大值會在上面,而最小值會在下面
而我是想要最小值在上面,最大值在下面。
看了官方的API,好像沒有辦法設定。

[此圖截自 : http://api.jqueryui.com/slider/ ]




所以為了解決這個問題,在stackoverflow找到了方法:
http://stackoverflow.com/questions/3083874/is-there-a-way-to-make-the-jquery-ui-slider-start-with-0-on-top-instead-of-on-bo


原來秘訣就是 ui.value 要先減掉max的值
假如最大值是100,
最後的ui.value應該要100-ui.value
這樣就能將min跟max對調。



感覺好像是一個方法轉換的問題,結果我想了好久xd


最近認識的新工具: bitbucket

圖片
[此圖截自:https://bitbucket.org/]

最近因緣際會下認識了這個好工具叫做Bitbucket
其實他跟Github非常的相似,但5人以上團隊開發是要收費的。

不過我非常喜歡裡面的介面,自從看過JIRA介面之後才知道Atlassian這間公司,產品實在是很優秀,bitbucket理面的管理方式跟設定也很容易上手,是github的另一種選擇。

有興趣的話馬上註冊一下吧!
註冊方式除了可以直接註冊之外,也可以使用g+,  facebook, twittergithub,可以說是非常親民且容易上手,不過若跟我一樣使用github直接註冊的話,記得以後要git clone一個專案之前先換密碼,因為在git clone的過程很有可能出現request URL returned error,到時候只需要更新bitbucket帳號的密碼就可以了 ,參考


[此圖截自:https://bitbucket.org/]
這是我的bitbucket專頁,呵呵,註冊後馬上開了兩個repo,另外repo也可以跟JIRA做結合。


如果不清楚怎麼git流程,Bitbucket 101  也有非常詳盡的教學~
對於所有的工具實在很難有個詳盡的解說,多用就是了。
Keep Coding!

只學一天的three.js(三) : 我會把sketchup檔案匯入load到畫面上了

圖片
Demo 網址:
http://yiying2.ueuo.com/three/work2.html

*3D檔案圖檔較大,凡請耐心等候。(我再來想一下怎麼解決.dea檔案大小的問題)
*請使用google chrome為最保險



這個3D的素材是拿我大四的sketchup的半成品
轉出成.dae檔,才能拿來載入。


(一)先決條件是什麼?
第一件事是一定要匯入three.js
第二件事情是要匯入ColladaLoader.js,但ColladaLoader.js要另外下載,依我看好像沒有在three.js下載下來的那包裡面
第三件事,匯TrackballControls.js,因為有了這個,才能讓你用滑鼠控制3D模型轉動



(二)在哪裡載入.dae檔?
要載入您的.dea檔是依靠loader的load函式:

loader.load('http://localhost/three/0033.dae', function (result) {
     //一些設定
});

*記住,.dae的路徑,一定要符合同源策略(以chrome來說,除非你願意設定chrome --allow-file-access-from-files),最好的方法是將這個練習檔放在www目錄下,用localhost的方式去看。

如果你跑在local,而且不是在localhost的環境下,你很有可能出現這樣的錯誤:
XMLHttpRequest cannot load file:///D:/three.js/models/test.dae. Cross origin requests are only supported for HTTP. 如果你有更多的問題,或是不解,可以參考
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally




(三)Source code參考:




補充1: 如何從sketchup將檔案轉存成.dae檔?

另外您也可以參考 : https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models


只學一天的three.js(二) : 小練習

圖片
這個練習其實是延續上一篇的004練習,
目的是: 請畫三個立方體,並分別以x,y,z的方向旋轉解法應該有很多種,我只是在嘗試xd結果大概會像這樣: source code我放在我的github

只學一天的three.js(一)

今天剛好有點時間,簡單研究了一下three.js
白話一點就是他是一個可以做出3D效果的JavaScript

那麼廢話不多說就直接開始了
下面的範例幾乎是從
http://threejs.org/docs/58/#Manual/Introduction/Creating_a_scene官網參考過來的,想看英文的話就不用往下看了,因為我寫的感覺有點類似在英翻中。以下是001的範例: