[RPG] fix chrome restart gif animate

動畫用 GIF 在呈現上好做多了～重點是美觀 Q__Q

在互動 click 時，就讓他跑一下 GIF...
gif restart 的用法，原則上就是
$('#imgXXX').attr('src', 'imgs/XXXX.gif');

不過～試著試著...發現 chrome 有點 bug...Orz...
（講好聽點是設計理念不同...但在我的情況看起來就是bugg...）

這問題曾出在
http://www.realmofprogrammersgamble.website/journal/ch1/jourif2.html
切換語系，重現劇情...
人在走的時後的動畫

http://www.realmofprogrammersgamble.website/imgs/event1/walk.gif

這個問題會發生在，GIF loop=1 的情況（通常gif 不重複 repeat != infinite，就是loop=1）
配合 Chrome 的加持就會出現...

GIF 只會在一開始的時後，乖乖的跑一次動畫...
之後你再重設 src/background 的 gif 時，他會一直定格在最後的 frame 上
（看起來就是不會動了Orz）

查網路出來有蠻多說法～和解法～

有人是用 src=XXXXX.gif?Time=new Date()
這個是有效的～強迫chrome 不要cache...
但是缺點在於 網路會一直去server 要新圖片，吃我的頻寬（＄）
還有 網路傳輸延遲的問題...

最後找到一篇～其實之前已經試了很多說法，都是死馬當活馬醫...
但是看到的當下也是挺傻眼的XD...（原來降子也行！）
這招真的挺妙的就是～有種騙瀏覽器的感覺XDXD...
http://stackoverflow.com/questions/10730212/proper-way-to-reset-a-gif-animation-with-displaynone-on-chrome

簡單的說就是～ setTimeout 延遲一下下去 load 圖檔...
（話說這篇的點閱打勾還真的不高...）
是說延遲的部份，似乎會看該gif的大小，就gif檔越大，延遲要久一點才會出來～
（就當是圖檔重新下載的時間吧O_oa）

為了讓動畫看起來 smooth 一點，我稍為改進了一下，（直接display block，他開頭還是會有前面最後一格(setTimeout還是有delay，不管設多短 )，感覺會跳，所以再用 opacity 騙一下眼睛）

        // GIF restart
$('#img_g1').css('display', 'block');
        // 透明度0，就不會看到之前的最後 frame 內容
$('#img_g1').css('opacity', '0');
        // setTimeout 解決 chrome 不重跑 gif 的 frame
var ta = setTimeout(function()  {
$('#img_g1').attr('src', '/imgs/event1/walk.gif');
                // 他重跑時才看得到
$('#img_g1').css('opacity', '1');
}, 10);

        // 這段是讓動畫跑完就關掉了
var tb = setTimeout(function()  {
$('#img_g1').css('display', 'none');
$('#img_g1').css('opacity', '0');
}, 2500);

[RPG] 搖搖呼拉圈 gif animate

是說，做動畫還真的比想像中的難很多Q__Q...
最後就想說還是用 gif 就好了～剛好也有找到可以用的 gif 製作工具～
（gif 製作工具是很多沒錯，但不知道為啥，很多都沒有透明背景，超傷腦筋的，而且還花了一些冤枉錢T__T）
別說 photoshop/illustrator 都可以圖層轉 gif 之類的，因為人窮又不想用窮人版麻 |||Orz...
是說以前玩過，其實我並沒有覺得很好用，只是市面上也沒太多選擇～
一是覺得 太肥，很慢...而且改版後，越改越難用，去copy來的窮人版又都有病毒....
所以現在都儘量找平民的替代品中～

總之說一下目前用的 gif 製作工具～
mac 上的 GIF Animator，算便宜的～
https://itunes.apple.com/us/app/gif-animator/id512165265
只要讀入的是有透明背景的png，然後不要手賤去設背景色，產出就會是透明的GIF了～
（之前有買過用過別的，他們都很煩，強迫或多事去設定背景色，然後就都不透明了T__T）

接著試做了
http://www.realmofprogrammersgamble.website/journal/ch1/jourif1.html

準備底圖
http://www.realmofprogrammersgamble.website/imgs/event1/sport0.png
動畫圖 （loop=infinite）
http://www.realmofprogrammersgamble.website/imgs/event1/sport.gif

