Category: html5

9 53,145
相信大家對於Data URI已不陌生，這回再介紹另一個HTML5的好東西 --- Object URL。 Data URI的格式為="data:image/gif;base64,R0lGOD...."，Object URL則是"blob:"再串上網址以及...

3 18,365
【前情提要】利用File API與XHR2 onprogress事件，我們成功做出檔案上傳進度條。但我在工作上常遇到另一種情境 -- 內部系統的上傳轉檔作業。營運資料檔案一般不大，加上在Intranet裡傳輸，上傳只在彈指間，Server端解析資料、塞入資料庫才是重頭戲，常得耗上幾十秒到幾分鐘。...

9 41,659
在傳統網頁上傳大檔案，得等到全部傳完才會有回應，等待期間沒消沒息，搞不清楚是沒傳完還是當掉常為人詬病，也嚴重破壞使用者體驗。想在傳輸過程回報上傳進度，過去有些Flash、Java Applet或ActiveX的解決方案，但依賴外掛元件有部署及無法跨平台的疑慮。當HTML5規格漸成主流，長久以來的...

6 31,884
這年頭，網頁如果不支援從桌面或檔案總管直接拖拉檔案，想自稱HTML5都心虛，只能稱作HTML4.5(誤)，老闆客戶還會不時打你臉: "Gmail、OneDrive(SkyDrive)、DropBox幾百年前就有了! 為什麼你到現在還做不出來?" (網頁攻城獅內心的OS: ...

0 10,887
最近為小閃光做了國小英文1200單字記憶卡，因為每頁右下角有片留白，一時手癢，決定順便加上翻書動畫(Flip Book)[影片]: 簡單來說，只要為每頁準備一個動畫格(Frame)圖檔，逐一安插在每頁固定位置就可搞定。利用程式產生圖檔對我已不是新把戲[GDI+、HT...

7 32,432
在處理localStorage問題時，在stackoverflow發現好用的網頁工具 -- Test of localStorage limits/quota 使用方法很簡單，連上該網頁，網頁裡的JavaScript會嘗試在瀏覽器localStorage塞資料，並持續增加儲存資料的長度，直...

0 10,877
之前曾以iPad為對象寫過為網頁加入多點觸控功能範例，如今支援觸控的Windows 8筆電在手，不改寫成IE10版怎能止癢? 經過簡單研究，大致整理IE10與Safari/Chrome觸控事件差異如下: 事件名稱不同，IE使用的不是touchstart、touchmove、touchen...

3 45,708
最近參與的一個ASP.NET MVC行動網站專案，其中有項操作是由清單頁面按連結跳往編輯網頁，編輯完成後，透過jQuery Mobile內建的回上頁功能回到清單頁面。而清單頁面中透過$(function() { ajaxLoadListData() });的做法，預期每次網頁載入後[jQuery...

0 26,153
各位老師、各位同學，我今天要示範的網頁介面開發技巧是--拖拉元素調整排序，(停頓兩秒)，拖拉元素調整排序... 開始前，請大家先看示範網頁，網頁上會顯示五個<span>方塊，假設其排序有特定意義(例如: 出場順序，決定先用皮卡丘之後再派妙蛙種子之類的)，使用者可用滑鼠或手指直接拖曳...

1 12,079
相信身處"跨瀏覽器無間地獄"的網頁開發朋友們，在動用HTML5/CSS3新語法前，常需要確認該語法在目標瀏覽器版本上的支援狀況才會放心吧? 今天發現一個超方便的查詢工具: When can I use… (http://caniuse.com) 好工具不需多費唇舌推銷，...

11 38,939
前幾天談了Google Maps API地址轉換，Ammon提醒其實Google Maps API也有提供從Javascript端進行地理編碼的做法，可以全部在Client端處理完成，不需動用ashx。另外，chester希望能有使用純Javascript進行地址轉換的範例，所以，範例來了! ...

53 55,160
早先已展示過，在網頁內嵌Google地圖、將地址轉換為經緯度座標、在地圖上顯示自訂地標圖示等技巧，最後來個綜合應用當作期末考。本次的練習題是"依使用者所在位置，找出距離最近的五個台北市消防分隊"。 簡單整理值得留意的技術細節: 在網頁嵌入Google地圖並放上自訂標...

23 31,391
前幾篇Google Map API文章，一直有用到Google地圖加上Marker的做法。(即下圖的紅色大頭針圖案) 不過，若全部的標示點用一樣的圖示，會顯得無趣且容易混淆(如下圖所示)，雖然將滑鼠移到標示圖案上方會顯示名稱，在使用者體驗上總覺得還有改善空間。 事實上，Google ...

8 108,170
將地址轉換成地理座標的程序被稱為地理編碼(Geocoding)，Google Maps API亦支援地理編碼服務(注意: 有每天查詢次數不可超過2,500次的限制，申請Google Maps API Premier可以提高到100,000次)，呼叫方法很簡單，使用URL "http: ...

1 35,917
終於有機會開始玩HTML5中行動裝置GPS整合應用。 我的第一步是希望能在網頁整合Google地圖，即便實際需求不一定需要顯示地圖，但在開發測試階段，要求開發人員直接由25.1234, 121.5678之類數字判斷結果是否正確未免太不人道，因此用地圖方式呈現特定經緯度資料是絕對必要的。第一個練...

3 17,418
在點部落看到一篇有趣的文章: IMG SRC為空字串，可能會造成Session不見 引發我的好奇心，<img src="" />會與Session發生關聯實在是件吊詭的事，於是查了點資料，學會些新東西。 原來，<img src="" /...