[ javascript ] firebug console 主控台訊息除錯
- 2014-08-18
開始寫 javascript 要除錯通常從 alert（）開始，不過在遇到變數非字串時就需要另外寫函數處理。其實開發者的好幫手 - firebug 很早就提供主控台功能，除了看已寫好的 javascript 是否正確外，拿來提早顯示除錯訊息也不錯。 簡單記錄一下 console.log('這裡應該要顯示'); 把要顯示的訊息出現在主控台，避免 alert 阻斷操作流程。 除了一般的記錄還有 console.info(''); console.debug(''); console.warn(''); console.error(''); 佔位顯示 console.
More..[ CSS ] 讓圖片失去連結
- 2014-06-16
===== 讓圖片失去連結 ======= 不要再用 javascript 做連結去除了，純 css 用法： #物件ID li.current a { pointer-events: none } pointer-event 的本意 作為點擊穿透，因此也可讓點擊連結的動作失效。
More..[ CSS ] DIV 有背景圖 又需要滾動時
- 2014-06-16
====== DIV 有背景圖 又需要滾動時 ======== 當 DIV 中需要設定背景圖，而 DIV 內容過長需要捲動時，對於背景圖可以做以下設定： pre { max-height: 150px; border: 1px solid silver; overflow: auto; background: url('http://placekitten.com/200/200'); colo
More..[ CSS ]用 CSS 做陰影效果
- 2014-06-16
======= 用 CSS 做陰影效果 =============== 用 box shadows 可以做 div 陰影是基本常識，但是要做到這樣好看 可以參考這個網站的教學 http://nicolasgallagher.com/css-drop-shadows-without-images/
More..[ CSS ] 選單加上背景圖，需要裡面的字消失
- 2014-06-16
需求：選單加上背景圖，需要裡面的字消失（避免擋住圖片） 過去的作法：用 [css 解決] 定位 9999px 把字移動到很俺的地方、[ 用 javascript 解決] $('物件 ID').html(''); 現在節省瀏覽器效能、純 css作法： .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } 說明：將文字間距調整成與容器外框一樣大，並且當一行字的寬度大於容器寬度時不折行
More..關於 OAuth 2.0介紹
- 2014-06-04
簡單易懂的 OAuth 2 （投影片說明） OAuth 2.0 筆記（部落格文章） 理解 OAuth 2.0 （文章一頁搞定 OAuth 2.0）
More..Google Analytics 新 通用分析多帳號並存設定方法
- 2014-05-08
從傳統版 Google Analytics 改成通用 Analytics 發現如果一個網站要設定兩個 Google 帳號變得很麻煩，找了一堆網站後最後還是在 Google 開發網站中看到範例。 < script > (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.ge
More..Google maps
- 2014-03-12
html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100%; } #main_content { height: 500px;} function initialize() { var myLatlng = new google.maps.LatLng(25.0473,121.540053); var mapOptions = { zoom: 16, center: myL
More..使用 WURFL 讓網站辨識行動裝置
- 2012-09-21
隨著行動裝置越來越多，如何讓訪客有更好觀賞經驗成為課題。 有個叫做 WURFL 的技術，使用 php + javascript 來辨識裝置，這樣就能在系統端決定要輸出何種格式給訪客觀看。 一個基本入門的說明在： IBM 網站上 有說明。
More..Nivo Slider 在chrome 或 Safari 中問題處理筆記
- 2012-04-17
最近 jQuery 中的套件 NivoSlider 受到很多網站的歡迎，在最近幾個案件中也用上這個套件，在外觀上幾乎每個瀏覽器都正常，不過如果在 chrome 、 safari 這兩個 webkit 為核心瀏覽器中會發現換圖之前，原先的圖會先閃一下，然後後面的圖才會進入。 如果觀察 server log 檔，就會發現 chrome 在每次換圖時都會再次載入圖片，就是因為每次圖片都重新載入，導致圖片會閃一下，除此之外不斷重載圖片也使網站量費不必要的頻寬。 知道這點之後就可從圖片快取下手，如果是 php 或程式輸出圖檔 首先加入 header("Cache-Control: pr
More..google 瀏覽器 chrome 使用 CSS 字體無法小於12px 的解法
- 2012-02-06
同事為了美觀在網頁上做了幾個字體 10px 的物件，結果在其他瀏覽器看都沒問題，唯獨 chrome 就是堅持顯示 12px 的大小。 無論使用何種 css 選擇規則就是無法生效，即使寫了 ! important 也無效。 查了 google 發現是 chrome 的限制--不能小於 12px ，解決的方法也很簡單，只要加上 -webkit-text-size-adjust:none; 就可以了。
More..jQuery 升級到 1.7 之後發生的問題以及解決方法記錄
- 2012-02-02
在把 jQuery 1.3 (1.4以前)升級到 jQuery 1.7 之後發現原本正常運作的效果出現許多異常，不是沒反應就是反應變慢，於是展開漫長的除錯大作戰，為了避免以後忘記，還是記錄下來比較好。 網路上寫 jquery 各版本差異的文章很多，這裡就不重複，直接用出錯狀況來記錄。 狀況：原先透過 AJAX 取得伺服器回傳資料來顯示，在升級後不能顯示或動作。 偵查：用 firebug 偵查不會出現錯誤訊息，捕捉回傳訊息時會在 .error 顯示 「Invalid JSON」。 問題： jquery 在 1.3 以前是用 javascript 的 eval 來解析
More..如何寫出Html + CSS 的頁面--入門
- 2012-01-26
用 CSS 做網頁不但頁面載入速度較快，而且修改彈性也大，唯一的缺點就是沒辦法直接用一整張圖來切割，這也是視覺為導向的美編要轉型最大的問題。其實只要把 photoshop 製作流程倒回去，就是 CSS 製版的基礎。 基本的觀念是「由大到小」、「由外而內」。 假設今天我們要做一個這樣的頁面 我們可以把頁面分為三個大範圍 於是在 html 裡面就可以這樣寫 <div id="red_div"></div> <div id="blue_div"></div> <div id="green_div">&l
More..瀏覽器對 css生成畫面渲染過程
- 2011-11-06
上週看到一個影片是 Firefox 如何渲染 CSS 生成畫面的過程，我想從這過程中前端人員應該可以思考如何才能寫出較有效率的 CSS。 這裡 有一篇文章是在描述如何撰寫有效率的 CSS 選擇器，可以參考看看。
More..