codyhouse 的 tooltip 線上教學筆記與心得

日期：2015.11.12
留言數：0
標籤：css 語法 CSS3 HTML5 筆記觀念課程

剛剛收到一封 codyhouse 的線上課程通知，這一期他們推廣的是 CSS animation 應用，好奇點進去後發現有一堂課程是免費的，所以就打開來聽聽看啦～

▼ 有 play 可以選的 tooltip 就是這期的免費課程啦

花了半小時聽完後覺得受益良多，雖然講者的口音有點重，但可以把影片字幕打開，也可以直接看程式碼，聽完之後也是對其他付費課程有所心動 XD，非常棒的行銷手法呢，先試聽一堂課喜歡再買 😀

因為他的 youtube 影片連結是公開的，所以我也放一份在我的 blog 裡面，以下是自己聽完做的一些筆記跟重點，很多語法我自己也已實作了，所以看到國外講師也是這樣寫覺得很開心 😊

總之我覺得不錯的語法都會重點摘錄出來給大家參考，希望對你們有所幫助 🌹

筆記與心得

aria-hidden：HTML5 語意，用於屏幕閱讀器的，幫助殘障人士更好的訪問網站。(參考來源)
萬年水平垂直置中的另一種方法：

section {
  width: 100%;
  height: 100vh;
  display: table;
}
section .center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

文字如果要垂直置中，可以將height以及line-height設定成一樣的高度，但文字必須維持一行才有用。
如果不希望hover影響隱藏的元素，可以改用visibility: hidden將元素隱藏，這樣滑鼠移過之後也不會啟動hover效果
visibility可以用在transition，但display不行
假設元素的寬度是50px可以善用calc(50% - 25px)將元素置中
利用偽元素製作三角形：

border: 10px solid transparent;
border-top-color: #2e1c28;

偶爾聽聽外國人的線上課程也很棒，可以學到很多不一樣的寫法以及詮釋的方法，codyhouse 的範例跟教學品質都很棒，有興趣可以連回他們的網站看更多資料唷: https://codyhouse.co/

使用 CSS:not 與 data-index 即時搜尋頁面

日期：2014.03.07
留言數：1
標籤：css 語法 CSS3 HTML5 jQuery 實作教學

去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜尋資料，覺得非常的好用，之前也有在粉絲團分享過這篇文章。原本不打算重新寫教學(因為原作者已寫的很詳細)，但是最近發現有朋友不知道這功能，所以轉念想想，還是記錄下來順便推廣一下這好用的功能吧 🙂

我有將這個功能實作在前公司的網站(fanxin.tv)，如果你有登入，可以進入我的動態點選「朋友列表」或「尋友工具」的分頁觀看效果，或者可以參考以下我用 codepen 做的範例

直接在搜尋框打上要搜尋的人名(可以用J,j搜尋)，可以看到頁面即時篩選出正確的名字

這個範例有搭配 JavaScript，原作者使用的是原生的 JavaScript，而我為了稍作區別，將它改成了 jQuery，所以想瞭解怎麼用 jQuery 寫的朋友可以參考我的範例 🙂

這個即時頁面使用了 :not 以及 data-* 完成(不得不說， data-* 真的超好用的 XD)，以下簡單介紹如何使用它們達成該功能。

在 html 加入 data-* 屬性

從頁面看，感覺是搜尋類別 name ，但其實我們要在 name 的父層 wrap 加上 data-index ，利用 data-index 做搜尋，而不是用 name 。

因此可以看到我在每個 wrap 裡加上了 data-index ，值跟 name 一樣都是填上名字。(第 1 & 3 行、第 6 & 8 行)

<div class="wrap" data-index="ju chu ko">
  <img src="http://lorempixel.com/40/40/people/1" border="0" />
  <div class="name">Ju Chu Ko</div>
</div>

<div class="wrap" data-index="browny lin">
  <img src="http://lorempixel.com/40/40/people/2" border="0" />
  <div class="name">Browny Lin<</div>
</div>

唯一不同的是，即使原本的 name 有大小寫，我在data-index一律改成小寫表示，如果要透過後端產生資料，可以從後端作處理，在樣板輸出的時候就先將大寫轉成小寫。

使用 :not 屬性做篩選

接著我們在 HTML 頁面加入以下語法(可以加在搜尋框的後面)：

<style id="m-search"></style>

我們會利用 jQuery 動態在 style id="m-search" 裡加入 :not 語法，這樣就可以即時在頁面做篩選了。

:not是 CSS 的偽元素，跟 :nth-child 有異曲同工之妙，他可以幫我們做到元素篩選，假設今天我們搜尋「j」，希望出現所有名字有「j」的人，可以利用:not寫成：

