Source: https://github.com/stowball/jQuery-rwdImageMaps

Demo: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#bubbles

一個不錯的 Plugin, 只需一行 code 便可令你的 image map responsive, $('img[usemap]').rwdImageMaps();

HTML5 的 placeholder 屬性相信大家都熟悉不過, 但我們常常會很懊惱究竟該不該用他, 事關此屬性直至 IE9 都還未被支援 (相信新出爐的 IE10 應該可以用了吧!! ), 這就意味著所有使用 IE 瀏覽器的用戶都將看不到該提示, 不禁讓我們卻步。

網上有不少人都提供解決方案讓 IE 也能顯示該提示, 而最為常用的方法便是利用 jQuery 將所有 input 的值設定為 placeholder 的內容, 可是這個方法的缺點是提交表單時如果輸入框沒有輸入內容, placeholder 的提示便會被當成內容送出, 這又使得我們不得不多做一重功夫去驗証收到的內容是用戶輸入的內容還是 placeholder 的內容
因此我便在想了一個比較好的方法, 利用 position absolute 的屬性在輸入框上浮著一個提示文字, 當 focus 時便隱藏該提示, 這樣便可做到和 placeholder 一樣的效果又不用設定內容到 input 中了 ．．．．．．．．．．．

jQuery hoverIntent 是一套用以延遲滑鼠 mouseover 和 mouseout 事件的插件, 可有效防止用戶在一個物件上連續觸發多次事件的情況。

傳統的 hover:

$("#layer").hover(function() {
    //mouserover event
},function() {
    //mouserout event
});

使用hoverintent:

$("#layer").hoverIntent({
	interval: 500,
	over: function(){
		//mouserover event
	},
	timeout: 500,
	out: function(){
		//mouserout event
	}
});

當我們使用 jQuery 時, $(document).ready(function() { } ) 幾乎是必經之路。但是, document.ready 是在所有 html 內的元素產生後便會執行, 如果你想要你的網頁在所有元素都完成加載後才顯示出來 ( 即是制作網頁加載中的畫面 ), 那麼你就應該使用 $(window).load(), 它的作用等同於 js 中的 window.onload, 你的代碼將會在所有元素包括圖片及頁框等全部加載後才執行。

今天我在整理我的 jQuery slide show plugin 時發現 slide 這個 effect 無法正常運作, 研究了差不多半個小時, 才發現原來是我對 $.inArray 理解錯了。

我是利用 $.inArray() 去檢查 slide 這個變數是否存在於那個 array 內:

if($.inArray('slide',['slide','e2','e3'])) {
    function();
}