製做時圖一開始就是都 load進來了，基本上就只是一張顯示，一張不顯示。
html

<img src="/imgs/event1/sport0.png" id="img_t2" class="timg" style=" left: 58%; top: 52%; ">
<img src="/imgs/event1/sport.gif" id="img_t3" class="timg" style=" left: 58%; top: 52%; display: none;">

至於互動 click 時，就是切換 display 而已^^a...
為了加點樂趣～ 所以就讓運動的時間是 random 出來的～
而一般讓 GIF 重load 的寫法就是～ src 重新給值
ex: $('#img_t3').attr('src', '/imgs/event1/sport.gif');
是說，這gif 會一直重複，到是說沒加這段也還好～

click event
 var ts = randIntRange(1, 5);
$('#img_t2').css('display', 'none');
$('#img_t3').css('display', 'block');
$('#img_t3').attr('src', '/imgs/event1/sport.gif');
var tt2 = setTimeout(function()  {
$('#img_t3').css('display', 'none');
$('#img_t2').css('display', 'block');
}, 1000*ts+20);

是說，多搖幾次，會碎碎念的XD...
有一部分也是每年過年後要減肥的心情|||Orz...

[RPG] 搖春花 more and more and animate

原本並沒有打算做 X搖錢樹（O搖春花）的，只是因為卡發糕卡太久～
又覺得效果不太好＝.＝|||...
剛好又碰到過年前，軍心渙散（反正大家都在等過年，也都不想多事）
是說有點閒，就開始想東想西的～
想說過年麻，大家都喜歡招財進寶一下～
所以～那就來搖一下好了XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

搖春花～

其實多搖幾下，會越來越多，最後就會變成下雨囉XD...

這次的重點在於， 越來越多的 span（＄），random，和 jquery animate 位移...

有大概試一下，在pc上 chrome/firefox 就大概可以上到 三百，四百個物件都感覺還好～
但是手機就....手機在一百多個物件後就開始有明顯的 lag...
（看硬體啦，我中階手機跑得挺痛苦的，但聽朋友測 ipad 順順）
所以將就配合一下，改成手機可以接受的數量就好了～
（原本想判別解析度，做物件數量差異，但後來想到還有直式/橫式，就懶了一_一）
不過寬度到是會影響 $ 字的大小（當量不夠大時，把東西變大，看起來也就滿滿的了XD）

單一作法其實都蠻簡單的（就是設定合理區間內，一直random）
不過就是整合了好幾種，好幾項～
花最多時間是在調整區間...
還有手殘改壞或是覺得效果不對時，在茫茫的參數海中找是誰的錯Orz...
（這篇的動畫又做太長，光要等他跑到那段，30s又過去了Orz...）

拼命用的 random function
function randIntRange(min, max)  {
var tmp = Math.floor(Math.random()*(max-min))+min;
return tmp;
}

jquery animate 有個優點就是，他同一個 元件(div/span) 的 animate 是有照順序的，但不同 元件要照順序還是只能用 setTimeout。不過也已經好用很多了，
貼一下噴錢的動畫實作

//多久位移一次（移動時間）
var pms = randInt(70)+50;
//每次位移x  （平移量x）
var dx = randInt(750)+10;
//每次位移y  （落下量y）
var dy = randInt(10)+5;
// 往右跑，或是往左跑 （方向）
var isup = randInt(10)+1;
//移動幾次
var ts = randInt(10)+5;

for(var i = 0 ; i < ts ; i++)  {
// 仿拋物線的位移量
var vx = Math.round(Math.pow(i*dx, 0.5));
var vy = dy*i;

if (isup > 5) {
tx -= vx;
}  else  {
tx += vx;
}
ty += vy;
// 修正不要跑出畫面（不然會跑出 scroll bar...但這參數沒有調很好，偶爾還是會）
if (ty > maxh-40) {
break;
}
if (tx > maxw-40) {
break;
}

// 交給 jquery animate 做移動～
$('#'+gid).animate({
left: tx,
top: ty,
opacity: 1
}, pms, function() {
;
});
}

[RPG] 發糕 canvas animate

在發糕篇～
http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