<style id="m-search">
  .wrap:not([data-index*="j"]) {
    display: none;
}
</style>

這段意思是：「只要 data-index 的值沒有 J，就隱藏他」。

使用 data-index*= 是因為我們要做模糊比對，只要 data-index 有出現這個字都可以，畢竟我們不希望只搜尋字首或字尾，而是搜尋全部。

利用 jQuery 即時搜尋

最後，就可以利用 jQuery 即時搜尋，只要搜尋框有「改變、鍵盤輸入、貼上」等事件，我們就即時在 style id="m-search" 裡加入 :not 篩選，而他的篩選依據就是我們搜尋框的值：

var that = $(this);
var mSearch = $("#m-search");
$("#search-input").bind("change paste keyup", function(){
  var value = $(this).val();
  if (!value) {
    mSearch.html("");
    return;
  }; 
  mSearch.html('.wrap:not([data-index*="' + value.toLowerCase() + '"]) {display: none;}');
});

結語

以上就是整個過程，只要利用 CSS 以及 JavaScript(jQuery) 就可以做到即時搜尋，但是他只能搜尋這個頁面的東西，畢竟只是單純抓取 HTML DOM，如果要搜尋後端資料，還是要用 ajax 囉。

用 data-* 屬性做出純 CSS 的 tooltip

日期：2014.02.27
留言數：3
標籤：css 語法 HTML5 實作教學

最近因為案子需求，要做「tooltip」的功能，簡單來說，tooltip 是一種「當滑鼠移過文字時，會跳出一個簡短的提示說明」的特效。

tooltip 技術已存在很久，發展也有一段時間了，不論是用純 CSS 製作，或是透過 JavaScript 控制都有人寫過，不過最近我發現還可以利用 HTML5 的新標籤 data-* 達成。去年我有寫過一篇利用data-*在 HTML 以及 jQuery 存取資料的文章，但 data-* 厲害的地方不僅在此，我們還可以直接利用 CSS 的 attr 將 data-* 資料抓出來噢！！

那話不多說，就先上範例吧：

可以看到當滑鼠移過「Hover Me」的文字時，右方會淡出一個提示訊息；滑鼠移過「Push you mouse here」文字時，右方會出現多行的提示。

在此跟各位簡單介紹一下，如何使用 data-* 達成該功能。

在 html 加入 data-* 屬性

首先要做的第一件事情，就是設定 tooltip 的 html 程式碼。我的寫法為：

<div class="tip">
  <span data-tooltip="hello world">Hover Me!!!</span>
</div>

在span裡面寫上data-tooltip的屬性，然後可以把它當作 HTML 屬性直接使用，在值(value)裡寫上提示文字。data-tooltip的「tooltip」名字可以自取，只要前面的格式以data-為開頭即可。

在 CSS 利用 attr 抓取 data-* 屬性

CSS 的偽元素是個很強大的東西，我們可以利用他做很多運用，通常為了做一些效果，content:" "多半會留空，但其實可以在裡面寫上attr抓資料歐！

我們可以這樣寫：

.tip span:before {
  content: attr(data-tooltip);
}

在attr裡面塞入我們在 html 新增的data-tooltip屬性，這樣偽元素(:before) 就會得到該值。

利用 pre 解決 tooltip 自動換行

將 tooltip 的樣式做好後，也許你會發現文字的換行有點奇怪，可能會出現這樣的情況：

「Hello World」文字並沒有按照預期的情況換行，簡單來說是因為預設會使用空白換行，因此我們可以使用pre標籤保留空白字元，寫法為white-space: pre;

利用 Unicode 字元顯示多行 tooltip

最後，如果我們希望 tooltip 可以顯示多行文字該怎麼辦呢？
一開始我很直覺的在 data-tooltip 裡面加入 br 標籤，但他會直接將br秀出來：

後來我發現 bootstrap 有寫好 tooltip 的元件，他的做法是如果你要在 data-* 裡面使用 HTML 標籤，就必須加入一行 data-html="true" 的設定，當時看完覺得超神奇的，他把這串設定寫在 javascript 裡面做判斷，但我還是似懂非懂，不知道 bootstrap 的具體設定方法。

最後，我採用 Unicode \a 作處理。

在想要換行的地方改用&#xa ;取代br，這樣文字就會自動換行囉！！

<div class="tip">
  <span data-tooltip="this is line 1 &#xa ; this is line 2">push you mouse here!!!</span>
</div>

☞ 補充

; 的前面其實不需要空格，但如果我不空格，字元會被編輯器吃掉。想看比較完整的語法可以參考 codepen 範例喔。

參考來源：http://stackoverflow.com/questions/16451553/css-data-attribute-new-line-character-pseudo-element-content-value

雖然我還是很想知道 bootstrap 到底是怎麼寫的，有在 FB 問過朋友，但其實還是看不懂，OTL

總之，data-* 真的是一個強大又好玩的東西，不僅可以自定義屬性(把自己當成 HTML 的規則制定者?)，還可以透過 jQuery & CSS 存取～，大家一起來玩吧 😀

淺談 section 運用以及與 outline 間的關聯

日期：2013.05.22
留言數：0
標籤：HTML5 原創教學觀念

HTML5 正夯? 恩，其實夯很久了！而 HTML5 絕對不只有語意那麼簡單罷了，它包含了很多前端的新功能與新技術，語意只是其中的一小小小塊。

今天要跟大家分享的是 <section> 標籤，網路上有很多關於 <section> 的解說，常見的文章是拿來跟 <article> 比較，可是我看了很多篇都似懂非懂…，所以又跑去看了國外的文件。

從今年開始，我寫的 HTML 會漸漸從 XHTML 的 !DOCTYPE 走向符合 HTML5 的 !DOCTYPE，隨著 HTML5 的規格釋出，語意會是我優先嘗試的部份，從整個網頁結構以及 SEO 來看，語意是 HTML5 的必備基礎知識，所以我們就先從 <section> 開始吧！

W3C 對 Section 的定義

不免俗的，一定要寫一下 W3C 的原文說明：

The <section> element represents a generic section of a document or application.

A section, in this context, is a thematic grouping of content:
- chapter
- various tabbed pages in a tabbed dialog box
- numbered sections of a thesis …
A Web site’s home page could be split into sections for an introduction, news items, and contact information.
The section element is not a generic container element. The section element is appropriate only if the contents would be listed explicitly in the document’s outline.
A section typically with a heading.

@HTML/Elements/section – W3C

看得懂 W3C 原文的朋友，其實可以按右上角的 Close 離開了 😛 ，看不懂的朋友，歡迎繼續往下看 🙂

section 到底是甚麼意思

先撇開 W3C 這些落落長的解釋名詞，我們先用常識去判斷甚麼是 section ？透過萬能的谷歌大神可以了解：

section 不是一段完整的文章，article 才是
section 可以作為一個章節、或一個段落的區隔。

另外，如果我們單純搜尋 section 這個單字，可以看到他是空間設計的隔間

上圖用灰色粗線條一個一個分隔的區塊，就是 section(一個章節、段落的區隔)。而整個一大棟的建築物是 article (獨立完整的文章)

再從空間設計拉回網頁設計，以結構面來說，可以做成以下的示意圖

如果你曾搜尋過 , ，會發現每個人畫的結構圖都不太一樣。有的跟我提供的示意圖一樣，是用 <section> 包覆；但有的剛好相反，是用 <article> 包覆。

我沒辦法告訴你哪種才是正確的？或者該有怎樣的準則。

因為兩種都可以，怎麼去撰寫 HTML tag，是根據你網頁的結構而定，因此他沒有標準的答案。我們唯一能做的是把他們的差別搞清楚，也把你網頁的結構搞懂；唯有都清楚了，才能正確的寫出對搜尋引擎友好的語意。

我對 section 的理解與定義

最後，結合 W3C 對 section 的定義，以及透過網路上對 section 名詞的解釋，我將 section 的定義總結如下：

section 用來作為一個有意義的章節，或段落的區隔。
section 在一張網頁可以出現很多次。
section 不是用來包覆一段完整且獨立的文章(例如 Blog 的內文)，要做這件事請交給 article
被 section 包覆的段落，通常都會帶有 headling 標籤(這跟等等提到的 outline 有強大的關聯)

看完這些定義，大家有沒有發現，其實最重要的一點是要去「判斷這些區塊，到底是不是獨立的文章」？或者是「有意義的章節或段落」。而判斷這樣的頁面結構，就是要跟案主做良好的溝通，了解他們網站的需求，並且先將 outline 定義出來 =)

※ 如果你已經知道甚麼是 outline，可以選擇跳過 outline 的介紹 ※

什麼是 outline

outline 就是我們常說的「大綱」。當搜尋引擎在爬網站文章時，可以根據網站提供的大綱抓出每張網頁的目錄以及重點，每張網頁都可以有自己的一份大綱。

