Browse by Tags

HTML表格欄寬分配實驗
接獲報案,某個KendoUI Grid網頁,調整瀏覽器顯示比例縮放後,最後一欄會莫名消失。 試著重現問題。如上圖所示,顯示比例100%時可以看到Column1到Column5共五欄,調整比例到125%,欄位放大,Gird下方出現捲軸,但向右捲動到底只見Column4,Column5不見了。除了調整顯示比例,改變視窗寬度也有同樣效果,只要寬度不足導致水平捲軸,Column5就會消失。 程式碼如下: [ Live Demo ] <! DOCTYPE html > < html >...
Posted 20 March 2014 09:43 PMJeffrey | with no comments 17,707
Filed under:
HTML5筆記–Object URL
相信大家對於 Data URI 已不陌生,這回再介紹另一個HTML5的好東西 --- Object URL。 Data URI的格式為="data:image/gif;base64,R0lGOD....",Object URL則是"blob:"再串上網址以及GUID,例如: blob:http%3A//www.darkthread.net/c94d498b-7818-49b3-8e79-d3959938ba0f 大家應該已經注意到一點明顯差異 -- Object...
Posted 12 March 2014 07:25 AMJeffrey | 9 comment(s) 40,840
Filed under:
HTML5上傳作業進度條-SignalR進階版
【前情提要】 利用File API與XHR2 onprogress事件,我們成功做出 檔案上傳進度條 。但我在工作上常遇到另一種情境 -- 內部系統的上傳轉檔作業。營運資料檔案一般不大,加上在Intranet裡傳輸,上傳只在彈指間,Server端解析資料、塞入資料庫才是重頭戲,常得耗上幾十秒到幾分鐘。這種狀況下,用XHR2做進度條的意義不大,咻! 一秒不到就從0%到100%,但上傳資料何時能處理完只有天知道? 使用者終究又陷入無法得知系統還在跑或者已經當掉的焦慮。我想起了"SignalR"...
HTML5檔案上傳進度條
在傳統網頁上傳大檔案,得等到全部傳完才會有回應,等待期間沒消沒息,搞不清楚是沒傳完還是當掉常為人詬病,也嚴重破壞使用者體驗。想在傳輸過程回報上傳進度,過去有些Flash、Java Applet或ActiveX的解決方案,但依賴外掛元件有部署及無法跨平台的疑慮。當HTML5規格漸成主流,長久以來的問題總算有了簡潔有效的解法。 要掌握上傳進度有一個關鍵: Client Script必須掌握檔案大小以及已上傳資料量,才可能計算上傳百分比回報狀態。傳統使用<input type="file">選取檔案配合<input...
HTML5練習-從桌面拖拉檔案到網頁
這年頭,網頁如果不支援從桌面或檔案總管直接拖拉檔案,想自稱HTML5都心虛,只能稱作HTML4.5(誤),老闆客戶還會不時打你臉: "Gmail、OneDrive(SkyDrive)、DropBox幾百年前就有了! 為什麼你到現在還做不出來?" (網頁攻城獅內心的OS: 你有給我Google或Microsoft等級的薪水嗎?) 搞網頁好辛苦,客戶老闆上網胡亂逛,不小心看到酷炫網站,馬上把規格放進專案,還說什麼瀏覽器打開HTML、CSS、JavaScript都能看,快點抄一抄給我做出來...
Posted 08 March 2014 12:13 PMJeffrey | 6 comment(s) 25,475
Filed under: , ,
Coding4Fun-HTML5 Canvas製作翻書動畫格
最近為小閃光做了國小英文1200單字 記憶卡 ,因為每頁右下角有片留白,一時手癢,決定順便加上翻書動畫( Flip Book )[ 影片 ]: 簡單來說,只要為每頁準備一個動畫格(Frame)圖檔,逐一安插在每頁固定位置就可搞定。利用程式產生圖檔對我已不是新把戲[ GDI+ 、 HTML5 Canvas ],考量未來工作上用HTML5的機會多一點,決定用HTML5 Canvas來做,Coding for Fun兼練兵磨槍。 程式碼主要修改自 利用HTML5 Canvas動態產生文字圖示 ,要補充的只有幾點...
Posted 11 January 2014 11:45 PMJeffrey | with no comments 9,422
Filed under: ,
檢測localStorage容量上限
在處理localStorage問題時,在 stackoverflow 發現好用的網頁工具 -- Test of localStorage limits/quota 使用方法很簡單,連上 該網頁 ,網頁裡的JavaScript會嘗試在瀏覽器localStorage塞資料,並持續增加儲存資料的長度,直到放不下為止,即可得到localStorage的容量上限。簡單測試手邊有的瀏覽器: IE 9 = 7100K IE 8 = 4200K IE 10 = 7000K Chrome 26 = 2600K Safari...
Posted 11 April 2013 07:49 AMJeffrey | 7 comment(s) 27,759
Filed under:
為網頁加入多點觸控功能(IE10版)
之前曾以iPad為對象寫過 為網頁加入多點觸控功能 範例,如今支援觸控的Windows 8筆電在手,不改寫成IE10版怎能止癢? 經過 簡單研究 ,大致整理IE10與Safari/Chrome觸控事件差異如下: 事件名稱不同,IE使用的不是touchstart、touchmove、touchend等名稱,而是 MSPointerDown , MSPointerMove , MSPointerUp , MSPointerOver , MSPointerOut , MSPointerHover .....
Posted 19 November 2012 10:51 PMJeffrey | with no comments 9,982
Filed under: ,
瀏覽器在回上頁時不會觸發網頁onLoad事件
最近參與的一個ASP.NET MVC行動網站專案,其中有項操作是由清單頁面按連結跳往編輯網頁,編輯完成後,透過jQuery Mobile內建的回上頁功能回到清單頁面。而清單頁面中透過$(function() { ajaxLoadListData() });的做法,預期每次網頁載入後[ jQuery.ready()事件 ]都會以AJAX方式重新取得最新清單資料,因此回上頁到清單,使用者就可立即看到剛才儲存的變更。 使用IE及Chrome測試功能正常,但進一步使用iPhone/iPad Safari瀏覽時...
Posted 02 August 2012 07:19 AMJeffrey | 3 comment(s) 37,928
Filed under: ,
網頁介面開發-拖拉元素調整排序
各位老師、各位同學,我今天要示範的網頁介面開發技巧是--拖拉元素調整排序,(停頓兩秒),拖拉元素調整排序... 開始前,請大家先看 示範網頁 ,網頁上會顯示五個<span>方塊,假設其排序有特定意義(例如: 出場順序,決定先用皮卡丘之後再派妙蛙種子之類的),使用者可用滑鼠或手指直接拖曳方塊改變其排列順序,當某個方塊被拖到另一個方塊上,就對調兩個方塊的位置,藉此自由調整所有方塊的排列順序。 另外,網頁還很 騷包地 貼心地加上兩個方塊交換位置的動畫效果,更直覺地呈現"位置對調"的操作感受...
Posted 27 July 2012 07:04 AMJeffrey | with no comments 23,084
瀏覽器HTML5/CSS3支援度速查工具
相信身處" 跨瀏覽器無間地獄 "的網頁開發朋友們,在動用HTML5/CSS3新語法前,常需要確認該語法在目標瀏覽器版本上的支援狀況才會放心吧? 今天發現一個超方便的查詢工具: When can I use… ( http://caniuse.com ) 好工具不需多費唇舌推銷,實際用一下,即使身處無間地獄也能馬上感受佛光萬丈所帶來的溫暖... 網站作者 累積的功德大概有扶老太太過街兩百次那麼多吧! 幾項不能錯過的特色: Index頁籤列舉了CSS、HTML5、JavaScrip...
Posted 12 July 2012 07:44 PMJeffrey | 1 comment(s) 11,495
Filed under: ,
答客問-使用google.maps.Geocoder()轉換地址
前幾天談了 Google Maps API地址轉換 ,Ammon 提醒 其實Google Maps API也有提供 從Javascript端進行地理編碼 的做法,可以全部在Client端處理完成,不需動用ashx。另外,chester 希望 能有使用純Javascript進行地址轉換的範例,所以,範例來了! 本次的程式幾乎跟 上次 完全相同,只改寫了geocodeAjax()函數而已。原本的做法是呼叫ashx,這次則改用goole.maps.Geocoder(),透過Geocoder.geocode...
Posted 21 June 2012 07:59 AMJeffrey | 9 comment(s) 35,765
Filed under:
利用行動裝置GPS定位尋找臨近地點
早先已展示過, 在網頁內嵌Google地圖 、 將地址轉換為經緯度座標 、 在地圖上顯示自訂地標圖示 等技巧,最後來個綜合應用當作期末考。本次的練習題是"依使用者所在位置,找出距離最近的五個台北市消防分隊"。 簡單整理值得留意的技術細節: 在網頁嵌入Google地圖並放上自訂標示點(Marker)的做法,可參考 筆記-網頁內嵌Google地圖與地理位置模擬 一文。 由市政府網站取得台北市消防分隊地址,透過地理編碼算出經緯度座標,可參考 Google Maps API地址轉換 一文...
Posted 19 June 2012 06:45 AMJeffrey | 53 comment(s) 50,845
Filed under:
利用HTML5 Canvas動態產生文字圖示
前幾篇Google Map API文章,一直有用到Google地圖 加上Marker 的做法。(即下圖的紅色大頭針圖案) 不過,若全部的標示點用一樣的圖示,會顯得無趣且容易混淆(如下圖所示),雖然將滑鼠移到標示圖案上方會顯示名稱,在使用者體驗上總覺得還有改善空間。 事實上,Google Maps API在新增地標時,是可以自訂圖示的。 MarkerOptions 提供icon參數可指定圖檔URL,另外有shadow參點可指定陰影圖檔的URL,以取代預設的黑點紅色大頭針圖示。 只是有個小問題,在 消防分隊位置顯示範例...
Posted 16 June 2012 02:54 PMJeffrey | 23 comment(s) 28,655
Filed under:
Google Maps API地址轉換
將地址轉換成地理座標的程序被稱為 地理編碼 (Geocoding),Google Maps API亦支援地理編碼服務(注意: 有每天查詢次數不可超過2,500次的限制,申請Google Maps API Premier可以提高到100,000次),呼叫方法很簡單,使用URL "http: //maps.googleapis.com/maps/api/geocode/json?address=要轉換的地址&sensor=ture或false",便可得到一份JSON格式的地址座標資訊...
Posted 15 June 2012 08:09 AMJeffrey | 8 comment(s) 93,904
Filed under: ,
更多文章 « 上一頁 - 下一頁 »

搜尋

Go

<August 2018>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication