網頁設計

2014年12月28日 星期日

owlcarousel 可拖拉、響應式輪播圖


http://www.owlcarousel.owlgraphic.com/

2014年12月27日 星期六

javascript jquery 判斷是否手機版、平板、mac、pc include 相對應 js 響應式用



if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // not mobile
  if (navigator.userAgent.indexOf('Mac OS X') != -1) {
     //is Mac
  } else {
     //is PC
   }
}else{
  // is mobile
}

用 jquery load 外部 js
$.getScript( "js/SmoothScroll.js" );

2014年12月16日 星期二

jQuery 找出非緊接在後的元素 by class name

http://stackoverflow.com/questions/1827482/jquery-find-next-prev-elements-of-a-certain-class-but-not-necessarily-siblings

$('#click').findNext('.find').html('testing 123');

/**
 * Find the next element matching a certain selector. Differs from next() in
 *  that it searches outside the current element's parent.
 *  
 * @param selector The selector to search for
 * @param steps (optional) The number of steps to search, the default is 1
 * @param scope (optional) The scope to search in, the default is document wide 
 */
$.fn.findNext = function(selector, steps, scope)
{
    // Steps given? Then parse to int 
    if (steps)
    {
        steps = Math.floor(steps);
    }
    else if (steps === 0)
    {
        // Stupid case :)
        return this;
    }
    else
    {
        // Else, try the easy way
        var next = this.next(selector);
        if (next.length)
            return next;
        // Easy way failed, try the hard way :)
        steps = 1;
    }

    // Set scope to document or user-defined
    scope = (scope) ? $(scope) : $(document);

    // Find kids that match selector: used as exclusion filter
    var kids = this.find(selector);

    // Find in parent(s)

2014年11月16日 星期日

如何防止 Android 手機打字時彈出鍵盤的自動 zoom in

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

這會擋掉一切使用者縮放功能,要使用請:
1.所有寬度都使用%
2.最好不要有px寬

2014年11月4日 星期二

RWD 響應式表格套件 jQuery

http://fooplugins.com/plugins/footable-jquery/#/

2014年10月13日 星期一

固定換頁效果

http://alvarotrigo.com/pagePiling/#page1

表頭特殊背景動畫

http://tympanus.net/codrops/2014/09/23/animated-background-headers/