Max Coding BLOG. (^

顯示具有 html 標籤的文章。顯示所有文章

2014年10月3日星期五

[JS] Sweet Alert

我覺得每個網站都應該用這一個SweetAlert套件來做, 最好再改一下 UI sytle, 配合該網站的 style, 雖然已經有很多 jQuery 做出類似的功能, 看了一下SweetAlert用法和安裝方法, 真是簡單到爆, SweetAlert 和預設醜死的javascript alert的視窗相比，SweetAlert 在 UI 上顯示出來就漂亮許多，在功能面還加強了許多功能.

官方網站: http://tristanedwards.me/sweetalert
github: https://github.com/t4t5/sweetalert

2014年10月2日星期四

[CSS] use image-set to support retina images

一般解析度的圖片在 retina 下其實不太漂亮, 在 retina 顯示下可以顯示更高的解析度圖片, 透過css 增加 image-set 可以user 在使用 retina 瀏覽時使用較高解析度的圖片.

雖然目前只支援 background-image 屬性，而不能使用在 <img> tag 裡, 我覺得這個問題還滿容易解決的, 使用一個 <div> tag 加 class 後, 就可以長的像 <img> tag 了, 只是<div> tag 右邊的區塊預設會折行, 需要手動設一下 float:left;, 然後會有區塊右邊文字置頂的問題, 這個用css 也都很好解決, 設個 padding 或再使用一個 div position:absolute; 再配合坐標; 應該就ok了.
<== 由於我不太懂 css, 這部份可能有誤.

在 retina 下的顯示實測:

可以清楚看的出來第1張圖糊糊的, 第2張圖(高解析度)就銳利很多.

相同的 html 在 PC 裡執行:

只有下載低解析度的版本.

解法1:

Serving Images Efficiently to Displays of Varying Pixel Density
https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html

header {

    background: -webkit-image-set( url(images/header.jpg)    1x,

                                   url(images/header_2x.jpg) 2x);

    height: 150px; /* height in CSS pixels */

    width: 800px; /* width in CSS pixels */

加個 -webkit-image-set 就做完了.

這個做法的優點是, client 端只會從 server side 下載指定大小的圖片, 對 client side 來說傳輸給顯示效果較好, 對 server side 來說, 由於多一個檔案, 所以需要 maintain 工作會多一點點, 所佔用的儲存空間多一點點, 但我覺得這個是利大於弊, 是可行的.

解法1在舊的瀏覽器不支援.

解法2:
直接放一張2倍解析度的大圖, 讓browser 自己 resize 到指定的寬和高, 這個作法更快, 相容性更高, 缺點是 client side 和解法1相比會慢一點點點(對使用者來說無感).

衷心地建議您, 如果都知道來源圖片的 pixel, Html 或 Css 裡請指明該圖片的 width + height, 只寫一個 width 是很方便沒錯, 但是在某些browser 或 eMail Client(ex: outlook)下畫面裡的圖片會為了 resize image 而"閃動", 視覺效果很差.

解法2在一些舊的瀏覽器(或eMail Reader)顯示效果會比較差, 因為他們對 image resize 的重新取樣(Resample)的處理"超差", 會有明顯的鋸齒/模糊或雜點.

結論:

解法1在client side傳輸速度還是視覺效果可能比解法2好
解法2在client side相容性和server side 改 css/html 實作的速度比解法1快.

image-set实现Retina屏幕下图片显示
http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html
Safari 6 and Chrome 21 add image-set to support retina images
http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
[CSS] 5個對設計師有幫助的CSS屬性
http://blog.rx836.tw/blog/5-css-properties/
[CSS] [基礎] 盒子模型／區塊模型（Box Model）
http://mepopedia.com/?page=804
[CSS] 置底技巧，可用於 Footer 區塊
http://www.wibibi.com/info.php?tid=138

2014年7月18日星期五

[JS] html select 下拉框顯示固定寬度

預設的 select box 的寬度會依照 option 裡的值(value) 長短而自動 resize 寬度, 在很多 select box 的畫面裡會不太好太, 解法有2:

1. css (建議), min-width & max-width 屬性.
2. javascript.

解法1:

Example

Set the minimum width of a paragraph:

p{
min-width:1000px;
}

Browser Support: ALL Browser

The min-width property is supported in all major browsers.

Note: IE6 and earlier versions do not support the min-width property.

html code:

執行畫面 (screent shot):

解法2: javascritp

執行畫面:

javascript source code:
==============
<!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></title>
<script type="text/javascript">
function FixWidth(selectObj)
{
var newSelectObj = document.createElement("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.selectedIndex = selectObj.selectedIndex;
newSelectObj.onmouseover = null;
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
while(e = e.offsetParent)
{
absTop += e.offsetTop;
absLeft += e.offsetLeft;
}
with (newSelectObj.style)
{
position = "absolute";
top = absTop + "px";
left = absLeft + "px";
width = "auto";
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
if(window.addEventListener)
{
newSelectObj.addEventListener("blur", rollback, false);
newSelectObj.addEventListener("change", rollback, false);
}
else
{
newSelectObj.attachEvent("onblur", rollback);
newSelectObj.attachEvent("onchange", rollback);
}
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
newSelectObj.focus();
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
document.body.removeChild(newSelectObj);
}
</script>
</head>
<body>
<form method="post">
<div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;">
<select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
<option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
<option id="B" title="this is B">BBBBBBBBBBBBBBB</option>
<option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
</select>
</div>
</form>
</body>
</html>

2013年10月21日星期一

Cool Buttons 超連結變漂亮的按鈕

Wow, 好厲害，透過 <A> 超連結 tag 就做出各式各樣漂亮的 button，真的是太神奇了，立馬把 css 摳回家。

這裡有扁平設計(Flat Design)、漸變陰影 (Gradient)、3D 按鈕等一應俱全喔 (^_^)

URL： http://fribly.com/2013/10/18/cool-buttons/

2012年10月9日星期二

為什麼 table 被載入到 DOM 時, 會多加 tbody tag

今天看別人上課的ppt, 裡面問到一個問題:
為什麼 table 被載入到 DOM 時, 會多加 tbody tag?

--------------
Nickolay 說:

To summarize the excellent explanations given in the answers and comments by bobince, Kieron, Alohci and others:

Firebug just displays the DOM of the parsed page. Due to complicated HTML parsing rules, the DOM will "differ" (in some sense) from the source HTML.
In this case the TBODY element in the DOM is added by the HTML parser. Note that this weird parsing is limited to text/html documents and in XHTML the DOM corresponds closely to the source XML.
- This behavior was specified in HTML 4. The content model (allowed children) for table is(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+) -- trs are only allowed intbody! The spec says that tbody's start tag is optional, which is supposed to mean that if the HTML parser encounters tr directly inside a table it inserts the tbody start tag omitted by the author.
- To make matters more clear HTML 5 defines very detailed parsing rules, in particular for this case: "When the insertion mode is "in table", tokens must be handled as follows: [...] A start tag whose tag name is one of: "td", "th", "tr" -> Act as if a start tag token with the tag name "tbody" had been seen, then reprocess the current token."

--------------
原來 tbody 是一個重要的 tag, 下面這篇文章明確指出, 如果用 DOM 方法建立 table 時， IE 不會自己加一個 tbody, 此時當我們試圖添加 tr 在 table 之下時， IE 也不會成功。

A bug about table in M$IE
http://blog.roodo.com/rocksaying/archives/2690905.html

--------------
相關文章:
Why does firebug add <tbody> to <table>?
http://stackoverflow.com/questions/1678494/why-does-firebug-add-tbody-to-table

2012年9月10日星期一

新增 option 到 select box 裡的2個方法

新增 option 到 select box 裡的2個方法,

方法1: 用 element (object) 方式.

function appendToSelect(select, value, content) {
    var opt;
    opt = document.createElement("option");
    opt.value = value;
    var theData = document.createTextNode(content);
    opt.appendChild(theData);
    select.appendChild(opt);
}

方法2: 用 string (html) 方式.

var select_option_html='';
if(final_array.length>0){
    for(var iFinal=0; iFinal<final_array.length; iFinal++){
        var array_selected_flag='';
        if(final_array[iFinal].indexOf('X')!=-1){
            array_selected_flag=' selected';
            final_array[iFinal] = final_array[iFinal].substring(0,final_array[iFinal].length-1);;
        }
        select_option_html+=['<option value="', final_array[iFinal].toString(), '"', array_selected_flag, '>', final_array[iFinal].toString(), '</option>'].join("");
    }
    $("#countries").html(select_option_html);
}

實際測試, 當資料量在 1萬筆左右, 用新版的 chrome(或 firefox) 來測其實差異不大, 理論上 string(html) 效能上比較快, 有人說方法1(element) 大約在 0.4秒, 方法2(string) 大約在 0.7秒, 其實差 0.3秒應該是無感, 理論上應該是 string(html) 比較優, 當在處理 "大量" 資料時.

2012年7月19日星期四

[Asp] Server.URLEncode 和 encodeURIComponent 的差別

一般的情況下, 透過URL 傳遞參數, 在asp 裡只需要把要傳的變數內容透過 Server.URLEncode 就解決了, 但如果是要讓 ASP 和 javascript 同時都可以存取的話, 最好的解決方法是透過 aspEncodeURIComponent() 來解決.

以 "遺產" 這個中文字來說,
1. 在 Big5 的網頁,裡, 直接按下 submit 傳到 action 的網址, 會變成 "%BF%F2%B2%A3",
2. 在 Big5 的程式碼透過 Server.UrlEncode() 會產生成 "%BF%F2%B2%A3"
3. 在 Utf-8 的程式碼透過 Server.UrlEncode() 會產生成 "%E9%81%BA%E7%94%A2"
4. 在 Big5 的程式碼透過 aspEncodeURIComponent() 會產生成 "%E9%81%BA%E7%94%A2"
5. 在網頁裡透過 javascript 的 encodeURIComponent() 會產生成 "%25E9%2581%25BA%25E7%2594%25A2"

說明: 把 %25 視為 %, 就可以看的出來encodeURIComponent() 是產生成utf-8 編碼.

為什麼需要轉換編碼? 因為客戶的網站是 Big5 編碼, 他使用了 google site search 功能, google site search 如果是直接存取 URL 裡的變數, 有可能需要把變數存成 utf-8 編碼來讓 javascript 做處理.

附上 Asp 的 aspEncodeURIComponent 副程式:

Function aspEncodeURIComponent(sStr)
aspEncodeURIComponent = myEncodeURIComponent(sStr)
%>
<script language="javascript" type="text/javascript" runat="server">
function myEncodeURIComponent(sStr){
return encodeURIComponent(sStr);
}
</script>
<%
End Function

相關文章:
JavaScript 的 encodeURIComponent() 會將字串轉換成 UTF-8 編碼
http://blog.longwin.com.tw/2010/01/javascript-encodeuri-component-utf-8-2010/

2012年3月19日星期一

網址裡的相對路徑 ..../../ = ./ 但 ../..../ 不等於 ..../../

網址裡的相對路徑 ..../../ = ./
但 ../..../ 不等於 ..../../
.../../ = ..../../

相關 html 語法的測試如下:

2011年11月17日星期四

[HTML].DOCTYPE tag 的差別

設計師給的 UI(上圖) 與套出來的 UI(下圖):

研究後是因為 !DOCTYPE tag 忘了加, 造成的跑版,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

結論: 下次畫面跑版, 先來檢查看看, 是不是 tag 忘了加.

經測試發現, 我猜測可能大部份的情況下, 應該都要加到 html tag 前, 如果沒有加的話, 會套用到 "user agent stylesheet" (browser 預設的 style).

2011年7月5日星期二

動態產生的select box 裡的 item 在回一頁時會跑掉

user 反應, 他的訂單資料有錯.

經反複的測試, 終於找到錯誤的原因, 這個bug 是必需輸入過錯誤的資料, 才測試的出來, 發生的因為 user 曾輸入過錯誤的資料, 造成回上一頁時, 動態產生的 select box 裡的 item 會固定變成第1個項目.

┏┓
┗■━━━━━━━━━━━━━━━━━━━━━━━
　┃ 執行畫面 (Screens)
　┗━━━━━━━━━━━━━━━━━━━━━━━
　■ 1. 在下拉框(select box)輸入正確的資料, 松山區.

　■ 2. 固定輸入錯誤的資料.

　■ 3. 畫面一回來, 就會看到動態產生的下拉框裡固定被帶入第1個項目, 而不是正確的 "松山區".

┏┓
┗■━━━━━━━━━━━━━━━━━━━━━━━
　┃ 解決方式 (Solution)
　┗━━━━━━━━━━━━━━━━━━━━━━━
　■ 增加一個隱藏的欄位, 用來存放送出之前的內容值. 並在回一頁時, 把該值填入動態產生的下拉框之中.

　※ 附註: 這個隱藏欄位的用法, 建議不要使用 input 的 hidden 欄位來做, 經測試 google chrome 很神奇的會抓不到該 hidden 欄位的值, 即使你在 submit 按鈕按下去之後有給他值. 建議使用 type='text' style='display:none;'

　※ 附註: 由於 google chrome 和 firefox 都太聰明了, 會 cache 住前一頁的 image, 會造成回上一頁時, 驗證碼會是舊的, 所以要在回上一頁之後, 執行一次 reset 驗證碼的動作.

訂閱：文章 (Atom)

Max Coding BLOG. (^_^)y

2014年10月3日星期五

[JS] Sweet Alert

2014年10月2日星期四

[CSS] use image-set to support retina images

解法1:

結論:

相關文章:

2014年7月18日星期五

[JS] html select 下拉框顯示固定寬度

Example

Browser Support: ALL Browser

2013年10月21日星期一

Cool Buttons 超連結變漂亮的按鈕

2012年10月9日星期二

為什麼 table 被載入到 DOM 時, 會多加 tbody tag

2012年9月10日星期一

新增 option 到 select box 裡的2個方法

2012年7月19日星期四

[Asp] Server.URLEncode 和 encodeURIComponent 的差別

2012年3月19日星期一

網址裡的相對路徑 ..../../ = ./ 但 ../..../ 不等於 ..../../

2011年11月17日星期四

[HTML].DOCTYPE tag 的差別

2011年7月5日星期二

動態產生的select box 裡的 item 在回一頁時會跑掉

Facebook 留言板

2014年10月3日 星期五

2014年10月2日 星期四

解法1:

結論:

相關文章:

2014年7月18日 星期五

Example

Browser Support: ALL Browser

2013年10月21日 星期一

2012年10月9日 星期二

2012年9月10日 星期一

2012年7月19日 星期四

2012年3月19日 星期一

2011年11月17日 星期四

2011年7月5日 星期二

Facebook 留言板

2014年10月3日星期五

2014年10月2日星期四

2014年7月18日星期五

2013年10月21日星期一

2012年10月9日星期二

2012年9月10日星期一

2012年7月19日星期四

2012年3月19日星期一

2011年11月17日星期四

2011年7月5日星期二