2009年3月29日 星期日

Greasemonkey的一些陷阱

查unsafewindow時剛好讀到這篇:

Avoid Common Pitfalls in Greasemonkey

裡面有提到不少看法,有興趣可以讀一下。

另外順便補個下載: Greasemonkey Hacks (OReilly Ebook) CHM檔

[Greasemonkey] 使用UnsafeWindow呼叫原頁面函數或變動的方法

昨天寫了一個Javascript Script,在jshell測都沒問題,放到Greasemonkey卻跑不正常,後來才發現,因為我有用到原頁面內的變數,而Greasemonkey執行的當下是獨立分開於原頁面的script的,所以跑到一半就失敗了。

google了一下,查到UnsafeWindow這個東西。

原本window下面的變數,透過UnsafeWindow就可以讀取到了。

範例參考:

unsafeWindow.SomeVarInPage = "Testing";
unsafeWindow.SomeFunctionInPage("Test");

2009年3月25日 星期三

Javascript 如何將Date()日期格式化輸出

// 日期類型格式化方法的定義
Date.prototype.Format = function(fmt) 
{ //author: meizz 
var o = { 
    "M+" : this.getMonth()+1,                 //月份 
    "d+" : this.getDate(),                    //日 
    "h+" : this.getHours(),                   //小時 
    "m+" : this.getMinutes(),                 //分 
    "s+" : this.getSeconds(),                 //秒 
    "q+" : Math.floor((this.getMonth()+3)/3), //季度 
    "S" : this.getMilliseconds()             //毫秒 
}; 
if(/(y+)/.test(fmt)) 
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
for(var k in o) 
    if(new RegExp("("+ k +")").test(fmt)) 
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
return fmt; 
}

來源參考: CSDN討論串

2009年3月20日 星期五

[AutoHotKey] 快速切換顯示副檔名

設一個熱鍵可以快速切換副檔名顯示與否,兩張圖比較一下:

顯示副檔名
2009-03-20_160440

隱藏副檔名
2009-03-20_160500

 

下面是AutoHotKey的範例:

; 使用win+F5來更新
#F5::
RegRead, HiddenFiles_Status, HKEY_CURRENT_USER, Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced, HideFileExt
If HiddenFiles_Status = 1 
RegWrite, REG_DWORD, HKEY_CURRENT_USER, Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced, HideFileExt, 0
Else 
RegWrite, REG_DWORD, HKEY_CURRENT_USER, Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced, HideFileExt, 1
WinGetClass, eh_Class,A
If (eh_Class = "#32770" OR A_OSVersion = "WIN_VISTA")
send, {F5}
Else PostMessage, 0x111, 28931,,, A
Return

目的是修改HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced 內 HideFileExt 的值。

來源參考: Keyboard Ninja: Toggle File Extension Display With a Shortcut Key in Windows

2009年3月13日 星期五

Bookmarklets的簡略說明與使用方法

什麼是Bookmarklets:

簡單的說,就是直接點書籤來執行一堆javascript,以執行一些方便的功能。通常只對該頁面有用(或是即時改變頁面內容),也就是說點了其他連結或是上一頁的話,該bookmarklets會失效,要再啟用就得重新執行。

可以參考: Wikipedia - Bookmarklet 或 Bookmarklets.com的About Bookmarklets

使用方法:

先開啟要瀏覽的頁面,再點已經加到書籤的Bookmarklets,即可執行該功能。

下面是加入Bookmarklets的方法!

IE (用ie6示範):

  1. 在Bookmarklets連結上按滑鼠右鍵,點選"加到我的最愛"。
    2009-03-12_235124 
  2. 跳出對話方塊,按"是"。(因為是javascript:開頭,就會出現此訊息,可略過。謎之音:其實ie本身最不安全…)
    2009-03-12_235134 
  3. 跳出"新增我的最愛",點"確定"。
    2009-03-12_235148
  4. 這時就會在我的最愛裡面,看到剛剛加入的Bookmarklets了。
    2009-03-12_235256

 

Firefox:

  1. 在Bookmarklets連結上面按滑鼠右鍵,點選"此連結加入書籤"。
    2009-03-12_234430
  2. 然後出現加入書籤的方塊,按確定。
    2009-03-12_234451
  3. 在書籤工具列就會看到該Bookmarlets了。
    2009-03-12_234544

 

