Bootstrap form-check-inline not working?

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>

Above example is from the bootstrap online document. However, the radio button doesn't appear in the same line.

Just remove the class "form-check". Then it works!

<div class="form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>

Bootstrap Icon 怎麼使用？(介紹 2 個官方推薦網站)

Image by Garik Barseghyan from Pixabay

在 Bootstrap 4 以後官方並沒有提供預設的圖示。倒是有推薦 2 個具向量功能的圖示(向量圖示功能若不清楚，可以參考 Octicons 的介紹連結)。以下是兩個圖示的連結：

[bug] jquery select change default value not working

My env is JQuery 3.3.1 / Bootstrap 4.0.0 / Laravel 5.7


I want to change the select default value after retrieving data through AJAX. The following code is the original version

$("#mySelect option").each(function(){
    if($(this).val() == myArray[0].id) {
        $(this).attr('selected', true);
    } else {
        $(this).attr('selected', false);
    }
});

This will WORK when getting the data in the FIRST TIME.
BUT, if I keep getting other selection, the selected appears wrong result. The text show the wrong default text.

Therefore, my workaround method is to remove the option and append new option code. Here is the example:

var optionHtml = "<option value=\"0\">My default text</option>";
for (i = 0; i < myOptionArr.length; i++) {
    if (mySelectedOption == myOptionArr[0].id) {
        optionHtml += "<option value=\"" + myOptionArr[i].id + "\" selected " + " >" + myOptionArr[i].desc +  "</option>";
    } else {
        optionHtml += "<option value=\"" + myOptionArr[i].id + "\">" + myOptionArr[i].desc +  "</option>";
    }
}
$("#inctypeSel2").append(optionHtml);

[Javascript] 今天、本月、今年怎麼取得？

var today = new Date();
var tDay = today.getDate();
var tMonth = today.getMonth()+1; //January is 0!
var tYear = today.getFullYear();
var twYear = tYear - 1911; // 換算為民國年

Bootstrap set select box select value

Method 1. doesn't work for me.

$('#yourSelectBox').val(yourvalue); // not work

Therefore, I try the following code to resolve:

$('#yourSelectBox option').each(function () {
     if (this.value == yourvalue) {
        this.selected = true;
     }
});

Bootstrap CDN 順序筆記 (順序錯了就出錯)

如果使用了「BootstrapCDN」(content delivery network)，例如在網站上直接複製貼上以下的程式碼，就要注意幾件事情。

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet"></link>

<scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script crossorigin="anonymous" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script crossorigin="anonymous" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

要注意的項目如下：
【jquery slim】

上述的範例中，引用了 jquery-3.3.1.slim.min.js 這個套件。這個 slim 版本並非完整的版本。如果使用了 ajax 功能，例如 $.post() 就會得到下例的錯誤訊息，為了解決此問題，建議在 slim 之後，放上完整的 jquery 套件：

Uncaught TypeError: $.post is not a function

【jquery 套件順序】
bootstrap 的 css 與 js 套件一定要在 jquery.min.js 之後，否則會造成部份功能失效。例如 modal('show') 這種元件的 js 功能，會出現如下的錯誤訊息：

Uncaught TypeError: $(...).modal is not a function

然而，jquery.slim.min.js 擺放的位置也必須注意，它必須放在 bootstrap.min.js 之前，否則會出現以下的怪異錯誤：

Cannot read property 'fn' of undefined

上述這個很多網友說這是 bootstrap 4.1.3 的錯誤，但還是提一下。

結論就是，對於前端程式設計師而言 jquery 完整套件建議一定要加，而且位置很重要，以上就是一個可行的範例。

[PHP] how to format print_r() output data

print_r() is a useful tool for debug. add '<pre>' to format the array structure!

echo '<pre>' . print_r($data, true) . '</pre>';

如何在網頁上增加 Google 翻譯

共 2 步驟：

Step 1: 新增一個 <div> ， id 名稱為 "google_translate_element"

<div id="google_translate_element"></div>

Step 2: 增加一段 script

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

臉書粉絲頁的圖片尺寸

臉書粉絲頁圖片尺寸關鍵數字

臉書封面桌面版圖片尺寸

素材
總長：851px
總高：315px

畫面顯示
總長：820px
總高：312px

如何將 Facebook 的"讚"與"分享" 加到 blogger 的每一篇文章

