盡量使用mouseleave，除非瀏覽器不支援

做個記錄，目前使用下來，如這篇mouseenter、mouseover；mouseleave、mouseout的区别所述，mouseout本身會有太多的細節要處理，很多地方會觸發到，除非設定的元件本身就很單純，沒有什麼子元件，mouseleave，就很直接的對應那個元件，不會有什麼意外發生。

參考網址：
mouseenter、mouseover；mouseleave、mouseout的区别

Google map中Google提供的標示icon

搜尋了很多資料，總是找不到想要的Goggle地標圖示，想要的如下：

查了不少，找到的大多如下

後來直接找圖示google map marker icons 搜尋結果，是找到不少，但使用的結果反而有個問題，因為是透明背景，白色圓圈部分整個透過去反而很難辨識。

最後直接拿google查到想要的地圖及其地標，直接找它的html code如下：

https://mt.googleapis.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,0288D1&scale=2.0

試用了下，更動highlight中的0288D1就可以換顏色了，前頭的ff000000試用後感覺是讓顏色更鮮明。scale是圖示大小，使用在手機上的。name是指定有哪些icon，用逗點分開，案子處理完後依然沒查到哪邊有公開圖示的名稱，有點可惜了。

其他一些查到的範例：

• http://maps.google.com/mapfiles/ms/icons/blue.png
• https://mt.google.com/vt/icon?psize=20&font=fonts/Roboto-Regular.ttf&color=ff330000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1&text=%E2%80%A2
• http://mt.google.com/vt/icon?psize=25&font=fonts/Roboto-Bold.ttf&color=fffffCff&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=50&text=%E2%80%A2
• https://mt.googleapis.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=0288D1&scale=2.0

參考網址：
Google Map icons with VisualRefresh [closed]
MarkerOptions
Google Charts ＞ Image Charts ＞ Dynamic Icons
How to use SVG markers in Google Maps API v3

https://www.google.com/maps/d/u/0/viewer?mid=1wtKI5ZKprpS4NCny2gX6g09PBfE&ll=42.840158799999976%2C141.62646619999987&z=10

網路資源
google map marker icons 搜尋結果
The Top Google Maps Marker Icon Collections of 2015
Download a set of 100 free map icons
scottdejonge/map-icons
Google map markers

jQuery UI DatePicker中文化

jQuery ui中文化有兩種方式（其實兩種都一樣）

第一種方式：自己客製化

//設定中文語系, 取自http://blog.e-happy.com.tw/?p=5011
$.datepicker.regional['zh-TW'] = {
   dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
   dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
   monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
   monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
   prevText: "上月",
   nextText: "次月",
   weekHeader: "週"
};
//將預設語系設定為中文
$.datepicker.setDefaults($.datepicker.regional["zh-TW"]);

第二種方式：使用jQuery ui提供的i18n，直接到GIT Hub jQuery ui i18n下載datepicker-zh-TW.js，在jquery-ui.js前加入datepicker-zh-TW.js，方式如下：

<script src="datepicker-zh-TW.js"></script>
<script src="jquery-ui.js"></script>

參考網址
[jQuery] 如何為 DatePicker 加上中文化日期選項？
GIT Hub jQuery ui i18n

EaselJS的Shap如何加入mouse over

EaselJS很好用，但不知為什麼想要加入mourse over的事件，弄半天查半天資料，卻一直只能click卻不能mouse over，看半天才發現有底下兩個有關

enableMouseOver();
mouseEnabled = true;

在stage中的item若要mouse over能被偵測到，stage必需要enableMourseOver且mouseEnabled也要打開才行，預設下mouseEnabled是開啟，但enableMourseOver則否，要特別啟動它。所以code如下：

var stage = new createjs.Stage("text");
stage.mouseEnabled = true;
stage.enableMouseOver();
var circle = new createjs.Shape();
circles.on("mouseover", function (evt) {
    var target = evt.target;
    //do something...
});
stage.addChild(circles);
stage.update();

更動滑鼠標示：
target.cursor = "pointer";

參考網址：
EASELJS MOUSE INTERACTION
Mouse event example
TweenLite－Example

儲存console.log的特定資料

今天在處理圖檔資料時，一直發現無法取樣到pixel，使用console.log一個個log出來，pixel有兩三十萬筆，一個個print出來資料量太大沒用外，也造成瀏覽器整個delay，畢竟我的需求是想查看Array中資料是否有0以外的資料，我是否有取錯圖檔等，最後想到儲成file再用編輯器看是最快，不過遇到兩個問題

