patw 的筆記、生活、隨筆
網頁設計
[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 中的重新播放事件來解決,但此次並不是採用此方法解決。
[HTML5] 瀏覽器取得定位筆記
八月 18th
某個案子要用手機取得使用者所在經緯度的功能,使用 HTML5 可以很快地達成這個需求,但在較舊的 Android 版本瀏覽器上(例如 HTC Magic 的內建瀏覽器,自行刷機就另當別論了XD)會無法透過 HTML5 的 navigator.geolocation 取得定位。找過資料後,發現在這種情況需要透過 Gears 功能來達成(HTC Magic 的瀏覽器支援 Gears)。
下面就是整合這兩種方法的 Code:
More >
[IE] FCKeditor 於 IE9 中的對話框都跑不出來的解法
五月 23rd
以前的某個案子客戶反映,他們升級到 IE9 之後,所有 FCKeditor 的功能對話框 (例如: 從 Word 貼上、超連結) 都跑不出來,
經實際測試後發現果真如此,但只要將 IE 切到 IE8 模式(按 F12 的開發工具功能表最後兩欄可切換)就一切正常。
[網頁] Flash ExternalInterface.call Javascript 方法,於 IE 引發「’null’ 是 null 或不是一個物件」錯誤的解法
四月 28th
最近這個案子,有使用到 Flash ExternalInterface.call 網頁上的 Javascript function 的動作,測試過程中,於 IE 中一直會引發下面這段錯誤訊息:
訊息: ‘null’ 是 null 或不是一個物件
行: 1
字元: 111
程式碼: 0
[jQuery] 自訂 select 選單樣式
八月 18th
需求:下拉選單的設計是自訂的樣式,不只背景,連右方箭號也是。使用 jQuery 的解法很多,此為其中一種。
若要連下拉出的選單樣式都要變更 .. 可參考 jQuery UI 的版本。
解法:
http://mondaybynoon.com/2009/02/23/creating-custom-form-elements-using-jquery-selects/
FCKeditor 中使用完整網址插入圖片
六月 22nd
IE7 中表格被連續圖片撐破的解法
六月 22nd
在某個案子中,客戶反映某些使用者的瀏覽器(IE7)在瀏覽特定頁面時,會出現破表的問題。此部分為後端透過 FCKeditor 上稿,因此觀察了一下上稿的 html code,是這樣子的:
<p style="text-align: center"><img alt="" width="630" height="271" src="圖片位置" /><img alt="" width="630" height="828" src="圖片位置" /><img alt="" width="650" height="488" src="圖片位置" /></p>
這段語法被插入到一個表格中。而 IE8 或 Google Chrome 中瀏覽正常,圖片是垂直排列,但在 IE7 中圖片的排列會以水平橫向排列。
請求 Google 大神,找到了這篇,如該文說明,將
style="table-layout:fixed;word-wrap:break-word;word-break;break-all;"
加至表格即可解決此問題。
[jQuery] lightbox 彈出時造成頁面上的 Flash 消失
六月 10th
某個案子使用了 lightbox2 燈箱效果(jQuery 版,jquery-lightbox-0.5.js),而當 lightbox 彈出後,頁面上的 Flash 項目卻都消失了。看了一下 jquery-lightbox-0.5.js 的原始碼,原來是為了避免 Flash 顯示於最上層,也就是跑到 overlay 黑底的上面,而加上蹦現時將 embed、object 與 select 元素隱藏的語法。
其實可以利用 Flash 的 wmode 屬性避免這種現象,同時也可在燈箱效果出現時顯示 Flash(當然,是在 overlay 黑底下方)。
More >
Outlook 寄送網頁畫面出現 "嚜?!" 的解決方式
十二月 2nd
以前的案主詢問的問題:以 IE,檔案 > 傳送 > 以電子郵件傳送網頁當作電子報畫面,在 Outlook 郵件畫面中,只會出現:
嚜?!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
這一行文字,該如何解決呢?
More >
近期迴響