概念圖一開始出來的時後，是沒有發糕這個東西的～
就有人說，那顆蛋是不是也要裝飾什麼～
嗯？！一開始有想過在蛋上貼個「滿」「福」之類的...
後來就想到老媽這幾年都自己在做發糕～想說發糕底下用碗裝，跟底座也很像阿XD～
（就有一年陪老媽準備年菜時，偶有被訓過，發糕在蒸的時後，不能偷看，不能亂講話，靜靜等著就好....）

原本的發糕動畫，是 css transform，scale 從小到大～
但被嫌棄說...有 power point 的 fu...Orz...
聽了真是受傷（不過認真的想，這是事實沒錯～囧/）
不過說真的，我又沒看過發糕在發的時後，是長怎麼樣的XD...當年被禁止偷看阿阿阿～
後來就討論說，可能是像土司蛋糕膨起來的樣子吧O_o?...
（雖然後來實作出來像是烤麻糬XD，覺得這樣比較有趣麻^~^...）

這段動畫是用 canvas 畫出來的，真的是有寫到起孝的感覺Orz...
重點大概就是～ 數學真的很重要，canvas 的 ctx.globalCompositeOperation = 'destination-out' 好用，變量計算時，要用相對值（比率）而不是絕對值（螢幕大小問題）....

用 canvas 先畫出原圖，底下是個微倒梯形，上面則是圓形～
一開始用 lineTo/arc 畫範圍，但....有個問題在於算出來的小數點在畫面上被進/去位時，就有一條很蠢的細線.....最後是用 向量繪圖概念的 圖形相加減裁切，總算得到完美的土司形了...
http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
PS: canvas  基本的 clip 非常難用，可以用向量圖概念處理比較簡單

