OwlCarousel2 owl-lazy未載入圖片時的高度固定解決方法

 https://github.com/OwlCarousel2/OwlCarousel2/issues/2357

[jQuery Plugin] 實作響應式影像地圖

因為客戶在某些場景要用影像地圖實現點擊的功能，

使用rwdImageMaps套件可以輕鬆達到

外掛：https://github.com/stowball/jQuery-rwdImageMaps

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

但使用前需要使用初步工具做影像地圖，可以參考https://www.image-maps.com/

產生後原圖會有會有原本定位坐標的原圖比例（要保留，ｊｑ外掛會吃這個值去自動resize到目前畫面的大小坐標）

操作畫面

Demosite: 輔大－亮亮指甲

[jQuery外掛] owlcarousel2支援垂直的應用

利用Owlcarousel2做出垂直的效果，

可以透過ｃｓｓ動畫改變滑動的方向

https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

https://codepen.io/thirdender/pen/aOYyGb

另外有一個貼近客戶需求的外掛RoyalSlider

https://lowercolumbia.edu/_resources/plugins/royal-slider/templates/video-gallery/

[jQuery Plugins] summernote的 圖片標題與替代文字編輯外掛

預設的summernote是沒有提供image title與alt的編輯ui，
你可以安裝summernote-image-title來達成這個功能。

https://github.com/asiffermann/summernote-image-title

[jQuery Plugins] 號稱最好用的廣告輪播owl carousel套件

大部份的landing page都會在最上面放一個很大的廣告橫幅，
Owlcarousel為許多工程師首選的套件，支援RWD，以及多種的橫幅表達方式

http://owlgraphic.com/owlcarousel/

官網好像失效了，改到github https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

[jQuery] 簡單易物的jquery gallery 套件: lightbox2

今天將公司的sharktech.tw 官網改了一下lightbox套件，於是找到Lokesh Dhakar這個作者寫的。

因為太好套了所以推給大家。只要加上data-lightbox這個屬性，即可做單張preivew或群組(gallery)的preview效果了。

[jQuery] youtube iFrame API無法在iOS上播放影片的解決方法

測試youtube錯誤，最近幫客戶的網站套了jquery.youtubebackground.js RWD的jquery套件後，就噴了以下錯誤。

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match


 

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match.

查了一下原來是這個套件用的是youtube的iframe api，因為在iOS上(safari 和chrome)執行playVideo()這個方法是會爆炸了，雖然有提到可以用cueVideoById("youtubeId")來處理。但用了還是不會播，所以目前的workaround就先讓程式判斷iOS不要先執行play，讓用戶自已點取影片。

http://stackoverflow.com/questions/9934944/embedding-youtube-video-refused-to-display-document-because-display-forbidden-b

https://developers.google.com/youtube/player_parameters?hl=zh-cn#IFrame_Player_API

[jQuery] 滿版的Dialog外掛

效果不錯的滿版型動畫Modal外掛，留著以後參考。

官方demo

http://joaopereirawd.github.io/animatedModal.js/

http://joaopereirawd.github.io/animatedModal.js/

[jQuery] 偵測元素是否進入到viewpoint外掛

今天想要處理偵測用戶scroll的位置判斷是否有進入指定元素viewpoint的議題。
找到以下三個jQuery外掛

http://imakewebthings.com/waypoints/guides/getting-started/

https://github.com/protonet/jquery.inview

https://github.com/morr/jquery.appear

比較過後，暫時先用inview即可解決，
其他二個外掛有比inview強的地方就是增加了offset的參數可設定。
不過inview有pull-request已解決這個功能

[jQuery] 視差滾動元件: scrollme 簡單、快速、好上手

最近在做某個網站使用視差效果，原來使用stellar.js，
但網頁滾動起來發生很卡的現像，非常不平滑。
於是又找了到 scrollme這個元件，由於我們的目的可以針對元件某些元素進行一些特效，
加上scrollme的效能非常的平滑，使用語意也超級簡單(連教學都不用寫了XD)，所以推給大家使用。


http://scrollme.nckprsn.com/

[jQuery plugin/CSS] 處理Youtube影片置入背景RWD的方法 :D

最近製作的網站有需要將youtube影片放置某一個元素裡面當背景，
找了二個不錯的資料如下，有興趣的朋友可以試玩一下。

http://rochestb.github.io/jQuery.YoutubeBackground/
https://github.com/chriscoyier/Fluid-Width-Video
http://www.seanmccambridge.com/tubular/

fullpage.js 一頁式的網站樣版工具

如果你需要一頁式的網站樣版，可以參考一下fullpage.js這個套件

http://alvarotrigo.com/fullPage/#firstPage

[jQuery] scroll animation 外掛

快速上手的scroll animation外掛

https://github.com/mpalpha/animate-scroll

[jQuery] ajax request queue 蒐集

記錄一些使用jquery ajax queue的解決方案，目前要找的需求是要能支援concurrent ajax requ，而不是一個接著一個發送。

$.ajaxMultiQueue
https://github.com/GeReV/jQuery.ajaxMultiQueue

$.AjaxQueue https://gist.github.com/iambigd/46fe33eaf3dec450e965

http://dreamerslab.com/demos/javascript-loose-coupling-with-jquery-queue-plugin

