patw 的筆記、生活、隨筆
jQuery
iPhone/iPad 等行動裝置上的 audio 標籤無法自動播放 (autoplay) 與預載 (preload) 的問題
四月 30th
即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作,是使用 Nodejs 來達成,但這篇講的主題跟 Nodejs 無關,而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。
情況描述:Case 中有個互動效果是當使用者開啟手機版網頁後,會進行互動並播放 GIF 動畫(噢,許多舊版本的 Android 裝置是無法播放 GIF 動畫的,這點也要提一下),動畫播放過程中會播放音效。
在 Android 的內建瀏覽器中可自動播放音效,但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放,一點聲音也沒有。而且在桌上型電腦上都可正常地播放。
為什麼呢?
[JavaScript] 判斷手機為直向或橫向
四月 23rd
最近在製作手機版的 Event Site,發現許多眉眉角角的東西要不斷地調校。
iOS 也許還好,頂多就是 iPhone 跟 iPad 的差異。
但 Android 就麻煩多了,要顧及各種版本與螢幕大小。喔對了,還有不同瀏覽器的問題。
本例想利用 JavaScript 來判斷使用者的行動裝置正在使用直向或橫向瀏覽,
若非我們預設的瀏覽方向,需秀出警語或遮罩。
當然也可以選擇 CSS 的方式來製作,可以搜尋 "orientation css" 這樣的關鍵字,可以找到許多做法。
但有時候還是需要 JavaScript 的事件來控制一些流程。
以下是在
- SAMSUNG I9100 (Android 4.0.3): 內建瀏覽器、海豚瀏覽器 8.0.0、Chrome Beta 0.18.4409.2396、Opera Mobile 12.00.ADR-1203051631
- Sony XPERIA S: 內建瀏覽器
- HTC ONE X: 內建瀏覽器
- SonyEricsson Xperia Arc S: 內建瀏覽器
- Apple iPhone 3GS 內建瀏覽器(Safari)
- Apple iPhone 4S 內建瀏覽器(Safari)
- Apple iPad2: 內建瀏覽器(Safari)
測試過 OK。
以下是 Code:
More >
[Facebook][jQuery] 讓「讚」顯示完整的數字
三月 1st
我們在網頁中嵌入 Facebook 的「讚」按鈕,當被讚超過一定數量,就不會顯示明確的數字,如下圖:
但這個案子希望能顯示完整的數字,要怎麼解決呢?
對了,順帶一提,「讚」的數字包含「讚」以及「分享」次數。( The count on the Like button will include all likes and shares — from Faceook Developer, Like Button)
思路是這樣,將原有的數字藏起來,然後加入我們用 Graph API 查詢出來的明確數字,噢對,你還得準備數字對話泡泡的圖檔。
註:不知道這樣的解法是否有違反 Facebook 使用規範 品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕 中的「你可以依照所需調整大小,但是不能以其他任何形式修改「讚」按鈕 (如變動設計樣式)」。
[Flash][JavaScript] 蓋在 Flash 上面的 DIV 與中文輸入的問題
三月 1st
好久沒發文了,最近公司的案子都好多又好趕。
這陣子除了在規劃案子、趕案子外,另一方面在自學 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。
More >
[JavaScript] 在 IE 中隱藏/顯示 DIV 中的 Flash 不會重新播放的解法
九月 28th
在某個案件中,需求是點擊 HTML 頁面上的 button 便會以 BlockUI 方式顯示一個包含 SWF 動畫的 DIV 出來,點擊 SWF 上的叉叉可隱藏此 DIV,若使用者再次點擊 HTML button,該 DIV 又會顯示出來並且從頭再播放 SWF 動畫。
在 Chrome 以及 Firefox 上都可以達到上述需求,但到了 IE 上,隱藏 DIV 後再顯示,其中的 SWF 似乎並不會被重新載入,因此會停留在上次播放的最後一格,尚不知這是 IE 對於 Flash 的 Bug 或這才是正常的,經過一番討論跟摸索後試出了解決方法。
※當然也可以採用 JavaScript 呼叫 SWF 中的重新播放事件來解決,但此次並不是採用此方法解決。
[Facebook] 取得粉絲專頁資訊與最新一筆主題的方法 (PHP/jQuery/ASP.NET(C#))
三月 15th
想要取得粉絲專頁(粉絲團頁面)的公開資訊,以及該粉絲團最新一筆主題該怎麼做呢?
這邊分成三種版本來講:PHP、jQuery 與 C#.NET。
※由於粉絲專頁幾乎是公開資訊,從 Graph API 就可取得。因此其實也可以不用做 app,直接就可以透過 Graph API 撈取。這邊只有 PHP 是用老作法。
[jQuery] 使 ASP.NET 的 DropDownList 支援選項分組(optgroup)
三月 2nd
由於 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;
}
};
[JavaScript] Shadowbox 燈箱效果於父視窗展示 iframe 頁中的圖片 Gallery
十二月 29th
好,我知道這個標題相當拗口 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 的父視窗展示圖片群組的!以下就來看看做法吧。
[AJAX] 跨網域取得/存取資料
十二月 21st
[jQuery] 倒數計時(還有X天X時X分X秒)
十月 19th
jQuery 倒數計時, 需要 jQuery.Timers 這個 plugin.
startDate 可以用 server 的時間輸出, 避免 client 的電腦時間不準。
近期迴響