function cakeCurve(ctx, w, h, p) {
var of = 5;
var h2 = h-h/3;

//cx = w/2, cy = p, the point= 0, h2
var cx = w/2, cy = p;
var r = Math.round( Math.pow(Math.pow(cx, 2) + Math.pow(h2-cy, 2), 0.5) );
//console.log("cx="+cx+", cy="+cy+", r="+r);

ctx.beginPath();

if (p == 0) {
ctx.moveTo(0,h2);
}  else {
//x,y = w/2(cx), y=h2, sin= ??/r
var a1 = r*1.0/w*0.5;
var a2 = w*0.5/r;
ctx.arc(cx,cy, r , a2, a1);
}
ctx.lineTo(w ,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(of, h);
ctx.lineTo(0, h2);
ctx.moveTo(0,h2);
ctx.closePath();
ctx.fill();

//clip left coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0,h2);
ctx.lineTo(of, h);
ctx.lineTo(0, h);
ctx.closePath();
ctx.fill();

//clip right coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(w,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(w, h);
ctx.closePath();
ctx.fill();
}

接著就是讓他動起來～也沒啥就是 setTimeout 叫他拼命畫 Orz...
概念就是 frame rate (fps)， 反正 60 fps就已經看不出來了～
讓我意外的是，手機在畫沒有lag感...小塊的動畫要用 canvas 來重繪，看起來還是可行的～
（倒是之前蠢蠢的，沒注意到小螢幕變量要用 相對值，而不是絕對值...還以為是手機畫不出來Orz）

  drawCake('ccake', clrs[0], w, h, 0);
  var pms = 70;
  var delay = 0;
  for (var i = 0 ; i < clrs.length ; i ++) {
   var aa = "drawCake('ccake', '"+clrs[i]+"', "+w+", "+h+", "+(220-i*5)+")";
delay += pms;
setTimeout(aa, delay);
  }

function drawCake(cavId, clr, w, h, p, scale)  {
var canvas = document.getElementById(cavId);
    var ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;

if (scale) {
 ctx.scale(scale, scale);
}
var grd = ctx.createLinearGradient(0,0,0,h);
grd.addColorStop(1, clr);
grd.addColorStop(0.5, '#ff9100');
grd.addColorStop(0, '#e65100');

//ctx.fillStyle=clr;
ctx.fillStyle=grd;
cakeCurve(ctx, w, h, p)

//ctx.stroke();
}

不過因位調整變量，顏色等....實在讓我覺得太累了...
數學不好還硬要模擬物理，真是太為難了...
（塗色只用漸層，沒有陰影打光，fu 整個就不太好（跟整體的畫風有不協合感）～突然想到以前當 3D 遊戲剛出來時，那種粗糙生硬的 3D 模組和顏色，就像這種fu...還不如 2D苦工繪圖動畫）
一.一所以以後不會搞這種的，是說也沒有那麼多時間可以研究這塊Orz...

[RPG] 抖抖 jquery animate shake

在 css3 裡， animate 已經可以實用了～
不過在一些 互動式的動畫，我個人比較偏好用 jquery animate，主要是比較好控制～
因為有時後不只是單純的只有一個div在動～

是說～這個是只有自己shake一下啦XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour2.html

這隻點一下會抖一下XD...


先抓 圖的原始位置
t2x = parseInt($('#img_t2').css('left'));

晃動的位移
var ot = [3, -3, 3, -3, 3, 3];

click 時的 jquery animate
function rockDemon() {
for(var i = 0 ; i < ot.length ; i++)  {
$('#img_t2').animate({
left: t2x+ot[i],
}, pms, function() {
;
});
}
}

[RPG] 對話字幕 talk animate with setTimeout

身為 RPG...最重要的就是對話啦～～
然而，對話的表現方式是 一字一字的跑...（拖台錢真好用）
但是～ HTML 主要的用途是 閱讀，一開始的理念就不一樣～

所以想了有點久～就以基本的方式組合 jquery.append 跟 setTimeout 來模擬～

來貼一下當初最早早開發的原型（在 404 page 裡）
http://www.realmofprogrammersgamble.website/404.html
http://www.realmofprogrammersgamble.website/js/anit.js
 很粗糙的手法，直接一個字一個setTimeout append 出來，但因為字數不多且又單純，好像就感覺還好～
function captionEffect(tid, str, isfadeout, dely) {
    anitid = tid;
    anitword = str;
    anitidx = 0;
    if (dely && parseInt(dely) > 10) {
        anitdelay = dely;
    }
    $('#'+anitid).html('');
    if (anitword && anitword.length > 0) {
        for (var i = 0 ; i < anitword.length ; i++) {
            setTimeout(anitappend, anitdelay*i );
        }
        if (isfadeout) {
            setTimeout("anitfadeOut('"+tid+"')", parseInt(anitdelay*anitword.length+1000) );
        }
    }
}
  
function anitappend() {
    $('#'+anitid).append(anitword[anitidx]);
    anitidx++;
}

但是～等到要做完整對話時，問題就開始頭大了Orz...
而且上面的作法其實是有問題的，一是 html 的 setTimeout 很....有問題！～有時候他自己本身執行會lag（網路load圖，或開很多網頁，跑到一半開別的網頁又回來點）...二是同時開 N 個 setTimeout 在那邊等，根本不安心Orz...
只能說 JS 本身沒有 Thread 的概念，很難處理Q_Q...

所以後來又做了一個改良版～ 基礎還是 jquery append 跟 setTimeout...
但只是 在 setTimeout 裡 才跑下一個 setTimeout （有點像遞迴自己call自己到完）... --> 同時間只有一個 setTimeout 在跑～
其一開始的原型大概是 像這樣子@@a （為了做一堆例外和設定，opt 加到整隻都快不認識了XDXD）

function tanittalk(did, w, tw, ms, opt) {
  if (ms && parseInt(ms) > 0) {
    ms = parseInt(ms);
  }  else  {
    ms = 60;
  }
 
  if (tw && tw.length > w.length) {
    var add = tw.substring(w.length, w.length+1);
    var nms = ms;
    if (opt && opt[w.length]) {
     
    }  else  {
      w += add; 
    }
    $('#'+did).append(add);
   
    if (tw.length > w.length) {
      setTimeout("tanittalk('"+did+"', '"+w+"', '"+tw+"', "+ms+")" ,nms);
    }
  }
}

不過就是用 append 時要注意的是～ 當要換行 <br> 時，是要一次 append('<br>')，如果呆呆的一個字一個字的就會 GG...當然同理，有要用到 tag，內碼 等各種 html 格式內容都是這樣～
還有一些跳脫字元，或是 「'」、「"」都是要再例外處理的部份QQ～

補充一下， setTimeout 這東西阿，在正常看的時後是不會出事的，
會出事的情況大多是，當 page  lose focus 時（另開視窗，或是看其他page）
browser 會自動暫停運作，但是 delay的時間並沒有被暫停。
所以～當去別地方看完回來後，會突然發現原本頁面的 setTimeout 一次全跑出來了XD...
因為去別的地方逛完回來，那些delay全都結束了，就不會照心中所想的順序跑出來...

所以若是很要求順序的顯示，就要注意了～

[RPG] 可以轉的轉盤 jquery css3 transform rotate

在第一篇的頁面裡
http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

這裡的轉盤其實是可以動的～～（有人發現嗎Q_Q...）
不過在其他頁裡是不能動的～我把他設定成，畫面上角色人有在那操作才可以轉阿～
（OS：沒人在那邊也可以轉的話，那是阿飄阿阿阿～～）

做法麻，還是要先切圖QQ...

然後疊前景（就是那個人）
還得要有一個 點擊區

總合起來起來的html 就是～～
<!-- 轉盤圖-->
<img src="/imgs/egg/egg_t0.png" id="img_t" class="timg" style="left:72%; top: 65%" >
<!-- 前景-->
<img src="/imgs/egg/egg_a0.png" style="width: 100%; height: auto; position: absolute; top: 36px; left:0;" >
<!-- 點擊觸發區域--> 
<div id="clk1" class="imgclick" style="left:72%; top: 65%;"></div>


js 在 init 時加入 click event～ 透過 jquery css 操作 css3 transform
    $( "#clk1" ).css('width', $('#img_t').width());
    $( "#clk1" ).css('height', $('#img_t').height());
    $( "#clk1" ).click(function() {
        img_t_deg += 5;
        imgtrotate(img_t_deg);
    });

function imgtrotate(degrees) {
    $('#img_t').css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)', 
      '-ms-transform' : 'rotate('+degrees+'deg)', 
       '-o-transform' : 'rotate('+degrees+'deg)', 
          'transform' : 'rotate('+degrees+'deg)', 
               'zoom' : 1
    });
}

