float:left時，div區塊會穿透過去問題

今天再用css作layout的時候遇到的一些問題
想說用smarty寫個留言版給blog用，於是模擬了下列欄位

HTML

<div class="guestpost">
<div class="header"><!--{$curr->topic}--></div>
<div class="info">
<div class="icon"><!--{$curr->icon}--></div>
<div class="item"><!--{$curr->name}--></div>
<div class="item"><!--{$curr->email}--></div>
</div>
<div class="post"><!--{$curr->post}--></div>
<div class="floor"><!--{$curr->date}--></div>
</div>


css碼

.guestpost{ border:1px #C00 solid}
.guestpost .header{ border:1px #009 solid}
.guestpost .info .icon{ float:left; width:100px; height:100px; border:1px #009 solid;}
.guestpost .info .item{ border:1px #0a9 solid; }
.guestpost .post{ clear:both; border:1px #d09 solid; min-height:200px;}
.guestpost .floor{ text-align:right; border:1px #dd9 solid}


結果如下圖所示


class為item區塊他的border延伸到icon區塊，float:left效果只對文字作出反應
但是對於div原先的size並沒有做出相對的反應，所以他的邊界依然跟icon區塊重疊

後來想到用overflow:hidden來隱藏那不該顯示的區塊

.guestpost{ border:1px #C00 solid}
.guestpost .header{ border:1px #009 solid}
.guestpost .info .icon{ float:left; width:100px; height:100px; border:1px #009 solid;}
.guestpost .info .item{ border:1px #0a9 solid; overflow:hidden ; }
.guestpost .post{ clear:both; border:1px #d09 solid; min-height:200px;}
.guestpost .floor{ text-align:right; border:1px #dd9 solid}


結果如下


好極了，這次item區塊的邊界沒有透到icon區塊去
但是後來測試發現，這效果在IE6下沒有用(又是IE)
儘管IE7、8還有firefox都能正常顯示，但是還是得顧慮到IE6的用戶

後來發現把item的position屬性設置就能解決IE6的這個bug

最終css碼如下

.guestpost{ border:1px #C00 solid}
.guestpost .header{ border:1px #009 solid}
.guestpost .info .icon{ float:left; width:100px; height:100px; border:1px #009 solid;}
.guestpost .info .item{ border:1px #0a9 solid; overflow:hidden ; position:relative }
/*overflow:hidden一定要加　不然框線會向左突出到float:left的區塊 position:relative 針對IE6 設定了overflow才有效果 */
.guestpost .post{ clear:both; border:1px #d09 solid; min-height:200px;}
.guestpost .floor{ text-align:right; border:1px #dd9 solid}


javascript 取得網頁最後修改日期

這兩天幫別人做網站，有要求下方要標註修改日期
手動修改太麻煩了，找找javascript有沒有方法
後來找到javascript可以用document.lastModified取得文見最後修改日期
如果lastModified提供的格式不符合需求的話
也可以用內建的Date物件重新包裝
舉個例子

var lastModDate = new Date(document.lastModified);
document.write("最後修改日期：" +lastModDate.toDateString());


Javascript的日曆套件

看到別人掛著好看的，想想自己也來掛一個
於是找到了一套JS Calendar
http://www.dynarch.com/projects/calendar/

目前在左邊小工具已經掛上去了
這邊順便放一個展示



功能很多，不過這裡我純粹當擺飾用

作品:jQuery實作slidingWindow

今天心血來潮，想要寫一個網頁版的slidingWindow效果
也就是一次只能顯示特定單位的Block

設計方法是使用遮罩(Mask)的方式，主要顯示區塊的部分是黑色的Mask，然後有一條輸送帶(Slider)，載者輸送單位(Item Block)

如圖


基本架構大概是長成下面這樣

<div class=”Mask”>
<div class=”silder”>
<div class=”itemblock”></div>
<div class=”itemblock”></div>
<div class=”itemblock”></div>
</div>
</div>


有這架構之後，之後的動作跟設定就是jQuery的工作了
下面是成果，共有三個Block，可以向左向右移動

IE下隱藏iframe的border

今天在測網頁的時候，想不到在Blogger無法正確顯示
我又懶得再去改他css，此時就想到使用iframe的方式去避開Blogger的CSS

原本我用設css的border為none的方式，想隱藏iframe，讓我的子網頁顯示看起來正常一點

<iframe src="xxx" style=" border:none" width="500" height="400"></iframe>


但是想不到這方法只能在非IE下有用，這可真傷腦筋
後來找了網路上的資料，找到了設置frameborder、border、cellspacing三個屬姓讓IE的iframe border可以消失

<iframe frameborder="0" border="0" cellspacing="0" src="xxx" style=" border:none" width="500" height="400"></iframe>


CSS設計必備-好用的IETester

昨天請朋友幫我看Blog，沒想到他跟我說他用IE8看我Blog版面亂掉
由於手上只有firefox跟opera、IE6三種瀏覽器，原以為這三種固好
應該都沒問題了，沒想到IE7後還是出現了問題
這真是CSS設計一大難點

後來找了一套IETester，目前的版本可以測試IE5.5~IE8這些版本
真替我解決了不少困擾，下面是網址

http://www.my-debugbar.com/wiki/IETester/HomePage

之後就可以很容易進行一些CSS hack的技術了
舉個例子，想要設置屬性的時候

margin:0px;/*原始CSS屬姓設置，firefox跟IE等都適用，我通常用來處理firefox跟opera*/
*margin-top:-2px; /* IE系列適用，我通常用來處理IE7跟IE8*/
_margin-top:-2px; /* IE 6 only，我通常用來處理IE6*/


或者想要設置元素

#my { /*通用設置*/}
html>body #my{ /*針對firefox 去寫*/}
*+html>body #my{ /*針對IE7去寫*/}


其它還有很多CSS hack方法
這裡連結兩個我覺得整理還蠻詳細的部落格
http://flash-silverlight.blogspot.com/2009/03/css-hackie6ie7ie8firefoxopera.html
http://ezcshi.pixnet.net/blog/post/13325989

IE6 position:absolute 時使用Bottom的bug

這兩天在研究裝飾Blogger
在弄旁邊的綠色圓角區塊的時候，遇到了一點問題
我用的佈局



像這樣，用相對去包絕對
Header跟Floor用絕對配置去定位在最高跟最低位
因為當初作素材的時候沒注意到
導致Header的圖片過長
所以我才採取絕對定位(absolute )的方式去做














但是這樣缺出現了floor使用bottom去固定在底部的時候，floor整個走位的問題
floor跑去Container下面非常多的地方
後來發現這是IE6的一個Bug，必須在Container設置height:1%
像這樣

.container{
position:relative;
height:1%;
}

這樣才能避免用Bottom走位的問題

題外話
我當初在作素材的時候沒設計好，Header弄太長，導致會蓋住中間Content的底圖
但是用z-index卻又會造成漸層色沒辦法搭配好還有色差出現
這是當出架構沒有設計好出現的錯誤

照我一開始的設計，content跟content background是綁在一起的，
導致不是Header檔住content，或是反過來content backgroung檔住header


後來靈機一動，我是否能把content跟content backgeound分開?
就像下圖這樣


可以做到這樣的話，我就可以用Header照住Content Background 而不會遮住Content了
因此我只要多一層Div取代Content Background就可以了，如下


不過我後來floor就沒有用absolute 去定位了，只讓他直接掛在Content之下
因為發現如果Container的size有伸縮的話，IE6底下floor用絕對定位不會跟著改變position
導致整個版面變亂，雖然Firefox是會跟著調整position，但是還是力求統一


最後做個筆記，在弄z-index的時候要把position設定成absolute或relative，不然他不會起作用

javascript的URL編碼

之前我再用javascript作encoding的時候都是用escape
但是今天再弄Blogger效果的時候發現他對特定字元沒辦法作encode像是空白、+等等
像我想解析我分類裡的[Linux c/c++]就會解析錯誤

後來找到一篇不錯的文章
http://blog.miniasp.com/?tag=/urlencode

裡面對URL編碼有提供蠻不錯的解說
簡單來說主要就是分三類

1. escape，unescape
2. encodeURI,decodeURI
3. encodeURIComponent,decodeURIComponent

測了結果只有第三類能幫我解析[Linux c/c++]給Blogger的feed供應
這之間的差異還真維妙

順帶一提!旁邊[學習手札]的分類滑動式列表差不多完成了，有機會把相關code放出來跟大家分享一下

超連結執行javascript而不位移

今天寫AJAX的時候遇到的一個問題
我使用以下方式模擬按鈕

<a href="#" onclick="javascript:put();">Push</a>


這應該算超連結執行javascript的標準寫法
但是卻發生了我點了之後會回到頂端的一個情況(我頁面很長 scroll有出現)
這樣一來我一些效果就會被抹煞，官感也很不好
不過部落格旁邊的網頁存檔給了我解決方法
改成如下

<a href="javascript:void(0)" onclick="javascript:put();">Push</a>

就不會有點下去後回到頁首的情況發生了

使用relative排版時空出來的區塊

當使用relative作位移的時候，原來的所佔的區塊並不會消失
因此會造成很大一塊空位在那邊

簡單舉個例子


css
div{ height:500px;width:400px; position:relative}
#one{ background-color:#9FF}
#two{ background-color:#F66}

html
<div id="one"></div>
<div id="two"></div>

此時沒有任何位移，因此看起來很平常

但是加了位移以後呢?
在此我把下方的區塊移到右方並排

css
div{ height:500px;width:400px; position:relative}
#one{ background-color:#9FF}
#two{ background-color:#F66;top:-500px; left:400px}

html
<div id="one"></div>
<div id="two"></div>


如上所示，雖然下方區塊移到左邊了
但是，原來位置那一塊並沒有因此往上縮，造成下方平白無故多了500px的空白區域

有個解決的方法對付這種情況
就是在用一個div去包住他，並且鎖定位移後的長寬並設定overflow為hidden

css
div{ height:500px;width:400px; position:relative}
#one{ background-color:#9FF}
#two{ background-color:#F66; top:-500px; left:400px}
#displayBlock{ height:500px; width:800px; overflow:hidden}


html
<div id="displayBlock">
<div id="one"></div>
<div id="two"></div>
</div>
如此一來，就可以解決多出來的區塊問題
結果如下，下方多出的500px已經消失了

案例研究:符水印的TextBox(使用jQuery)

在web 2.0常用的模組之一就是帶有浮水印效果的textbox
這個在實做上並不困難，現有的套件也非常多，不過今天是想探討jQuery的擴充函式實作方式


浮水印textbox，在失去焦點的狀態會有提示文字


在得到焦點會後，提示文字會消失，讓使用者可以正常輸入

今天來探討如何用jQuery去實現他

首先請準備兩個示範用的textbox

<input type="text" name="txt1" />
<input type="text" name="txt2" />
<input type="submit" />


之後直接進入jQuery的部分

jQuery擴充常用的部分分下列三種

1. 
   jQuery.foo=function(){....}
   這是最直接也最簡單的方式，這樣之後就可以用$.foo()的方式呼叫


2. jQuery.extend({
foo:function(){}
});
   第二種使用他提供的extend並使用物件形式擴充，一般來講比較建議這種方式
   因為可讀性比較高
   
3. jQuery.myplugin={
foo:function(){.......}
};
   第三種如上，像這種中間在安插一個名稱，這樣一來可以防止名子跟別人的plug-in相衝
   之後就可以使用$.myplugin.foo();的方式呼叫
   而上面這作法也可以用jQuery.extend配合巢狀物件實現如下
   var myplugin={
myfunction:{
foo:function(){.......}
}
};
jQuery.extend(myplugin);
   之後就可以使用$.myfunction.foo();的方式去呼叫了
   
   

上面是擴充global member的部分，那如果想要擴充jQuery物件member呢?
可以使用jQuery.fn，他有兩種方式可以擴充函式

1. jQuery.fn.test=function(){....}
   第一個方法一樣最簡單，直接開一個新名稱去指向一個function
   之後就可以使用$(obj).test();的方式去呼叫他
2. jQuery.fn.extend({
bar:function(){.......}}
);
   上面是第2個方法，使用他提供extend去做，這種作法可讀性比較高，之後可以用$(obj).bar()去呼叫他
   

擴充一個jQuery物件function有什麼好處?
好處是我們可以用$(this)的方式去抓到觸發此函式的物件
也就是我們實作的方法

我們可以用這種方法來做一個屬於我們的plug-in
直接看程式碼

jQuery.fn.watermark =function(className,message){

$(this).addClass(className);
$(this).val(message);
$(this).focus(function(){

var str=$(this).val();
if(str==message)
{
$(this).val("");
$(this).toggleClass(className);
}
});
$(this).blur(function(){

var str=$(this).val();
if(str.length<=0) {
$(this).toggleClass(className);
$(this).val(message);
}
});
}
我們用jQuery.fn去擴充一個jquery物件函式watermark，他會接受兩個參數
一個是浮水印的顯示格式，一個是浮水印的顯示文字
一開始我們可以用val()這個函式去設定textbox的value
form相關物件的值都必須仰賴這個function去替我們抓
用$().text()可是什麼都抓不到

之後要設定失去焦點跟獲得焦點要做的事，在此我們用了toggleClass來替我們簡化作業
他會自動判斷物件是否有此class，有的話就移除他，沒有的話就增加他
這樣我們就不用自己去判斷了

設計理念很簡單
當失去焦點的時候，如果沒有輸入任何文字(str.length<=0)就回復浮水印狀態
當獲得焦點的時候，如果當前文字跟浮水印文字一樣，就清空浮水印訊息


最後就是享受成果的時候啦
$(function(){
$("input[type='text']").watermark("input","請輸入字串");
}

這是初始化的部分，$(function(){})其效果就相當於$(document).ready(function(){});
也就是當DOM生成結束後要做的動作
此時我們只要一行程式碼，就可以替所有的textbox加上浮水印

$("input[type='text']")是抓取所有input底下所有type是text的物件
也就是我前面的textbox，然後執行我擴充的watermark函式
在這邊input是我設定的class name，在此只須要把文字顏色弄成灰色

,input{color:red}


如何!上面的程式碼是不是很像jQuery UI的使用方法阿
只要有這些知識，我們也能設計屬於我們的jQuery UI plug-in了

Dreamweave的jQuery套件

今天偶然發現我在旁邊放的連結jQuery中文說明手冊
裡面有放Dreamweave的jQuery plug-in
點進去後右上方會jQuery 1.3 API 離線版下載

進去之後找自己Dw的版本 像我是CS4就選jQuery_api_for_dw4.rar

解壓之後執行裡面的

跳出安裝畫面後直接按接受就行了


之後就可以用Dw就可以跳出jQuery的提示程式碼啦

攻略:javascript下載youtube影片(PHP+jQuery)

不知不覺blog文章來到第100篇
說來慚愧，雖然申請部落格是兩三年前的事情了
但是真的開始有用的習慣也是前幾個月才開始的
------------------------------------------------
今天因老師請託要下載youtube的影片
我就藉這個機會來研究他的原理
目前網路上的教學大概都是找出實體檔案的方式來下載youtube的檔案
常用程式碼如下

JavaScript
一般FLV畫質 (貼上以下全段不要斷行就會出現下載)
javascript:window.location.href = 'http://youtube.com/get_video?video_id=' +
swfArgs['video_id'] + "&l=" + swfArgs['l'] + "&sk=" + swfArgs['sk'] + '&t=' +
swfArgs['t'];

HQ畫質 (貼上以下全段不要斷行就會出現下載)
javascript:window.location.href = 'http://youtube.com/get_video?video_id=' +
swfArgs['video_id'] + "&fmt=18" + "&l=" + swfArgs['l'] + "&sk=" +
swfArgs['sk'] + '&t=' + swfArgs['t'];

HD畫質 (貼上以下全段不要斷行就會出現下載)
javascript:window.location.href = 'http://youtube.com/get_video?video_id=' +
swfArgs['video_id'] + "&fmt=22" + "&l=" + swfArgs['l'] + "&sk=" +

原文網址

但是我覺得光這樣太無趣了點，於是在去研究了一下原理

開了Fiddler去看一下封包

youtube實體影片是像其底下的get_video這網頁要來的(其實看上面javascript碼就知道了)
他帶了許多參數，後來發現，如果不考慮畫面，直接下載純影像的話
其實必備只須要下面兩個參數就夠了

1. video_id
2. t

是的，只須要上面兩個參數就可以開啟影片下載

舉個例子
http://www.youtube.com/watch?v=hjTb2gR8rpE&feature=related
隨便開啟一個youtube影片，打開他的HTML原始碼觀看
之後找到flash影片參數的部分，也就是 swfArgs的部分
這部份知識請去摸一下flash就會知道了


var swfArgs = {"usef": 0, "fexp": "903900", "enablecsi": "1", "watermark": "http://s.ytimg.com/yt/swf/logo-vfl106645.swf,http://s.ytimg.com/yt/swf/hdlogo-vfl100714.swf", "sourceid": "yw", "video_id": "hjTb2gR8rpE", "l": 15, "fmt_map": "18/512000/9/0/115,34/0/9/0/115,5/0/7/0/0", "feature": "related", "sk": "nZDATrs2t38ie9xRcRK_a3mjI-RuKXhPC", "is_doubleclick_tracked": "1", "vq": null, "t": "vjVQa1PpcFPKYZQWD4_9jBe0ngheWegeZ2fbI7T0wM4=", "hl": "zh_TW", "plid": "AARv6bNtawhBJVmH", "keywords": "%E6%96%B0%E4%B8%96%E7%B4%80%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B2%E3%83%AA%E3%82%AA%E3%83%B3%2C%E7%B6%BE%E6%B3%A2%E8%82%B2%E6%88%90%E8%A8%88%E7%94%BB%2C%E3%82%A2%E3%82%B9%E3%82%AB%E8%A3%9C%E5%AE%8C%E8%A8%88%E7%94%BB%2CPS2", "cr": "TW", "fmt_url_map": "18%7Chttp%3A//v22.lscache7.c.youtube.com/videoplayback%3Fip%3D0.0.0.0%26sparams%3Did%252Cexpire%252Cip%252Cipbits%252Citag%252Cburst%252Cfactor%26itag%3D18%26ipbits%3D0%26signature%3D12986C2C910D07BD87B445AE1164DDDC8330C06A.4AC1217E49AC790C83083037590C528C82E6A187%26sver%3D3%26expire%3D1248973200%26key%3Dyt1%26factor%3D1.25%26burst%3D40%26id%3D8634dbda047cae91%2C34%7Chttp%3A//v3.lscache8.c.youtube.com/videoplayback%3Fip%3D0.0.0.0%26sparams%3Did%252Cexpire%252Cip%252Cipbits%252Citag%252Cburst%252Cfactor%26itag%3D34%26ipbits%3D0%26signature%3D1B606B2E46C0471A611386C163B6B18FB617D7AD.0CA6C95A06F6D8E55C99A4552B4066CB1CD541C6%26sver%3D3%26expire%3D1248973200%26key%3Dyt1%26factor%3D1.25%26burst%3D40%26id%3D8634dbda047cae91%2C5%7Chttp%3A//v6.lscache2.c.youtube.com/videoplayback%3Fip%3D0.0.0.0%26sparams%3Did%252Cexpire%252Cip%252Cipbits%252Citag%252Cburst%252Cfactor%26itag%3D5%26ipbits%3D0%26signature%3D14E5E77EB01FE7F0152AA1318492DFBDE6A42BA5.CA1E4504117C976ECC479DFF573BD96E3E9685D4%26sver%3D3%26expire%3D1248973200%26key%3Dyt1%26factor%3D1.25%26burst%3D40%26id%3D8634dbda047cae91", "sdetail": "f%3Arelated%2Crv%3A2yRxIwkBelc"};

他裡面帶很多參數，但是在此我們把問題簡化，只關心裡面的video_id跟t參數

.......
"video_id": "hjTb2gR8rpE"
"t": "vjVQa1PpcFPKYZQWD4_9jBe0ngheWegeZ2fbI7T0wM4="
......


之後我們只要把這兩個參數合併到youtube的網址就可以直接下載檔案如下

http://www.youtube.com/get_video?video_id=hjTb2gR8rpE&t=vjVQa1PpcFPKYZQWD4_9jBe0ngheWegeZ2fbI7T0wM4=

之後把他放到網址列按enter就可以下載影片了

那我們是否可以把這個工作自動化呢
當然可以，了解原理後，剩下的就只是字串處裡的問題而已
如何把兩個參數給抓出來
在此我們用jQuery+PHP實作一個簡單的範例
首先須要一個html檔當界面來接受我們網址的輸入

<body>
<input id="url" type="text" />
<input type="button" value="Get" onclick="getFlv();" />
</body>

再簡單不過的一個範例，一個textbox跟一個button
用一個function，getFlv()來處理我們的需求
而jQuery的部分也很單純

function getFlv(){
var url=$('#url').get(0).value;
$.post("getYouyube.php",{'url':url},function(data){
location.href='http://www.youtube.com/get_video?'+data
});
}


首先使用$('#url')或得textbox，並用get函式把他從jQuery物件轉成DOM物件
這樣我們才能抓取他的value
之後用一個post的請求給我們處裡字串的程式 getYouyube.php(這邊我打錯字 但是我也不想改了)
送一個參數url，也就是我們輸入的youtube網址
之後用location.href轉址就可以自動下載了

至於PHP的部分，他只是一些字串處裡而已

$html=file_get_contents($_POST['url']);
$arr=split("\n",$html);
$num=count($arr);
for($i=0;$i<$num;$i++)
{
if(ereg("swfArgs",$arr[$i]))
{
getArgs($arr[$i]);
}
}

首先用file_get_contents得到輸入網址的HTML原始碼
之後把它切割成一行一行的陣列 直到找到我們的目標swfArgs為止
之後我們用一個自定函式getArgs去抓出我們要的參數 video_id跟t


function getArgs($text)
{
$arr=split(",",$text);
$num=count($arr);
for($i=0;$i<$num;$i++)
{

$key=strtok($arr[$i],':');
$value=stripShell(strtok(':'));
if(strcmp(trim($key),"\"video_id\"")==0)
{
echo sprintf("%s=%s&",stripShell($key),$value);
}
else if(strcmp(trim($key),"\"t\"")==0)
{
echo sprintf("%s=%s&",stripShell($key),$value);
}

}
}
/*去頭尾字元*/
function stripShell($str)
{
return substr($str,2,-1);
}


結果展示

功能非常陽春，而且是適用於目前的youtube
他以後若改版之類的就不保證啦
不過可以根據參數這部份來提供更多服務，譬如說畫質選擇、檔名等等
這部份就以後再說吧

web學習-跳出式對話框 使用jQuery

雖然這對話框這東西已經有一大堆現成套件可以用了
但是基於求知的心態還是會想要知道他是怎麼弄的
下面一個自己寫的範例



很簡單的功能，就跳出一個訊息然後可以關掉

這個範例須要四個元素

1. 一個看效果網頁，隨便弄一個就好了 這邊拿DW的範例當底(懶惰一下)
2. 一個起動開啟Dialog事件的按鈕
   
<input type="button" value="叫出對話框" onclick="showDialog();" >

   
3. 一個遮住底頁的黑色不透明區塊
   
<div id="dialog"></div>

   
4. 真正要顯示訊息的區塊，他包含關閉Dialog事件的按鈕
   
<div id="msg">
<p>這是一個測試的對話框</p>
<input type="button" value="關閉" onclick="closeDialog();" />
</div>


   

-------
除了範例網頁之外，第三跟第四個元素，也就是Dialog對話框的Div可以隨便放
因為他們的位置是用絕對位置控制

先來觀察css設定的部分

html,body {
margin: 0;
padding: 0;
height:100%;
}

這第一部分，為了跟舊firefox相容，所以必須連html tag也設定，而不能光設定body tag
在此把height設為100%，不然的話IE6的div元素沒有辦法延展至100%
並且margin設為0，避免延展後的div區塊跟瀏覽器有間隔(這邊也是IE的bug)
下面是不加margin: 0;的效果，明顯可以看出遮擋的div沒有完全填滿視窗


接著看其他css設定

#dialog{
/* 非IE瀏覽用設定，使其長寬都延展至100% */
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
margin:0px;
background-color:#000000;
z-index:1;
text-align:center;
}
*html #dialog{position:absolute;}/*IE舊瀏覽器用，設定絕對定位*/

#msg{ /*訊息區塊，背景設為白色，使用絕對定位*/
position:absolute;
top:0px;
left:0px;
background-color:#FFFFFF;
width:400px;
z-index:3;
}

在firefox就算height設成100%，但是會出現一個問題，他不像IE會自動填補scroll延展的部分，所以只要頁面有scroll並且往下拉就會破功
所以在此使用position:fixed來固定遮罩區塊，但是另一個問題出現了
就是IE不支持position:fixed這個屬性
所以我就利用了css hack的技巧，把IE挑出設定成position:absolute;
*html 是IE only的語法 可以拿來應付這種狀況

下圖是firefox使用position:absolute;來設定height:100%時的狀況

最後把z-index設置一下就ok了

之後就是jQuery的部分了，總共分成三大部分

第一部分，當DOM初始化之後，要先把對話框給隱藏起來
並且把遮罩div的透明度設成0.5
透明度設定請參照
http://hatsukiakio.blogspot.com/2009/07/jquerycss.html

$(document).ready(function(){
$("#dialog").css("display","none");
$("#msg").css("display","none");
$("#dialog").css("opacity","0.5");

});


第二部份是msg的div中，要關閉對話框的事件區動，說是關閉，也只是把dialog隱藏起來而已

function closeDialog(){
$("#dialog").css("display","none");
$("#msg").css("display","none");
}


第三部份，show出dialog，這部份比較雜一點

function showDialog(){
/*秀出對話框*/
$("#dialog").css("display","");
$("#msg").css("display","");

var _sw=document.body.clientWidth;//得到視窗寬度
var _sh=document.body.clientHeight;//得到視窗長度
if($.browser.msie)//判斷使否為IE
{
_sh-=260;
_sw-=24;
}
/*
var scrolltop;
//得到scroll的現在位置
if (document.documentElement && document.documentElement.scrollTop)
{
scrolltop=document.documentElement.scrollTop;
}
else if(document.body){
scrolltop=document.body.scrollTop;
}
*/
var w=$("#msg").width();
var h=$("#msg").height();
var _top=_sh/2-h/2+$(document).scrollTop();//更好的方法 使用jQuery解決
var _left=_sw/2-w/2;

/*設定視窗出現位置*/
$("#msg").css("top",_top+'px');
$("#msg").css("left",_left+'px');
}

要show出對話框，只要把他的display屬性從none改成空值及可
之後可以用document.body的clientWidth跟clientHeight得到視窗的大小
再來有一點也是瀏覽器的問題，IE會把上面工具列的部分也算在視窗size裡
所以要用jQuery的$.browser.msie來判斷是不是IE來做修正
最後是得到scroll的位置，一開始我是用document.documentElement去取得
但是後來發現jQuery的+$(document).scrollTop()就能做到相同的事情了

使用JQuery取代css設置方案

研究jQuery真是對他越來越愛用
他的強大真是難以言喻，今天在玩一些css設計
原本一些難搞的瀏覽器相容性他都替我處理好了
原本我以為jQuery只能替我排除javascript在瀏覽器上的相容性問題
想不到他連css都替我handle了 真是件令人愉快的事情

舉個例子，元素透明度的設定問題
元素半透明的效果可以讓網頁更佳炫麗，但是考慮到瀏覽器問題這往往須要注意很多東西

<style>
.opac{
opacity:0.5; //for firefox
-moz-opacity:0.5;
filter:alpha(opacity=50); //for IE
}
</style>


如上面所示，設定個透明度為了瀏覽器相容必須設定同個屬性三次
但是使用jQuery呢，我們只須要一行程式碼就能解決

<script type="text/javascript">
$(document).ready(function(){
$('.opac').css("opacity","0.5");
});
</script>


這樣一來，要設計網頁障礙就更小了~

IE6下，不出現警告訊息關閉視窗

當我們用javascript的window.close();關閉視窗的時候
如果是母視窗的話就會跳出如下的警告訊息


也就是目前要關閉的視窗不是藉由window.open()來開啟的子視窗
他沒辦法藉由window.close來直接關閉
可以使用window.opener=null;來避開這項限制
也就是在執行close前先把opener設成null

window.opener=null;
window.close();


觀看HTTP封包跟HTML元素

有時候寫程式會想知道我在這個網頁傳了些什麼

POST的body、action等等

下面推薦幾個不錯的Firefox的plug-in

HTTPFox

https://addons.mozilla.org/zh-TW/firefox/addon/6647


這是拿來看HTTP封包用的，按下start後就可以開始擷取HTTP封包

會有相對應的Request跟Response封包可以看到

Firebug

想觀看一個網頁的HTML怎麼設計，有哪些DOMTree、CSS的時候 這是一個很方便的工>

---

有些IE only的網頁想看他的封包時該怎麼辦?

以下推薦一個軟體

Fiddler

http://www.fiddlertool.com/Fiddler/version.asp

這款需要安裝是比較麻煩，但是他的功能可是一點都不少

不過可惜的是，他只能forIE

---

其實擷取封包能用wireshark等工具來觀看原始封包

但是wireshark放出來的data都太原始了，閱讀不易

除非是想用c/c++自己填充封包(作法以後有空補上)

不然想跟java等高階程是配合還是找更好用的工具

工欲善其事，必先利其器

如何處理 Microsoft JET Database Engine (0x80004005)

今天實驗室的網頁掛彩
ASP無法去連線access資料庫
後來看了一下錯誤訊息 Microsoft JET Database Engine (0x80004005)
是因為資料庫的權限沒打開
這時候需要去設定資料庫權限
在此之前要先打開
資料夾->工具->資料夾選項->[使用簡易檔案共用]
之後
資料庫檔案，在上方按下 [右鍵] 選取 [內容]
新增使用者 「IUSR_電腦名稱」 也就是 Internet的Guest帳戶
讓他可以修改 寫入資料庫

HTML放程式碼

程式碼用<code> 及 </code>包起來
然後用<pre></pre> 再包一次
讓排版正確
以及對特別符號處理

「&」(AND符號) 換成 '&amp;'

「"」(雙引號) 換成 '&quot;'

「'」 (單引號) 換成 '&#039;'

「<」 換成 '&lt;'

「>」 換成 '&gt;'