Category Archives: Web

[Web] 上傳圖片前,怎麼先 preview?

直接參考範例: HTML:

jQuery:

CSS:

參考 這裡 的執行結果! 資料來源: Preview an image before it is uploaded

Posted in jQuery, Web, 程式設計 | Tagged , , | Leave a comment

[Web] 使用 breakpoint 控制 Bootstrap Navbar 的 Collapse

我們常常需要使用 Bootstrap 來做 Navbar,當 browser 被縮小時,Navbar 會 Collapse 成一個有三條線的按鈕。 如下所示: 當寬度夠時,畫面如下: 當寬度縮小時,應該要變成下面這樣: 但是,有時候畫面介於大跟小中間時,會出現兩個 Navbar 重疊的狀況,如下: 這個要怎麼解決呢? 答案是,使用 MediaQuery 設定好正確的 breakpoint! 請參考 這裡 的做法! 參考資料: Bootstrap 3 Navbar Collapse

Posted in Web, 程式設計 | Tagged , , | Leave a comment

[jQuery] 如何取得特定標籤的 id 或 class?

使用 attr()!

資料來源: How can I get the ID of an element using jQuery? How can I get the current class of a div with jQuery?

Posted in jQuery, Web, 程式設計 | Tagged , | Leave a comment

[Web] Bootstrap Accordion

使用 Bootstrap 來做一個點擊 Table Row 會出現 Accordion 效果的介面。 程式如下 (jsFiddle的連結):

參考資料: Bootstrap JS Collapse Bootstrap Collapse Bootstrap Panels Creating Accordion Table with Bootstrap Expand table rows with jQuery – jExpand plugin

Posted in Web, 程式設計 | Tagged , , | Leave a comment

[CSS] [轉貼] Writing CSS Right?

覺得還不錯的連結: Writing CSS Right

Posted in Web | Tagged , | Leave a comment

[Chrome] Chrome Extension 的 Icon 尺寸

Chrome Extension 的 Icon 尺寸有下面幾種: 16×16, 19×19, 38×38, 48×48, 128×128 其中,19×19 跟 38×38 用在 browser action 的小 icon,38×38 用在 retina display 上面的 browser action 的小 Icon。 Icon 的設定方式如下: 一般的 Icon 設定在 manifest.json 底下:

browser action 的 Icon 設定在 manifest.json … Continue reading

Posted in Web, 程式設計 | Tagged , | Leave a comment

Google Earth API Deprecated

這幾天想要 survey 一下怎麽使用 Google Earth API 將 Google Earth 嵌入網頁中,結果發現因為一些安全的顧慮 Google Earth API 已經 deprecated 了。 現有的 API 只有支援到 12/12/2015,使用者可能要自己尋求替代行的解決方案,如 Cesium,或者等候 Google 發布新的產品訊息(Google 應該有新的產品在開發中,但是不知何時會發佈新的產品訊息)。

Posted in Web, 程式設計 | Tagged | Leave a comment

[轉貼] Crawler 撰寫經驗分享 by Ronny Wang

Posted in Web, 程式設計 | Tagged | Leave a comment

[Sublime] Goto Anything

熱鍵: Windows: [Ctrl + P] Mac: [Command + P] 就跟它的名字一樣,Goto Anything 可以讓你很方便的切換到你要去的地方。 直接鍵入搜尋字串,可以迅速切換到自己要的檔案。 @ + 搜尋字串,可以找到自己要的 Symbols。 [Ctrl + P] + @ == [Ctrl + R] : + 數字,可以跳到特定行號。 # + 搜尋字串,可以在當前的檔案內搜尋。

Posted in Sublime, Web | Tagged | Leave a comment

[Sublime] Command Palette

Command Palette 主要是要提供使用者一個可以用 fuzzy search 的方式,找到功能表內選項的功能。使用 Command Palette 加上一些熱鍵,你幾乎完全不用使用功能表(menu)。 在 windows 上面使用 [Shift + Ctrl + P],或在 Mac 上使用 [Shift + Command + P],即可喚起 Command Palette。 如果是要設定程式的 Highlighting,可以在叫起 Command Palette 後,輸入 “Syntax” + 程式語言名稱即可。

Posted in Sublime, Web, 程式設計 | Tagged | Leave a comment