就可以得到這樣的效果～

其中大概有幾點就是，因為 jquery 的 animate 不支援 transform，所以想要做到平滑的轉動是有難度的～ 也許要額外搞一個可以動態產生的 css animate class 出來，但是就又會延申出 remove class/add class 的問題 （因為他是由 click 驅動，人在亂點時，很難跟他說只可以點幾下，不可以double click/balabla...），總之這部份等之後有想到再來實作看看好了～

[RPG] 有飄的煙 css3 animate

話說為了做網站，忙了好一陣子Q_Q...底層和走向現在是稍微好用了一點，總算可以來做點筆記了Orz...

一開始把首頁分享給朋友看，就有人說，那個煙怎麼不會動，轉盤不能轉...
然後為了阿宅的名譽，也要給他搞出來XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

煙的作法，簡單的說就是有底圖，上面再貼一張會飄的圖
切圖的時後，就是底圖：

再切純煙的圖：（底是透明色）

再幫純煙的圖 上透明(opacity) 並加上  css 動畫(smoke)
<img src="/imgs/egg/egg_s0.png" id="img_s" class="timg smoke" style="left: 3%; top: -8%; margin-top: 36px;" style="opacity: 0.2;">

.smoke {
  -webkit-animation-name: smoke;
  animation-name: smoke;
  -webkit-animation-duration: 5s ;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  animation-iteration-count: infinite; /*infinite*/
}

