我們知道如果IFRAME不要有捲軸出現，在IFRAME裡面加入 SCROLLING="NO" 即可，
但是無法控制只讓直向或橫向捲軸消失，因此以下有個變通的方式，即是透過CSS屬性去控制。
2010/12/01
2010/11/11
2010/11/02
jQuery 選擇器 筆記
$("p") $(".myClass") $("#myID") $("*") $("p, div, span.myClass")
-----------------------------------------------------------------
$("form input") form下面全部的input
$("form > input") form下面全部的input
-----------------------------------------------------------------
$("form input") form下面全部的input
$("form > input") form下面全部的input
2010/10/28
2010/10/27
2010/10/15
2010/09/29
2010/09/24
iframe透明背景
主頁中的iframe標籤需設定:
<iframe src="SourcePage.htm" allowtransparency="true"></iframe>
被嵌入的頁面的body標籤中需設定:
style="background-color:transparent"
<iframe src="SourcePage.htm" allowtransparency="true"></iframe>
被嵌入的頁面的body標籤中需設定:
style="background-color:transparent"
2010/06/18
Flash網站元件製作
轉載自: http://blog.webgene.com.tw/?p=2202
這是一篇非常無趣的文章，因為要講的是一件非常無趣的工作。一般Flash網站進入製作流程後，不外乎是先做好視覺與Layout，此時檔案通常是.psd或.ai，接著將這些圖檔、文字匯入或是在Flash裡面重製，然後才加上動態效果以及程式。這篇文章要講的就是從.psd與.ai到.fla的過程。這過程的好壞不但影響到前面設計是否能完整呈現，後面動態製做與程式撰寫，甚至整個網站的流量、頻寬，都決定在這個步驟。講起來很嚇人，但真的就是這樣。可是這個步驟往往被忽視掉了。你看過時程表上拉個「Flash元件製做」嗎？應該是沒有。東西很自然的從「靜態」變成「動態」了，沒人管它為什麼。但不論如何，還是要有個苦命人把這件事情給做好。
2010/06/01
十項照相小常識 提昇攝影水準 2006/07/09
十項照相小常識 提昇攝影水準
作為攝影生手，如何能夠輕易的買台數位相機就拍得好照片﹐而不是望著大本厚重的“常見問題回答”發愁？提供您十項最實用的小知識。
2010/05/31
2010/05/28
object嵌入影片靜音語法
<object width="300" height="200" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="video/x-ms-wmv">
<param name="url" value="ynk_03_low_90k_300x200.wmv" />
<param name="url" value="ynk_03_low_90k_300x200.wmv" />
讓youtube影片自動與重複播放語法
將 &autoplay=1 照下面的方法貼到播放語法中的相關位置即可
例：
<embed src="http://www.youtube.com/v/4N-meE56Psw&autoplay=1" <----這
type="application/x-shockwave-flash" wmode="transparent" width="300" height="247"></embed>
例：
<embed src="http://www.youtube.com/v/4N-meE56Psw&autoplay=1" <----這
type="application/x-shockwave-flash" wmode="transparent" width="300" height="247"></embed>
2010/05/24
html 用 <object> 嵌入windows media player語法
範例:
<OBJECT id="VIDEO" width="320" height="240" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">
<OBJECT id="VIDEO" width="320" height="240" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">
2010/04/16
list-style-type CSS2
.cl0 {list-style-type: none;}
.cl1 {list-style-type: disc;}
.cl2 {list-style-type: circle;}
2010/03/25
ie6, ie7 不認得 inline-block 解決辦法
重複設定元素的 display 兩次, 先設定 *inline-block 再設定 inline,
ie6 與 ie7 即可使用 inline-block
display:inline-block;
}
div1{
*display:inline; <---*號為hack for ie6 and ie7, 這樣才不影響其他browsers
}
2010/03/24
jQuery String Replace 字串取代
ex:
html code:
<img alt="" src="images/left/21_off.jpg" />
<img alt="" src="images/left/22_off.jpg" />
<img alt="" src="images/left/23_off.jpg" />
jQuery code:
function MVHandler(){
var path = $(this).attr("src");
var newPath = path.replace("off","on"); <--("被取代","取代")
$(this).attr({src:newPath})
}
html code:
<img alt="" src="images/left/21_off.jpg" />
<img alt="" src="images/left/22_off.jpg" />
<img alt="" src="images/left/23_off.jpg" />
jQuery code:
function MVHandler(){
var path = $(this).attr("src");
var newPath = path.replace("off","on"); <--("被取代","取代")
$(this).attr({src:newPath})
}
2010/03/09
ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser.
About
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Conditional Comments [if IE] : ie 專用 (ie only) 條件式 html 註解的語法
Conditional Comments [if IE] : ie 專用 (ie only) 條件式 html 註解的語法
<!--[if IE]>內容<![endif]-->
內容只有 ie 會顯現。
<!--[if IE 6]>內容<![endif]-->
內容只有 ie6 會顯現。
<!--[if lt IE 7]>內容<![endif]-->
內容只在比 ie7 更舊的版本會顯現。 [參考說明]
<!--[if gte IE 8]>內容<![endif]-->
內容只有 ie8 及其較新版本會顯現。 [參考說明]
<!--[if !IE]>-->內容<!--<![endif]-->
內容除 ie 以外都會顯現。 [參考說明]
<!--[if !(IE 6)]>內容<![endif]-->
內容除 ie6 以外的 ie 都會顯現。 [參考說明]
<!--[if (gte IE 6)&(lt IE 8)]>內容<![endif]-->
內容只從 ie6 以後及 ie8 之前版本會顯現。 [參考說明]
<!--[if (IE 7)|(IE 6)]>內容<![endif]-->
內容只有 ie7 及 ie6 會顯現。 [參考說明]
<!--[if gte IE 7]><!-->內容<!--<![endif]-->
內容在 ie7 及其較新版本，以及 ie 以外都會顯現。 [參考說明]
藍色部分 <!-- 或 --> 為標準 html 註解的起始或結尾；除此之外，紅色部分即為 ie 能辨識的特殊語法。所以，只有 ie 會依據紅字所表示的條件來判斷呈現與否，而其它瀏覽器依標準一律當成是註解。
語法中空格不能任意省去，尤其注意 IE 之後，版本編號前的空格。除 IE 必須大寫，其餘英文字母都是小寫。註解的結尾語法都是 <![endif]--> 。
思考 - 條件式註解的應用
運用不同條件可在不同版本呈現的原理，我們可以做出提供使用者，類似瀏覽器版本線上偵測的範例 ：
xhtml 語法
<!--[if IE]>
<p>您正在使用的瀏覽器為 ie 。</p>
<![endif]-->
<!--[if IE 6]>
<p>您正在使用的瀏覽器為 ie6 。</p>
<![endif]-->
<!--[if IE 7]>
<p>您正在使用的瀏覽器為 ie7 。</p>
<![endif]-->
<!--[if lt IE 7]>
<p>您正在使用的瀏覽器為比 ie7 較舊的版本。</p>
<![endif]-->
<!--[if gte IE 8]>
<p>您正在使用的瀏覽器為 ie8 或比 ie8 更新的版本。</p>
<![endif]-->
<!--[if !IE]>-->
<p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->
<!--[if !(IE 6)]>
<p>您正在使用的瀏覽器為 ie ，但不是 ie6 。</p>
<![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]>
<p>您正在使用的瀏覽器為 ie5.5 或 ie6 。</p>
<![endif]-->
<!--[if (IE 7)|(IE 6)]>
<p>您正在使用的瀏覽器為 ie7 或 ie6 。</p>
<![endif]-->
<!--[if gte IE 7]><!-->
<p>您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。</p>
<!--<![endif]-->
上面的語法實際呈現如下，請使用不同瀏覽器測試。
您正在使用的瀏覽器不是 ie 。
您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。
ie Conditional Comments 幾乎可以包圍任何 html 內容，包括整個元素 (elements) 或單獨的標籤 (tags) ；這屬於 html 語法，只適用在 html 語法內，出現在其它如 css 語法裡或 javascript 程式裡是會錯誤的。有時候我們因某些狀況不得不使用 ie 自創專有的語法，又必須符合 w3c 標準語法規範，或是需要避開 ie 的錯誤，又為了避免與其它瀏覽器發生衝突，條件式註解就成了有用的技巧。
條件註解當作 css hacks
僅供 ie6 及其較舊版套用的樣式清單檔
<!--[if lte IE 6]>
<link href="style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
條件註解讓 javascript 在指定的瀏覽器執行
僅供 ie 執行的 javascript 程式檔
<!--[if IE]>
<script src="script_ie.js" type="text/javascript"></script>
<![endif]-->
註解裡的運算子 (operators) : lt, lte, gt, gte…
語法中除了 if, IE 比較容易體會含意外，其餘看似難懂的符號，列出來解釋一下就容易了。
* lt : lower than ，比某一版本更舊的版本，如 [if lt IE 7] 。
* lte : lower than or equal to ，某一版本及其更舊的版本，如 [if lte IE 6] 。
* gt : greater than ，比某一版本更新的版本，如 [if gt IE 6]。
* gte : greater than or equal to ，某一版本及其更新的版本，如 [if gte IE 8] 。
* ! : 「非」、「排除」、「反向」的意思，可加在版本、運算子、或子運算式 ( ) 前，如 [if !IE] ，指定 ie 以外有效。
* ( ) : 可將基本的條件加入子運算式 (subexpression) 處理更複雜的條件，如 [if !(IE 6)] ，指定除 ie6 以外的 ie 有效。。
* & : 符合由 & 連接的全部子運算式的條件，如 [if (gt IE 5.0)&(lt IE 7)] ，指定 ie5 之後， ie7 之前有效。
* | : 符合由 | 連接的任一個子運算式的條件，如 [if (IE 5.5)|(IE 6)] ，指定 ie5.5 或是 ie6 有效。
所以， [if lte IE 6] 和 [if lt IE 7] 同樣指的都是 ie6 及其更舊版本，而 [if gt IE 6]與 [if gte IE 7] 同指 ie7 及其較新版本。
實際上，常用的運算子應該只有前面五項，所以沒有特別需求的話，不需要浪費太多時間鑽研每一項的用法囉！
稍作變化才能正確用在 ie 以外瀏覽器
在前面語法中，關於 ie 以外瀏覽器顯現的作法，加了一點東西，這是將 ie 專用註解語法 (紅色部分) ，再加註解標記，變成前後兩部分 html 標準註解 (注意藍色部分) ，才可以讓內容不再是註解；而 ie 仍舊以原來特殊語法判斷，不會理會另外加的符號，如此既能區分瀏覽器，又不會違反 w3c 標準語法。另外需要注意的是，如果同時也要讓某些 ie 顯現 (如最後一項) ，就必須動點手腳，如 [if gte IE 7]><!--> 中多加了 <! (綠色) ，只是為了避免 ie 會把接下去的 --> 顯示出來。
類似運用註解的方法在許多應用軟體也常見到，例如 Adobe Dreamweaver 裡的範本 (templates) 標籤、圖庫 (library) 標籤，也都是運用註解標註的方式讓特定的應用軟體來辨識，所以瀏覽器只會把它們當成註解而已，多留意看看就會發現其中的奧妙了。
截自: http://boohover.pixnet.net/blog/post/12309095
<!--[if IE]>內容<![endif]-->
內容只有 ie 會顯現。
<!--[if IE 6]>內容<![endif]-->
內容只有 ie6 會顯現。
<!--[if lt IE 7]>內容<![endif]-->
內容只在比 ie7 更舊的版本會顯現。 [參考說明]
<!--[if gte IE 8]>內容<![endif]-->
內容只有 ie8 及其較新版本會顯現。 [參考說明]
<!--[if !IE]>-->內容<!--<![endif]-->
內容除 ie 以外都會顯現。 [參考說明]
<!--[if !(IE 6)]>內容<![endif]-->
內容除 ie6 以外的 ie 都會顯現。 [參考說明]
<!--[if (gte IE 6)&(lt IE 8)]>內容<![endif]-->
內容只從 ie6 以後及 ie8 之前版本會顯現。 [參考說明]
<!--[if (IE 7)|(IE 6)]>內容<![endif]-->
內容只有 ie7 及 ie6 會顯現。 [參考說明]
<!--[if gte IE 7]><!-->內容<!--<![endif]-->
內容在 ie7 及其較新版本，以及 ie 以外都會顯現。 [參考說明]
藍色部分 <!-- 或 --> 為標準 html 註解的起始或結尾；除此之外，紅色部分即為 ie 能辨識的特殊語法。所以，只有 ie 會依據紅字所表示的條件來判斷呈現與否，而其它瀏覽器依標準一律當成是註解。
語法中空格不能任意省去，尤其注意 IE 之後，版本編號前的空格。除 IE 必須大寫，其餘英文字母都是小寫。註解的結尾語法都是 <![endif]--> 。
思考 - 條件式註解的應用
運用不同條件可在不同版本呈現的原理，我們可以做出提供使用者，類似瀏覽器版本線上偵測的範例 ：
xhtml 語法
<!--[if IE]>
<p>您正在使用的瀏覽器為 ie 。</p>
<![endif]-->
<!--[if IE 6]>
<p>您正在使用的瀏覽器為 ie6 。</p>
<![endif]-->
<!--[if IE 7]>
<p>您正在使用的瀏覽器為 ie7 。</p>
<![endif]-->
<!--[if lt IE 7]>
<p>您正在使用的瀏覽器為比 ie7 較舊的版本。</p>
<![endif]-->
<!--[if gte IE 8]>
<p>您正在使用的瀏覽器為 ie8 或比 ie8 更新的版本。</p>
<![endif]-->
<!--[if !IE]>-->
<p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->
<!--[if !(IE 6)]>
<p>您正在使用的瀏覽器為 ie ，但不是 ie6 。</p>
<![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]>
<p>您正在使用的瀏覽器為 ie5.5 或 ie6 。</p>
<![endif]-->
<!--[if (IE 7)|(IE 6)]>
<p>您正在使用的瀏覽器為 ie7 或 ie6 。</p>
<![endif]-->
<!--[if gte IE 7]><!-->
<p>您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。</p>
<!--<![endif]-->
上面的語法實際呈現如下，請使用不同瀏覽器測試。
您正在使用的瀏覽器不是 ie 。
您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。
ie Conditional Comments 幾乎可以包圍任何 html 內容，包括整個元素 (elements) 或單獨的標籤 (tags) ；這屬於 html 語法，只適用在 html 語法內，出現在其它如 css 語法裡或 javascript 程式裡是會錯誤的。有時候我們因某些狀況不得不使用 ie 自創專有的語法，又必須符合 w3c 標準語法規範，或是需要避開 ie 的錯誤，又為了避免與其它瀏覽器發生衝突，條件式註解就成了有用的技巧。
條件註解當作 css hacks
僅供 ie6 及其較舊版套用的樣式清單檔
<!--[if lte IE 6]>
<link href="style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
條件註解讓 javascript 在指定的瀏覽器執行
僅供 ie 執行的 javascript 程式檔
<!--[if IE]>
<script src="script_ie.js" type="text/javascript"></script>
<![endif]-->
註解裡的運算子 (operators) : lt, lte, gt, gte…
語法中除了 if, IE 比較容易體會含意外，其餘看似難懂的符號，列出來解釋一下就容易了。
* lt : lower than ，比某一版本更舊的版本，如 [if lt IE 7] 。
* lte : lower than or equal to ，某一版本及其更舊的版本，如 [if lte IE 6] 。
* gt : greater than ，比某一版本更新的版本，如 [if gt IE 6]。
* gte : greater than or equal to ，某一版本及其更新的版本，如 [if gte IE 8] 。
* ! : 「非」、「排除」、「反向」的意思，可加在版本、運算子、或子運算式 ( ) 前，如 [if !IE] ，指定 ie 以外有效。
* ( ) : 可將基本的條件加入子運算式 (subexpression) 處理更複雜的條件，如 [if !(IE 6)] ，指定除 ie6 以外的 ie 有效。。
* & : 符合由 & 連接的全部子運算式的條件，如 [if (gt IE 5.0)&(lt IE 7)] ，指定 ie5 之後， ie7 之前有效。
* | : 符合由 | 連接的任一個子運算式的條件，如 [if (IE 5.5)|(IE 6)] ，指定 ie5.5 或是 ie6 有效。
所以， [if lte IE 6] 和 [if lt IE 7] 同樣指的都是 ie6 及其更舊版本，而 [if gt IE 6]與 [if gte IE 7] 同指 ie7 及其較新版本。
實際上，常用的運算子應該只有前面五項，所以沒有特別需求的話，不需要浪費太多時間鑽研每一項的用法囉！
稍作變化才能正確用在 ie 以外瀏覽器
在前面語法中，關於 ie 以外瀏覽器顯現的作法，加了一點東西，這是將 ie 專用註解語法 (紅色部分) ，再加註解標記，變成前後兩部分 html 標準註解 (注意藍色部分) ，才可以讓內容不再是註解；而 ie 仍舊以原來特殊語法判斷，不會理會另外加的符號，如此既能區分瀏覽器，又不會違反 w3c 標準語法。另外需要注意的是，如果同時也要讓某些 ie 顯現 (如最後一項) ，就必須動點手腳，如 [if gte IE 7]><!--> 中多加了 <! (綠色) ，只是為了避免 ie 會把接下去的 --> 顯示出來。
類似運用註解的方法在許多應用軟體也常見到，例如 Adobe Dreamweaver 裡的範本 (templates) 標籤、圖庫 (library) 標籤，也都是運用註解標註的方式讓特定的應用軟體來辨識，所以瀏覽器只會把它們當成註解而已，多留意看看就會發現其中的奧妙了。
截自: http://boohover.pixnet.net/blog/post/12309095
2010/03/02
list-style-image在ie6跟ie7顯示不出來
通常是因為下了
* {
margin:0;
padding:0;
}
導致圖檔跑到看不見的地方
在ul下
padding-left:15px;
即可(通常為15~20px)
但可能因此影響到ul位置,需再做調整
* {
margin:0;
padding:0;
}
導致圖檔跑到看不見的地方
在ul下
padding-left:15px;
即可(通常為15~20px)
但可能因此影響到ul位置,需再做調整
2010/03/01
如何修正DIV 指定float之後導致外容器無法撐開
初碼:
<div style="border: 1px solid red; width:120px;">
<div style="border: 1px solid green; float: left; width: 30%; height: 80px;">DIV1</div>
<div style="border: 1px solid red; width:120px;">
<div style="border: 1px solid green; float: left; width: 30%; height: 80px;">DIV1</div>
2010/02/26
10 golden rules for building successful web apps, from Fred Wilson
Fred Wilson from Union Square Ventures opened up Future of Web Apps in Miami this morning with his top ten tips for creating a successful web app:
如何使用swfObject
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何使用swfObject</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何使用swfObject</title>
在html嵌入swf 時的最基本code
<object width="987" height="361">
<param name="movie" value="swf/mainTest.swf" />
<embed src="swf/mainTest.swf" width="987" height="361" allowScriptAccess="always" wmode="transparent"></embed>
</object>
<param name="movie" value="swf/mainTest.swf" />
<embed src="swf/mainTest.swf" width="987" height="361" allowScriptAccess="always" wmode="transparent"></embed>
</object>
2010/02/25
swfObject wmode
解決swfObject 無法背景透明問題
<script type="text/javascript" src="swfObject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {}; <--做一個空的為了下方塞參數用
var params = {};
params.wmode = "transparent";
swfobject.embedSWF("swf/mainTest.swf", "mainSWF", "987", "361", "9.0.0", "swfObject/expressInstall.swf", flashvars, params); <--參數有順序性,所以要塞flashvars
</script>
<script type="text/javascript" src="swfObject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {}; <--做一個空的為了下方塞參數用
var params = {};
params.wmode = "transparent";
swfobject.embedSWF("swf/mainTest.swf", "mainSWF", "987", "361", "9.0.0", "swfObject/expressInstall.swf", flashvars, params); <--參數有順序性,所以要塞flashvars
</script>
2010/02/24
[CSS Hack] 解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題！
每次調CSS最令人頭痛的就是瀏覽器校正問題，因為每個瀏覽器對CSS的解釋都不太一樣，Firefox本身算是比較照規矩來，處理上比較簡單，但是遇到微軟的IE系列頭就大了，雖然都是IE，但是IE6、IE7、IE8各版本對CSS的解釋又不一樣，就算你本身已經在IE6調整好，但是在IE7看起來又是不一樣，這時我們就得來對各個瀏覽器設定不同的數值來解決版面移位的問題。
2010/02/12
解決IE6不支援css min-width與min-height
min-width與min-height在css中是相當好用的語法，可以讓HTML元素最少仍保持一定的寬和高，
而需要時仍隨著元素的內容增加寬和高。
這麼好用的語法，偏偏IE 6不支援，不過說不支援也不精確，事實上IE6本身在指定height與width的值時，就具有min-width和min-height的特性，只是如果單純用height或width來指定，到了Firefox或IE 7時，又會把它當作是鎖死的值，不會因內容增加而擴大元素的box。
而需要時仍隨著元素的內容增加寬和高。
這麼好用的語法，偏偏IE 6不支援，不過說不支援也不精確，事實上IE6本身在指定height與width的值時，就具有min-width和min-height的特性，只是如果單純用height或width來指定，到了Firefox或IE 7時，又會把它當作是鎖死的值，不會因內容增加而擴大元素的box。
CSS各瀏覽器專有屬性標示法
各瀏覽器的專有屬性標示法如下:
Safari: -webkit-
Firefox: -moz-
Konqueror: -khtml-
Opera: -o-
IE: -ms- ( IE 只有 IE8 支援 -ms- )
Safari: -webkit-
Firefox: -moz-
Konqueror: -khtml-
Opera: -o-
IE: -ms- ( IE 只有 IE8 支援 -ms- )
訂閱：
文章 (Atom)