Search

11/30/2007

Dean Edwards: The window.onload Problem - Solved!

Dean Edwards: The window.onload Problem - Solved! - 本來探討 window.onload,通常window.onload = init; init會等到頁面所有的compoent load完之後開始動作(包含所有的img & binary content),這樣有時候不是很理想,譬如一個很多圖的頁面,必須等到圖全部load完才會開始執行init,FF可以利用"DOMContentLoaded" IE可以利用defer來達成。
1. conditional comment

<!--[if IE]> ... <![endif]-->

conditional compilation
/*@cc_on @*/
/*@if (@_win32)
document.write("<script defer src=ie_onload.js><\/script>");
/*@end @*/

2. Mozilla Firefox
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

Internet explorer
<script defer src="ie_onload.js" type="text/javascript"></script>

Dean Edwards: window.onload (again)

// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/


http://livepipe.net/scripts/code_highlighter.js

function asap(fn) {
asap.done ? setTimeout(fn, 0) : asap.waiting.push(fn);
}
asap.waiting = [];
asap.done = 0;
asap.ready = function() {
// (note: deliberately avoids using 'this')
if (!asap.done++) {
asap.timer && clearInterval(asap.timer);
var funcs = asap.waiting;
for (var i = 0, l = funcs.length; i < l; i++) {
setTimeout(funcs[i], 0);
}
}
}
// IE
/*@cc_on@if(@_win32)document.write('')@end@*/
// Moz/Op
document.addEventListener && document.addEventListener('DOMContentLoaded', asap.ready, false);
// Safari
asap.timer = navigator.userAgent.match(/WebKit|KHTML/i) && setInterval(function() { document.readyState.match(/loaded|complete/i) && asap.ready() }, 10);
// Fallback
window.onload = asap.ready;

之後要呼叫的function都經由 asap('Syntax.init()'); 這樣呼叫即可

Indenting CSS

Indenting CSS - 非常有創意的寫法,第一種寫法是依照 selector 的 weight 排序,實際上蠻難( to me at least )即時判斷selector的權重,第二種寫法的可行性蠻高的,是依照 HTML 的 structure 下去寫的,下次來試看看。


table.data_table {
}
table.data_table tr {
}
table.data_table tr td {
}
table.data_table tbody {
}
table.data_table tbody td {
}



1. div#box {
2. background-color: #FFF;
3. border: 1px solid #2E5E81;
4. margin: 50px auto 0 auto;
5. width: 790px;
6. }
7.
8. div#top, div#bottom {
9. background-color: #ADDCFF;
10. height: 25px;
11. line-height: 25px;
12. }
13.
14. div#main {
15. background: transparent url(../images/background.png) 10px 10px no-repeat;
16. height: 500px;
17. }
18.
19. div#content {
20. background-image: url(../images/png/50.png);
21. height: 500px;
22. margin: 25px 25px 25px 395px;
23. padding: 10px 10px 10px 10px;
24. }


<body>
<div id="box">
<div id="top">
<div id="main">
<div id="content">
</div>
<div id="bottom"></div>
</div>
</body>

11/29/2007

LukeW: Primary & Secondary Actions in Web Forms

LukeW: Primary & Secondary Actions in Web Forms - 這篇文章針對 primary action / secondary action所需要的視覺上的 distinction 上做探討,primary action指的是像 sumbit/發佈文章 之類大部分人所選擇的選項,secondary action 指的是像 cancle/立即儲存 之類比較次要的選項,在他的測試中,獲得最佳效果的是B,其次是C,這蠻有趣的,這中間有取捨,B的效率會較高,C的誤按的機率會比較小,最差效果的是把兩個 button 放離有一段距離的 E。

img.onreadystatechange

今天遇到一個很奇怪的問題,來 memo 一下,問題是這樣子的,分頁的圖出不來,IE only,後來發現是因為如果圖還沒 load 完就 append 到 Dom tree 上,IE似乎會停止 load 那張圖,解法就是設一個onreadystatechange的event handler,並且檢查目前的state是否為complete,再 append 到Dom tree上面。以上都是IE only,FF直接 append 到 Dom tree不會有問題