好不容易找到解決問題的文章，結果因為日期太舊已不適用，這是程式設計最遇到的麻煩

How To Add A Facebook Like/Share Plugin to Blogger/Blogspot Posts?

注意，本篇文章建立於 2017 年。Facebook 或 Blogger 隨時有可能升級而讓我的方式不再適用。因此，如果你發現這篇文章不再適用時，請告知我一聲，並且搜尋更新的文章。

其實在此刻，仍然可以 google 到一堆文章，只是 facebook 變化較大，許多介面都已經改觀，而不少人分享的作法也不再能用，因此重寫一篇作為筆記。

各國訪客計數器 – Flag Counter

Flag Counter – 這是一個有趣的小工具，統計你的網站訪客來自那個地區。如果你有機會跑到一些特別的國家時，別忘了也要連回來你的官網，就會出現那個國家的國旗呦！

安裝方式很簡單，只要嵌入一段程式碼即可。

以下是官網的介紹：

Add our free counter to any webpage and collect flags from all over the world. Every time someone from a new country visits your website, a flag will be added to your counter. Not only will this make your site far more interesting, but clicking on your Flag Counter will reveal amazing information and charts!

https://flagcounter.com/

設定完之後，就會開始記錄並且顯示你的訪客資訊囉！

這是放大後的圖，所以解析度糟了點。

WordPress 無預兆變慢？

載入 WordPress 很慢？怎麼一回事？以下開始整理曾經遇過的問題。

rem Chrome bug：以 rem 設定的字體在 Chrome 瀏覽器中怪怪的

抓 bug 時間

rem 就不多介紹了。這是 CSS3 新增的文字相對單位（root em），顧名思議，它是相對於 HTML 的根節點。

步驟一：很多人試了「步驟一」就解決這個問題了。但是我仍然試不出來。

好用的 jQuery 套件

chart.js

如果需要使用表格的話，一定要看看這個套件！太帥了。支援很多種的表格樣式，並採用 HTML5 的 canvas 輸出。看網站的範例說明就知道了。大部份在 excel 可以看到的統計圖，那裡都已經提供。

http://www.chartjs.org/

fullPage.js

Create Beautiful Fullscreen Scrolling Websites
http://alvarotrigo.com/fullPage/

Isotope

華麗的移位效果
http://isotope.metafizzy.co/

jQuery Easing Plugin

提供簡單的「顯示」效果
http://gsgd.co.uk/sandbox/jquery/easing/

jQuery tinyMap

短小精幹！拯救眾生免於 Google Maps API 的摧殘，輕鬆在網頁建立 Google 地圖的 jQuery Plugin
http://app.essoduke.org/tinyMap/

LightBox 相片播放

你是否對於相片播放感到興趣呢？LightBox 安裝簡易而且風格很乾淨！
http://lokeshdhakar.com/projects/lightbox2/

Material ScrollTop

好用的 scroll to top 套件，很簡約，操作便利。

https://github.com/bartholomej/material-scrolltop

nanogallery2

很漂亮的相片播放，頗有設計感！

http://nanogallery2.nanostudio.org/

Parallax Slider

很漂亮的滾動視差效果的 Slider 很適合拿來放在首頁
http://tympanus.net/codrops/2011/01/03/parallax-slider/

skrollr

超強滾動視差套件，非常華麗。常見於手機商品的網頁。
https://prinzhorn.github.io/skrollr/

Timeline.js

很酷的時間軸套件，非常適合用在「歷史沿革」
https://timeline.knightlab.com/

WOW.js

當滾動 scroll bar 時，讓圖片產生動畫效果！
Reveal Animations When You Scroll. Very Animate.css Friend :-)
Easily customize animation settings: style, delay, length, offset, iterations...
http://mynameismatthieu.com/WOW/index.html

【整理】
15 Best jQuery Grid Plugins for Developers
類似 Facebook 影像格狀的 JQuery 套件
http://codegeekz.com/jquery-grids/

(Photo via Hoor Pari / jquery, CC License)

滑動視差網站 (Using Parallax scrolling)

愈來愈多的網站，雖然有著精簡的內容，卻有著「華麗」的設計。有一種只讓使用者不斷「滾動」滑鼠就能夠導覽整個網站，這類型的網站特別適合用於小清新風格的網站。