1. 陣列要一個個拿出來print再存？
2. js怎存檔？

第一個問題，可以直接用JSON處理。
第二個問題查了下，看到這篇 How to save the output of a console.log(object) to a file? 就解決了我這兩個需求。這邊做下記錄。

(function(console){

console.save = function(data, filename){

    if(!data) {
        console.error('Console.save: No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }
})(console);

文中也提到，Chrome其實可以直接save，link: Right click > Save as in the Console panel to save the logged messages to a file.

參考資料
How to save the output of a console.log(object) to a file?
A collection of helpful snippets to use inside of browser devtools － console-save.js

Javascript學習筆記－ change value in IE 7

最近一個案子，因為蠻在意IE的舊版本，如：IE 7。在select中常會使用change再載入另一個select的值，如市及區的連動。但在IE 7發現有個狀況，可以看到下圖的按鈕重疊在上頭。

一開始以為這部分主要是設計師在css上的處理方式有問題，將select的寬度做了固定，而資料的長度又會變動，但後來發現，可能是在處理change event的方式直接使用jquery的change function，而它並沒有相容到ie使用的（如：propertychange | onpropertychange event及onpropertychange event | propertychange event所述）

所以使用上為了能相容，所以改用成底下的方式：

$('#object').bind('propertychange change', function (e) {
   //實際要執行的code   
   $(this).blur();
});

其實在使用上有發現，即使加入了propertychange，可能沒效果，但其實只要滑鼠點擊其他元件就正常了，所以可以看到上述程式加入$(this).blur()，來達到這個效果，這樣就ok了

參考網址：
propertychange | onpropertychange event
onpropertychange event | propertychange event

取得使用者目前的時區

最近一個網站的對象是整個美國，加上有每日記錄的問題，發生了使用者在同一個做記錄，卻沒多久就變隔一天的窘境，查了半天看起來strtotime預設用的是UTC，除非特別寫進去要parser的字串中或設定php.ini，但重點在我不能固定在一個時區，歸納了有底下幾個需求

1. 要取得使用者目前所在的時區
2. 要能使用者各自有各自的時區
3. 使用者之間不能互相影響

從PHP 5.3.x 的 strtotime() 時區設定 警告訊息修正這篇可以知道，改時區大概有兩種種方式（其實不只）

1. php.ini中設定date.timezone
2. Function: date_default_timezone_set

這邊合乎需求的是date_default_timezone_set。試用過後，發現只有在設定後才會有效果。http呼叫重新來過時，又是用系統設定，不會互相影響。

再來要取得目前使用者時區，看了不少方式，都是取得目前系統時間再做差異比較，不過這方式很多細節要處理，最後找到這個jsTimezoneDetect，很容易使用，程式碼如下：

var timezone = jstz.determine();
function get_user_timezone(target)
{
    if( target != null && target.length != 0 )
        target.val(encodeURI(timezone.name()));
    return timezone.name();
}

要注意的是，不能在function中使用，宣告的變數要在最外頭，也不能放在jQuery.ready裡頭，jstz才可以存取到。

這樣就可以利用get_user_timezone取得時區名稱，如：Asia/Taipei。jstz會幫忙做轉換，也會計算日光節約時間等，省掉不少麻煩。

相關函式庫：
jsTimezoneDetect
tamaspap/timezones
jquery.detect_timezone


參考網址：
How to get client's timezone?
Get user's timezone using javascript/jQuery and PHP
PHP5 time zone solution
Auto-detecting user's timezone
List of Supported Timezones
Getting the Time Zone from a Web Browser
Detect user timezone using javascript
How to initialize javascript date to a particular timezone
Generating a drop down list of timezones with PHP

IANA - Time Zone Database

Date/Time based on user's location

查詢時間、請輸入國家、地區或主要城市的中文或英文名稱
Time Zones

Javascript學習筆記－Go back and reload

最近有個狀況，就是使用Ajax後，Browser似乎只會cache舊資料，Ajax成功後所更新的並記在sessoin或cookie的資料，要reload才會被cache住，這造成網頁資料的問題，尤其是買賣時的comfirm後，又按”回上一頁”按鈕，網頁上的資料有問題，最後做了個結論

• 要能夠按下”回上一頁”按鈕後，網頁要能reload

得到這個網址的解決方案：How to refresh page after clicking "Back" button??

大概的解決方式是

1. 設定hidden參數，預設為no
2. 有參數更動時要設定參數為yes
3. 在onload時檢查hidden參數是否為yes

Code如下：

<input id="refreshed" name="refreshed" type="hidden" value="no" />
<script>
onload = function () {
    var e = $('#refreshed');
    if (e.val() == 'yes') {
        e.val('no');
        location.reload();
    }
};
function set_reload() {
    $('#refreshed').val('yes');
}
</script>

需要設定為yes時，就call set_reload。

蠻簡單的變形，想像力果然才是限制 @@

參考網址：
How to refresh page after clicking "Back" button??

PHP學習筆記－取代文字中的斷行

遇到個問題，部分程式碼如下：

FB.ui(
{
    method: 'feed',
    name: "Sit-Ups Won’t",
    link: "https://xxx/",
    picture: "http://xxx/shutterstock_119588920-2xpj7nxhm0d9jws3k56zuo.jpg",
    description: "I am often asked if doing situps or crunches 
will get people the toned six-pack abs they're looki..."
},
function....

其中description在php中是直接echo文章的內容，但這字串含斷行符號，一直出現“Unexpected token ILLEGAL”，使用str_replace去取代\r或\n都無效，查了這篇PHP: 移除換行符號，最後使用

echo preg_replace('/\v/', '', $description);

就解決了

參考網址：
PHP: 移除換行符號

Javascript學習筆記－Javascript的統計報表( Charts ) Library收集

Javascript好用的統計報表js

－－－更新－－－

這幾天又看了一下，做點更新

50 JavaScript Libraries for Charts and Graphs
Google Chart API 改成 Google Charts
jqPlot
Protovis
FusionCharts

－－－更新－－－

以往統計報表都用java或php的library在做，最近正好有要做前端的統計需求，就在想node.js一類的javascript server side很受歡迎，那Javascript應該也可以做吧？尤其是HTML 5一類的，google一下果然不少，在這做點記錄

底下截取自JavaScript Chart 函式庫整理及5 Top jQuery Chart Libraries for Interactive Charts
Google Chart API（現在改放在Code Playground）
YUI 3 / Charts
Highcharts - Interactive JavaScript charts for your webpage
dygraphs JavaScript Visualization Library
D3.js - Data-Driven Documents
Flot2
Make Pretty Charts For Your App with jQuery and xCharts
20 Fresh JavaScript Data Visualization Libraries
jQuery Visualize Accessible Charts with HTML5 from Designing with Progressive Enhancement
GraphUp

參考網址：
5 Top jQuery Chart Libraries for Interactive Charts
JavaScript Chart 函式庫整理
Make Pretty Charts For Your App with jQuery and xCharts

Javascript學習筆記－AJAX使用下更動URL，做個記錄

遇到個需求：使用AJAX的情況下，仍然能夠更動URL！

這主要是因應SEO的需求，因為這樣無法分辦哪頁最受歡迎，不過還真的得承認，我本來還強烈認為不可能，因為朋友及Google大神，看來真的行，不過似乎還是會有瀏覽器及上下頁的問題。

在這邊先做個紀錄。像使用ajax和history.pushState无刷新改变页面URL就寫的不錯。其中提到AJAX的問題

1. 可以无刷新改变页面内容，但无法改变页面URL
2. 为了更好的可访问性，内容发生改变后，通常改变URL的hash
3. hash的方式不能很好的处理浏览器的前进、后退等问题
4. 进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
5. 但这种方式对搜索引擎很不友好
6. twitter和google约定了使用#!xxx（即hash第一个字符为!），搜索引擎进行支持。

要做到這個，分兩種做法

解法1：HTML 5有個History API可以解決瀏覽器上下頁記錄的問題。

例如使用ajax和history.pushState无刷新改变页面URL提到：
var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);
之後ajax時，因為state放在event的中，就可以直接用
window.addEventListener('popstate', function(e){ 

    if (history.state){ 

      var state = e.state; 

      //do something(state.url, state.title); 

    } 

}, false);
在javascript中操作上下頁，可用
window.history.forward()或window.history.back()。

改變URL後要用replaceState讓history知道
state.url = '/another_url';
window.history.replaceState( state, state.title, “/another_url”);

解決2：利用hash

Javascript中的windows.loaction中有個hash（錨點），讓它保持在這個頁面時，也能利用到上下頁按鈕。

例如 目前在http://xxx.com/
則用  location.hash = 'yyy';

這樣就可以了。不過瀏覽器版本要

1. IE8以上
2. FireFox 3.6以上
3. Chrome 5以上
4. Opera 10.6以上
5. Safari 5.0以上

解法3：用hashchange plugin。

參考網址：
Update URL on AJAX call?
使用ajax和history.pushState无刷新改变页面URL
HTML5: Changing the browser-URL without refreshing page
Update URL after jQuery AJAX pull

Change URL from Javascript like facebook does
Modify Address Bar URL in AJAX App to Match Current State

看HTML5是否支援及HTML5有支援版本：Check here for what browsers support each standard

Javascript學習筆記－取代所有相關字串

想取代整個字串中所有特定字，但javascript沒有支援，找了下看到用regular expression方式也行，都忘了有這方法，做下紀錄

ex : replaceAll 小數點
var s1 = "A.B.C";
alert(s1.replace(/\./g,"_")); // "A_B_C"

參考網址：
[javascript] Javascript 的 replaceAll

Javascript學習筆記－取得目前的url資訊

需求：用javascript取得目前的hostname

做法：
用window.location.hostname。

Example:
var hostname = window.location.hostname;
或
var hostname = location.hostname;

上圖取自：Javascript hostname屬性

如上圖，可以用location取得整個link或帶上的參數，或是哪種protocol，再自行運用


參考網址：
Javascript hostname屬性

Javascript學習筆記－javascript字串中insert個字串

原生的javascript程式沒有字串insert的function的樣子（沒找到，有的話跟我說 XD），還蠻簡單的，就如下


String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

這樣就可以用了，如下使用

var result = "voo abc".splice(4,0," 111");

參考網址：
JavaScript: How can I insert a string at a specific index

Twitter開發筆記－Show自己的Twitter用v1.0版

近來幫了下朋友，本以為很容易，所以很熱心的幫忙，結果搞半天，主要是Twitter在台灣沒很流行，文章主要都是外文，另外是文件寫的很爛加上看起來版本在變動，改版用OAuth搞得很難用....總之，底下只想記錄v1.0版

需求：

1. 秀自己的10個Twitter
2. 用Twitter的外觀，一個Twitter一個block

步驟大致如下：

1. 先利用timeline找到自己所有tweet id
2. 利用embed放上所有tweet

用到兩個api：

1. https://api.twitter.com/1/statuses/user_timeline/(screen name).json
2. https://api.twitter.com/1/statuses/oembed.json?id=(tweet id)

screen name是自己在twitter的link上的名字，例如我的是https://twitter.com/alvinlee0327，我的screen name就是alvinlee0327

兩者回傳都是json格式，且跨網域所以要用callback function，可以用底下這樣的程式來處理

TwitterAPI = {
    Statuses: {
        user_timeline:function(screen_name, count, callback){
            jQuery.getJSON("https://api.twitter.com/1/statuses/user_timeline/" + screen_name + ".json?count="+count+"&b="+Math.random()+"&callback=?",
            callback);
        },
        embed_twitter:function(t_id, callback){
            jQuery.getJSON("https://api.twitter.com/1/statuses/oembed.json?id=" + t_id +"&callback=?",
            callback);
        }
    }
};

使用時就是
void author = 'twitterapi'; //你自己的screen name
TwitterAPI.Statuses.user_timeline(author,30,function(json){
    $.each(json, function(i){
        var id_str = this['id_str']; //取得tweet id
        TwitterAPI.Statuses.embed_twitter(id_str,function(json){
            $('#aside').append(json['html']); //取得tweet的完整html code，再加入指定的區塊
        });
    });
});


測試過程中，發生了“Clients may not make more than 150 requests per hour.”這是正常的，不過實在很不方便。

即使換到1.1版，也只是變成180個，原文如下：
Other widely used calls will get a boost of 180 requests per window. This will be particularly advantageous for apps making calls such as GET statuses/show/:id, GET users/lookup, GET search/tweets and others. Be sure to read the API v1.1 Rate Limiting documentation as well as review the per method limits available here.

Link: Overview: Version 1.1 of the Twitter API

總之～還算能運作啦，哈

參考網址：
Twitter Developer Documentation
Twitter Libraries
GET statuses/user_timeline
Embedded Tweets

Javascript學習筆記－適用各瀏覽器的XML load

最近幫朋友一件事，案子正常是要求很蠢，一個超大的電信商，居然用ie6，還無法更動，果然公司越大就越難以改變，難怪台灣的網路永遠都這麼爛～

抱怨完了，回到原題，總之，需求如下：

1. firefox及chrome要能使用（原本不行）
2. ie 6、ie 7依然要能正常使用，因為他們內部的網站都用這個才能正常執行，所以不可以不能用

看了他們的code後，才知道是load xml的問題，只要改成以下的做法即可....

//firefox、chrome、ie 9之後
if (document.implementation && document.implementation.createDocument){
    var xhr = new XMLHttpRequest;
    xhr.open('get',test.xml",true);
    xhr.onreadystatechange = function(){
        if (xhr.readyState != 4) return;
        xmlDoc = xhr.responseXML;
        //做你要的事
    };
    xhr.send();
}
//ie 6、ie 7、ie 8
else if (window.ActiveXObject){
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.onreadystatechange = function () {            
        if (xmlDoc.readyState == 4){
           //做你要的事
        }
    };
    xmlDoc.async = false;
    xmlDoc.load(test.xml");
}


有些事，知道了很簡單，不知道時，做到死....

參考網址：
xml load

jQuery開發筆記－append及appendTo

不知道認知對或不對，但今天實際測試的結果，append比appendTo的速度快很多，例如：

var a = $('<div>123</div>');
var b = $('<div>123</div>');

a.append(b);
b.appendTo(a);

兩者的結果相同，但實際在使用時，後者的速度會慢的多....不過我是沒有實際用數值測過，只是單純在大量的append後，reuse某個jQuery slides這個plugin，後者會來不及load到做好的element，前者則都不會有問題。

Javascript學習筆記－Array initial

不管什麼事，總是會忘記，所以才需要記錄，最近太忙，更新沒以前來的多，在這個2012的最後一天，記個最近做的，又很簡單的事，javascript的Array初始化

javascript的Array初始化大概有幾個

＜1＞
var test = new Array("a", "b", "c", "d");


＜2＞
var test = new Array();
test[] = "a"
test[] = "b"
test[] = "c"
test[] = "d"


加值進去也可以寫成下述

test[0] = "a"
test[1] = "b"
test[2] = "c"
test[3] = "d"


或用test.push("a"); //效果一樣

＜3＞
var test = [ "a", "b", "c", "d" ];


若想做成跟map一樣，則

var test = new Array();
test["A"] = "a"
test["B"] = "b"
test["C"] = "c"
test["D"] = "d"


或

var test = { "A":"a", "B":"b", "C":"c", "D":"d" };

複雜一點，內含陣列的，也可以寫成
var test = {
    "A" : "a",
    "B" : [ "ba", "bb", "bc" ],
    "C" : { id: "ba", label: "bb", text: "bc" },
    "D" : "d"
};

在json上很常用，就這幾種吧

jQuery Validate中文訊息的設定方式

工程師當久了，尤其是一開始在外商幫忙過，習慣看英文，但出來做了這段時間，客戶還是對中文感覺比較親切，雖然jQuery Validate好用，但放中文上去，就是都不行，找了找才發現，原來是我的問題，哈哈，設中文要如下：

var cnmsg = {
  required: "必選字段",
  remote: "請修正該字段",
  email: "請輸入正確格式的電子郵件",
  url: "請輸入合法的網址",
  date: "請輸入合法的日期",
  dateISO: "請輸入合法的日期 (ISO).",
  number: "請輸入合法的數字",
  digits: "只能輸入整數",
  creditcard: "請輸入合法的信用卡號",
  equalTo: "請再次輸入相同的值",
  accept: "請輸入擁有合法後綴名的字符串",
  maxlength: jQuery.format("請輸入一個長度最多是{0} 的字符串"),
  minlength: jQuery.format("請輸入一個長度最少是{0} 的字符串"),
  rangelength: jQuery.format("請輸入一個長度介於{0} 和{1} 之間的字符串"),
  range: jQuery.format("請輸入一個介於{0} 和{1} 之間的值"),
  max: jQuery.format("請輸入一個最大為{0} 的值"),
  min: jQuery.format("請輸入一個最小為{0} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);

我copy了我參考的網址，再都弄成繁體，我想很多人會想用吧，呵～

網路果然是共享的天堂。

參考網址：
http://blog.csdn.net/ecjtuxuan/article/details/5731130

彈出的新視窗執行原視窗的javascript

繼上個"點擊開新視窗要求原視窗reload"文章，再來是執行原視窗的javascript，其實很簡單，只要改成如下：

window.opener.function name();

window.opener是原視窗，function name即是你在原視窗定義且要呼叫的原程式。
例如：
function test() {
    alert('test');
}

到時用

window.opener.test();

就會出現test的alert訊息。就這樣，說破了沒半點價值