今天閒來無事，幫網友解決的一個小問題，
https://jsfiddle.net/xefavar6/
這問題不能單純的用hover，而是要拆成 mouseenter 跟 mouseleave 二個事件來處理，
加上事件發生時，判斷 e.target 的不同，就能解決了，說破不值錢。
其實這些都是對DOM及event的基本概念是否熟悉的問題，還談不上什麼技巧。
可惜願意好好練基本功的我看過的真的沒幾個，屈指可數。
2016-09-16
2016-01-13
上傳圖像預覽
其實要讀取圖像的資訊跟預覽，無須動用到FileReader。
https://jsfiddle.net/ef0vg2sb/2/
ref:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
https://jsfiddle.net/ef0vg2sb/2/
window.URL = window.URL || window.webkitURL;
var fileSel = document.getElementById("fileSel");
var info = document.getElementById("info");
fileSel.addEventListener("change", function(e) {
e.preventDefault();
if (this.files && !!this.files.length) {
info.innerHTML = "";
for (var i = 0; i < this.files.length; i++) {
preview(this.files[i]);
}
}
}, false);
var preview = function(file) {
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
img.onload = function() {
info.innerHTML += "檔名：" + file.name + ", 大小：" + file.size + "B" + ", w:" + this.width + ", h:" + this.height + "";
info.appendChild(this);
//window.URL.revokeObjectURL(this.src);
}
}
ref:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
2015-06-24
youtube id & query string parser
每次看到有人用indexof()、substring()等笨方法去解析字串抓資料，真的看得很痛苦，
請多用正則表示式來解析字串，即簡潔又不易出錯，
畢竟寫程式連基本的正則表示式都不學，而只會用笨方法從字串抓東西，說寫出來的東西有多嚴謹我都不相信。
以下示範二個網頁最常用的parser範例(youtube & query string)：
http://jsfiddle.net/24mw91hq/
請多用正則表示式來解析字串，即簡潔又不易出錯，
畢竟寫程式連基本的正則表示式都不學，而只會用笨方法從字串抓東西，說寫出來的東西有多嚴謹我都不相信。
以下示範二個網頁最常用的parser範例(youtube & query string)：
http://jsfiddle.net/24mw91hq/
2015-02-12
IE取得radio value的問題
假設有如下一個form, 含有二個radio buttons:
若不用jQuery而用javascript，在chrome或firefox你可以直接取得checked的value:
在ie就不是這麼回事了...得先一個個檢查是否checked再取得value:
真的是，好爛...
若不用jQuery而用javascript，在chrome或firefox你可以直接取得checked的value:
document.forms[0].sex.value;
在ie就不是這麼回事了...得先一個個檢查是否checked再取得value:
var radios = document.forms[0].sex;
for(var i=0;i < radios.length;i++){
if(radios[i].checked) alert(radios[i].value);
}
真的是，好爛...
2015-02-08
使用YQL & Yahoo Weather API 查詢天氣
先到 https://weather.yahoo.com/ 查天氣區域代碼，例如輸入 Kaohsiung 查詢，
就會顯示 Kaohsiung City的天氣，此時網址為：
https://weather.yahoo.com/taiwan/kaohsiung-city/kaohsiung-city-2306180/
其中的2306180即為高雄市代碼。
再利用Yahoo Weather API
https://developer.yahoo.com/weather/
輸入YQL：
select item.condition from weather.forecast where woeid = 2306180 and u="c"
u="c"代表用攝氏表示，預設為華氏，在Endpoint就會產生所需要的JSON(或XML)資料回傳網址。
回傳的JSON資料，key=value可參考 https://developer.yahoo.com/weather/documentation.html
之後就可以在網頁上顯示天氣資料了，譬如要顯示天氣狀況和溫度：
$.getJSON('https://query.yahooapis.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202306180%20and%20u%3D%22c%22&format=json&callback=?', function(json) {
var w_code = weather_con[json.query.results.channel.item.condition.code.toString()];
var w_temp = json.query.results.channel.item.condition.temp + "℃";
console.log(w_code);
console.log(w_temp);
});
//這個我翻得可能不是很標準...
weather_con = {
"0":"龍捲風",
"1":"熱帶風暴",
"2":"颶風",
"3":"強雷陣雨",
"4":"雷陣雨",
"5":"混合雨雪",
"6":"混合雨雪",
"7":"混合雨雪",
"8":"冰凍小雨",
"9":"細雨",
"10":"凍雨",
"11":"陣雨",
"12":"陣雨",
"13":"飄雪",
"14":"陣雪",
"15":"吹雪",
"16":"下雪",
"17":"冰雹",
"18":"雨雪",
"19":"多塵",
"20":"多霧",
"21":"陰霾",
"22":"多煙",
"23":"狂風大作",
"24":"有風",
"25":"冷",
"26":"多雲",
"27":"晴間多雲（夜）",
"28":"晴間多雲（日）",
"29":"晴間多雲（夜）",
"30":"晴間多雲（日）",
"31":"清晰的（夜）",
"32":"晴朗",
"33":"晴朗（夜）",
"34":"晴朗（日）",
"35":"雨和冰雹",
"36":"炎熱",
"37":"雷陣雨",
"38":"零星雷陣雨",
"39":"零星雷陣雨",
"40":"零星雷陣雨",
"41":"大雪",
"42":"零星陣雪",
"43":"大雪",
"44":"多雲",
"45":"雷陣雨",
"46":"陣雪",
"47":"雷陣雨",
"3200":"資料錯誤"
};
2015-02-03
Xajax 在IE 又有問題了...
他奶奶的，xajax在Chrom、FF沒問題，在IE又有問題了。
打開xajax debug mode，發現ie接收post response時產生false，而不是收到json字串，
後來發現，IE 在DOM未載入完全時，就會去嘗試存取DOM.....
恁娘勒！說IE有多白痴就有多白痴！
後來苦思解法，不過可能要動到core，只好奇巧淫技加減用：
===
if (browser == "Microsoft Internet Explorer" && document.readyState != "complete")
setTimeout(xajax_call_function(), 200);
===
設200ms讓你IE載入DOM，行了吧！M$的programmer是都在吃屎的逆！
唉，寫程式不怕技術難，就怕IE！
打開xajax debug mode，發現ie接收post response時產生false，而不是收到json字串，
後來發現，IE 在DOM未載入完全時，就會去嘗試存取DOM.....
恁娘勒！說IE有多白痴就有多白痴！
後來苦思解法，不過可能要動到core，只好奇巧淫技加減用：
===
if (browser == "Microsoft Internet Explorer" && document.readyState != "complete")
setTimeout(xajax_call_function(), 200);
===
設200ms讓你IE載入DOM，行了吧！M$的programmer是都在吃屎的逆！
唉，寫程式不怕技術難，就怕IE！
CKEDITOR新增自訂按鈕
老大昨天看了我的外掛編輯器(CKEDITOR)，說怎麼沒有標點符號輸入(因為老師有很多老人，眼睛不好)，
然後讓我看了看他的編輯器，哇，老大的外掛有耶....然後叫我用他的就好了。
我研究了一下，好像是同一套咩，只是他的有裝標點符號外掛，我的沒有，但我的是新版。
上網找了一下，都是舊版的外掛，我的是新版的CKEDITOR，不太合，嗯，又要自已動手了 = =!!
弄完一排標點符號，花了我一個下午 = =!! (我就是堅持要用新版的！！XD)
然後讓我看了看他的編輯器，哇，老大的外掛有耶....然後叫我用他的就好了。
我研究了一下，好像是同一套咩，只是他的有裝標點符號外掛，我的沒有，但我的是新版。
上網找了一下，都是舊版的外掛，我的是新版的CKEDITOR，不太合，嗯，又要自已動手了 = =!!
弄完一排標點符號，花了我一個下午 = =!! (我就是堅持要用新版的！！XD)
2015-02-02
讓fancybox支援上下頁切換/換頁 (v1.3.4)
(PS1 這是我去年9月修改的fancybox v1.3.4，現在的fancybox新版本不知有沒支援換頁了...似乎是還沒有)
(PS2 這LOGDOWN支援markdown，文章寫起來快多了，蠻適合我這種懶病常發作的人)
(PS3 ...還是XBOX 360好玩 XDDD)
老大叫俺把相簿功能看可不可以弄成到頭張或尾張時，會續跳上頁或下頁，
但俺找呀找的，因可能我的GOOGLE功力太爛，網路找不到現成的，只好自已動手(我還是習慣當伸手牌啊啊啊啊)，
改完後，發現也不難改，還蠻簡單的...XD
(PS2 這LOGDOWN支援markdown，文章寫起來快多了，蠻適合我這種懶病常發作的人)
(PS3 ...還是XBOX 360好玩 XDDD)
老大叫俺把相簿功能看可不可以弄成到頭張或尾張時，會續跳上頁或下頁，
但俺找呀找的，因可能我的GOOGLE功力太爛，網路找不到現成的，只好自已動手(我還是習慣當伸手牌啊啊啊啊)，
改完後，發現也不難改，還蠻簡單的...XD
訂閱：
文章 (Atom)