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/

html5 data-attribute

以往JavaScript和CSS都要透過id或是class和HTML產生關聯，
造成典型的問題就是一個CSS的style用不到了，
但是怕刪除class讓JS失效.
目前最新的解法是：JavaScript少class。
改用 HTML5 data- attributes 來當JS和HTML之間的橋梁
Twitter Bootstrap:
css => class="nav nav-tabs"
js    =>

優點:
1.可以定義一些不需要顯示在前端的資訊(ex:id)
2.分離js , html ,css

ref:
https://www.christianheilmann.com/2012/10/10/data-attributes-rock-as-both-css-and-javascript-know-them/

http://minipai.tumblr.com/post/34152230626/%E6%9C%AA%E4%BE%86%E5%8F%AF%E8%83%BD%E6%9C%83%E7%94%A8%E5%89%8D%E7%AB%AF%E5%88%86%E9%9B%A2%E8%A1%93

http://sincode.blogspot.tw/2014/09/html5-data-data.html

https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/

Open new tab without popup blocker after ajax call on user click | 用ajax開新tab時，避免瀏覽器會詢問是否可開

是這樣的，我網頁上有個按鈕，點擊時會去
用jquery的ajax http get 去跟後端取資料，
並且取得後會開啟一個新分頁.

此時有個現象，
當ajax http get裡面的參數"async"設為true,
開新分頁時，browser 會問你可不可以跳視窗.

當ajax http get裡面的參數"async"設為false,
開新分頁時，browser 就不會問，而是直接地就
開啟新分頁.

PS:開啟新分頁是用window.open(url, '_blank')

以下為網友"Kenqr"的回答:

非由使用者的操作直接引發的開新視窗 瀏覽器會詢問，
點按鈕後直接開新視窗會被視為是使用者的操作引發的，
但async true時會在另一個thread執行，就不會被當成是使用者的操作，
可以改成點擊後直接開新分頁，新分頁裡再用ajax讀資料，
或是先開新分頁，原分頁讀到資料後再傳給新分頁應該也行

==================================
ref:http://stackoverflow.com/questions/18885676/open-new-tab-without-popup-blocker-after-ajax-call-on-user-click

AdBlock plus hids elements with ids or class with the word “ad”

chrome如果有裝adBlock的話在，html中 class的命名盡量不要出現以下相關字眼. => *ad*,*banner* 來源(https://easylist-downloads.adblockplus.org/easylist.txt)

[js] use jquery simulate trigger click event

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}

Purpose:simulate click function,
i use for bind of dynamic load page.

[js] pass parameter between two web app

flow:web_A pass parameter to web_B

method: use http get
.in web_A 's js file
   
   var url = "url?"+window.abStoreUserToken+"="+data[0]['userToken'];
   window.location = url;  
    
.in web_B 's js file

   //handle url redirect
    var hashTagQuery = handleHashTagString(window.location.search);
   
   //get parameter from another web 
    if(hashTagQuery['abStoreUserToken']!=null){
         sessionStorage.setItem(window.abStoreUserToken, _toJSONString(hashTagQuery['abStoreUserToken']));
    }
  
   //change url without reload, and clear ori url from history
    window.history.replaceState("object or string", "Title", "url without parameter" );
    
    
  

ref:
http://www.myexception.cn/javascript/249482.html
http://stackoverflow.com/questions/1961069/getting-value-get-or-post-variable-using-javascript

jquery screen resize event

    $(window).on('resize', function() {
        var win = $(this); //this = window
        console.log(win.height());
        console.log(win.width());
    });

Purpose:Do things when screen be resized

close modal when url is change (use hashchange event)

    $(window).on('hashchange', function(e) {

        console.log("hashchange");
     
        $('#playAudioModal').modal('hide');

    });  

Purpose:Do things when  when url is change

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

bootstrap modal close event

   
$(document).on('hidden.bs.modal', '#your_modal_id', function() {
        console.log("you can do things here");
    });
  

Purpose:Do things when modal closed

get index of selected option with jQuery

//Just use the selectedIndex property of the DOM element:

 alert($("#dropDownMenuKategorie")[0].selectedIndex);

//reason:
// property. Adding [0] converts the jquery object 
to a javascript object which has the selectedIndex property. 
This example won't work without [0] 

more detail about selectedIndex
http://www.w3school.com.cn/jsref/prop_select_selectedindex.asp

Purpose:
as title

[粗心] 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());
    }

LiveReload with Sublime Text 3

1.
下載
https://github.com/Grafikart/ST3-LiveReload

2.
解壓縮後改名成LiveReload

3.
放到C:\Users\lewis\AppData\Roaming\Sublime Text 3\Packages\
(Preferneces->Browse Settings)

4.
改Settings-Default
Preferneces->Package settings ->Settings-Default
{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

5.
chrome的擴充套件
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

(成功後空心icon會變為實心)

difference between local storage and session storage / local storage session storage 的不同

在跳轉頁面時不想要跟server重要資料，
或是要將上個頁面的大量資料帶到下個頁面，
此時可以用 local storage  and session storage，
這兩這有何不同?

A:前者在瀏覽器關掉時資料還會被保存，後者則不會.

保存方式為key-value的形式，用法



參考:
http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies
http://jerryzou.com/posts/cookie-and-web-storage/

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

[jquery] prevent a parent's onclick event from firing when a child anchor is clicked

.html


this is test
    
    I don't want #clickable to handle this click event.

.js
$("#clickable a").click(function(e) {
   //do something
   e.stopPropagation();
})


$("#clickable").click(function(e) {
   //do something
   alert('clickable');
})

here is link that you test
http://jsfiddle.net/grp10d10/1/

jQuery用load方法加入的html無法bind on event

   假設 navbar-brand 為用jquery load進來的html
    
    此時下面寫法無法執行
    $("a.navbar-brand").on("click", function() {
        //code here

    });
    
    解法一
    不要用jquery load 進html，

    解法二
    Event Delegation
    ex:
    $(document).on("click", 'a.navbar-brand', function() {
      //code here

    });


ref:http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html

[Use github to show(deploy) your profile html page][使用github發布html網頁]

[作業系統window 7 ]

如果想簡單發佈一個個人簡介的網頁，

可以考慮用github。


step1. 在github local端create project ，命名方式 => your github name.github.io
           ex:cihm.github.io

step2. 將你的網頁相關檔案放到你local端 你剛創的 github路徑。

step3. commit and sync



step4, 網址列打上your github name.github.io
           ex:http://cihm.github.io/

樣本網路上有很多種，
可以參考
http://html5up.net/

他們都是響應式網頁設計（Responsive web design，通常縮寫為RWD，
也就是可以自適應各種裝置的大小。