CSS Position

CSS Position 位置
http://css.1keydata.com/tw/position.php

CSS 排版觀念：Position
http://blog.blueshop.com.tw/dplayerd/archive/2008/10/09/57324.aspx

[CSS] IE6 模擬 position:fixed 純 CSS 解法
http://www.jaceju.net/blog/?p=577

clientHeight、offsetHeight 和 scrollHeight

四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋
clientHeight 大家對 clientHeight 都沒有什麼異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態欄以上的這個區域，與 頁面內容無關。

offsetHeight IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。

scrollHeight IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。 NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。

MSDN BODY Element | body Object

marquee 跑馬燈

HTML <MARQUEE ...>

用 javascript 來取代 marquee 《by 童顏未老人》

iframe javascript interaction

refresh an iframe by JavaScript from the parent page

var f = document.getElementById('iframe1');
f.contentWindow.location.reload(true);

reload function parameter:
false - Reloads the page from the browser cache. Default.
true - Reloads the page from the server.

solution from Re: Refresh iframe by marss


Calling Javascript between IFRAME and Parent frame

1. written in parent, called from within iframe:

//for firefox OK! but not all browser
parent.function_name();

2. witten in iframe, called from within the parent:

top.frames[name].function_name();

(Added @ 2009-06-01)The following is read from Accessing a javascript function in a nested iframe in IE, tested OK in IE, Firefox and Chrome

document.getElementsByTagName('iframe')[0].function_name();

NOTE: javascript interaction between 2 windows
Read Call parent window's javascript function from child window OR passing data from child window to parent window in javascript by chiragrdarji

//use element object directly
parent.document.getElementById(id)

http://topic.csdn.net/u/20080922/13/ab72e9b1-f42a-411e-a742-a7c75e592965.html

AJAX security issue

Cross domain AJAX access problem.

神鵰蝦jck11 - AJAX的安全性問題[筆記]
深度探索 Javascript跨域和Ajax跨域解决方案 by Mr.Crazy
mozilla developer center - HTTP access control

JavaScript Virtual Keyboard

JavaScript Graphical / Virtual Keyboard Interface

Here is the demo:





download the script from here

<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css" />

JavaScript XML node trace

DOMParser

Using JavaScript DOM Parser to create XML Document from XML strings.

var doc;//xml dom
// Mozilla and Netscape browsers
if (document.implementation.createDocument) {
var parser = new DOMParser()
doc = parser.parseFromString(xmlstr, "text/xml")
// Internet Explorer
} else if (window.ActiveXObject) {
doc = new ActiveXObject("Microsoft.XMLDOM")
doc.async="false"
doc.loadXML(xmlstr)
}
//doc is dom strucure, using node traverse to access the nodes

XML DOM - The Element Object

JavaScript Regular Expression

Regular Expression in JavaScript
method 1

var str = "this is a test";
var re = new RegExp("is");
var m = re.exec(str);
if(m) alert(m[1]);

method 2

var str = "this is a test";
var re=/test/gi;
alert(str.replace(regex,"!!!"));

NOTE: RegExp Object now supports search(), match(), replace() and split() in String Object. For more detail please reference the hyperlinks.

Reference:
JavaScript RegExp Object Reference
石頭閒語 - Regular Expression (RegExp) in JavaScript
Regular Expression在Javscript下的兩種作法

JavaScript window.open

window.open([URL], [window name], [property], [Replace]);
property:

Property	Default	Description
toolbar	no	show the toolbar
menubar	no	show the menu bar
resizable	no	specifies whether the window can be resized.
scrollbars	no	show the scrollbars
status	no	show the statusbar
directories	no	show the directories bar(links bar)
location	no	show the location bar
width	auto	specifies width of the new window in pixels
height	auto	height of the window in pixels
top	auto	specifies window position
left	auto	specifies window position

NOTE: Another fullscreen property is only supported by Internet Exploer.

Reference:
Open popup window with open.window method
window.open()的所有參數列表
IE的showModalDialog與FireFox的window.open 父子窗口傳值示例

JavaScript Event object

Firefox can not use the event object in JavaScript
I often use the first arguments to get the event object.

obj.onmousedown=function() {
var event = arguments[0];
var x=event.clientX, y=event.clientY;
}

<div onmousedown="_mousedown(event)"></div>
<script type="text/javascript">
function _mousedown(e) {
var x=e.clientX, y=e.clientY;
}
</script>

Some other solutions provided:
解決 FireFox 下[使用event很麻煩] 的問題
Firefox中Javascript使用event對象需要注意的問題
IE和Firefox下event亂談

Reference:
Javascript Madness: Mouse Events - a full test of mouse events in modern browsers
Event Key Codes - pretty useful event key codes
JavaScript Event KeyCode Test Page
MDC - event

JavaScript Get CSS style

Get the css text or style sheet

s=document.styleSheets;
for(i=0;i < s[0].cssRules.length;i++){
　　alert(s[0].cssRules[i].cssText);
}

reference from How can I get CSS comments with javascript?

Other CSS reference
CSS frquently used attributes
Mozilla CSS Extensions
WebKit CSS Styles
FF 與 IE CSS的區別
CSS 於IE6、IE7、Firefox間的兼容hack

HTML Meta Tags

META tags:

• <META HTTP-EQUIV="name" CONTENT="content">
• <META NAME="name" CONTENT="content">

META tags should be placed in the head of the HTML document, especially important in documents using FRAMES.

• Content-Type
  <meta http-equit="Content-Type" content="text/html; charset=UTF-8">


• Cache-Control
  <meta http-equit="cache-control" content="no-cache">


• Pragma
  <meta http-equit="pragma" content="no-cache">


• Refresh
  <meta http-equit="REFRESH" content="15;URL=http://www.google.com">


• Keywords
  <meta name="keywords" content="keywords">


• ROBOTS or Robots
  Controls Web robots on a per-page basis.

Reference:
Useful HTML Meta Tags
A Dictionary of HTML META Tags

How to get the focused element of the web page?

Reference from WebDeveloper.com
How can get the id of the focused element of the web page?

The following codes were being tested on my Firefox 3 and Google Chrome.
Thanks Declan1991.

Code:

function getTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
document.onmouseup = function(e) {
var t = getTarget(e);
if ((t.type && t.type == "text") || t.nodeName == "textarea") {
//is text area of input[type=text]
}
}

Or, to get the focused element in form, you can reference the folling.
Both of them need the element in a form to attach functions to the focus event.
Get the element that has focus
Using javascript to check the focus of an element

The way to attach events, please read
非常好的javascript：add event/ remove event
javascript attachEvent 事件
attachEvent() / addEventListener()