HTML CSS center a auto width DIV

test test test

facebook自動收禮物

facebook收到的禮物太多，收的很累嗎？自動收禮物幫助您。
一個簡單的方法，使用Firefox + Selenium。
要開始的可直接看後段步驟。

Selenium是一個用來自動操作網頁的工具，對網頁開發者而言，可以做自動測試。
這不是幫你玩遊戲，不算機器人，只是禮物太多了，而且收禮物常要來來回回按來按去的，有時很慢又要等很久。

當然其實這個Selenium當然不只能收禮物，還能...
幫你收錢，放進銀行，還有幫你按任務等等，不過我沒有放出下載，
每個人玩的遊戲不同嘛，也不知有無違反遊戲的規則。
這也算是推廣Firefox嗎？？ cc...

• 先安裝Firefox。


• 完成後使用Firefox安裝Selenium Add-On。（請按Add to Firefox按鈕）


• 下載用來接收禮物的檔案AcceptGift.test。（請按右鍵->另存）


• 按Firefox->工具->Selenium IDE，就打開Selenium了。
  
  


• 按Selenium->檔案->Open，再去選擇下載的AcceptGift.test。


• 再按下＂箭頭＋一條橫線＂的按鈕來執行，就開始收禮物啦。
  


• 如果沒收完或停住了，只要再按一次執行就OK了。

ps.必需是已同意的遊戲收禮物才會成功喔，否則該禮物會出現同意畫面，然後就繼續收下一個禮物了。
ps.2.在Selenium中AcceptGift.test的內容，兩行就是收一個禮物，所以也可以多複制幾組，一次就可多收些禮物，當然中間要順利，有時網頁會有狀況發生，造成停止。

html include html，兩種工具介紹與比較。

沒有Server Side的支援，又不想用iframe，想用html include html。
這裡提供兩個選擇，
1.inc-5(jQuery Plugin)：inc: A super-tiny client-side include JavaScript jQuery plugin
2.jQuery UI - Tabs

先說明第２個，jQuery UI - Tabs，你可以只做一頁，有頭有尾，包函css等，然後用Tab的方式，當按下Tab時，會去載入該頁內容，而該頁只需是沒頭沒尾、乾淨的、只有內容的html code。
優：網頁內容單獨維護，乾淨簡單。
缺：搜尋引擎找到內頁內容時，你只能讓人看到白白的純HTML。

inc-5，網頁中就有範例。實做上有兩種大方向：
1.同jQuery UI - Tabs，只做一個page，onclick時再動態載入需要的內容。
2.每個page獨立，可以用javascript的方式，動態載入header或footer之類include用的檔案。
個人還沒有實做，但猜想：每個Page可以用最簡單的方式，但或許要包函一點必備的html頭尾及inc-5等，其它的網頁頭尾用inc-5，網頁其它設定及需求，都用js動態載入動態處理，或某些可寫在header.inc中。

各種版本IE的網頁測試

請出IETester，建立出一個多版本的IE測試環境。
可安裝在Windows 7, Vista and XP，可測試IE8, IE7 IE 6 and IE5.5。
這可比弄好幾套OS簡單的多了。

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

HTML原始檔中js及css後面加了＂?數字＂是什麼用途？

在Ruby on Rails產生的網頁原始碼中總看到assets的後面會多一段數字，像是：
<script src="/javascripts/cache/bundle.js?1236331223" type="text/javascript"></script>
現在才知道這是為了讓確保使用者能夠拿到最新的javascript或css檔案。

看到一個Plugins - Asset timestamping，會把最後修改的timestamp加到URL中，但是plugin的comment中就有人回應「Looks like assets are timestamped in Rails automatically now (v 1.1+)」，可能這是很舊的plugin了吧!

做了測試用Live HTTP Headers去看:
1.先隨便試一個js檔，如：http://wadevelop.blogspot.com/xxx.js?12345
Cotent-Length:9999
2.再開新的tab，一樣連到http://wadevelop.blogspot.com/xxx.js?12345
Cotent-Length:0
3.然後換連到http://wadevelop.blogspot.com/xxx.js?abcde
Cotent-Length:9999
證明了?後面更新timestamp，使用者就不會使用cache，而會重新載入js或css檔案。

處理iframe auto height(Iframe自適應高度)

全部參考：
1.Iframe自動調整高度, 在子網域SubDomain的情形
2.處理iframe auto height(Iframe自適應高度)
3.處理iframe auto height(Iframe自適應高度) - 相關問題紀錄
4.完整的iframe auto height程式(在iframe內容頁中處理)
5.或許你想要 "html include html，兩種工具介紹。"