例如: PhotoViewer 就是小弟撰寫的一個看網路相簿的小Bookmarklets工具,可以參考看看。

2009年3月11日 星期三

[Bookmarklets] 關於游標的client/page/screen坐標

以下是我的個人理解:

2009-03-11_135603

這邊指的都是游標目前所在位置。

  • clientY: 相對於可視區域最上方
  • pageY: 相對於該頁面最上方
  • screenY: 相對於螢幕最上方

另外,pageY = clientY + window.pageYOffset,而pageYOffset這個屬性不是每個瀏覽器都有(ie沒有)。

最後,自己寫了一個Bookmarklets: CursorPos,將body框線,並顯示滑鼠游標位置的坐標。

2009-03-11_164313

[Javascript] 取得視窗的顯示內容的尺寸

最近用javascript取視窗的大小時,遇到不同瀏覽器無法偵測的問題。後來找到下段這段程式碼,可以分辨出視窗大小。

<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

來源: Get viewport size (width and height) with javascript

2009年3月10日 星期二

[Bookmarklets] PhotoViewer 快速瀏覽網路相簿的工具

說明:

將滑鼠游標移至圖片上,會自動秀出將該圖片連結的原始的圖片。

支援相簿或網站:

PCHome無名小站Pixnet巴哈姆特的GNN、PicasaWeb

可使用瀏覽器(目前僅測試windows平台):

IE 6, 7, 8
Firefox 3, 3.1 beta 3

使用方法:

開啟要支援的網路相簿頁面後,點這個Bookmarklet,啟可開啟快速瀏覽功能,如果沒效果可以再重按一次。每換一頁要即用這個效果,要重點一次。
搭配Firefox的AutoPager,等所有頁面都載進來後使用,效果更好,可一次看所有頁面的照片。
Bookmarklet: (加到最愛或或拉到書籤列,Bookmarklets是什麼可參考此篇使用說明):

擷圖:

Firefox 3-
2009-03-10_230757
IE7- 
2009-03-11_171223

Firefox 3.1b3-
2009-03-25_102943_FX

IE8-
2009-03-25_102749


原本我是使用GreasemonkeySplash album viewer來看照片,但搭配AutoPager會沒法運作在新的頁面,想說順便分享給其他非Firefox的朋友使用,所以我試寫了一個bookmarklets,讓IE,Firefox可以在免安裝外掛(or Extension)下快速瀏覽網路相簿。

測試了一下,目前Safari跟Chrome還沒法運用,連jQuery掛上去都怪怪的…功力不夠。用Firefox及IE瀏覽器的人可以試試。
當然,如果是Firefox愛用者,直接使用Greasemonkey+Splash album viewer會方便許多。

Changelog:

2009.03.25

新增測試Firefox 3.1b3, IE 8的環境能正常運作。
支援網站加入PicasaWeb 及無名blog的大頭圖(包含個人資料、誰來我家、回應)。

2009.03.23

修改無名相簿的部份,現在支援相簿首頁及相簿列表了。

2009年3月4日 星期三

[Blogger] 免手動修改圖片連結,讓lightbox也能正常運作的方法

有用lightbox的人,也許會遇到這個問題。

本文的效果為:當網頁載入而未完畢前,點圖片連結會另開新(分)頁來顯示圖片,而javascript載入完成後,lightbox可以正常運作。

原本我以為是Windows Live Writer的問題,當文章內的圖片上傳到blogger後(picasa的相簿內)後,無法讓有使用lightbox的<a>標籤正常使用lightbox來開啟影像(會變成讀取不到圖片)。

當初我自己測試是,把影像連結內的/s1600-h 或是/s800這段文字給刪除掉,lightbox即可正常運作。

但是每次發表完文章,還要上draft.blogger.com去修改文章原始碼,實在耗時費力!當初靈機一動,何不用jQuery直接把href也改成能正常使用的字串呢?

這個東西去年就想弄了,至少拖了有半年以上,之間有讀到Abin一篇相關的文章: Blogger 和 Picasa 的圖片上傳和外連限制,我才知道原來是Google Picasa的做的小詭計,加個"-h"就可避免讓圖片被外連。原來我之前一直錯怪WLW了。

