jQuery DOM Insertion, Inside & Outside

如何控制插入內容相對於對象的位置

jQuery 插入內容時可以使用 append(), prepend(), before(), after() 四個函式,不同的函式插入的位置不同

484 total views, no views today

網頁或網頁內元素是否作用中 (可視)

 

元素出現就作用

元素完整出現才作用

326 total views, no views today

網頁通知 HTML5 Notification

結論 (2021/7/8)

就算是因為測試原因,全部允許權限 Chrome 91 & Firefox 89 都不會動作。意思就是隨著時代改變,個人化設定逐漸成為常態後,就不需要搞這種大部分的人都會關閉,或是就算想使用也不見得能用的功能。

參考資源

HTML5 Notification  可以在允許通知的情況下,出現提醒的訊息,而且不需要盯著網頁,只要瀏覽器及通知的頁面開啟的狀態下即可使用。

使用前必須了解瀏覽器支援程度。

取得網頁通知權限

頁面起始時詢問、取得通知權限

顯示通知

寫一個當需要通知時呼叫的功能,並且根據是否允許通知來執行訊息顯示方式

什麼時候通知?

接下來只要決定什麼時候執行顯示通知的方法即可。可以用 WebSocket 來達成即時,也可以用 setInterval() 定時執行檢查

完整範例

通知的訊息是出現在系統上,不是顯示在瀏覽器中

39 total views, no views today

Canvas framework

 

 

應用

 

hoyo 自己的應用

需求為從主機載入一張圖之後,可以增加箭頭、文字、方框等基本的繪圖需求,編輯完成按儲存後要直接回存。

技術:HTML5 Canvas

使用工具:Fabric.js

參考

image-346

 

675 total views, 1 views today

Web Audio API – 使用

參考

實作

使用 Canvas 繪圖

  • analyser.fftSize
    設定值除以 2 就是陣列取樣數,預設 2048
  • analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));
    數值在 0 – 255 ,沒聲音為 0
  • analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));
    數值在 0 – 255 ,沒聲音為 128
  • requestAnimationFrame 根據瀏覽器設定(一般來說是 60fps) 更新
  • 能量條的高度是根據 0-255 所繪製,所以如果要增減就必須調整 analyser.getByteFrequencyData(array) 的 array 值

image-328

 

427 total views, no views today

RICOH THETA 網頁全景處理

參考

360 Degree Interactive Panoramas And Virtual Tours In Html 5 – Multiple Browsers / 360 Easy – Complete Tutorial On 360 Degree Photography

 

720全景图

 

421 total views, no views today

jBox 第一次載入圖片無法顯示

jBox 使用 background image 來顯示圖片,在第一次點選圖片時都無法顯示

解決的方式是在第一次載入顯示時,加上 setTimeout()

 

359 total views, no views today

jQuery 的 Selectors 較佳用法

PhpStorm

原JavaScript 語法

警告訊息:

Inefficient jQuery usage warnings in PHPStorm IDE

 

修正後語法

 

410 total views, 1 views today

TinyMCE 4 使用

之前使用 CKeditor 作為網頁編輯器,這兩天想要一個〝拖曳圖檔到編輯區套用 base64〞的效果,搞了快一天後沒啥進度後,轉到 TinyMCE 之後,Google 一小下就完成了…

官網: TinyMCE

設定參數及說明在 Configuration 頁面,

停止連結樣式轉換

預設會將連結網址從 “/?a=Test” 修改為 “?a=Test” ,也就是會自動修正 server name ,不過這種自動通常都很出錯可以關閉

複製 Word 貼上時保留格式

100% 開放 HTML 以及 JavaScript

如此就可以在編輯區使用所有 HTML Tag 以及切換到原始碼輸入 JavaScript 代碼

 

使用 CodeMirror 優化原始碼編輯

 

本來原始碼編輯長這樣,沒空白、沒縮行,修改起來非常痛苦

改用 CodeMirror 之後長這樣

自訂 CodeMirror

不使用 TAB 縮排、縮排四個空格、啟用 Tag 對應、啟用折疊功能、開啟行數顯示

 

撰寫 <script> 時關閉自動增加 <p>

實際應用案例

自訂預設選項

CKeditor 有 config.js 的預設設定檔可使用,不過 TinyMCE 4 並無類似的設定 (至少還沒發現),參考 TinyMCE – jQuery Plugin, setting a default Theme/Options Globally 之後得到以下寫法

 

讓編輯區的樣式和前台一致

 

1,624 total views, no views today

MathJax 使用 JavaScript 顯示數學公式

這篇看不懂很正常,沒接觸過出版、教育的人應該很難想像,要在網頁上顯示優美的數學公式是多麼困難的事情。

接觸過的人,大概會認識一個叫 LaTeX 的傢伙,這個時候就會知道 MathJax 的偉大之處了。

官網: MathJax

單純在瀏覽器上顯示 LaTeX 數學公式可以使用此 JavaScript library,需要平面 PDF 輸出才使用 LaTeX 執行

 

範例演示兩個功能

  1. ajax 載入的資料如何套用 MathJax
  2. 如何把所有的 LaTeX 套用 \displaystyle ,參考至:如何将一些html之前和之后使用MathJax数学时呈现How to put some html before and after math when rendering using MathJax (裡面有原出處,我有查到經過,不過看不懂)

 

596 total views, no views today