a bug in Chrome's live-edit CSS/JS. Notice how the number changes on each request.

Error msg:

Error shows “Failed to get text for stylesheet (#): No style sheet with given id found”

Ans:

closed all the files in the 'source' tab.

bootstrap disable navbar collapse

html

css

.disable-collapse {
    .navbar-collapse.collapse {
        display: block!important;
    }
    .navbar-nav>li,
    .navbar-nav {
        float: left !important;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px !important;
    }
    .navbar-right {
        float: right!important;
    }
}

參考
 http://jsfiddle.net/t4ym3/

bootstrap set navtabs border

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
{
    border-color: #DDDDDD #DDDDDD transparent;
}

ref:
http://stackoverflow.com/questions/18949634/bootstrap-3-strange-thin-line-under-navtabs-in-firefox

[粗心] html avoid side-effect when use jquery clone

我在動態新增element(購物車，搜尋結果等等頁面)時，
會先寫一個template用來clone用，

但是發現為何css的呈現都會用最後一筆的樣子
找了clone用法https://api.jquery.com/clone/
也跟他無關，後來發現是自己犯傻了.

原因說明詳見下面範例註解處.


範例

    template    += ' ';
    template    += '  
';
    template    += '  
';
    template    += '   ';
    template    += '   
';
    template    += '    
name
';
    template    += '    
';
    template    += '    
';
    template    += '   
';
    template    += '  
';
    template    += '  
';
    template    += ' ';


    $template = $(template);
    
    for (i = 0; i < channelItemJson.length; i++) {

        var $newItemCol = $template.clone();
        $newItemCol.find('img').attr('src', window.itemImgPreUrl + channelItemJson[i]['localCoverPath']);

        $newItemCol.find('p').text(channelItemJson[i]['name']);

        $newItemCol.find(".channel-item-detail").on("click", {
            elements: $newItemCol,

        }, handler2ItemDetail);
        
        //$('.search-all-price-group').show();
        //this strategy will cause side-effect
        //beacuse there are many '.search-all-price-group' class 
        
        //this is right
        $newItemCol.find('.search-all-price-group').show();
         
        $("#scroll-container").append($newItemCol.fadeIn());
    }

CSS3 pointer-events

最近寫前端時想要一個功能是可以模仿bootstrap modal，
但又想做到可以支持上一頁下一頁的功能，
於是用了CSS3 pointer-events 這屬性，
有點像是android的frame layout
主要是參考這篇http://www.oxxostudio.tw/articles/201409/pointer-events.html


這邊直接在jsfiddle做測試

http://jsfiddle.net/P7c9q/534/

• pointer-events: none=> 此時ybox 不會有hover效果，並且將滑鼠移到 ybox& gbox交界處時gbox就會有反應.

• pointer-events: auto=>此時 ybox& gbox都會有hover效果，並且將滑鼠移到 ybox& gbox交界處時只有ybox才有反應.

.html

.js

.ybox {
    position: relative;
    width: 40px;
    height: 100px;
    background: rgba(255, 200, 0,1);
    z-index: 1;
    margin-top: 30px;
    pointer-events: none;
    //pointer-events: auto;
}

.ybox:hover{
  background: rgba(0, 50, 100, .8);
}

.gbox {
    
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 50px;
    background: rgba(0, 220, 170, 1);
    z-index: 0;
}
.gbox:hover{
  background: rgba(0, 50, 100, .8);
}

用bootstrap grid中的offset的特性 達到元件置中的效果

在grid system row裡，一行滿的話是12(col-md-12).
如果現在要將一個元件(col-md-8)
放入此row，則此元件會靠左.

要如何將其置中?

首先把12格想成分成每2格為一個，
所以總共有6個.
所以col-md-8佔了4個，

此時在元件加入屬性(col-md-offset-2)
他就會往右兩格.
這樣就達到置中的效果了.

式意圖.
|--|==|==|==|==|--|

==================
參考http://getbootstrap.com/css/

[css] window8 + scss(sass) + compass + sublime text3 & modify exist 2 scss project | also provide mac version

//相關安裝
1.install Ruby
2.命令視窗，輸入gem install sass
3.命令視窗，gem install compass

//編輯器
1. in Sublime Text編輯器，按Ctrl + Shift +P鍵，再輸入install。
(沒package control 參考http://lewisli1.blogspot.tw/2015/06/sublime-text3-without-package-control.html)
2. install sass ,SASS snippets ,Compass

//執行
1. cd to your project
compass creat .\(your project)

2.compass watch
請勿關閉此視窗，由於它會自動監控，每當Sublime Text一儲存時，就會立即轉存成css檔
(要到project那層呦)

//編輯器
alt+shift+2 (開兩個視窗)

//執行
將現有css做轉換
命令視窗:
sass-convert style.css style.sass
sass-convert style.css style.scss

//結論
總之就是在sass 資料夾裡面寫scss(sass)檔，
儲存時他會自己幫產出css檔放在stylesheets資料夾裡面

改完後來套套看