Bootstrap 3 和 Bootstrap 4 的下拉選單，只支援到第二層，如果需要多層次選單的話，我們需要用到 bootstrap-submenu.js ( https://vsn4ik.github.io/bootstrap-submenu/ )
其中Bootstrap 3 要搭配 Bootstrap-submenu 2使用，Bootstrap4 則是要搭配 Bootstrap-submenu 3 使用。
Read More
如何在行動裝置上避免點擊輸入框時畫面放大
當我們使用手機瀏覽網頁時，在預設的情況之下，點擊文字輸入框後，畫面會立即放大。如果不想要這個畫面放大的效果該怎麼做呢？
有二個作法可以拿掉這個效果。
一、使用meta tag 禁止畫面縮放
在<head>標籤內輸入
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />*使用這個方法不止點擊輸入框時畫面不會放大，就連整個畫面的縮放功能也一併被禁止了。
二、幫輸入框設定字級
使用CSS幫輸入框設定字級。相較於第一個方法，這個方法的優點是保留了畫面縮放的功能，使用者還是可以任意將畫面放大。
input, textarea {
font-size: initial;
}使用ms-Dropdown美化你的下拉選單
您是否對一成不變的下拉選單感到厭煩，有沒有想過在下拉選單的選項中加個小圖示。那您可以試試這支Javascript Custom Dropdown。
只要跟著底下的步驟、就可以完成這個美化下拉選單的效果哦！
先來看看原本的HTML
<select name="webmenu" id="webmenu" onchange="showValue(this.value)">
<option value="calendar">Calendar</option>
<option value="shopping_cart">Shopping Cart</option>
<option value="cd">CD</option>
<option value="email" selected="selected">Email</option>
<option value="faq">FAQ</option>
<option value="games">Games</option>
</select>我們要利用data-image來設定小圖示。修改之後的HTML會變成底下的樣子。
<select name="webmenu" id="webmenu">
<option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" data-image="icons/icon_cd.gif">CD</option>
<option value="email" selected="selected" title="icons/icon_email.gif">Email</option>
<option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
<option value="games" data-image="icons/icon_games.gif">Games</option>
</select>載入jQuery以及Javascript Custom Dropdown v3.3要用到的javascript及css
<script src="js/msdropdown/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/msdropdown/jquery.dd.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />最後再加上底下的javascript就完成了。
<script language="javascript">
$(document).ready(function(e) {
try {
$("body select").msDropDown();
} catch (e) {
alert(e.message);
}
});
</script>注意：
下載marghoobsuleman ms-Dropdown之後、會看到3個資料夾分別為：css、images、js。請保持這三個資料夾彼此間的相對位置，才不會在使用的時候找不到下拉選單的箭頭。
解決JavaScript和CSS媒體查詢取得的視窗寬度不同的問題
在設計響應式網頁設計時、通常會依瀏覽器視窗的寬度指定不同的設計，包含CSS配置與JavaScript互動效果。
在CSS的世界裡判斷瀏覽器視窗寬度的方法是media query
@media (max-width: 767px)
{
/* CSS here */
/* 當視窗寬度小於767px時執行 */
}在JavaScript的世界裡，則是使用 $(window).width()來檢測瀏覽器視窗的寬度：
if($(window).width() < 767)
{
// JavaScript here
// 當視窗寬度小於767px時執行
} else {
// JavaScript here
// 當視窗寬度不小於767px時執行
}但是透過 CSS media query 和 $(window).width()得到的寬度並不相同、二者之間有些微的落差。底下有幾個方法可以解決這個問題： Read More
Bootstrap 輪播器強化：當只有一張幻燈片時、關閉換頁箭頭及按鈕
如果您的網站需要建立輪播器(不論是圖片輪播還是廣告輪播)，Bootstrap carousel.js 是一個滿不錯的選擇，只要照著Bootstrap規範的標籤架構來寫html，就可以自動產生輪播的效果，簡單又好用，完全不需要寫到任何的javascript。
不過Ellen前一陣子發現他有個美中不足的地方，那就是：當只有一張幻燈片﹙一組輪播資料﹚的時候，換頁的箭頭和換鈕依舊存在呀。
如果您跟我一樣希望在幻燈片只剩一張的時候、換頁的箭頭和換鈕能消失一下，那就照著底下的步驟來吧： Read More
如何製作響應式的影像地圖
影像地圖一直就是前端工程師的夢魘，如果不借助視覺化的工具軟體、實在很難完成影像地圖。若是想要把影像地圖做成響應式的內容呢？呵呵、別傷腦筋了，求助於工具吧。這篇文章將要教你如何使用免費工具完成響應式的影像地圖。 Read More
如何使用 Open Graph, Twitter Card 自訂網頁在 Facebook, Google, Twitter… 的顯示內容
當有人在Facebook, Google+, Twitter這些社群網站平台分享您網站的內容時，這些社群網站會自動從我們的網站中抓取分享的資訊。但這些自動抓取的資訊不見得符合網站的內容，因為社群網站只能猜測哪些內容重要、哪些不重要。若是可以由我們自己決定分享的資訊，是不是可以更符合網站的內容呢？如果希望可以控制分享的資訊該怎麼做呢？這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。
Read More