簡單究好 Simple is Best

網頁前端開發資訊

如何在行動裝置上避免點擊輸入框時畫面放大

當我們使用手機瀏覽網頁時,在預設的情況之下,點擊文字輸入框後,畫面會立即放大。如果不想要這個畫面放大的效果該怎麼做呢?
有二個作法可以拿掉這個效果。

一、使用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。請保持這三個資料夾彼此間的相對位置,才不會在使用的時候找不到下拉選單的箭頭。

從GitHub.com下載JavaScript image combobox

解決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

SASS: 將css的編碼設定成utf-8 – 解決中文字元的問題

如果您在使用compass 監控 scss 的時候,出現底下的錯誤訊息
Error: Invalid CP950 character “\xxx”
那就表現檔案中出現ruby不認識的字元
這時候只要在config.rb,加上底下這一行設定、再重新compass watch就可以了
Encoding.default_external = 'utf-8'
加上這一行的結果會讓產生的css檔案最前面出現@charset “UTF-8”; 的設定

使用Compass自動生成CSS sprite、將小圖示合併成大圖

為了加快網頁載入的速度、減少使用者等待的時間,許多前端工程師會將網站需要用到的小圖示合併成一張大圖、再利用CSS來定位各個小圖示,這就是所謂的CSS sprite。CSS sprite可以減少HTTP的請求次數、加快網頁載入的速度。有許多工具都可以幫我們生成CSS sprite,這在篇文章中、我要介紹如何使用Compass自動生成 CSS sprite。

使用Compass製作CSS sprite非常輕鬆、。只要將圖示放在同一個資料夾內、再加上二行的語法,就完成合併圖片的動作囉! Read More

Sass 專案的基本設定

當我們建立Sass專案之後,在專案資料夾裡會產生一個config.rb檔案。這個檔案就是Sass專案的設定檔。在這個設定檔裡、我們除了指定一些資料夾的路徑(CSS, images, javascript…),還可以修改CSS輸出模式、開啟或關閉註解提示功能,以及將絕對路徑更改為相對路徑。
Read More

CSS開發工具(Sass + Compass)的環境安裝教學及基本操作

Sass是一套生成CSS的工具,支援變數、函數、繼承等功能,讓我們能更輕鬆地組織及維護CSS樣式表。
Compass則是一套簡化Sass編寫方式的工具,不僅可以自動補足CSS前綴詞,解決瀏灠器相容性的問題,還能將圖示合併成Sprite大圖,Compass mixins更是幫我們節省編寫的時間。

這篇文章包括了如何安裝Sass與Compass,還有如何建立、開啟以及監控Compass專案的方法。 Read More

如何製作響應式的影像地圖

影像地圖一直就是前端工程師的夢魘,如果不借助視覺化的工具軟體、實在很難完成影像地圖。若是想要把影像地圖做成響應式的內容呢?呵呵、別傷腦筋了,求助於工具吧。這篇文章將要教你如何使用免費工具完成響應式的影像地圖。 Read More

頁次:12