Javascript ~ set hash, get hash

set hash
window.location.hash = 'ooxx';


get hash
function getHashUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('#') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}


var x = getHashUrlVars();
var destinationID = x['destinationID'];
var destinationType = x['destinationType'];

http://www.parorrey.com/blog/php-development/get-url-hash-parameters-values-using-javascript-for-php-_request/

Facebook ~ Share button

Text link:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank">Share on Facebook</a>

Small icon and text:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>

Icon only:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; text-decoration:none; } </style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>


source
http://askville.amazon.com/add-Share-Facebook-button-webpage/AnswerViewer.do?requestId=1539369

Javascript ~ sort array

var array = [[1, "grape", 42], [2, "fruit", 9]];
array.sort(function(a, b)
{
if (a[1] == b[1]) { return 0; }
if (a[1] > b[1])
{
return 1;
}
else
{
return -1;
}
});


reference
http://stackoverflow.com/questions/5503900/how-to-sort-an-array-of-objects-with-jquery-or-javascript

jQuery ~ move Table tr

$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});


reference
http://stackoverflow.com/questions/1569889/jquery-move-table-row

jQuery ~ Datepicker change language

download js

http://logicss.googlecode.com/svn-history/r41/trunk/media/jquery/jquery.ui.i18n.all.min.js


$.datepicker.setDefaults($.datepicker.regional["zh-TW"])

Javascript ~ format numbers as money

Number.prototype.formatMoney = function(c, d, t){
var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };


(123456789.12345).formatMoney(2, '.', ',');

source
http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript

Javascript ~ get json key value

for (var key in p) {
if (p.hasOwnProperty(key)) {
alert(key + " -> " + p[key]);
}
}


reference
http://stackoverflow.com/questions/684672/loop-through-javascript-object

Javascript ~ convert number display format

var num = 12345678;
var str = num + ""; // cast to string
var out = [];
for (var i = str.length - 3; i > 0; i -= 3) {
out.unshift(str.substr(i, 3));
}
out.unshift(str.substr(0, 3 + i));
out = out.join(','); // "12,345,678"


reference
http://stackoverflow.com/questions/1943828/convert-digital-display-format

Javascript ~ set cookie, get cookie

reference
http://www.w3schools.com/js/js_cookies.asp


function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

jQuery ~ move element

$("#source").appendTo("#destination");


reference
http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element

jQuery Flot ~ set Label example

var d1 = [];
d1.push([1, 1234]);
d1.push([2, 5678]);

var stack = 0, bars = true, lines = false, steps = false;
$.plot($("#statisticsGraph"), [d1], {
series: {
lines: { show: lines, fill: true },
bars: { show: bars, barWidth: 0.8 }
}, xaxis: {

ticks: [[1, 'out hospital'], [2, 'in hospital']]

}

});


reference
http://stackoverflow.com/questions/459947/how-do-i-control-the-tick-label-size-in-flot

Colorbox ~ empty content when set iframe true

這問題是用colorbox

而且參數iframe為true的時候

點出來的東西竟然是空的XD

$("a[xxx=colorbox]").colorbox({ fastIframe: false, iframe: true });

解決辦法是~~~設定width, height

$("a[xxx=colorbox]").colorbox({ fastIframe: false, iframe: true, width: "800px", height: "600px" });

reference
http://groups.google.com/group/colorbox/browse_thread/thread/7626b05149186997?pli=1

Javascript ~ get file extension

return filename.split('.').pop();

reference
http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript

Javascript ~ add style to table

以前作管理頁面

為了方便表格的閱讀性

都會一格一格給他放不同的class

例如

如果全白就會很難看= =

以前的寫法是在PHP替tr標籤加class

反正就是種很原始的做法XD


現在我的作法是透過Javascript

在onload的時候做增加class的方法

function setTableGrey(){
    var i = 1;
    $('.list tr:gt(0):visible').each(function(){
        if(i ==1){
            i=0;
            $(this).addClass('grey');
        }else{
            i++;
            $(this).removeClass('grey');
        }
    });
}

這種作法的好處1是

所有管理畫面的表格都可以套用~~~~所以就不用再個別檔案用PHP寫程式處理

好處2是當表格有更動的時候

例如我做了一個filter的功能~~~~來顯示這種type的項目~~~隱藏非此type的項目

做完這動作就可能會出現連續兩條或以上的灰色項目~~~或是連續空白

如圖XD

可是在做完這動作之後在呼叫setTableGrey()

再替表格的class作reset就不會出現這問題

因為我裡面抓tr的方式是選有顯示的項目

$('.list tr:gt(0):visible')

Javascript ~ switch grid view, list view

這功能就是讓user可以這樣看又那樣看XD

list或grid view

我這邊做的是直接在網頁上改變顯示方式

做法是張睪提供的方法

就是先寫好兩種view的css

然後寫個修改最上層element的class的程式

我是這樣寫XD

function switchView(v){

switch(v){
case 'list':
$("#items").removeClass('grid list');
$("#items").addClass('list');

break;
case 'grid':
$("#items").removeClass('grid list');
$("#items").addClass('grid');

break;
}
//$("#items").toggleClass('list grid');

}


css大概的樣子

div.list div.productTitle{
position:absolute;

left:203px;
top:25px;
}

div.grid div.productTitle{
position:absolute;

left:13px;
top:208px;
}

div.grid div.productItem{
width:221px;
height:308px;
margin-left:35px;
position:relative;
margin-bottom:30px;
float:left;
background:#FFF;

border:solid 1px #c5c5c5;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius:10px;
}
div.list div.productItem{
width:741px;
height:210px;
margin-left:8px;
position:relative;
margin-bottom:20px;
}


個人蠻推薦這種方法的~~~~~cool~~~

感謝張睪提供的方法XD

Javascript ~ preload images

當網頁有些互動的動作~~~

可能換張圖之類的

為了避免動作之後才開始讀圖片產生的延遲而預先讀圖片

就是preload~~

這邊的範例是透過javascript

if (document.images)

{

preload_image_object = new Image();

// set image url

image_url = new Array();

image_url[0] = 'img/tvwall_phantom.png';

image_url[1] = 'img/tvwall_phantom2.png';

image_url[2] = 'img/tvwall_phantom3.png';

image_url[3] = 'img/tvwall_phantom4.png';

image_url[4] = 'img/tvwall_phantom5.png';

var i = 0;

for(i=0; i<=5; i++)

preload_image_object.src = image_url[i];

}

reference http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317