鳥毅的Blog

需求：有一個動態網頁，每個物件都是動態載入，每一種物件都允許自訂顏色，因此我用物件的type id做為CSS的名稱，設定後立即生效。

剛才MIS小姐的程式出現一個奇怪的Bug，在IE可以正常執行但是在Chrome完全沒有反應。我看了一下發現她用AJAX load一個完整的html進來塞在div裏，她認為這樣在第一頁有載入 jQuery，在這頁就不用再載入。

由於某位很低調的學弟一直鼓吹Chrome Extension，所以今天花了半小時看了一下；似乎不會很難寫，剛好又看到 上官神人 貼的大人的美人時計avtokei，就簡單試做成一個extension。 I followed  Hello World  wrote a AV-Tokei Chrome Extension as an exercise. 簡單地說，就是照著 Hello World 的內容，再改寫自己的popup.html。目前這個av tokei就是點下去出現目前時間的美女圖，原網站是日本當地時間，我是盜連它的圖，應該沒幾天就不能連了，哈！ To put it simply, I only rewrite popup.html. You can download the crx here . 下載網址： 這裏 其實我是希望能做出一個自己用的簡繁轉換，因為還沒看完Tutorial，所以先做一個垃圾玩玩。 Update: 似乎有朋友誤會我的意思，重點在可以自製，而不是盜連圖片呀！因為再增加DigGirl extension示範。

今天在改一個asp的舊網頁，用CSS怎麼都設不出原來用html的BorderColorLight及BorderColorDark畫面好看，後來google找到 http://www.zeali.net/entry/412 原來要放棄CSS的簡單設定法 table { border: 3px outlet #ade1ff; } 要設成類似 table { border-top: 3px solid #ade1ff; border-left: 3px solid #ade1ff; border-right: 3px solid #4284e4; border-bottom: 3px solid #4284e4; padding: 0px; margin: 0px; border-spacing: 0px; border-collapse: collapse; }

最近有訂閱在下的巴布/Twitter的朋友，應該知道小弟這幾天想把企業內部的IE only網頁改成標準符合W3C語法，並將舊的big5網頁改為utf-8。除了難搞的IE DHTML和標準DOM差很多之外，早期全大寫的html tag在Aptana看到實在很不順眼，還有屬性內容沒有加上"或'，就興起找工具來處理的念頭。 最有名的工具當然就是 HTML Tidy ，中文預設輸出成unicode表示法，但還是可以加上 -utf8 的參數強制輸出成 utf-8。 Aptana 1.2.0版之後內建很類似 HTML Tidy Eclipse Plug-in 的HTML Tidy功能，居然也有相同的Bug：設定成utf-8後中文輸出亂碼。 由於 HTML Tidy Eclipse Plug-in 使用 JTidy 這個2001年之後沒動過的project，於是就從這裏下手。（警告：以下hack非常dirty，而且只在utf-8編碼系統有效，只在Ubuntu上成功，Win32無效） 下載 jtidy-04aug2000r7-dev.zip 解開後， 在jtidy-04aug2000r7-dev/src/org/w3c/tidy/Configuration.java第471列，把int result = ASCII; 改成 int result = UTF8; 另外Aptana版的HTML Tidy不能關掉generator訊息，因此我把 Lexer.java第522列的addGenerator(Node root)裏的內容直接改成 return true; 在編輯時會有enum是keyword的錯誤訊息，所以再改Configuration.java第126~129頁的enum變數名稱為enu。 接下來在jtidy-04aug2000r7-dev目錄下輸入 ant 命令就會在build目錄下產生Tidy.jar。 把新做的Tidy.jar覆蓋aptana/plugins/com.aptana.ide.libraries_1.2.1.18697 （隨著版次數字會變）下的Tidy.jar即可。（ 這裏 放一份我做的） 在Win32下要改編碼建議用ConvertZ，在Linux當然就用iconv，轉碼為UTF-8後就直接用Aptana編輯，Run HTML Tidy後若...

原本以為在HTML的DOＭ裏取得視窗大小是件簡單的事，沒想到IE4與IE6也不同，隨便抓到 這 不完全正確，幸好 這 有解。以下是它的解法： function alertSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } window.alert( 'Width = ' + myWidth ); window.alert( 'Height = ' + myHeight ); }

滿版和全螢幕英文都叫Full Screen，但我要的效果是整個html裏都是flash object。 其實不難，只要把width和height都設成100%就可以： <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100%" height="100%" id="menu" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="index.swf" /> <param name="quality" value="best" /> <param name="bgcolor" value="#306790" /> <embed src="index.swf" quality="high" bgcolor="#306790" width="100%" height="100%" name="menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> 找了...

前幾天雅痞學弟說要跨 frame 設定CSS，我想這應該需要靠JavaScript才做得到。今天抽空稍微試了一下，果然很容易。 假設分為二個frame，在一個frame用 var document1 =parent.frames[0].document; 就可以輕鬆存取另一個頁面的dom物件。 今天忽然想到，若是iframe呢？查了一下 w3c school ，可以用 contentDocument 屬性，也就是 var document1 = document.getElementById('iframe1').contentDocument; 可惜IE不支援。接著就只好找非標準的寫法， 這 有解。 簡單地說，利用contentWindow屬性，同樣能找到document物件。 var document1 = document.getElementById('iframe1').contentWindow; contentWindow屬性算是非標準，但Firefox其實也支援。 上文 中的 window.frames[frame名].document 的方式，把 iframe 當 frame 看待，感覺上怪怪的，而且又是IE only，您就別用了。 參考： contentWindow at mozilla contentWindow Property at msdn （在下強烈建議別用document.all這種非標準的寫法呀...）

最近寫一個簡單的查詢網頁，但使用者反應畫面會有殘像。經測試得知IE5.5，IE 7都不會發生，唯獨IE 6.0才有此殘像拳功夫；請看 IE6殘像拳 範例（若沒看到殘像請用滾輪捲動）。 這個問題似乎遇到的人不多，經過不斷的測試，找出問題在以下的CSS： body { background-image: url(images/logo.png); background-position: center 200px; background-repeat: no-repeat; background-attachment: fixed; } 已經不記得是在那本書上抄來的，但就是想做到浮水印效果。 此招得配合frame或iframe包住此網頁，並且有div之類的tag，加上必須捲動的特性就會觸發。 前幾天只有在中國的網站有看到某位仁兄提到，但並無解。要避免此情形之發生，唯有移除image或是不要包在frame裏。

最近看到某大軟體公司的asp程式，發現IE特有的事件處理方式。 宣告函數名稱： 控制項 id_事件() 就會在事件發生時觸發。限定在VBScript使用，JavaScript無效。 IE7在beta版時把這些非標準DHTML移除，但在正式版又重新支援，另一個例子像document.all(id)；如果改寫，請記得改為 document.getElementById (id)，這是目前的DOM標準。 另外，在這次測試無意中發現 Firefox的JavaScript 函數名稱會分大小寫 ，而IE不會。 以下為測試網頁原始碼： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>測試IE6、IE7與Firefox 2.0相容性</title> </head> <body> 測試OnChange事件，隨便填一個字後點到空白處或按Tab <script language="vbscript" type="text/vbscript"> <!-- sub t1_onChange() alert ("t1 OnChange VBScript 事件") end sub --> </script> <script language="JavaScript" type="text/javascript"> <!-- function t1_onChange() { alert("t1 OnChange JavaScript 事件"); } function ClickMe() { var label1; label1 = document.getElementById('t2'); label1.value= label1.value + "getElementById "; label1 = document.all('...