Unavailable

2013/09/26

用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

2013/08/18

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之前的溝通：

配合$rootScope(或parent scope)使用event handler來處理child scope間的溝通(Scope.$on及Scope.$emit，Scope.$broadcast)
或以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的屬性。
```
 
```

2013/08/10

用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

2013/07/19

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

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

Status bar