關於Swiper.js，是近期我用過最全面的輪播效果，它很完整，且還蓋豐富的api可以調用做修改，非常好用。 但在使用上仍會遇到一些難解的疑惑，上網查也不見得可以查到快速的解法，須從api的文件中一個個來試，以下就是紀錄swiper使用上的一些問題紀錄: 1. Vertical 效果，若結合頁面原生地捲軸，需要設置一些參數才可以，不然直接使用官網上的範例，會導致swiper佔據touch事件，而無法使用卷軸 const swiper_mobile = new Swiper(`#mobileSwiper`, {         dire...

20221109 關於Scroll event的停止事件 See the Pen Scroll stop event by jay hsu (@jayh0324) on CodePen.   20221108 補充關於history state api的使用規範 1. 在IOS上如果連續觸發，會報錯，請一定要設置延遲。整體呈現只是URL改寫的速度會稍有延遲，但不會影響到任何操作行為 如: setTimeout(()=>{ history.pushState({},'', '#test'); },...

透過js繫結資料到html網頁是前端工程常用的方法，常用的資料集格式有JSON及XML，以下說明如何實作: XML XML資料集 < ?xml version='1.0' ?> < doc>     < dataset>         < data1>data1< /data1>         < data2>data2< /data2>     &nb...

Dropzone.js 應用: 建立拖曳式上傳介面 來源: http://www.dropzonejs.com/#event-removedfile   DataTable.js 應用: 建立常用表格控制功能介面 來源: https://datatables.net/ Highchart.js 應用: 建立資料圖表用的介面 來源: http://www.highcharts.com/demo/line-basic   Leaflet.js 應用: 建立地圖用的介面 來源: http://leafl...

最近遇到一個問題，就是透過jquery的width()取螢幕寬度的值，window環境下會出現有時候是有加上卷軸的寬度(17px)有時候沒有，非常困擾。 當我用$(window).width()來取螢幕寬的時候，當我把視窗尺寸調整時，所得到的是實際寬度，然後我就可以用來計算各區塊的尺寸了 有趣的是當我把視窗高度內縮時，卷軸寬度就會被偵測到，所得到的是實際寬度減掉卷軸的寬度，而這種狀況只有出現在高度內縮才會發生，寬度內縮是不會有這種狀況出現的 因此我找了一下相關資料，發現可以用javascript內的window.innerWidth來取代jquery的$(window...

透過js計算出css background image cover的值，從這邊我們可以找出相關的背景縮放比例用來apply在其他物件上 function fnTransform(){         var imgWidth = 1702;     // 原始圖片長寬         var imgHeight = 964;         var containerWidth = $("#slide3").widt...

要偵測前端瀏覽器語言版本其實有很多做法，透過前端或後端都可以，這篇介紹如何透過javascript來實現偵測前端語系的做法: 透過以下這一串js就可以取得當前瀏覽器使用的語系了，browserLanguage是IE再用的 var language = navigator.language.toLowerCase() || navigator.browserLanguage.toLowerCase(); //for IE 取得資料就可以進行進階的判斷，看是要導向還是要抓資料都可以，判斷的依據可以透過http://www.metamodpro.com/browser-langua...

在使用JSSOR的時候，碰到Mobile Safari會掛掉，請教google大神得到的結果，是因為兩個原因造成的: 1. 如果$AutoPlay設定為true 2. 圖片太多的狀況 在這兩個狀況下，會使Jssor Slider在頁面載入的時候loading太重，造成原本就不是很夠的iphone 5以下的Moble Safari記憶體不足，然後就掛掉了。 所以如果要解決這個問題，可以透過三個修改來處理: 1. 把$AutoPlay設定為false，然後透過api call  (jssor_slider2.$Play();) 來在所有scale都...

跳出視窗轉址母視窗的方法 <script language="text/javascript"> window.opener.location.href="新網址"; //先轉址母視窗 self.close(); //再把自己關掉 </script> 此方法常用在登入視窗，當登入者登入驗證完成後，將母視窗的位址轉向到登入完後的位址  ...