雖然有想法,但是我拖到剛剛才來試寫這個script,沒想到幾分鐘就完成了…

這邊跟大家分享一下我的作法。

函式原始碼:

//用來避免lightbox無法正常連結圖片
//做法是將s1600-h,改為s1600
function ReplaceImageLink()
{
    lightboxLinks = $('a.lightbox');
    for(i=0; i<lightboxLinks.length; i++)
    {
      if (lightboxLinks[i].href.match(/s1600-h/))
        lightboxLinks[i].href = lightboxLinks[i].href.replace(/s1600-h/g, 's1600');
    }
}

因為我的blogger有掛上jQuery,於是我在document.ready裡面,lightbox函式執行之前,加上了ReplaceImageLink()這個函式,內容就變成下面這樣:

<script type='text/javascript'>
$(function(){

//修改符合a.lightbox的href
ReplaceImageLink();

$('.lightbox').lightBox();
});
</script>

這樣就算完成啦。當lightbox執行之前,圖片中有s1600-h的,都會被改成s1600,然後lightbox就可以正常執行。

另外,也可以改成把/s1600-h給整個去掉,一樣是可以正常運作。

 

4889

2009年3月3日 星期二

[App Store] 台灣報好你知

 

  • 價格:Free
  • 特色:

    讀取台灣Yahoo提供的RSS Feed,並有純文字模式及原始模式可選擇,支援用Mail轉寄及用Twitter迴響。

    目前最新版本增加了令人期待的離線閱讀功能,不過必須手動把類型的新聞點右上角的下載,而且能保留一天?!  不過因為是純文字,所以下載速度挺快。

 

圖片2 | 圖片3 | 圖片4

更換Blogger最新回應小工具

由於之前使用lvchen的最新回應,跟我後來手工加入jQuery的部份會有衝突,於是我最近又找了單純一點的"最新回應"widget。

這次我使用 http://chagg.blogspot.com/2007/07/blogger-pixnet.html

效果就如側邊欄最新回應小工具囉~

2009-03-03_142504

在網頁上嵌入FreeMind文件

偶爾看到別人的blog上面會嵌一些FreeMind文件,剛剛google一下,找到Flash Browser這個東西。

網址: http://freemind.sourceforge.net/wiki/index.php/Flash_browser

下面是我的設定方法(自己消化一堆網頁得到的心得):

  • 下載Flash browser後,將裡面三個檔案解壓並上傳到自己的網路空間,我這邊使用Google Pages

      flashobject.js 
      mindmaps.html 
      visorFreemind.swf 
  • 然後也將你要展示的文件,上傳到你的網路空間,我還是放到,這邊例如我上傳一個檔案為PQ4R.mm。

  • 然後,在你的文章裡面,加入下面這一段html碼,就可以了。(FreeMind文件檔名請自行修改)

    <embed src="http://nio127.googlepages.com/visorFreemind.swf" 
            width="100%" type="application/x-shockwave-flash" 
            align="middle" height="500" bgcolor="#FFFFFF" 
            quality="high" 
            flashvars="openUrl=_blank&amp;initLoadFile=http://nio127.googlepages.com/pq4R.mm&amp;startCollapsedToLevel=5" />

下面是展示成果,是我自己整理的PQ4R文件,資源來源均屬原參考網址所有。

另外補充一下,我一開始是使用hinet提供的網頁空間,一直無法成功顯示,後來換上傳到Google Pages就一次成功了。

關於UltraEdit32 自動載入Macro的小問題

因為前一陣子公司的電腦換了一顆新硬碟,我把舊硬碟的資料整理到新硬碟,因為很多資料的路徑都不一樣了,後來在開啟UltraEdit時出現煩人的對話方塊:

2009-03-03_101749

意思就是說"找不到我之前的設定檔!"。於是我到程式設定(Advance > Configuration)找看看有沒有地方可以改,結果還是找不到。

上網google了一下,找到解決問題的方法了,找到uedit32.ini檔後,把裡面"MacroLoadFile=" 後面的字串都刪掉即可。

2009-03-03_102222

2009-03-03_102315