用CSS border畫出三角形

最近才知道的小技巧，先看看一般的border如何呈現：

可以看出邊界的交界處會呈現斜線的狀態，利用這點，搭配將border-color設為透明(transparent)就可以畫出三角形的效果，不過要注意ie6以下不支援transparent屬性。

還可以利用border的寬度及元件大小來調整交界位置，組合出不一樣的多邊形。

剩下的就是發揮創意去應用了，像是對話框上方的小三角甚至可以用pseudo element來達成：

.cbox:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border: 7px solid transparent;
    border-bottom-color: #ccc;
    border-top-width: 0;
    content: '';
}
.cbox:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border: 6px solid transparent;
    border-bottom-color: white;
    border-top-width: 0;
    content: '';
}

參考來源：A cross-browser callout box using CSS border triangles. For ie6 too!以及Bootstrap的Dropdown menus

AngularJS雜記 (基於1.2的版本)

• $timeout這個服務基本上是一個window.setTimetout的wrapper，它有一個很大的用處是其function執行時間會在Angular DOM rendering之後 (譬如在data變動之後，view跟著重新render...)

• 避免angular在render時DOM的閃現問題，可以使用ngCloak先將DOM隱藏，不過此directive要配合一段css才有作用，在1.2版是

  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }

• Controller之前的溝通：
1. 配合$rootScope(或parent scope)使用event handler來處理child scope間的溝通(Scope.$on及Scope.$emit，Scope.$broadcast)
2. 或以Module建立一個service，用dependency inject的方式注入到各contoller裡，作為溝通的橋梁 (參考service/factory/provider三個api之間的差異)

• 在scope life-cycle外要解析angular的expression用Scope.$apply (會觸發data-binding的檢查)，否則用Scope.$eval即可 (參考Scope life-cycle及Angular data-binding)

• 關於Directive (這邊Directive Definition Object簡稱DDO)：
  1. DDO裡的controller，有可能建立不只一個instance (同樣的directive出現多個的情況)，所以這種controller比較適合用來與child /sibling directive溝通；而要跨同種directive間的溝通用injected service比較好 (angular內的service全都是singleton，不論是透過Module.service/ Module.factory或$provide.provider註冊的)。
• 有繼承關係的Scope要注意存取parent Scope變數的問題，尤其是一些directive會建立Child Scope而使用者沒查覺的時候；請參考這篇文章。
  

跨瀏覽器相容性問題雜記

• 目前webkit瀏覽器(Safari/ Chrome v.28)在連結被點擊時不會把CSS中的:focus樣式給套上，目前的解法是替連結加上tabindex的屬性。
  

用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

float元素生成順序的差異

用下面的html，我預期得到左右各有一個button(float div)，剩下空間是status bar(div)
結果卻會是：

<div>
    <div class="pull-left btn">Button</div>    
    <div class="alert alert-info">Status bar</div>
    <div class="pull-right btn">Button</div>    
</div>

Button

Status bar

Button

這是由於第二個div在生成的時候就先將其父元素剩下的空間填滿了(block元素的特性)
第三個float div則被擠到了下面

所以將生成順序調整一下，讓float div先生成，這樣就不會被擠下去了

<div>
    <div class="pull-left btn">Button</div>    
    <div class="pull-right btn">Button</div>
    <div class="alert alert-info">Status bar</div>
</div>

Button

Button

Status bar

不過div的背景依舊會填滿父元素的空間，只有content會跟著float元素排版
此時CSS加上overflow，設成hidden或auto就可以正確的調整背景大小到float元素占據後剩下的空間了

<div>
    <div class="pull-left btn">Button</div>    
    <div class="pull-right btn">Button</div>
    <div class="alert alert-info" style="overflow:hidden;">Status bar</div>
</div>

Button

Button

Status bar

延伸閱讀：
All about floats

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

此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;
}

Backbone.js 雜記

版本1.0.0

• extend Backbone.View 時傳入的參數：events，格式為
  

  {'event selector': 'callback'}

  底層使用 jQuery.on(event, selector, callback) 來完成事件註冊，要注意的是如果 selector 有值，根據 jQuery api 這事件只會發生在根 DOM 下符合 selector 條件的子 DOM 上。

  When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

• Backbone的View與Model要達到資料與顯示同步，得自行從View用listenTo()對Model的資料變動時的事件作處理