以部落格文章為例子，我們在寫文章的時候，都習慣用 heading tag 做大標、小標…等等，方便使用者閱讀，而這樣的標記在網頁結構裡，就算是一個大綱。只是我們用顏色區分讓使用者容易閱讀、而對搜尋引擎來說，他就是利用 heading tag 來了解每一段的大綱與章節。

如果想要知道你的網站大綱長甚麼樣子，以下有幾個方便的工具讓你運用：

1. Google 擴充元件: HTML5 Outliner
這個 outline 檢測工具非常好用，只要網站有把結構做出來，他就可以根據你的 HTML tag 秀出網站的大綱。另外如果文章很多懶得爬文，也可以直接點選有興趣的大綱文字，它會自動跳到該段落，有點像書籤的效果。

2. HTML 5 Outliner
方便的 Outline 檢測網站，可以上傳 HTML 檔案、用 URL，或是直接貼 HTML code 在文字欄位裡，他就會秀出這個 HTML 的大綱，適合在本機測試或不是用 Google Chrome 的朋友。

怎麼寫 outline

在 HTML5 尚未問世，還沒有 section tag 時，如果我們要做出像下面這種層級目錄的 outline：

1. 流量來源
   1.1 總覽
   1.2 來源
       1.2.1 所有流量
       1.2.2 直接
       1.2.3 推薦連結
2. 內容
   1.1 總覽
   1.2 網站內容
       1.2.1 所有網頁
       1.2.2 內容深入分析
   1.3 網站速度

通常會用 heading tag 給 outline 做階層 (可以直接貼到 HTML5 Outliner 檢測工具看喔)：

<h1>流量來源</h1>
  <div class="content">
    內容xxx，123456789
  </div>
<h2>總覽</h2>
<h2>來源</h2>
<h3>所有流量</h3>
  <div class="content-h3">
    hello world.
  </div>
<h3>直接</h3>
<h3>推薦連結</h3>

<h1>內容</h1>
<h2>總覽</h2>
<h2>網站內容</h2>
<h3>所有網頁</h3>
<h3>內容深入分析</h3>
  <div class="content-h3">
    how are you
    i am fine , thank you 🙂
  </div>
<h2>網站速度</h2>
  <div class="content-h2">
    web speed.
  </div>

簡單來說，就是用 <h1>, <h2>, <h3> 做組合。

<h1> 是階層一，<h2> 是階層二 … 以此類推

但是問題來了，heading tag 除了可以幫助做出層級大綱外，他也代表著每個網頁的重要性，我們習慣設定 <h1> 為整張網頁最重要的部分，依序為 <h2> → <h3>

如果我今天覺得「1. 流量來源」跟「1.1 總覽」、「1.2 來源」是一樣重要的文章大綱，畢竟「1. 流量來源」只是一個引言，真正重點內容是放在後面的 1.1 以及 1.2，我希望他們同樣是 <h2>，那該怎麼做呢？

在 HTML5 以前，這個問題無解。因為即使你用 <div> 包覆的很漂亮，或是做了很棒了縮排，但是對網頁標準來說，沒有任何的意思(無語意)，他只是一個用來做排版的容器罷了。

<div class="top-title">
  <h2>流量來源</h2>
  <div class="sub-title">
    <h2>總覽</h2>
    <h2>來源</h2>
  </div>
</div>

所以你用 Outline 工具跑出來會是長這樣，沒有任何的階層：

1. 流量來源
2. 總覽
3. 來源

那麼，如果我們同時要滿足大綱的「重要性」以及「階層性」，該怎麼做呢？所以 W3C 幫我們定義了這個新的 HTML 標籤：<section>

承接我們剛剛舉例的程式碼，如果我們把 <div> 換成 <section> ，會發生甚麼事情呢？

<section class="top-title">
  <h2>流量來源</h2>
  <section class="sub-title">
    <h2>總覽</h2>
    <h2>來源</h2>
  </section>
</section>

讓我們丟到 Outliner 檢測工具看看，會出現這樣的結果：

1. Untitled Section
  1. 流量來源
    1. 總覽
    2. 來源

初步來看，是達到了我們的期望，即使都用 <h2>，也可以做出階層的 outline。只是你會發現最上面多出了一個「Untitled Section」，所以請移除最外層的 <section>，將語法改成：

<div class="top-title">
  <h2>流量來源</h2>
  <section class="sub-title">
    <h2>總覽</h2>
    <h2>來源</h2>
  </section>
</div>

這樣就會是我們想要的結果了：

1. 流量來源
  1. 總覽
  2. 來源

<section> 所包覆的區塊可以用來做每一段的大綱，而大綱的標題就是用 heading tag <H> 表示。但是 <section> 的最上層還是要有一個主標題才會讓整張網頁的大綱完整。

