Offical Website: http://www.shadowbox-js.com/index.html

sometimes we might need to decide what images need to be played instead of using

<a href="..." rel="shadowbox[Vacation]"><img src="..."/></a>

This is how we can do to create an Array to store all the object

<a id="item_img" href="javascript:;">Click me to play ShadowBox</a>

<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>

<script>
//the array list going to be played
var play_array = [];

//we use jquery to insert the url into the list
$("a.sbox").each(function(index, element) {
		play_array.push({
			content:    element.href,
        	        player:     "img",
			title:	   element.title,
		});
});

Shadowbox.init({
		handleOversize: "resize",
		continuous: true,
		modal: false,
		skipSetup: true,
		counterType: "skip"
});

Shadowbox.setup("a.sbox", {
		gallery:        "sbox",
		continuous:     true,
		counterType:    "skip"
});

$("#item_img").click(function(){
    Shadowbox.open(play_array);
});

</script>

在網路上找到的blink不是只能用於IE就是只相容於FF, 於是自己嘗試寫了一個JavaScript Blink的功能.
在IE8 及FF測試都沒問題. 閃爍的頻率在SetTimeout裡面可以設定, 1000表示1秒, 2000為2秒, 以此類推.




征才 


剛在JavaScript寫程式時,
發現我的Ajax功能在FireFox可以跑成功, Firebug也偵測不出問題,
但用IE時卻出現錯誤, 顯示說某某行找不到物件.
後來去找了很久才知道原來問題出在一個平時很少注意的地方:

乍看之下可能會覺得以上兩行沒有甚麼差別, 但其實問題就在type的部分,
在FF是可以辨識成功的, 但在IE(測試環境IE8)的情況下就讀取不到Javascript.
所以以後要多注意囉.

製作一個Javascript EDITOR, 可以直接存取Windows 系統 ClipBoard(剪貼簿)的資料/圖片,

如果沒有限定瀏覽器當然最好, 但如果功能只能在IE使用也OK.

以下的CODE參考自某論壇,還沒有嘗試過,先在此記錄一下:

function SetToClipboard(text) {
if (isIE)
window.clipboardData.setData("Text", text);
else if (isFF) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (every) { window.alert(jsresClipboardNotAllowed); return null;}
var clip = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clip.copyString(text);
}
}

如果在editor能夠進行裁剪更佳~

還沒實作過, 這個IDEA如果可以實現, 在部落格寫教學將會非常方便. (不用一直使用圖片編輯器來處理圖像)

我們先把話說在前頭, Javascript的所有函數並不適用在所有的瀏覽器, 這個大家都贊同吧?

所以你一定會跟我一樣想先擷取使用者的瀏覽器版本, 看看它是用IE, MOZILLA還是Opera等等的, 但這樣的方法真的好用嗎? 老實說這是相當難維護的, 因為瀏覽器會一直更新, 如果你都用IF ELSE來判斷它的版本應該會要一直更新吧, 而且你又要怎麼判斷你的使用者會不會比你更快更新它的瀏覽器呢?

舊的方法如下:

javascript:alert(navigator.userAgent);

如果你使用IE7, 它會回傳給你: Mozilla 4.0/ …..

這樣的方法真的不是很好, 在這裡有個不錯的方式來判斷:

if (typeof featureName != "undefined") {
// 程式碼
}

舉例如下:

if (typeof document.getElementById != "undefined") {
alert("getelembyid is supported");

} else {
alert("no getelembyid support");
}

我們要判斷瀏覽器是否支援getElementById 就可以直接用typeof document.xx != "undefined" 來判斷 如果使用者不支援這個函數你就可以再另外想辦法. 另外一種寫法如下:

var getElem = (typeof document.getElementById == "function") ? true : false;
if (getElem) {
// 我們知道GetElementbyId是支援的,
// 所以我們就可以用它.
}

這樣是不是比較實際且容易維護呢?

大家都知道事件的用法就是當某個事件(狀況)被觸發了之後就會去執行某個Function, 尤其是Javascript, 在當紅AJAX的催化下, 了解Javascript的Event用法更加重要, 在這裡就大概介紹一下Javascript的Event用法.

從W3C的發展時間軸來看, DOM(Document Object Model)的模型可以分為兩種, DOM 0 及 DOM 2. 從數字來看就可以知道DOM 0 當然是比較舊的協定, 我們可以從以下的表格來看:

DOM1 協定:

 

Event Name

Description

onblur()

The element has lost focus (that is, it is not selected by the user).

onchange0

The element has either changed (such as by typing into a text field) or the element has lost focus.

onclick0

The mouse has been clicked on an element.

ondblclick()

The mouse has been double-clicked on an element.

onfocus()

The element has gotten focus.

onkeydown()

A keyboard key has been pressed down (as opposed to released) while the element has focus.

onkeypress()

A keyboard key has been pressed while the element has focus.

onkeyup()

A keyboard key has been released while the element has focus.

onload()

The element has loaded (document, frameset, or image).

onmousedown()

A mouse button has been pressed.

onmousemove()

The mouse has been moved.

onmouseout()

The mouse has been moved off of or away from an element.

onmouseover()

The mouse has moved over an element.

onmouseup()

A mouse button has been released.

onreset()

The form element has been reset, such as when a form reset button is pressed.

onresize()

The window’s size has been changed.

onselect()

The text of a form element has been selected.

onsubmit()

The form has been submitted.

onunload()

The document or frameset has been unloaded.

 
DOM2 的進化:

DOM 0 Event

DOM 2 Event

onblur()

blur

onfocus()

focus

onchange()

change

onmouseover()

mouseover

onmouseout()

mouseout

onmousemove()

mousemove

onmousedown()

mousedown

onmouseup()

mouseup

onclick()

click

ondblclick()

dblclick

onkeydown()

keydown

onkeyup()

keyup

onkeypress()

keypress

onsubmit()

submit

onload()

load

onunload()

unload

 新的DOM2 用法可以addEventListener()這個函數來觀察到:

addEventListener(event,function,capture/bubble);

參數event如上表所示, function是要執行的函數, capture與bubble分別是W3C制定得兩種時間模式,簡單來說capture就是從document的開始讀到最後一行, 再執行事件, 而bubble則是先尋找指定的位置再執行事件.
capture/bubble的參數是布林值, True表示用capture, False則是bubble.Windows Internet Explorer也有制定一種EventHandler, 是 attachEvent(), 格式如下:

window.attachEvent("submit",myFunction());

比較特別的是attachEvent不需要指定capture/bubble的參數, 因為在windows IE環境下都是使用Bubble的模式.這裡用圖像的Rollover例子來表現事件的用法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rollover</title>
<script type="text/javascript">function moveOver(imgObj) {
  if (typeof window.addEventListener != "undefined") {
  imgObj.addEventListener("mouseover",function(){imgObj.src = imgObj.id +
"_over.png";}, false);
  imgObj.addEventListener("mouseout", function(){imgObj.src = imgObj.id +
"_default.png";}, false);
  } else {
  imgObj.attachEvent("onmouseover",function(){imgObj.src = imgObj.id +
"_over.png";});
  imgObj.attachEvent("onmouseout", function(){imgObj.src = imgObj.id +
"_default.png";});
  }
}

function rollover() {
var images = document.getElementsByTagName("img");
var roll = new RegExp ("rollover");
var preload = [];
for (var i = 0; i < images.length; i++) {
  if (images[i].id.match(roll)) {
  preload[i] = new Image();
  preload[i].src = images[i].id + "_over.png";

  moveOver(images[i]);
  }
}
}
if (typeof window.addEventListener != "undefined") {
  window.addEventListener("load",rollover,false);
} else {
  window.attachEvent("onload",rollover)
}
</script>
</head>
<body>
<p><img id="rollover_home" name="img_home" src="rollover_home_default.png"
alt="Home"></p>
<p><img id="rollover_about" name="img_about" src="rollover_about_default.png"
alt="About"></p>
<p><img id="rollover_blog" name="img_blog" src="rollover_blog_default.png"
alt="Blog"></p>
<p><img id="logo" name="img_logo" src="logo.png" alt="Braingia Logo"></p>
</body>
</html>

上述的 typeof window.addEventListener != "undefined" 程式碼可以判斷使用者的瀏覽器是否支援AddEventListener這個事件模型, 如果不支援就使用attachEvent.

W3C 及 IE 同時支援移除指定的事件, 用途是移除設定的事件, 格式分別如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

資料參考: Chapter 14 – Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring

一直以來Javascript的除錯都是非常煩人的步驟, 最近發現有個很棒的程式, 在這裡跟大家分享,

FireBug

這是Open Source軟體, 且完全免費, 是個搭配Firefox的Plugin, 它可以圖像化您的程式碼, 包括了HTML, CSS, 及javascript, 您可以通過它來觀看所有網頁, 不干擾您的瀏覽, 您也可以隨時把它關掉. 最棒的是它直接幫你把程式碼劃分好, 再除錯方面非常方便. 它佔的空間也很小喔~

更過詳情可參考: http://getfirebug.com/