目前使用$ajaxQueue方案，再多用一個Wrapper包起來即可。

[jQuery Plugin] jqplot 重新調整tooltip

在jqplot裡面的highlighter擴充模組提供了tooltipContentEditor方法讓使用者可以處理tooltip的效果，測試ok的範例如下：



tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) { plugin.logger.debug('tooltipContentEditor (x,y): ' + str); // console.log('str: ' + str);// x , y // console.log('seriesIndex: ' + seriesIndex); // console.log('pointIndex: ' + pointIndex); // console.log(jqPlot.options.axes.xaxis.ticks); // console.log(jqPlot.data[seriesIndex]); // console.log(jqPlot); var xAxis = jqPlot.options.axes.xaxis.ticks[parseInt(str) - 1]; // str.split(',')[0]; var yAxis = str.split(',')[1];//這樣取比較準 var newElem = '
' + '' //以下這個方法有時候取得的值會異常，例如設成年的時候 // +'

' + jqPlot.series[seriesIndex]["label"] + '
x axis:	' + xAxis + '
y axis:	' + jqPlot.data[seriesIndex][pointIndex] + '

'; + '
y axis:
' + yAxis + '
'; return newElem; }
http://stackoverflow.com/questions/17719534/jqplot-tooltip-content-editor

2015/12/28後記

被qa發了tooltip值異常的問題，擷圖來記錄一下，最後修正最完了的xaxis的解法請參上的範例即可。

[jQuery plugin] 解決jqplot 動態繪圖記憶體一直長大的問題

目前在專案上使用jqplot來繪圖，遇到記憶體一直長大的問題，
經過測試以下這個作者的解法是可用的
https://edsilverton.wordpress.com/2011/04/11/avoiding-jqplot-memory-leaks/

在每次重新繪圖時需要把元素整個幹掉，記憶體才會真的往下嶧放掉。

[jQuery plugin] 讓table能夠支援變更行寬大小與調整行的位置

如果要實作table的拖拉行與行寬大小可以參考這二個元件:D

http://www.jqueryscript.net/table/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable.html

http://dobtco.github.io/jquery-resizable-columns/

[jQuery Plugins] fancybox 執行在1.9.x的jquery錯誤處理

處理一些新版jquery跑fancybox 1.3.4的處理方法:

討論位址:

http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

It seems like it exists a bug in jQuery reported here : http://bugs.jquery.com/ticket/13183 that breaks the Fancybox script.

Also check https://github.com/fancyapps/fancyBox/issues/485 for further reference.

As a workaround, rollback to jQuery v1.8.3 while either the jQuery bug is fixed or Fancybox is patched.

---

UPDATE (Jan 16, 2013): Fancybox v2.1.4 has been released and now it works fine with jQuery v1.9.0.

For fancybox v1.3.4- you still need to rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

---

UPDATE (Jan 17, 2013): Workaround for users of Fancybox v1.3.4 :

Patch the fancybox js file to make it work with jQuery v1.9.0 as follow :

1. Open the jquery.fancybox-1.3.4.js file (full version, not pack version) with a text/html editor.
2. Find around the line 29 where it says :

   isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,

   and replace it by (EDITED March 19, 2013: more accurate filter):

   isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,

   UPDATE (March 19, 2013): Also replace $.browser.msie by navigator.userAgent.match(/msie [6]/i) around line 615 (and/or replace all $.browser.msieinstances, if any), thanks joofow ... that's it!

Or download the already patched version from HERE (UPDATED March 19, 2013 ... thanksfairylee for pointing out the extra closing bracket)

NOTE: this is an unofficial patch and is unsupported by Fancybox's author, however it works as is. You may use it at your own risk ;)

Optionally, you may rather rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.

[jQuery Plugin] required depends 讓驗證欄位基於其他特地條件成立

如果你使用jquery validator要讓required規則依特地條件成立才驗證的話， 可以使用呼叫的depends方法，並自訂規則:D

$('#ProspectDtlFrm').validate({ 
    rules: {
        prsptEmail: {
            required: {
                depends: function(element) {
                    return ($('#prsptHomePhone').val() == '' && 
                            $('#prsptBusinessPhone').val() == '' && 
                            $('#prsptMobilePhone').val() == '');
                }
            }
        }    
    }, 
    messages: { 
        prsptEmail: 'Please enter your first name'
    } 
});

Reference
jquery validate depends rule

[jquery plugin] jquery validator 驗證多個選取盒checkbox

常用的需求，怕忘記直接寫個範例記一下。
以下範例介紹如何透過jquery validator來驗證多個checkboxes，
可以透過minlength參數來指定選取數量

HTML

欲代理區域：
                        <input type="checkbox" id="north" name="area" value="north" /> 北部
                        <input type="checkbox" id="central" name="area" value="central" /> 中部
                        <input type="checkbox" id="south" name="area" value="south" /> 南部
                        <input type="checkbox" id="east" name="area" value="east" /> 東部

JS範例

$validatedContact
   = $("#contactForm").validate({
    rules: {

     //共同 checkbox
     area: {
      required: true
      ,minlength: 2
     }
},
messages:{
area: {
      required: "區域未選取"
      ,minlength: "至少選取二個區域"
     }
},
 submitHandler: function(form) {
}
});

結果