2016年8月8日 星期一

[Chrome] Notification 通知視窗




window.addEventListener('load', function () {
            //確認使用者是否允許跳窗,如果沒有,就跳窗取權限
            if (window.Notification && Notification.permission !== "granted") {
                Notification.requestPermission(function (status) {
                    if (Notification.permission !== status) {
                        Notification.permission = status;
                    }
                });
                
            }
            function NotifyMsg() {
                var option = {
                    tag: 'Notification',
                    body: '測試測試測試',
                    data: 'I am a data',
                    icon: '' //可以自訂ICON
                }

                var n = new Notification("Title", option);
                setTimeout(n.close.bind(n), 5000);
                console.log(n.data);
               
                n.onclick = function (event) {
                    event.preventDefault(); // prevent the browser from focusing the Notification's tab
                    window.open('http://www.google.com.tw/', '_blank');
                }
            }

            var button = document.getElementsByTagName('button')[0];
            button.addEventListener('click', function () {
                // If the user agreed to get notified
                // Let's try to send ten notifications
                if (window.Notification && Notification.permission === "granted") {
                    NotifyMsg();                
                    }

                    // If the user hasn't told if he wants to be notified or not
                    // Note: because of Chrome, we are not sure the permission property
                    // is set, therefore it's unsafe to check for the "default" value.
                else if (window.Notification && Notification.permission !== "denied") {
                        Notification.requestPermission(function (status) {
                        if (status === "granted") {
                            NotifyMsg();
                        }
                         // Otherwise, we can fallback to a regular modal alert
                        else {
                            alert("Hi!");
                        }
                    });
                }
                    // If the user refuses to get notified
                else {
                    // We can fallback to a regular modal alert
                  alert("Hi!");
                }
            });
          
        });



參考資料: MDN


2016年8月3日 星期三

[JQuery] slideShow 輪播

記錄一下 好用的輪播套件 slick 連結

然後下面範例是拿其他教學範例多加的功能

在特定的高度上會停止撥放幻燈片

     $(document).ready(function (){
            //window.scroll 抓取使用者滾輪高度..這裡自訂600
            var stop = false;
            $(window).scroll(function () {
                var scrollTop = $(window).scrollTop();
                if (scrollTop >= 600 ) {
                    console.log("stop" + scrollTop);
                    stop = true;
                } else {
                    console.log("r" + scrollTop);
                    stop = false;
                }
            });

            var num = 1;
            var tNum = 5;
            var duration = 2000;
            console.log("A");

            run();
            
            $("#box").mouseover(function () { stopRun(); })
            .mouseout(function () { run();})
      
            for (var i = 1; i <= tNum; i++) {
                document.getElementById("tab" + i).onclick = show;
                document.getElementById("con" + i).style.display = "none";
            }
            document.getElementById("con1").style.display = "block";
            document.getElementById("tab1").className = "now-tab";

            //在 autoShow 判斷是否停止撥放
            function autoShow() {
                if (stop) return;

                for (var i = 1; i <= tNum; i++) {
                    document.getElementById("con" + i).style.display = "none";
                    document.getElementById("tab" + i).className = "";
                }
                if (num < tNum) { num++; } else { num = 1; }
                document.getElementById("con" + num).style.display = "block";
                document.getElementById("tab" + num).className = "now-tab";

            }

            function show() {
                num = this.id.substr(3) - 1;
                autoShow();
            }

            function stopRun() { clearInterval(myInterval); }

            function run() { myInterval = setInterval(autoShow, duration); }
          
        });
來源:Flycan-輪播廣告 教學

2016年7月28日 星期四

[SQL] 暫存表 Temporary Tables

最近遇到一些情況

都是可以用到暫存表去解決的

偏偏以前從沒機會使用過(也沒聽過 XD)

感謝同事幫忙  >_<


狀況 1. 搜尋出來的資料量太大,EXCEL沒辦法全部貼上

---> 把資料撈進暫存表 再從暫存表下條件慢慢撈~~

狀況2. 依照EXCEL上的資料順序 去撈取資料, 再把撈到的資料貼到EXCEL上

  ---> 所以先把EXCEL的資料建表 order by 一些欄位 就可以了)

//狀況1
select email
into #tempMail
from member with(nolock)
where ..some conditions

SELECT * FROM #tempMail WHERE email LIKE 'A%' ORDER BY email

//狀況2
//暫存表的建法 是在table名稱前加上 #
create table #tmp_table (return_id nvarchar(30) , pid nvarchar(20))

//建完後insert資料
 insert into #tmp_table(return_id ,pid) values('XXXXXX','YYYY')




[SQL] 依照 in 來排序


// 這裡是用 ,pid, 當作排序依據 charindex(exp1,exp2)會回傳exp1所在的位置,起始值是1 
select pid,name
from temp
where pid in ('p004','p008','p435','p123','p056')
order by charindex(',' + cast(pid as varchar(10) + ',' , ',p004','p008','p435','p123','p056,' ))


//如果排序的對象有空白(不管空白是在字串前或後) 可以用 rtrim() 來Trim掉空白
select rtrim(pid),name
from temp
where pid in ('p004','p008','p435','p123','p056')
order by charindex(',' + rtrim(cast(pid as varchar(10)) + ',' , ',p004','p008','p435','p123','p056,' ))


reference:
rtrim()

charindex()