section 的進階運用

1. section 內同樣有階層之分

<section>
  <h2>流量來源</h2>
  <h2>總覽</h2>
  <h3>總覽一</h3>
  <h3>總覽二</h3>
</section>

輸出結果：

1. 流量來源
2. 總覽
  1. 總覽一
  2. 總覽二

2. section 可搭配 hgroup 做大綱的微調

被包覆的 heading tag，除了第一個 heading tag 之外，其餘的 heading tag 都不會出現在大綱中。( <hgroup> 已被 W3C 移出 HTML5 標準，所以我就簡單舉例，想要測試的朋友可以自行玩玩看)

<section>
  <hgroup>
    <h1>流量來源<</h1>
    <h2>總覽</h2>
    <h2>來源</h2>
  </hgroup>
  hello world
</section>

3. section 碰到特定語法將不視為大綱

當 <section> 碰到像是 <blockquote>, <details>, <fieldset> 時，被包住的 heading tag 不會出現在大綱。

<h2>hello world</h2>
<section>
<blockquote>
  <h2>流量來源</h2>
    hello world
</blockquote>
</section>

輸出結果：

1. hello world
  1. Untitled Section

讓不支援 HTML5 的瀏覽器支援 <section>, <article> 等標籤

步驟一

打開 reset.css 或是其他的樣式檔案，如 style.css，加入以下語法 (默認為display:inline)：

section, article, aside, footer, header, nav {
  display:block;
}

步驟二

開啟網頁檔案，再網頁最上方加入語法，用 JavaScript 幫這些不支援 HTML5 的瀏覽器，建立新的元素。

<!-- [if lt IE 9] -->
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
<!-- [endif] -->

以上。有任何問題都歡迎留言指教 🙂

使用 HTML5 和 jQuery 簡易存取資料

日期：2013.03.09
留言數：1
標籤：HTML5 技巧觀念

HTML5 增加了一個 data-* 的屬性，可以讓大家很方便的存取這些數據，而且完全不會影響你的版面。假使要做網頁互動，或是需要將資料存到後端紀錄，都非常的方便喔！

A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
Embedding custom non-visible data with the data-* attributes

範例 1

HTML5 使用 data-* 非常簡單，以下是參考語法：

<div class="block" data-myid="test1">
  區塊測試
  簡易使用 HTML5 存取資料。
</div>

在不影響版面情況下，可以看到我們在增添了一個屬性：data-myid="test1。

myid 以及 test1 都是我們可以自定義的項目。myid 可以用來當作該 DIV 的識別標記，test1 則是該 DIV 的值。

接著我們可以很方便的使用 jQuery 取出這個 DIV 的值：

var myid= $('.block').data('myid');  //值為 test1
  $("#btn_a").click(function(){
  alert(myid);
});

按下按鈕後，跳出來的 alert 視窗值會是 test1 。

範例 2

假使有多組 DIV 的值要讓我們做選擇，同樣可以利用 data-* 實現該效果。
首先先把 HTML 的 data 寫好：

<div id="block">
  <div class="block1" data-myid="no1">請點我，我是編號一</div>
  <div class="block1" data-myid="no200">請點我，我是編號二百</div>
</div>

以及利用 jQuery 取出 data-myid 的值

$('#block .block1').click(function(){
  alert($(this).attr("data-myid"));      
});

兩個 DIV 的 data-myid 不一樣，點選區塊之後顯示的結果也會不同。

codyhouse 的 tooltip 線上教學筆記與心得

筆記與心得

使用 CSS:not 與 data-index 即時搜尋頁面

在 html 加入 data-* 屬性

使用 :not 屬性做篩選

利用 jQuery 即時搜尋

結語

相關 jQuery 插件應用

用 data-* 屬性做出純 CSS 的 tooltip

在 html 加入 data-* 屬性

在 CSS 利用 attr 抓取 data-* 屬性

利用 pre 解決 tooltip 自動換行

利用 Unicode 字元顯示多行 tooltip

淺談 section 運用以及與 outline 間的關聯

W3C 對 Section 的定義

section 到底是甚麼意思

我對 section 的理解與定義

什麼是 outline

怎麼寫 outline

section 的進階運用

1. section 內同樣有階層之分

2. section 可搭配 hgroup 做大綱的微調

3. section 碰到特定語法將不視為大綱

讓不支援 HTML5 的瀏覽器支援 <section>, <article> 等標籤

步驟一

步驟二

使用 HTML5 和 jQuery 簡易存取資料

範例 1

範例 2