2016年1月24日 星期日

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

2016年1月17日 星期日

fix image width:auto

這問題似乎只有在chrome上會碰到~
在 IE 宣告陣亡之後,問題兒童的寶座快要交給chrome了= =|||...

測了很久,目前的結論就是,chrome的 width:auto,得到的 圖片 長寬不太正常....
正常在 firefox 上 width:auto 會得到 原圖片的大小,但在chrome上有時會有時不會=_=a...
(規則大概就是,開新chrome,開page的那第一次,圖片大小會有問題(有誤差),但是如果縮放視窗、全螢幕、F12,之後看就又對了= =a)

總之,一個一勞永逸的方式就是~自己取得原圖片的原始大小Orz..
此外,自己取圖片的大小並設定還有一個好處就是~
順便解 chrome 在  jquery.load(xxx.html) image進來時,那些  image 的長寬都是0 的問題...
然後搞笑的是...在我的情況下,firefox ctrl+F5時,圖片自動會變 24px??!!!....

一般網路上給的資源大多是只取一個圖片的原始大小,
但在我的case裡,是要全部的圖片都一起 縮放~
就改寫了一下~

重點就是... new Image 來暫存要讀的圖檔~
在 image onload 事件 時,可以拿到他原始的長寬...
然後為了要觸發事件, 所以在寫完 onload 事件後,再去把 image 的 src 指向位置過去。
http://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache
var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";
---------------------------------------------------------------

var myimgs = $('.myimg');
var tmpImg = [];
for(var i = 0 ; i < myimgs.length ; i++)  {
....  
tmpImg[i] = new Image(); tmpImg[i].alt = i; tmpImg[i].isload = '0'; tmpImg[i].onload = function() { var height = this.height; var width = this.width; $(myimgs[ this.alt ]).css('width', width); $(myimgs[this.alt]).css('width', Math.floor(parseInt(width)*imgscale)+'px'); tmpImg[this.alt].isload = '1'; //check if all image load ok?? var flag = true; for(var i = 0 ; i < tmpImg.length ; i++) { if ( tmpImg[i].isload == '0') { flag = false; break; } } if (flag) { ...... } } tmpImg[i].src = $(myimgs[i]).attr('src');
....
$(myimgs[i]).css('height', 'auto');
}

2016年1月9日 星期六

一個想做開心的網站

之前原本有想募款做個網頁工具的~
結果是蠻淒慘的~

但就想說當了那麼多年的阿宅...
也該發揮一點宅力~
(其實是因為之前寫了一些東西不想浪費)

就修改了一些方向,跟運作的方式~
開了個站台~
http://www.realmofprogrammersgamble.website/

不要再嫌這名字怎這麼長XD...
(每個朋友看到網址的第一個反應都是這樣~囧/)
這是為了配合原意阿阿阿阿~
Realm of  Programmer's Gamble...縮寫就會變成(RPG)

取名的一開始,就是要和 RPG 扯上關係~
原本我最早想到的是 TRyy Play Ground --> TRPG...
但就覺得這個縮寫的 rule 不合~
和朋友討論了幾天~ 總算有個我覺得很棒的名字:Realm of  Programmer's Gamble

不過因為 twitter 帳號有長度限制....字真的太長了|||Orz...
所以 twitter 上就用回個人名義的 TryyPlayGround ~

在這網站上的主軸開發,目前還是以自己的個人想法為主~
而文案與企畫討論,則是一堆都沒空的人慢慢搞出來的XD...

覺得有興趣的人,可以到 twitter 加個人氣喔 ^_^b...
https://twitter.com/TryyPlayGround



google compiler

之前有找了一下 min js 的工具。
覺得比較單純的就選用了  google compiler
https://developers.google.com/closure/compiler/


下載後解壓縮,就可以直接使用~
他是java base的程式,所以環境要有java...

指令大概就這樣子
java -jar compiler.jar --js D:\xxxxxxx\my.js --js_output_file D:\xxxxxx\my.min.js --language_in=ECMASCRIPT5

有比較特別用到的就是language,他的項目可以參考 底下的說明
https://developers.google.com/closure/compiler/docs/api-ref?hl=en

language 要設定,中文字編過去才比較不會出錯。
我主要用 ECMASCRIPT5。
當 使用 ECMASCRIPT5_STRICT 時,變數名稱如果偷懶愛用什麼  var aa...的
(偶就是會這樣用XD...) compiler 會過,但執行就會GG...

如果原 js 內有用 eval ....那個也常常會有問題....
(又中槍Orz..偶是eval愛好者Q_Q|||)
eval 執行 function 看起來好像是可以用~

但是...eval ('var abc= {a:1}') ; 這種轉 json 的作法就沒辦法了一.一a...
但是又懶得再去找新的 min 工具~ 後來乾脆就分成兩隻 js...
min 會GG的就寫到另一隻 js ,不做min,
其它ok的照舊min~

那為了又懶得在 html include 多寫一隻js (因為超容易漏掉的)
所以~就用 jquery load script 一次搞定XD...
$.getScript( '/js/xxxx_ext.js');