@-webkit-keyframes smoke {
  from {
   
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

@keyframes smoke {
  from {
   
  }
 
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

其原型是根據
http://daneden.github.io/animate.css/
一個搖的很慢的，形變有在調整一下的 shake...

但其實這裡面最難的是，怎麼把圖片對準Orz...
還有解決在不同尺寸的 browser，手機還轉來轉去的鬼問題～
這部份以後有空再來吐口水好了XD...

html note

最近為了做 html5 的動畫快被這些無言的瀏覽器搞死，先在這裡做個備註～
唉～

是說標準常用的做法其實現在的瀏覽器，規格都有跟上了。
但就是有些不常用的東西，就開始各做各的＝_＝|||...然後就為此要一直被表...


-----------------------------------
border color
一般 border color 就是一般的純色 或是透明色（用 transparent）
若是用 rgba 來定 border color...

玩了一下 border 特效～
目前只有FireFox 可以正常的做到，且透明有正確疊加
Chrome 應該是直接不支援...
Safira 則是出現了一個不知道什麼邏輯的結果....

總之就是要玩 border 特效，要注意每家的支援～～
------------------------------------
不知道是不是我的錯覺～
總之～好像 os 更新後～在 Firefox 預設的字型 正黑體 跑掉了，試了一下，用英文的就不會有錯。 （至於 chrome 可以正確的讀到 中文名）
@font-face {
  font-family: MyCustomFont;
  src: local(WenQuanYi Zen Hei),
       local(Heiti TC),
       local(Microsoft JhengHei),
       local("微軟正黑體");
}

-------------------------------------
js 裡給 0 的話 是 false...
有時候寫順了就開始混亂～囧/

--------------------------------------
background-color
FireFox  default = transparent
Chrome defulat = rgba(0, 0, 0, 0)

Chrome 比較麻煩的是 他用透明度0，要小心 orz...

-------------------------------------
width: auto
FireFox default 會用原始圖片大小
Chrome 會給 width=0, height = 0...但如果你對視窗 resize 後就跑出來了，很妙的作法....

用 jquery load image 進來在chrome 也會 width=0, height=0...
所以要改用temp Image onload 的方式自己拿長寬給 Chrome...


------------------------------------
select option onclick
FireFox  support option onclick event
Chrome NOT support

因為Chrome 裡的 onclick ，寫了是沒用的 <option onclick="abc()" >xxxx</option>
所以硬要寫就是...
<select id="myselect" onchange="this.options[this.selectedIndex].onclick()">
但是會有個缺點就是...
FireFox 會跑兩次(select onchange+option onclick)，Chrome 只會跑一次(select onchange)
如果跑兩次並不會造問題（只是效能差一點），那就將就點～
如果多跑會造成問題（counter...etc），那就哭著把寫法改掉吧～找別的觸發點...

-------------------------------------
動畫用 jqeury 好還是 css3...
先說沒有用額外的一些 動畫或 繪圖的 lib...只有標準的jquery(沒有 jquery-ui)

看情況吧，jquery 的 animate 只對某些 css 的屬性有用，像基本的 top, left, width, height, color...etc。但對於新的 css3 transform 之類的就無效，用jquery也不是不行，可以用css 屬性資料做進去，但有些css 我記得是有幾個css load進去不會被更新的，要強制到 refresh page的method 才會起作用（是很少。好像是動態去改 hover 的 css，正常人不會那樣做XD）

css3 的動畫不是不好，但不好做互動的部份（有按才反應的那種）。但可以用在一些系統面固定一直跑出來，或是hover 的效果 ，就還不錯。
因為 css3 動畫是用 addClass ，removeClass的方式進行。 addClass 是沒問題的。但 要 removeClass 時，其實是沒有辦法只移指定的那個.....只能全部移除，然後再把不該移除的class 加進來～  像 xxx.removeClass().addClass('orgin')，但～就很蠢阿Orz..而且若是他的某些屬性是操作過程有被改過的(ex: top, left)就GG...硬要全用css 也不是不行，但就得玩 徹底的 MVC 來做～但...一_一a 目前不想～

所以互動性強的動畫，目前還是 jquery animate 跟 setTimeout 處理
（稍微可以理解為啥 flash 轉 html5 有難度）

-----------------------------------
這是舊ie 的問題， ie8 以下沒有 .trim() 的 function

prevent scroll by keydown arrow down...and div focus

補個最近的筆記～
其原由是想替 div加一些hot key 來做事情...

一般的純 div 預設是沒有 focus 的功用～
就算你直接寫 $('#aaa').focus() ，他還是不理你～

重點是要先加個屬性～tabIndex=0
可以參照這裡的說明～蠻詳細的～
https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

< 0  為不能被 focus/tab，就沒辦法被focus（就普通div預設並沒有設定）
 >0 設定tab 的順序，文中是不建議使用，是怕亂跳亂掉吧～
=0 大部份的input, button 預設都有～

------------------------------------------------------------------------
另外，想取到目前被 focus 的元件～可以使用傳統 js 取得就好～
document.activeElement
方便又好用～

要另外設定 focus 的 css，要:focus 和:active 雙管其下～比較不會有問題～
（聽說chrome 好像吃  active 不吃 focus，沒特別試就是）
.mycss:focus, .mycss:active {
    border: solid 1px blue;
}

------------------------------------------------------------------------
在一般的行為下，按箭頭的上/下是會捲動整個頁面的scroll bar...
就跟page up/down一樣～

不過有時後～需要在對特定的元件按 上下左右 鍵時～
會連動到畫面的scroll bar～就～一整個很乾尬XD...
所以就變成重點在～ 需要各自有 上下左右 的元件的 keydown listener 下手～
document.xxxxxx.onkeydown =
function(event)  {
       var keycode = event.keyCode;
       ..............
       event.preventDefault();
       return false;
};

總之，重點是在
1. 要使用 onkeydown listener (因為這是第一個觸發的，如果用 keyup就來不及了)
2.  event.preventDefault(); 和 return false; 防止其他瀏覽器接下去的行為～

大概就是降子～

CSS3 resize and catch change event

在 CSS3 開始，div 也可以使用 resize的參數了～
http://www.w3schools.com/cssref/css3_pr_resize.asp


以非常簡單的設定方式，就可以得到一個隨意拖拉變大變小的區域～

BUT...又來了～
雖然CSS3 已經開放這個功能，但是tag上的onresize event 卻還沒搞好Orz...
當然是說只是單純不需要與 js 互動的話是沒問題，但是通常都還是要防呆之類的，抓不到事件觸發就很無言...

網路上有些作法討論，後來我是覺得暴力破解真是～～有點強過頭Orz...
（唯一的缺點就是，效能吃比較重吧，但是看跑起來似乎蠻流暢的就降子吧XD）
來源在
http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events
與
http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery/1397500#1397500

簡單的說，就是只要css(style)的值一變動，就會跳進這個event，管你變長變短，變醜變漂亮，全都逃不掉的窮舉法～

試作的example如下：（有搭配jquery在用）
<style>
#test  {
    width: 200px;
    height: 200px;
    border: dotted 1px #888888;
    resize: both;
    overflow: auto;
}
</style>

<script>
$(function() {
    document.getElementById('test').addEventListener('DOMAttrModified', function(e){
        if (e.attrName === 'style') {
            //console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
            divInfo(this);
        }
    }, false);
   
});
function divInfo(elem)  {
   
    var w = $(elem).outerWidth(true);
    var h = $(elem).outerHeight(true);
    var x = $(elem).offset().left;
    var y = $(elem).offset().top;
   
    var msg = '('+x+','+y+')==>'+w+'*'+h;
    $('#info').html(msg);
}
</script>

<body>
<div id="info">test info</div>
<div id="test" >TEST</div>
</body>

Html5 Storage

在HTML5的規格內，加入了一項新的東西，就是Storage
http://www.w3schools.com/Html/html5_webstorage.asp
如w3school的說明～ 比cookie好～就是打算來取代cookie的部分功能～

用法上已經改得相當簡單，把他想成是map。
只要setItem('test', 'tttt')，getItem('test')，clear()...
就已經可以滿足很多的使用情境～

另外有localStorage，與sessionStorage的 內容值存取範圍差別，
在測試底下，sessionStorage，就大概是指用同一個頁面access的範圍
（開啟新分頁，或是瀏覽器重開就會不見）
而localStorage則是在同一瀏覽器上都可以運作，但是無法跨瀏覽器。
若要跨瀏覽器還是只能靠Server端儲存～

更詳盡的說明可以參考
http://apress.jensimmons.com/v5/pro-html5-programming/ch11.html

不過在打算使用這功能時，在規劃時要注意的是，到底能存多少資料在裡面？
查了一些網路文章，結論就是看各家瀏覽器的實作...而瀏覽器目前最少的應該是5M...
（應該會隨著時代而慢慢增加吧～如果網頁應用發展的好的話～～）
相較之下，原本的cookie 大概在4k左右，加上有分scope，在應用上會比較安全點，怎麼說Storage應該都是比較好的選擇～



貼一下簡單的測試程式
var supportStorage = false;
function checkStorageSupport() {
  //sessionStorage
  if (window.sessionStorage) {
    //alert('This browser supports sessionStorage');
    $('#show_session').html(sessionStorage.getItem('test'));
  } else {
    //alert('This browser does NOT support sessionStorage');
  }
  //localStorage
  if (window.localStorage) {
    //alert('This browser supports localStorage');
    supportStorage = true;
    $('#show_local').html(localStorage.getItem('test'));
  } else {
    //alert('This browser does NOT support localStorage');
  }
}

function saveIconList()  {
    if(!supportStorage)  {
        return;
    }

    var h1 = $('#myinput').html();
    localStorage.setItem('test', h1);
    sessionStorage.setItem('test', h1);
}

Html5 drag anywhere

後記:
目前支援這個功能的，測試後FireFox還是最完整。
Chrome是半殘，dragover(判別該區塊是否可以drop的部份)在本機上運作是正常的，但要是放到網路上的網頁就會取不到值event.dataTransfer的資料，然後就會出現問題。
基本上就是在 drag_over時，讓他抓不到event.dataTransfer.getData時，讓他event.preventDefault(); 是就可以解決Chrome的問題（但這樣就不會出現禁止放置的圖示，弱了一點）
但還好drop時抓值是正確的，變成drop時要判斷好一點，誰能放誰不能放，擋掉就可以解決了。
-----------------------------------------------------------------

以往要做到網頁元件的拖拉，第一個想到的就是 jquery ui （jquery ui真的非常強大＠＠/）

但現在有個新的選擇，HTML5就開始內建這個功能了～
好站w3school 點出～在 IE9 應該就可以使用了～
http://www.w3schools.com/html/html5_draganddrop.asp

先說的是～HTML的用法與 jquery 不同～可能概念上也有點差異～
目前感覺起來，jquery是偏functional的使用（比較好上手）～
而HTML5在整體上似乎定義的更清楚（功能比較完整喔）～

先來看HTML5上的操作行為～找到一個網站寫得很讚～
這網站做為讀HTML5的參考書應該不錯～
http://apress.jensimmons.com/v5/pro-html5-programming/ch9.html

在HTML5上實作，要求一定要同時定義上 drag 和 drop 的部分才能運作。
（jquery可以只寫 draggable）
所以若只要 drag 的功能時，重點把他想成全部（body）都可以 drop 就是了～

另外在HTML5上，drag的每個階段，都要自己撰寫定義，缺點是有點麻煩，好處是會寫的話，變化可以很多，還有會顯示一個小icon （口跟禁止）來表示能不能放在那邊（小icon也可以改圖），相對來說UX是做得比較完整的～

HTML碼
一般可隨便拖的都是浮動在網頁上 ，Style基本上就是 position:absolute; float:left。
另外加入 HTML5 新attribute  draggable="true"
<div id="mydrag" draggable="true"
    style="position:absolute; float:left; right: 10px; top: 50px; width:50px; height:50px; border: solid 1px #AAAAAA;">Drag Me</div>


自訂function
//在開始拖拉時，就先將該項目之id，位置寫進 dataTransfer，以便後面判斷取用
function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("pos",
        (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
    var dragdid = event.target.id;
    event.dataTransfer.setData("did", dragdid);
}
//在放開時，將該div改變位置移動放到新的位置
function drop(event) {
    var offset = event.dataTransfer.getData("pos").split(',');
    var dm = document.getElementById( event.dataTransfer.getData("did") );
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';   
    event.preventDefault();
    return false;
}
//不限制也不管他，(ondragover、dragover 這兩個行為還是不一樣，但在此期望的操作方式上，可以一起用)
function drag_over(event) {
    event.preventDefault();
    return false;
}

元件設定初始，可利用 js 的方式加入，
或是在該 div 上直接寫上event， ex : dragstart="drag_start(event)"，
不過在外面統一加入比較好分工～
    var dm = document.getElementById('mydrag');
    dm.addEventListener('dragstart',drag_start,false);
    document.body.addEventListener('ondragover',drag_over,false);
    document.body.addEventListener('dragover',drag_over,false);
    document.body.addEventListener('drop',drop,false);

要注意的是～雖然已經將body設為可以drop的部分～
但是～若是網頁沒有填滿整個螢幕（通常是高的部分，沒到底的話），是不能放的XD...