centerWrap = document.createElement('div');
img = document.createElement('img');
img.src = item[i].getAttribute('rel');

if(document.all){
centerWrap.id = item[i].getAttribute('rel');
img.onreadystatechange = function(e){
if(this.readyState == 'complete'){
$(this.src).appendChild(this);
}
}
}
else{
centerWrap.appendChild(img);
}

update: 上面這個作法會有問題:第二次 visit 分頁的圖會出不來,原因是因為第一次 visit 的時候IE會把圖 cache 起來,第二次visit的時候會直接從cache讀出來,所以不會發生onreadystatechange的 event,所以圖的 node 也不會 append 到 Dom tree上。解法是把不確定是否有cache住的都用 time stamp force retrival。

Tsung's Blog | 寫 JavaScript 需要的 VIM Syntax 和 Plugin 檔

Tsung's Blog | 寫 JavaScript 需要的 VIM Syntax 和 Plugin 檔

11/27/2007

Ajaxian » URI vs. URL: What’s the difference?

Ajaxian » URI vs. URL: What’s the difference?

URI

A URI identifies a resource either by location or name. More often than not, most of us use URIs that defines a location to a resource. However, a URI does not have to specify the location of a specific representation. Citing and example of a W3C URI for their home image, they use the following URI: http://www.w3.org/Icons/w3c_home. Note the absence of a file extension. The URI for the w3c_home image is still universally unique, but it does not specify the specific representation of the image (either a GIF, PNG, or JPG). The selection of the representation can be determined by the web server through HTTP content negotiation. The Apache HTTPD server has had excellent support for content negotiation for many years. Oddly, few sites take advantage of HTTP content negotiation. The W3C is one web application that makes heavy use of URIs and content negotiation.

URL

A URL is a URI but a URI is not a URL. A URL is a specialization of URI that defines the network location of a specific representation for a given resource. Taking the same W3C example, there are actually 2 representations available for the w3c_home resource:

* http://www.w3.org/Icons/w3c_home.gif
* http://www.w3.org/Icons/w3c_home.png

These URIs also define the file extension that indicates what content type is available at the URL. Through content negotiation, the web server will forward the user agent to the proper type, depending on the client’s capabilities, when the URI http://www.w3.org/Icons/w3c_home is accessed.

More often than not, URI is the correct term to use when referring to the location of resources on the WWW.

Content negotiation - Wikipedia, the free encyclopedia
Content negotiation is a mechanism defined in the HTTP specification that makes it possible to serve different versions of a document (or more generally, a resource) at the same URI, so that user agents can choose which version fit their capabilities the best. One of the most classical uses of this mechanism is to serve an image as both GIF and PNG, so that a browser that doesn't understand PNG can still display the GIF version. To summarize how this works, it's enough to say that user agents are supposed to send an HTTP header (Accept) with the various MIME types they understand and with indications of how well they understand it. Then, the server replies with the version of the resource that fits the user agents' needs.

11/23/2007

beautiful web sites

Particletree
particletree.com
particletree.com.blog
Stylegala - Web Design Publication
www.stylegala.com
456 Berea Street: Articles and news on web standards, accessibility, and usability
www.456bereastreet.com
Rosenfeld Media - Web Form Design Best Practices
www.rosenfeldmedia.combookswebforms
www.rosenfeldmedia.com
http://css-tricks.com/links-of-interest-9/
css-tricks.comlinks-of-interest-9
blog design
Julien Lecomte’s Blog » Introducing CrossFrame, a Safe Communication Mechanism Across Documents and Across Domains - 800px centered column & shadow image
www.julienlecomte.netblog20071131

browser cache

在開發的時候,常常會發生的事,CSS/JS 被 browser cache 住,沒更新,以為寫的 code 沒有起作用,查半天才發現是cache問題,所以,需要瞭解1. 如何快速的刪cache:IE要click六次, 2. 在密集開發的時候,乾脆disable cache。