注意

1.現在會寫下這篇的主要原因在於google chrome中，iframe的高度，會不斷的增高，當不斷按下iframe.content中的連接時，會不斷的reload。
2.這篇無法處理cross site的問題，先前有一篇「Iframe自動調整高度, 在子網域SubDomain的情形」
3.請參考處理iframe auto height(Iframe自適應高度) - 相關問題紀錄

處理的過程是

1.是從iframe的onload事件處理
2.或是從iframe content的onload事件處理
3.將iframe.height設成iframe.content.height。

但過程中就會遇到很多問題

Iframe 的onload事件

1.在Linux的Konqueror中似乎只有第一次, 之後內容的改變都不會再onload.
2.Mac的Safari似乎沒有這個onload事件, 因此Iframe先預設高度為2000px.
3.而IE 6; Firefox 2; Opera 9都沒有問題.

這個onload問題決定的是，要在iframe或iframe.content的onload事件來處理

iframe.content.height的取得問題

和height有關的屬性有clientHeight、offsetHeight和scrollHeight，參考 http://www.tsolong.com/post/355.html
1.每個Browser的定義不相同
* 參考同上。

2.當設DOCTYPE後還會產生變化
* 目前的測試是，沒加的話，３種高度Height會依Browser的設定
* 有加的話，不論那一種，３種高度Height都同樣拿到scrollHeight的值。

3.想說用jquery來取得height，也會受DOCTYPE設定的影响
用alert($("body").height()+" "+$("body").outerHeight()+" "+$("body").innerHeight());來測
* 在chrome和firefox中，不論DOCTYPE設什麼，或沒有設，３種高度都同樣拿到scrollHeight的值。
* 在IE7中，DOCTYPE有設，３種高度都同樣拿到scrollHeight的值。
* DOCTYPE沒設，３種高度都同樣拿到像是clientHeight的值。
* 需在每個頁面加入jquery.js

4.chrome中的iframe.document.body.scrollHeight會受iframe.height影响,
5.本文後面還遇到css設定position:absolute影响高度的問題

以上問題試了好幾個小時，覺得這真是個有點難解。

目前的解法

1.在iframe的onload中處理
2.每個iframe content一定要有DOCTYPE(解決chrome的問題，才能用offsetHeight)
3.用offsetHeight的值(解決chrome的問題)



這段code已測試的，Firefox3、IE7、Chrome。
還想在Konqueror、Safari、Opera、IE6中做測試。
不敢保證用offsetHeight在未測試的Browser或舊版本中不會遇到問題。
在iframe.onload中處理，也可能有瀏覽器會遇到問題。

實際運用後又遇到問題

http://of.openfoundry.org/projects/1/sympa
在網站連接sympa(mailing list system)的時候，設高度的功能硬是失效，原來拿到的content.height是０，為什麼是０呢？
經檢查發現以下片段



名為Canvas的div將整個網頁包住了，並且設為position: absolute;，造成Canvas像是定在那裏，而整個網頁並沒有高度。(目前只確定Firefox3有這問題，其它Browser沒有測試)

IE7中只認得gray, 不認得grey

要用jquery來改背景顏色為灰色, 用了以下的語法
$("#abc").css("background-color","grey");
結果在IE7中出現錯誤訊息"內容值無效", firefox則是正確的.
原來英文grey = gray
但在IE7中只認得gray, 用grey會出現錯誤訊息"內容值無效".

在IE的table->td中若沒有值

在IE的table->td中若沒有值, 會連border都不見了.
解決的方法是
1.加入「空白」或「&nbsp;」, 可以用jquery替空白的td加入, $("td:empty").html('&nbsp;');
2.本來希望CSS可以解決但是empty-cells:show卻不被IE支援...

這篇Fun with tables, 講了不少Table的問題.

自動將貼到Blog的程式碼Code或HTML Code做轉換及編排

因為希望可以直接把寫好的程式碼貼到Blog上，又能夠保持他原來的格式，並且做好排版，之後還要方便修改，因此寫了一個小javascript＋css來完成這件事情，結果會如下：



主要的做法是將程式碼放在<code>中，並用註解將程式碼包起來，來避免Browser拿Code去用，如下:
由於Blogger不能放入<![CDATA[ ]]>，因而使用<!-- -->，所以資料要再放同樣的符號就容易產生問題！！


----
<code>
<--
這裏放程式碼
-->
</code>
----


再於<head>中加入以下兩行．




在Google Blogger的小工具"HTML/JavaScript"中使用的方法
由於這個小工具會把css的設定吃掉(放入後存檔就消失了)，因此要做一點改寫，如下。