用jQuery寫出scrolling動畫效果

網路上的範例大多以body為容器，稍微修改了一下以適應在其他DOM內的scrolling效果：

/**
 * @param target a jQuery selector string, target DOM; or scrollTop value
 * @param container a jQuery selector string, represents DOM which contains target, default is 'html, body'
 */
function smoothScrollTo(target, container) {
    container = container ? container : 'html, body';

    $(container).animate({
        scrollTop: $.isNumeric(target) ? 
            target : 
            $(target).offset().top 
                + $(container).scrollTop() 
                - $(container).offset().top
    }, 300);
}

// Ex: smoothScrollTo('#anchor');

Anchor 1

This page is made to demonstrate what i learned from some popular javascript library/framework. For now, it used H5BP as basic template, Bootstrap for layout and CSS style, and jQuery. (Backbone.js is going to be added for MVC implemenation)

Anchor 2

This page is made to demonstrate what i learned from some popular javascript library/framework. For now, it used H5BP as basic template, Bootstrap for layout and CSS style, and jQuery. (Backbone.js is going to be added for MVC implemenation)

Anchor 3

This page is made to demonstrate what i learned from some popular javascript library/framework. For now, it used H5BP as basic template, Bootstrap for layout and CSS style, and jQuery. (Backbone.js is going to be added for MVC implemenation)

• Anchor 1
• Anchor 2
• Anchor 3

文字顯示過長時以省略符號顯示並提示完整文字

此CSS只作用於單行文字的顯示上

.text-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

為了達到只在過長被省略才顯示提示，需要用javascript判斷一下 (這邊以jQuery為例)

$(function() {
    $('.text-overflow-ellipsis').each(function() {
        if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
            $(this).attr('title', $(this).text());
        }
    });
});

取得瀏覽器顯示的Scrollbar寬度

有些情況下，需要取得Scrollbar寬度來動態計算元件長寬
參考了一下網路上的作法，用jQuery寫了一個function來做這件事

/**
 * 1. Generate nested divs
 * 2. Calculate the width of inner div before and after scrollbar becomes visible.
 * @returns calculated scrollbar width
 */
function getScrollbarWidth() {
    var $tempNode = 
        $('<div/>')
            .css({
                width: 100,
                position: 'absolute',
                top: -1000
            })
            .append($('<div/>', { height: 100 }))
            .appendTo('body');
 
    var withoutSroll = $tempNode.children(':first').innerWidth();
    var withScroll = $tempNode.css({ 'overflow-y': 'scroll' })
                        .children(':first').innerWidth();

    $tempNode.remove();
    return withoutSroll - withScroll;
}

jQuery與其他library的相容問題

以前傻傻的沒碰過，到了真的遇到其他 javascript library 也用 $ 當變數的時候，要改起來的時候還真有些麻煩咧...好在官方也不是傻子，他們提供了一個方便又好用的函式 jQuery.noConflict，可以將 $ 的控制權釋放出去，於是就有了下列幾種解法：

jQuery 程式碼包成函式

jQuery.noConflict();
(function($) {
   //Write you jQuery code here, use $ instead of jQuery...
   $('div').html('testing');
})(jQuery);

將程式碼包在一個函式裡面，將 jQuery 作為一個參數傳遞進去，在接收時就可以任意命名了 (這裡是使用預設的 $ )，缺點是只有在這函式內可以使用 $，有 scope 上的限制

用其他別名取代 $

var j = jQuery.noConflict();
//Do something with jQuery...
j('input').hide();
//Do something with another library's $
$.something();

宣告一個變數接受 jQuery.noConflict() 回傳的值，就可以直接當成別名使用了

直接使用原來的變數名稱

jQuery.noConflict();
//Do something with jQuery...
jQuery('input').hide();
//Do something with another library's $
$.something();

跟上面那個沒什麼不同，變數名稱的差異而已


自己寫的網頁應該是不容易發生這種問題，倒是如果要改別人寫的東西，要加東加西時最好先看一下用了哪些 library，避免浪費無謂的時間。