Cache path
  • Internet Explorer: C:\Documents and Settings\user\Local Settings\Temporary Internet Files
  • Firefox about:config -> browser.cache.disk.parent_directory
  • Firefox about:cache可以列出Memory cache device & Disk cache device的每個cache住檔案的path以及資訊。

Clear cache
  • Internet Explorer: 工具->網際網路選項->刪除檔案->勾選"刪除所有離線檔案"->確
  • Firefox: ctrl+shift+del -> 勾選"快取" -> 確定
  • Firefox Add-ons Cache Status

Disable cache
  • 工具->網際網路選項->設定->檢查儲存的畫面是否有較新的版本->每次查閱畫面時
  • Firefox: about:config -> browser.cache.check_doc_frequency -> Highlight and double click. Change the 3 (default) to 1 (which signifies "Check every time I view the page") in the dialogue box. Click OK.
  • Firefox Add-ons Web developer disable-> cache

forece reterival
  • add time stamp to file ex: <script src="foo.js?235235235235">
    time stamp can be generated by new Date.valueOf();
References:
How to Disable Your Browser Cache — Psychology IT

11/21/2007

Textarea Maxlength

PPK - Textarea Maxlength

The purpose of my script is not to enforce the maximum length, though it can easily be changed to do that. However, I decided to restrict my script to giving a polite reminder when the user exceeds the maximum amount of characters. Actually enforcing this maximum length is left to the trim_to attribute of Movable Type, which, being a server side functionality, is impossible for users to turn off.
  1. textarea是沒有maxlen屬性的, 不過我們可以用javascript來implement, 不過目前市面上的作法通常是取substring(0, textarea.getAttribute('maxlen'))之類的, 這樣做法有一個缺點: 在IE會一直focus到textarea內文最後的地方。
  2. 再者, javascript很容易可以被disable掉, 無法提供一個安全的限制, 只能拿來當作提醒的用途, 在這篇文章中, ppk建議的方法是: 超過maxlen的話, 提示他就好了, 紅色的字之類的
  3. 注意文中counterClone.relatedElement = x[i]; 取得reference之後就bind在relatedElement裡面, 方便之後的access, 不需要每次都去取reference

11/17/2007

time stamp in javascript

new Date().valueOf();

comp.lang.javascript FAQ - 9.88 - 2007-10-12
Date.valueOf( ): convert a Date to millisecond representation
Object.valueOf( ): the primitive value of the specified object
To reload a page, use location.reload(). However, this depends upon the cache headers that your server sends. To change this, you need to alter the server configuration. A quick fix on the client is to change the page URI so that it contains a unique element, such as the current time. For example: location.replace(location.href+'?d='+new Date().valueOf()) If the location.href already contains a Query String, use: location.replace(location.href+'&d='+new Date().valueOf())

11/15/2007

圖片的水平置中以及垂直置中

Centering (horizontally and vertically) an image in a box
Demo
update: 上面的例子在ie7不會work
Demo - work in ie6, ie7, firefox
<div id="wrap">
<img src="http://developer.yahoo.com/yui/docs/assets/logo.gif">
</div>
圖片的水平置中的標準作法是#wrap{text-align:center},text-align:center是用來定位在block elemenet裡的inline element,圖片也是個inline element,FF & IE都沒問題。




比較麻煩的是圖片的垂直置中,FF以及一些標準的browser可以通過下面的方法置中


11/09/2007

note about iframe

1. iframe id="iframe" , 用 document.getElementById('iframe') 在 IE 下會抓不到,換一個 id 即可。待確認

2. 完全清除 iframe 的 border 單靠 CSS 是不夠的,要設定 iframe frameborder="0",設定後即可用 CSS control border style, ex: iframe{border: 1px solid #36c}

PPK - Javascript - Iframes


  1. The most important rule is to give any iframe you create a name attribute, even if you also use an id.
  2. alert(frames['inner'].document.body.innerHTML)

http://chunghe.googlepages.com/outter.htm