pCloud Partner Program

[jQuery]檢查HTML元素是否秀在畫面上

程式技術/Javascript 2018/04/03 17:40
views: 22706 times
一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 css, display 等方法進行檢查, 不過實際上只是檢查是否能在瀏覽器上出現, 但因為瀏覽器只能出現目前可視的區域, 所以實際上元素是否有捲到可以出現的地方是無法透過原本的檢查方法進行檢查, 需要做一些運算.

這個 jQuery plugin: jquery-visible 就是用來檢查這樣的狀況:

https://github.com/customd/jquery-visible/

引用了這個 jQuery Plugin 後, 就能利用 visible() 方法來檢查是否目前的畫面是看得到這個元素. 另外也可以透過 'partial' 參數來檢查是否部分可以看到, 範例程式如:

https://codepen.io/timhuang/pen/rdKbyY

利用 $("#xxx").visible() 檢查是否全部可見或是使用 $("#xxx").visible('partial') 檢查是否部分可見, 十分方便好用.
top

將瀏覽器進入全螢幕的方法(requestFullscreen)

程式技術/Javascript 2016/07/20 17:41
views: 63021 times
有時在一些網站看到可以將特定的內容進行全螢幕的檢視, 早期僅有 video 可以有這樣的功能, 現在也可以透過瀏覽器擴充方法來進行特定內容的全螢幕檢視.

程式碼如下:


其中 launchFullscreen 傳入指定的容器物件, 如 div 就可以利用擴充方法 requestFullscreen 來進行全螢幕檢視, 而 exitFullscreen 則不用傳入物件, 使用 document 的擴充方法 exitFullscreen 即可離開全螢幕檢視.

範例:
http://sample.diary.tw/40/index.htm

參考資料:
http://xuhong.github.io/2014/05/23/fullscreen/
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/device/fullscreen-api/
top

Mobizen好用Android投影與手機操作管理

好用軟體 2016/01/04 20:37
views: 70513 times
這個 APP 是用來將 Android 手機畫面投到 PC/Mac 上使用的一個應用程式, 而 PC/Mac 只需要瀏覽器就可以操作了, 十分方便, 而且無需 Root.

官方網站: https://www.mobizen.com/

若是使用三星手機請下載: https://play.google.com/store/apps/details?id=com.rsupport.mobizen.sec

若是其他手機請下載: https://play.google.com/store/apps/details?id=com.rsupport.mvagent

開啟 APP 後註冊登入完成後, PC/Mac 端透過流覽器登入後, 即可使用, 除了可以投影出來外, 還可以錄影, 白板(在手機畫面上), 螢幕擷圖等, 也可以管理照片, 通訊錄, 等好用功能.

若有需要將手機投影出來的應用場合, 可以用這個方便好用的工具.

繼續閱讀:
http://www.playpcesor.com/2015/11/mobizen-usb-android-pc-mac.html

[2016/1/5 11:45]
更新一下, 之前常在用的 AirDroid 也已經有[螢幕截圖]這個功能的同步畫面了, 因為之前用都是 Capture 目前的畫面, 現在則是可以同步秀畫面了, 功能上也就和這個 Mobizen 一樣了, 在手機上裝 App, 然後從瀏覽器來看手機的畫面, 只是 AirDroid 的功能更多更方便呢.

網站連結: http://web.airdroid.com/
手機APP: https://play.google.com/store/apps/details?id=com.sand.airdroid
top

測試網站的Responsive效果

手機大未來 2015/06/29 10:46
views: 42665 times
在各式不同載具上都能有效呈現網站, 目前已經是一種很重要的顯學了. 如何快速進行適應介面呈現的測試, 這裡有好用的工具可以實現.

1. http://designmodo.com/responsive-test/
輸入要測試的網站網址後, 選擇右上的各式載具(包含了手機、平板、筆電、桌機等4大類), 就可以輕鬆預覽各種不同螢幕寬度的效果, 快速方便. 右上會顯示出各式設備的寬與高的點數, 也可以藉由旁邊的旋轉圖示來進行模擬旋轉(其實也就是寬變成高, 高變成寬這樣)

2. http://responsivetest.net/
這個網站功能與上面第一個介紹的類似, 不過他會直接把目前測試的內容, 在 url 參數化, 更易於進行分享傳遞, 與溝通使用, 將測試的畫面, 以 url 再轉傳給需要討論的對象, 十分方便.

其他還有像是:
http://responsivedesignchecker.com/
http://ami.responsivedesign.is/ 直接生出4個live預覽圖, 很有意思
http://quirktools.com/screenfly/

等, 也都十分方便好用.
top

好快又升級的Firefox6

好用軟體 2011/08/17 12:27
views: 84572 times
現在 Firefox 拼了命的升級, 奇怪耶, 又沒有多大的功能改善, 主版本號一直往上跳, 這不是個好現象吧. 雖然說這是一個持續在前進的軟體專案, 不過這樣跳躍式的版本號大躍進, 似乎是想證明我們很積極地在改善及進步.

今天的 Firefox 5 提出了要升級到 Firefox 6 的升級通知, 於是就順手升級上來, 不過又是有一些 plugin 不能用了, 看看有沒有它宣稱的速度變快.

用戶插入圖片



top

Firefox5來了

好用軟體 2011/06/22 14:57
views: 105154 times
是的, Firefox 5 來了, 記得沒多久前才 Firefox 4, 而且也就才 4.0.1 而已, Firefox 5 已經於之前更新的 Firefox 4.0.1 上提出新的版本更新提示, 於是又再更新到 Firefox 5, 目前的版本是 5.0

不知道為什麼更新的這麼快, 而且這次更新的主要功能似乎不多, 或許是希望能藉由更新版本數字來活絡一下這個社群持續的求新求快求變的特質吧.

但是這次更新, 有一些 plugin (或稱 extension) 又不能用了, 像是 google 的 toolbar 就是個列子, 不過這些小問題應該很快會獲得解決.

隨著瀏覽器版本的更新, developer 們與 designer 也就必須快速地來適應這個相容性的考驗, 不過也正因為如此, 也讓標準能更標準, 大家能依循著標準來開發及設計, 這樣也是件好事!
top

表單上傳檔案取得檔名問題

程式技術/Javascript 2011/05/18 20:40
views: 109236 times
在前端網頁上, 若要上傳檔案, 是利用一個 <input type=file>的標籤來進行的, 這個 UI 看起來的長像在不同瀏覽器會有不同的結果, 也因為這樣, WEB DESIGNER 常常需要做一些設計來美化及一致化這個長相.

這篇文章不是在討論這個上傳檔案的長相, 而是要探討在前端程式碼取出上傳檔案的名稱, 這個也在不同的瀏覽器有不同的結果, 尤其新的瀏覽器又增加了一些特異功能. (如隱藏路徑)

這樣一來, 若是要對上傳檔案名稱欄位取出做一些判斷的話, 可要注意這些狀況的差異, 這裡寫了個小程式, 取出 <input type=file>的值, 在不同瀏覽器下可以測出不同的結果, 連結在這裡:

http://sample.diary.tw/25

我們以上傳 C:\test\1.txt 為例, 在不同瀏覽器下的結果如下:

IE9:
用戶插入圖片


Firefox 4.01
用戶插入圖片


Google Chrome 5:
用戶插入圖片


Safari 5:
用戶插入圖片


從上面畫面的結果來看, 發現 IE9 及 Google Chrome 會有含路徑的檔名, 但會隱藏路徑, 而 Firefox 4.01及 Safari 5則只會出現檔名而已, 不會有路徑, 而 IE6, IE7, IE8 的狀況則是 IE8 會像 IE9 一樣, 但 IE7, IE6 則是真實的檔案路徑, 如下:

IE6:
用戶插入圖片


IE7:
用戶插入圖片


IE8:
用戶插入圖片


這樣就清楚啦!
top

jQuery Mobile版本

手機大未來 2010/10/07 13:34
views: 362237 times
從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/

隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.

這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/
用戶插入圖片

看起來相容性最好的是 android 方面的瀏覽器.

有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/

相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!


top

IE9/Safari5/Firefox3/Chrome大車拼

好用軟體 2010/06/10 13:45
views: 135392 times
繼剛寫了Safari5發表的文章後, 想說順便跑一跑其他家的一起來拼一拼.

以下測試 ACID3 是用: http://acid3.acidtests.org/
而 javascript 效率的 Webtest 是用: http://www.101asian.com/webtest.htm

先來看看 IE9 的:
UA: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)(HTTP_USER_AGENT)

ACID3: 68分
用戶插入圖片

WEBTEST: 27ms
用戶插入圖片


再來是 Safari 5的:

more..


top

IE6還這麼多人用耶

程式技術 2009/08/02 23:24
views: 78145 times
剛在看這篇文章: IE 6在臺市占率仍超過5成 (http://www.ithome.com.tw/itadm/article.php?c=56054), 發現其實我的想法比較偏向所謂的用戶原始的瀏覽器用什麼, 就會持續用下去的這個狀況, 也就是說, 用戶應該在 XP 就會用 IE6, 在 Vista 就會用 IE7, 在 Windows 7自然用 IE8, 而其中的許多數據也都相當耐人尋味.

用戶自己會選擇使用什麼瀏覽器的, 自然是比較了解電腦, 或是會自己安裝軟體的用家, 而且通常應該要原來固定使用的瀏覽器發生什麼大問題, 或效能不好, 或速度慢等原因, 才會面臨升級或是換瀏覽器的狀況.

不過這也讓我想看一下這個網站的比例狀況(2009/07), 我列出來給大家參考:
狀況如下:
IE6    29.1%
IE7    17.9%
IE8    9.6%
FX3.5    6.8%
FX3.0    10%
SAFARI    3.5%
OTHER    23.1%
其中果然 IE6 佔了大多數, 到 29.1% (相對於上文的報導是沒有那麼高), 而整個 IE 也有 56.6%, 另外 Firefox 則是有 16.8%, Safari 則是 3.5%, 其他的部分包含較小量版本的 IE, FX, 及一些有的沒的, 共有 23.1% (這個也還蠻多的, 真有趣), 整理或圖形如下:


基本上, 網站其實就是要照顧到所有用戶使用的環境來設計功能及呈現, 才不會影響用戶的來訪, 不過, 最重要的是大家都要依照標準來做就對了, 才不會顧此失彼, 這樣也就沒什麼太大的相容性問題!

順便附上 OS 比例也供參考:



top




DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...