純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響
HTML:
CSS:
example:
See the Pen
CSS RWD square 正方形 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square
[……]
純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響
HTML:
CSS:
example:
See the Pen
CSS RWD square 正方形 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square
[……]
希望強制讓使用者下載檔案,但是在a標籤將網址指向檔案,在一些常用檔案例如:jpg、png、PDF,常會被瀏覽器直接開啟,無法直接下載,比較正規的做法是在發送 headers 時做這件事,但有時我們在處理靜態網頁就可以用偷吃步,在HTML5 a 標籤中多了一個download屬性,就可以用強制檔案用下載的方式讓使用者下載a標籤連結中的檔案,但這偷吃步要小心瀏覽器相容性
[……]
HTML
CSS
Example
See the Pen
CSS ul li Horizontal center – flex by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
https://wcc723.github.io/css/2017/07/21/css-flex/
[……]
這是目前我認為最簡單的方法,最下方可以看到Example,特別加上一點特效
See the Pen
CSS ul li horizontal align center by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
[……]
有效解決這問題,除了loop=1
以外,要多加一個 playlist 參數playlist=VIDEO_ID
,這對我有效
參考資料:
https://developers.google.com/youtube/player_parameters#loop
https://stackoverflow.com/a/25781957/6784662
[……]
安裝 reCAPTCHA v3 之後,頁面右下角就會多出隱私權圖標這東西,在某些場合可能需要把它隱藏起來,可以透過下面方式隱藏
注意:請不要使用 display: none 這可能會使reCAPTCHA v3失去作用
https://wordpress.org/support/topic/how-do-i-hide-recaptcha-v3-badge/
https://wordpress.org/support/topic/recaptcha-v3-badge-is-displayed-on-all-pages-not-only-form-pages/
[……]
TinyMCE Editor 是一個很常見的所見及所得文字編輯器,功能很強大,並提供很多插件來擴展編輯器功能,但安裝4.8.2版本時,在textarea中會自動包覆<HTML><head><body>等標籤,即便未輸入內容,然然會存入 <HTML><head><body>等標籤 。
非常簡單,在初始 TinyMCE 的時候不要使用 fullpage 這個 plugin 舊可以了。
[……]
今天在開發一個表單程式,表單一直無法發送,開始來找問題,開啟 Chrome 開發者工具,在 Console 面板中,每送出一次表單,就會出現一個這個訊息:
An invalid form control with name=’…’ is not focusable
也對拉!! 必填欄位又隱藏起來,怎麼填? 表單送出前會做一個簡單的表單驗證
這樣也不行:
<input type="text" style="display:none" required>
這樣當然也不行:
<input type="text" id="example" required> <script> $('#example').hide(); </script>
這樣可以:
大概是原本就是隱藏欄位了,所以沒有特別去驗證
<input type="hidden" required>
開發者會去隱藏欄位當然是有原因的,有時候會因為條件判斷而顯示不同輸入欄位,例如:居住地下拉選單,但使用者可能住於國外,所以表單設計在下拉選單尾端加一個”海外”的選項,選擇了海外,就出現一個自行輸入的文字欄位,像這樣的需求其實蠻常見的,這些輸入欄位通常都只是隱藏起來,依照判斷來顯示,這種欄位當然有可能顯示出來就是必填,下方介紹幾個解決方法來解決這個問題。
在 form 屬性加上 novalidate,關閉預設的表單驗證,表單內的所有欄位都不會進行驗證,除非有其他方式進行表單驗證,不然不建議這麼做。
<form novalidate> <input type="text" id="example" style="display:none" required> <input type="submit" value="submit"> </form>
在顯示的時候,再加上 required,如此,不管隱藏的文字欄位顯示與否,表單都可以正確送出,文字欄位顯示時,就必須填寫。
<form> <input type="text" id="example" style="display:none"> <input type="submit" value="submit"> </form> <hr> <input type="button" id="show" value="show"> <script> $('#show').click(function(e){ $('#example').css('display','block').prop('required',true);; }); </script>
這是一個簡單的提示,實務上的做法就看大家如何發揮創意了
[……]