終於試著寫一個 jQuery Plugin，功能是限制 input 或 textarea 中的文字長度，同時可針對中英文做不同的字元計算，中文時算為 2 字元、英文時則算 1 字元。
Basic:
$(document).ready(function () {
$('目標對象').ChineseLengthLimit();
});
Advanced:
$(document).ready(function () {
$('目標對象').ChineseLengthLimit({
limitCount: 11,
isByte: true,
callback: function (data) {
$("#msg").html("目前輸入:" + data.input + "/" + data.max + " 還剩:" + data.left + "字元");
}
});
});
前陣子案子遇到的問題，是一個簡單的表單需求，使用 ASP.NET 作為伺服器端語言，而前端要使用 jQuery validate 做驗證再送出。
在送出前需要再做一些事件，所以使用 jQuery validate submitHandler 事件處理，最後再以 form.submit(); 送出。
code 簡單重現如下：
Continue reading
即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作，是使用 Nodejs 來達成，但這篇講的主題跟 Nodejs 無關，而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。
情況描述：Case 中有個互動效果是當使用者開啟手機版網頁後，會進行互動並播放 GIF 動畫（噢，許多舊版本的 Android 裝置是無法播放 GIF 動畫的，這點也要提一下），動畫播放過程中會播放音效。
在 Android 的內建瀏覽器中可自動播放音效，但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放，一點聲音也沒有。而且在桌上型電腦上都可正常地播放。
為什麼呢？
最近在製作手機版的 Event Site，發現許多眉眉角角的東西要不斷地調校。
iOS 也許還好，頂多就是 iPhone 跟 iPad 的差異。
但 Android 就麻煩多了，要顧及各種版本與螢幕大小。喔對了，還有不同瀏覽器的問題。
本例想利用 JavaScript 來判斷使用者的行動裝置正在使用直向或橫向瀏覽，
若非我們預設的瀏覽方向，需秀出警語或遮罩。
當然也可以選擇 CSS 的方式來製作，可以搜尋 “orientation css” 這樣的關鍵字，可以找到許多做法。
但有時候還是需要 JavaScript 的事件來控制一些流程。
以下是在
測試過 OK。
以下是 Code:
Continue reading
我們在網頁中嵌入 Facebook 的「讚」按鈕，當被讚超過一定數量，就不會顯示明確的數字，如下圖：
但這個案子希望能顯示完整的數字，要怎麼解決呢？
對了，順帶一提，「讚」的數字包含「讚」以及「分享」次數。（ The count on the Like button will include all likes and shares — from Faceook Developer, Like Button）
思路是這樣，將原有的數字藏起來，然後加入我們用 Graph API 查詢出來的明確數字，噢對，你還得準備數字對話泡泡的圖檔。
註：不知道這樣的解法是否有違反 Facebook 使用規範 品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕 中的「你可以依照所需調整大小，但是不能以其他任何形式修改「讚」按鈕 （如變動設計樣式）」。
好久沒發文了，最近公司的案子都好多又好趕。
這陣子除了在規劃案子、趕案子外，另一方面在自學 ASP.NET MVC 3 並應用在案子上，有什麼心得會再發文的。
扯遠了，來記錄一下最近案子遇到要將 Facebook 粉絲專頁按讚的按鈕蓋在 Flash 內容上面的問題與解法。
相信很多人都遇過這個問題，我們會將 DIV 設 z-index，然後在 Chrome 中 DIV 會正常地蓋在 Flash 上面，但到 IE8 上面就被蓋住了。
改 wmode=”transparent” 是常見的解法，但在舊版（如 13.0.782）的 Chrome 中便無法切換輸入法為中文（註：測試在 Chrome 版本 17 中無此問題）。
最後我是寫一段 JavaScript 來判斷，瀏覽器是 IE 就多帶 wmode 為 transparent，反之就不帶。
以下是實際的 code。
Continue reading
在某個案件中，需求是點擊 HTML 頁面上的 button 便會以 BlockUI 方式顯示一個包含 SWF 動畫的 DIV 出來，點擊 SWF 上的叉叉可隱藏此 DIV，若使用者再次點擊 HTML button，該 DIV 又會顯示出來並且從頭再播放 SWF 動畫。
在 Chrome 以及 Firefox 上都可以達到上述需求，但到了 IE 上，隱藏 DIV 後再顯示，其中的 SWF 似乎並不會被重新載入，因此會停留在上次播放的最後一格，尚不知這是 IE 對於 Flash 的 Bug 或這才是正常的，經過一番討論跟摸索後試出了解決方法。
※當然也可以採用 JavaScript 呼叫 SWF 中的重新播放事件來解決，但此次並不是採用此方法解決。
想要取得粉絲專頁(粉絲團頁面)的公開資訊，以及該粉絲團最新一筆主題該怎麼做呢？
這邊分成三種版本來講：PHP、jQuery 與 C#.NET。
※由於粉絲專頁幾乎是公開資訊，從 Graph API 就可取得。因此其實也可以不用做 app，直接就可以透過 Graph API 撈取。這邊只有 PHP 是用老作法。
由於 ASP.NET 的 DropDownList 控制項不支援 optgroup 標籤，就無法做選項分組的功能 ..
後來想用 jQuery 實現此一功能，我寫成 plugin 了，可參考一下：
把這段 code 存成 optgroupTrans.js：
$.fn.optgroupTrans = function() {
var items = $(this);
var groupnames = [];
for (var i = 0; i < items.length; i++) {
if ($(items[i]).attr('optgroup') != null) {
groupnames.push($(items[i]).attr('optgroup'));
}
}
// groupnames = $.unique(groupnames);
groupnames = uniqueArray(groupnames);
for (var i = 0; i < groupnames.length; i++) {
$("option[optgroup='" + groupnames[i] + "']").wrapAll("<optgroup label='" + groupnames[i] + "'>");
}
function uniqueArray(a){
temp = new Array();
for(var i = 0; i < a.length; i++){
if (!contains(temp, a[i])){
temp.length += 1;
temp[temp.length - 1] = a[i];
}
}
return temp;
}
function contains(a, e) {
for (j = 0; j < a.length; j++)
if (a[j] == e) return true;
return false;
}
};
好，我知道這個標題相當拗口 XD
前幾天寫了篇 [JavaScript] ColorBox 跨越 iframe 顯示完整的黑底(overlay) ，但詢問的網友表示他希望能展示圖片群組，不過ColorBox 的官網，關於 Opening ColorBox in the parent of an iframed document 的這段，最後提到：
Note that grouping will not work with this format since the parent document can not access the content of the iframe to see if any of those elements share a rel attribute value.
也就是用這種方法的話，是無法取得 iframe 中元素的 rel 值的，因此也就無法展示圖片群組了。
也許可以修改以達成目的，但目前還沒空細細研究他的 Code .. 於是就偷懶先找其他替代方案囉 😛
經過連來連去的找尋，找到 Shadowbox.js 這套燈箱效果是可以達成在 iframe 的父視窗展示圖片群組的！以下就來看看做法吧。