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: '';
}

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;
    }
  • 關於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

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)




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