使用 jQuery + 指定的 selector 達成, 其實很容易, 原則上只是要把第 n列後的內容先隱藏, 於需要時再顯示的概念.
當然, 若是從後端也是很容易實現, 不過目前是打算從前端做的話, 方式如下:
$(“.table tr:nth-child(n+4)”).toggle();
就這樣? 對, 就是這樣, 指定第 4筆 tr 起(含, 與之後), 會被選出來進行 toggle, 這樣一來就可以容易地在前端進行 table 內, 指定行之後的內容隱藏與顯示.
可以參考範例:
https://codepen.io/timhuang/pen/PLWrap
另外可以參考有用的選擇器方式:
報紙或雜誌的編排上, 有時會有首字放大或特別編排的效果, 如何能達成這樣的編排呢? 可以使用 CSS 中的 ::first-letter 的 psuedo element, 這個在 CSS1 起就可以使用了. 只是到了 CSS3 需要兩個 : (冒號), 之前僅有一個 : (冒號).
另外若是需要達成, 僅第一段落才需要首字大寫, 可以使用 :first-child 的 psuedo element 即可, 也就是以 p 為例, 選擇器可以使用:
p:first-child::first-letter
即可, 不過可以套用的屬性以文字為主, 另外還有一個有趣的地方, 就是一定是字才行, 標點符號會不當做字, 與第一字一起發生作用, 可以參考這個範例:
https://codepen.io/timhuang/full/dQwWxP/
以 article 來看, 就是僅第一個段落的第一個文字大寫, 而 article 2 來看, 則是每個段落開頭都大寫.
參考資料:
https://www.w3schools.com/cssref/sel_firstletter.asp
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
補充資料:
若添加的<h2>xxx</h2>元素到 article 裡, 發生了有趣的效果, 就是 p:first-child, 會選擇不到元素, 原因為 p:first-child 是指該 p 的 parent 的 first child, 但第一個 child 是 h2, 所以就選擇不到了, 可以參考這個範例:
https://codepen.io/timhuang/pen/yQGXoG
其中 article2 則是正常, 而且 h2 也不會首字大寫.
若要解決這個問題, 可以利用指定 type 的方式, 如 ::first-of-type 這個 psuedo class, 也就能指定元素了, 如 p::first-of-type 這樣, 參考這個範例:
https://codepen.io/timhuang/pen/YRdxPE
補充資料[2018/12/5]
單冒號與雙冒號選擇器的差異, 單冒號(single colon)使用於偽類別(psuedo class), 而雙冒號(double colon)使用於偽元素(psuedo element), 可以參考這兩篇:
https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
https://css-tricks.com/to-double-colon-or-not-do-double-colon/
相片副檔名
之前在實作上傳圖檔活動時, 使用副檔名為 .jpg 的約束條件, 但發現在 iOS 設備選擇相片後, 無法成功通過驗證, 經實測後, 發現存在 iOS 相簿裡的 jpg 相片都是以 .jpeg 為副檔名, 所以在上傳時, 會無法通過副檔名驗證.
即使將 .jpg 圖檔存下在 iOS 設備裡的相簿, 也會被轉換檔名為 .jpeg 的副檔名, 這個狀況需要在實作上傳圖檔時需要特別留意.
相片方向
使用 iOS 設備拍照時, 存放檔案方式, 會以橫放方式存放 ( w > h ), 但直拍時, 一樣使用橫放方式存檔, 但是會有個 orientation 為轉向, 方向為 right-top (6), 也就會變成直向, 詳情可參考這裡的圖片與說明:
https://www.impulseadventure.com/photo/exif-orientation.html
所以若是 6 就可以利用順時鐘轉 90度回來正確的檢視.
相片方向在網頁上
另外有趣的現象是, 該圖在 PC / Mac 桌機, Android 手機時, 直接放在 web 連接, 會是正常的轉向出來, 但放在 html 裡使用 img src 的方式, 則會無法轉向, 不過 iOS 設備在 html img src 引用時, 仍能正常轉向.
測試與重製
使用一張 iOS 拍照, 但縮小保留 EXIF 轉向資訊圖片供測試參考:
https://codepen.io/timhuang/full/ZmmQjy/
在 iOS 設備上可以正常轉向, 但其他不然, 但又是直接連結也是可以成功轉向的, 第三個部分則是使用了 images.weserv.nl 服務, 它會將原來的圖檔轉正, 並將轉向改為正向方向, 也就能解決這個問題. 這個服務的介紹可以參考: https://diary.tw/archives/221
讀到這篇: https://gfamily.cwgv.com.tw/content/index/12938
雖然之前美國總統歐巴馬也做了 – https://www.ithome.com.tw/news/92882
也鼓勵了- https://www.bnext.com.tw/article/38622/BN-2016-02-01-070820-81
但學寫程式這件事並不是重點.
重點在於學會邏輯, 推理, 演繹, 科學, 至於寫程式, 也不過在於組合這些東西.
之前常在說, 未來是不需要人類來寫程式的, 寫程式的人, 是在寫”寫程式的機器人”的程式, 所以除非你對程式有高度熱忱, 有高度喜好, 否則這不是件好工作或好技術, 反而, 學會程式能做些什麼, 能幫助什麼, 能解決什麼才是重要的.
回到本質, 科學, 人文, 持續學習, 這才是重點, 寫程式是其中一種技能, 一種輔助, 未來你只需要指揮電腦, 只需要了解操作電腦, 寫程式, 其實沒那麼重要.
不過若你想學, 還是歡迎, 因為只要從中能讓你學得那怕是一點點的邏輯, 一點點的推理, 都是很棒的, 更能讓你知道, 寫程式不是萬能, 不是什麼都做得到, 我們需要的是累積經驗與傳承, 人類的學習與探索的精神與態度才是最重要的.
繼續閱讀:
微軟技術捷運-創新科技的線上課程
https://www.microsoft.com/taiwan/mstechmrt/
這裡提供了許多線上影音課程, 可供技術人員學習研究, 方便又快速的學速方式, 讓技術學習更容易. 共有: 人工智慧、物聯網、IT系統架構、DevOps、企業生產力等五條學習軌道, 大家可以挑選自己感興趣的軌道來學習.
在 web 上做滿版不要出捲軸的設計要如何進行? 主要是要配合 100vh 來操作. 不過由於實務上, 在行動設備下, 會遭遇瀏覽器在計算上方網址列的狀況不同, 如下:
1. iOS Safari 不含網址列
2. iOS Chrome 含網址列 (也就是全高)
3. Android Chrome 不含網址列
這樣的狀況, 所以若是使用 100vh 操作, 仍會有對應不良的困難, 所以建議改用 window.innerHeight 來取得實際的版高, 再來進行套用.
需要監聽的事件為 document ready, window resize, window orientationchange 三個地方, 而套用方式建議使用 css cssText 語法, 能較為準確的套用, 不會有指定高度時, 無法實現的狀況.
參考範例: https://codepen.io/timhuang/pen/pxbwLp
手機版直接測試: https://codepen.io/timhuang/full/pxbwLp/
另外簡單說明如下:
jq 取得 body margin-top 與 margin-bottom 會是 ?px 的文字, 使用 parseInt 可以轉回數字. 而 innerHeight 取得本來就已是數字. 而在原 css 中的 height: 100px!important, 是用來測試在 resizeFull function 中, 使用 css 套用, 亦可蓋過原 css 中的 height important.
我們在寫 Menu 時, 會利用 li tag 來進行, 如下:
<ul> <li>HOME</li> <li>NEWS</li> <li>CATEGORY</li> <li>CONTACT</li> <li>ABOUT US</li> </ul>
一般來說, 會需要將原來的 li 前面的符號點去除, 會使用 CSS:
ul {
list-style-type: none;
}
然後在 li 本身的原來預設 display: block 要改為 inline:
li{
display: inline;
}
接下來是需要在每個 menu 中間放個分隔符號如: |
li + li:before
{
content: '| ';
}
達成效果: https://codepen.io/timhuang/pen/vzaYXo
有趣的是最後這個 li + li:before 語法, 可以不用到排列子元素的方式, 而是用緊鄰的方式來選擇, 如此一來, 第一個 li 就不會滿足這個條件, 只有第二個到最後一個可以滿足, 而達成在每個 menu 間下分隔符號.
其他解法尚有:
舊版本的自訂 ga() 與新版的 gtag() 語法對照, 可以參考官方文件:
gtag(): https://developers.google.com/analytics/devguides/collection/gtagjs/events
舉例來說, 原本在 ga 中, 自訂事件, 原語法為:
ga:
// Sends an event hit for the tracker named "myTracker" with the
// following category, action, and label, and sets the nonInteraction
// field value to true.
ga('send', 'event', 'link', 'click', 'http://example.com', {
nonInteraction: true
});
換成 gtag 時, 如下:
gtag('event', 'click', {
'event_category' : 'link',
'event_label' : 'http://example.com'
});
其中, gtag 後第一個參數為 event (自訂事件), 第二參數為原來 ga 的 event_action, 之後的參數因為為 optional, 所以 event_category, event_label 都再用 json 包起來放在後面了.
請參考上面的官方文件說明.
之前使用 google colab 的 python 線上環境後, 現在 M$ Azure 也有對應的環境了:
一樣免費線上使用, 把之前的 factorial 程式放上去做個小範例:
https://notebooks.azure.com/timhuang/libraries/myprojects
請自行執行 factorial.ipynb 即可. 這樣在 Google 與 Azure 上都有方便好用的 notebooks 可用了.
話說 Google Chrome 有個底線在有下區間英文字, 如 p, g, q 等會出現斷裂的狀況, 經查原因為 Google Chrome 於 64 版本起, 開始支援 text-decoration-skip-ink 為 auto 了, 所以發生這個狀況:
如何解決呢, 當然就是將其屬性設定為 none 即可. 如下:
.noskipink{
text-decoration-skip-ink: none;
}
由於預設連結也會有用到底線, 所以一勞永逸的方式就是把 a 元素的該屬性設定起來即可. 這個在 firefox 與 IE 沒有問題.
看起來也不是 chrome 問題. 而是在 css 4 版本起有這個 tag (draft), 而 chrome 64 起支援了, 所以就發生破裂的狀況, 而其他瀏覽器不支援所以不會有這個破裂的現象.
範例與測試請連結: https://codepen.io/timhuang/pen/XYKaNO
參考資料: