Life["Breathing"] » 瀏覽器

修正 IE無法顯示Facebook的Social Plugins

hsin — Thu, 10 Feb 2011 03:09:52 +0000

IE真是歹倒叮

測到一半發現IE怎麼都出不來
解法只需要加個東西
在中加入
xmlns:fb="http://www.facebook.com/2008/fbml"
完整的樣子是下面這樣

...

這樣就可以正常顯示了

參考資料：
http://digitizor.com/2010/07/06/fix-facebook-connect-xfbml-not-showing-ie/

gmail不能收含有執行檔的zip檔

hsin — Mon, 08 Feb 2010 12:25:06 +0000

剛剛使用ASUS的線上客服

要請他寄驅動程式給我
寄了兩次都沒收到
第三次才跟他說我換aol的信箱收
這樣才收到

剛剛找了一下原因
原來Gmail如果寄的zip裡面含有exe檔案(可執行檔)
(這是google的說明頁：某些檔案類型遭到封鎖)
就會自動擋下來
而且還不會跟收件人說= =
害我以為ASUS的客服偷懶也偷太嚴重了吧
錯怪他了XD

所以下次用gmail寄附件為壓縮檔的時候要記得
看是改壓成rar(不過收件者不一定可以解沒有另外裝軟體的話 windows內建的解不了)
或是zip壓縮兩次(比較麻煩一點)
或是改副檔名成別的像是txt(也是有點麻煩還要請收件者再把副檔名改回來)
最後大絕招是放在隨身碟裡再放進信封丟進郵筒給他 (誤

以上記一下以免下次又遇到

我的portable apps

hsin — Wed, 03 Feb 2010 11:25:17 +0000

最近NB要重灌了

想說就把一些軟體放在USB裡
以後就不用灌一次就裝一次了
我用的apps menu是PStart
因為找了很久可以滑到螢幕邊緣按右鍵才顯示面板的
好像就只有PStart了
其他都是滑過去就顯示或是放在系統列裡什麼的
有時候很不乖的跳出來會讓我很焦慮XD
所以就是PStart了雖然他的畫面簡單了點 ok的

下面就是我目前有裝的軟體
不過有些我已經忘了是哪裡找到的
所以可能不是當初我下載的版本
我也不確定到底是不是安全的
我自己是都有用掃木馬軟體掃過一次
擔心的話就也是裝完再掃過一次囉

PSPad
文字編輯器
一直都是用這款所以第一個就找免安裝版來用
PSPad 4.5.4.2356 免安裝中文版 from 阿榮福利味
當有更新的版本時標題可能會不一樣

Notepad++
文字編輯器
當檔案太大的時候用PSPad開都會很卡很卡就改用Notepad++來開會順很多
官網就有免安裝的版本(.zip)可以下載
Notepad++

Firefox
瀏覽器
被制約太深了所以用別的瀏覽器都不順手
[火狐瀏覽器] Firefox Portable 3.6 阿榮版 (2010.01.28) from 阿榮福利味
當有更新的版本時標題可能會不一樣

PCMan
BBS軟體
官網就有免安裝的版本(.zip)可以下載
PCMan

Foobar2000
音樂播放軟體
我是裝1.0英文版的
Foobar2000 0.9.6.9 免安裝中文版 (1.0 免安裝英文版) from 阿榮福利味
當有更新的版本時標題可能會不一樣

音樂轉檔精靈
音樂轉檔軟體
紅淚網 HolaNet

PieTTY
Telnet/SSH 安全遠端連線程式
pietty

µTorrent
BT下載軟體
[迷你種子] µTorrent 2.0 .17427 Beta 阿榮版 from 阿榮福利味
當有更新的版本時標題可能會不一樣

FileZilla
FTP軟體(client端)
FileZilla Portable from PortableApps

Taskix
windows工具列上的程式按鈕作排序的軟體
2.0的我找不到直接對捷徑設參數的功能所以我是抓1.5的
我之前寫的介紹
 Taskix 1.5下載連結(32bit) from 官網

CDBurnerXP
燒錄軟體
CDBurnerXP 4.2.3.1110 免安裝中文版 (4.2.7.1849 中文版) from 阿榮福利味
當有更新的版本時標題可能會不一樣

LevinISO
虛擬光碟軟體
是簡體中文的而且好像沒有在更新了不過很方便的工具所以還是拿來用了
LevinISO – 免費綠色版虛擬光碟，檔案小、無須安裝，支援超過20種映像檔格式！ from 免費資源網路社群

LockHunter
解除被鎖定的檔案與資料夾軟體
LockHunter 1.0 beta 3 – 解除被鎖定的檔案與資料夾 from 綠色工廠 Easylife Blog

靈格斯詞霸
翻譯軟體
下載靈格斯詞霸

7-Zip
解壓縮軟體
7-Zip 4.65 / 9.10 Beta 中文免安裝版下載！(內附教學連結) from 海芋小站

PhotoCap
圖片編輯軟體
PhotoCap 5.0 繁中免安裝版[圖片編修] from PP熊

Google Chrome可以用Greasemonkey囉

hsin — Tue, 02 Feb 2010 02:44:41 +0000

在Chrome 4.0還是測試版的時候要用greasemonkey的功能還必須自己加參數才能使用

現在已經正式可以使用啦~
真是令人雀躍的消息 XD
只要在Userscripts.org裡找到要使用的script
直接按下 install
Chrome就會自動將這個script轉換成擴充套件
這樣就可以使用囉
不過目前有15%到25%的script還不能用
但是也夠多了 XD
enjoy it~

from: Google Chrome Gets Greasemonkey Support

在IE中看iframe嵌入不同網域的網頁時會無法使用cookie的問題

hsin — Thu, 14 Jan 2010 10:33:09 +0000

有些問題真的是不遇到就真的不知道會這樣阿~

這幾天遇到這個問題
iframe如果嵌入了不同網域的網頁
則以IE看這網頁時會無法使用cookie
應該是某些安全性的問題
但是只有IE會這樣就……………|||

所幸經過咕狗大神的提點之後
在這裡找到了解決的辦法
IE Blocking iFrame Cookies

以php的解決方法來說
只要在每個會嵌入在iframe中的頁面裡加上這行

header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

就可以囉

其他還有
ASP.NET、Django、JSP的寫法就去原始頁面看囉

Firefox升級到3.5.x時書籤工具列會縮起來

hsin — Fri, 21 Aug 2009 17:36:43 +0000

這次家裏電腦的fx升級到3.5 然後又忘記怎麼解決了

所以記一下咕狗到的東西
升級後書籤工具列會縮起來
這是在官方討論區中咕狗到的
解決的方法是
以Stylish擴充套件新增下列樣式(或改userChrome.css檔內容)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#bookmarksBarContent .bookmark-item
{visibility: visible !important;}

這是MozTW討論區的jefm提供的解法
感謝~~~

jQuery in Action Ch.7 筆記

hsin — Tue, 23 Jun 2009 12:03:52 +0000

ch.7 Extending jQuery with custom plugins

7.1 Why extend?

使用自訂擴充的plugin可以讓程式及設計有一致性
而且建立重複使用的設計有很多優點
繼承進而擴充了jQuery裡原本就存在的功能更是可以讓事情變得更簡單

7.2 The jQuery plugin authoring guidelines

要建立自訂擴充的plugin需要一定的規範及規則
以確保可以與其他plugin甚至是其他js lib正常地運作
Extending jQuery包含了像是Utility functions或是Methods兩種形式

7.2.1 Naming files and functions

為了避免plugin的檔名與原本已經在使用或是其他人建立的檔名重複
這邊提了三點建議
1.以jquery為開頭(可以避免與不是以jQuery為基礎的其他js檔重複)
2.接著可以寫這個plugin的名字
3.最後以.js結尾
以書中的例子來說
如果要寫一個名為Fred的plugin
其檔名可以命名為jquery.fred.js

另一個有用的方法可以上jQuery收集plugin的地方找找看
如果看到相同的名字就可以避免重複囉

同樣的避免function名字與別人重複到
也是一樣的方法

7.2.2 Beware the $

jQuery('#myitem').show();

如果是自己在寫jQuery的script時
常常會使用$來代替jQuery的寫法
但是在寫plugin時
則是可以使用jQuery來寫
以避免不確定性(例如同頁面有使用prototype.js)囉
或是如前一章6.2所提的

(function($){
//
// 在這裡使用$
//
})(jQuery);

寫在這裡面時就可以用$囉

7.2.3 Taming complex parameter lists

在使用plugin時可能會需要傳入不同的參數來運用
但是有時只需要用預設值就好了

//例如有一個function有7個參數
function complex(p1,p2,p3,p4,p5,p6,p7) {/* ... */}
//
//但有時只需要填入p1或是p7的值來使用
complex(valueA,null,null,null,null,null,valueB);
//
//甚或是這樣
complex(valueA,null,valueC,valueD,null,null,valueB);

這樣會造成傳入及讀取參數的複雜度
所以可以使用下面的方法來取代

complex(valueA, {
  p3: valueC,
  p4: valueD,
  p7: valueB
});

將一定要傳入的參數如同之前一樣的設定置放
而把其他有時候可以省略的參數合併放在一個object中
這樣便不用在意是第幾個參數省略
或是傳入了多少個參數了

在plugin裡要使用參數的時候
可以利用6.3.6講到的$.extend()

function complex(p1,options){
  var settings = $.extend({
    option1: defaultValue1,
    option2: defaultValue2,
    option3: defaultValue3,
    option4: defaultValue4,
    option5: defaultValue5,
    option6: defaultValue6
  },options||{});
  //其他script
}

因為$.extend()裡排在後面的object會把前面的object中有相同的property值蓋過去
所以如果有填入參數就會使用填入的參數
不然就是使用預設的參數
而有一點要注意的是||{}這個地方
當完全沒有填入參數時
就都使用plugin中的預設值

7.3 Writing custom utility functions

(function($){
//
// 在這裡使用$
//
})(jQuery);

就如同7.2.2講的
如果在plugin中有大量使用到jQuery自己本身的method
可以使用上面這樣的方法
就可以在裡面使用$ 而不受到干擾

7.3.1 Creating a data manipulation utility function

7.3.2 Writing a date formatter

這兩小節各別有一個Utility functions類型的自訂擴充練習

7.4 Adding new wrapper methods

要建立wrapper methods是使用$.fn
下面是一個簡單的例子

(function($){
  $.fn.makeItBlue = function() {
    return this.css('color','blue');
  }
})(jQuery);

通常來說除非是特殊需要
否則return的值仍是該wrapped set
這樣才能繼續在chain中使用這組elements

7.4.1 Applying multiple operations in a wrapper method

7.4.2 Retaining state within a wrapper method

這兩小節各別有一個wrapper method類型的自訂擴充練習

(function($){
  //將settings定義在這裡 才能讓其他的methods(如下面的showPhoto)使用到
  var settings;
  //主要的plugin
  $.fn.photomatic = function(callerSettings) {
    //如同7.2.3所講的參數用法一樣
    settings = $.extend({
      photoElement: '#photomaticPhoto',
      lastControl: null
    }, callerSettings || {});
    //plugin所執行的功能
    settings.thumbnails = this.filter('img');
    settings.thumbnails.click(function(){ showPhoto(this.index); });
    //如果有需要 可以給一個初始值
    showPhoto(0);
    //返回同樣的wrapped set
    return this;
  };
  //將重複性的功能另外寫一個method
  var showPhoto = function(index) {
    settings.photoElement
      .attr('src',settings.transformer(settings.thumbnails[index].src));
    settings.current = index;
  };
})(jQuery);

在7.4.2中講解的例子架構大概是上面這樣(有刪掉部份的東西)

jQuery in Action Ch.6 筆記

hsin — Fri, 19 Jun 2009 12:11:36 +0000

ch.6 jQuery utility functions

這章會介紹除了操作elements外的utility functions

6.1 Using the jQuery flags

這節要介紹三個jQuery flags
$.browser
$.boxModel
$.styleFloat

6.1.1 Detecting the user agent

(jQuery1.3已經不建議使用$.browser，而有新增一個新的物件$.support)

檢測使用者所用的瀏覽器
一開始是先介紹使用判斷method的方法

if (element.attachEvent) {
  element.attachEvent('onclick',someHandler);
}
else if (element.addEventListener) {
  element.addEventListener('click',someHandler);
}
else {
  throw new Error('event handling not supported');
}

而這個可能發生的問題是 method可以使用
但是裡面帶的參數因為不同的瀏覽器而有不同的意義
所以jQuery提供了一個辨識瀏覽器的方法

$.browser

if($.browser.msie){
	alert('這是IE瀏覽器');
}

會有下面幾個值
$.browser.msie
$.browser.mozilla
$.browser.safari
$.browser.opera
$.browser.version
前面四個返回的是boolean值
是將瀏覽器歸類到四大類
如果為該類即返回true
其餘會是false
而有些瀏覽器因為版本不同也可能會有差異所以$.browser.version是使用的版本

建議是method方法也無法判別了才使用$.browser

6.1.2 Determining the box model

(jQuery1.3已經不建議使用$.boxModel，而有新增一個新的物件$.support)

$.boxModel

$.boxModel返回一個boolean值
當是使用W3C standard box model時返回true
而使用IE box model(或是說traditional box model)時返回false
這個需要用到的時機
書中提到的是關於width跟height的解釋
使用W3C standard box model時
計算width跟height不會包含padding跟border的pixels
而IE box model則會包含
所以可能會造成elements的大小在不同瀏覽器看起來會不太一樣

6.1.3 Detecting the correct float style to use

$.styleFloat

在不同的瀏覽器對於float有不同的名字
在IE是styleFloat 其他的則是cssFloat
所以使用$.styleFloat就不用擔心這個問題了

element.style[$.styleFloat] = 'left';

不過通常使用css(‘float’)就可以了
$.styleFloat主要是給plugins或是extensions製作的人使用

6.2 Using other libraries with jQuery

$.noConflict()

在Ch1有稍微提到
如果在同個頁面上要使用其他的javascript library
可以使用$.noConflict()來避免衝突

var $j = jQuery.noConflict();

這樣就可以使用$j來代替jQuery或是$了

或是可以使用下面這樣

//要注意有帶參數$喔
(function($) { /* function body here */ })(jQuery);
//或是下面這個ready function
jQuery(function($){alert('$ = '+ $);});

在裡面就還是可以使用$來操作囉

6.3 Manipulating JavaScript objects and collections

6.3.1 Trimming strings

$.trim(value)

$('#someField').val($.trim($('#someField').val()));

就像PHP中trim()的函式
將字串前後的空白都消除掉
在表單驗證中很常用到

6.3.2 Iterating through properties and collections

$.each(container,callback)

對一個array或object中的值依序作處理

var anArray = ['one','two','three'];
$.each(anArray,function(n,value) {
  //do something here
});
var anObject = {one:1, two:2, three:3};
$.each(anObject,function(name,value) {
  //do something here
});

container是要處理的array或是object
callback是作處理的function
這個function會有兩個參數第一個是index 第二個是value

6.3.3 Filtering arrays

$.grep(array,callback,invert)

以某個條件過濾一個array以生成另一個新的array

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
var newarr = $.grep(arr, function(n, i){
					      return (n > 5);
					    });
//新生成的newarr會是 [9, 8, 6, 9, 7, 8, 6, 9]

第一個參數array很明顯的就是要處理的array
第二個參數callback是作處理的function 會有兩個參數第一個是value 第二個是index
第三個參數invert是個boolean值
如果省略invert或是填寫false時當callback返回值為true的話就會將這個值放進新生成的array中
如果invert填入true 則當callback返回值為false才會將這個值放進新生成的array中

var bigNumbers = $.grep(originalArray,'a>100');
//這時jQuery會自己建立一個function
function(a,i){return a>100;}
//而a就是value ,i就是index

如上所示 callback也可以簡寫為一個string

6.3.4 Translating arrays

$.map(array,callback)

對一個array作處理並生成為一個新array
第一個參數array是要處理的array
第二個參數callback是作處理的function 會有兩個參數第一個是value 第二個是index

//將array中的每個值都+1
var oneBased = $.map([0,1,2,3,4],function(value){return value+1;});
//callback如同$.grep()一樣 也是可以寫成一個string
var oneBased = $.map([0,1,2,3,4],'a+1');

而有一點要注意的是
如果callback返回值為null或是undefined
則這個值就不會被放進新array中
所以新的array元素個數是有可能比原本的array少

var characters = $.map(
  ['that','other thing'],
  function(value){return value.split('');}
);
//characters會是['t','h','a','t','o','t','h','e','r',' ','t','h','i','n','g']

如上所示另一個可以提的是
如果callback處理值完之後回傳的是一個array
則會將這些所有回傳的array都和在同一個新的array中

6.3.5 More fun with JavaScript arrays

$.inArray(value,array)

判斷一個array中有沒有某個值

var index = $.inArray(2,[1,2,3,4,5]);
//會返回1

第一個參數value是要判斷的值
當第二個參數array中遇到第一個值為value的時候會返回其index
找不到的時候則會返回-1

$.makeArray(object)

var images = document.getElementsByTagName("img");
//這樣是一個NodeList

將一個array-like object(像是一個NodeList)轉換成array

$.unique(array)

將array中相同的值剔除掉

6.3.6 Extending objects

$.extend(target,source1,source2, … sourceN)

將數個object合併
下面是一個簡單的例子

var target =  { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { e: 7, f: 8, g: 9 };
$.extend(target,source1,source2);

如果沒有返回給一個新的object
則是會合併在第一個參數target
而這個例子中 target會變為{a: 1, b: 2, c: 4, d: 5, e: 7, f: 8, g: 9}
有一點要注意的是
如果objects中有相同的property 則後面的object的會蓋過前面的
(這個例子就是source1的c:4會蓋過target的c:4，source2的e:7會蓋過source1的e:6)

6.4 Dynamically loading scripts

$.getScript(url,callback)

依據條件或是情況下再讀取其他的外部script 而不是在頁面load時就讀取script
第一個參數url是要讀取的script的路徑
第二個參數是讀取script完成後會執行的function

造飛機~

hsin — Mon, 08 Jun 2009 10:26:56 +0000

不知道有沒有人發現上面有時候會有一隻飛機從右邊往左邊飛過去XD

這是我突然覺得上面標題的地方好像有點空
好像該加些什麼喔
所以想說加台會飛的飛機好了哈哈
他有一定的機率會出現所以不是每次都會出現囉
如果不想瞭解運作原理的話可以直接下載檔案就好~
這是檔案連結
將plane這個資料夾放在跟網頁同一層的目錄
並在該網頁的之中的任何地方加上一行
建議是頁面的最後也就是的上面一行

就有飛機飛囉~
(如果網頁有作網址rewrite 就可能要把此js檔的路徑跟js檔中圖檔的路徑改成絕對路徑才會正常動作喔)

有時候會卡卡的應該就是. . .瀏覽器的關係
用google chrome看會飛很快XD

========分隔線===========分隔線========分隔線=============

以下是有用到的相關原理
一共需要4種東西

首先是要加入load事件
可以參考這個

var oldOnload=window.onload||function(){};
window.onload=function(){
oldOnload();
//do something
}

這樣如果頁面上已經有其他onload的函式就不會被蓋掉了

再來呢
因為要讓飛機從最右邊開始飛
所以要取得可視螢幕的寬度大小
可以參考這裡
而需要這段程式也是因為IE比較XXX的關係
所以要判斷是不是IE

function getSize(){
  var myWidth=0;
  if(typeof(window.innerWidth)=='number'){//Non-IE
    myWidth=window.innerWidth;
  }else if(document.documentElement && (document.documentElement.clientWidth||document.documentElement.clientHeight)){//IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  }else if(document.body && (document.body.clientWidth||document.body.clientHeight)){//IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

第三點呢
則是只有當圖片是png才需要的
因為IE6之前的瀏覽器不支援透明的png圖片(會顯示一塊灰色的)
所以如果當圖片是png的時候
需要用到一點css hack
下面是函式中的片段

var img_src="plane/plane.png";
var img2_src="plane/transparent.gif";
var img_w=45;
var img_h=45;
var img=document.createElement("img");
if(navigator.appName=="Microsoft Internet Explorer"){
	img.src=img2_src;
	img.width=img_w;
	img.height=img_h;
	img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img_src+", sizingmethod=scale);";
}
else{
	img.src=img_src;
}

如果為IE的話則是先將原本的圖片替換成一張透明的圖片
並設定這張透明的圖片寬度高度使寬高跟原本的圖片一樣
再加上IE特有的filter
便完成了

最後一點就是讓飛機動起來～
先將這個的position設定為absolute
並設定好top跟left
再利用setTimeout()改變他的left
結果就會很像在動囉~

如果要看完整的js檔可以在該下載檔案裡面看到喔

這個例子沒有用到javascript library(如jQuery)
所以碼不是太簡潔
如果利用jQuery的話會更簡單
下次再試試看XD

書籤小工具網頁簡轉繁、繁轉簡

hsin — Fri, 05 Jun 2009 14:31:29 +0000

在重灌狂人那邊看到的

這個真是好耶～
firefox就不用裝新同文堂了
而且其他瀏覽器也都可以用
詳情就去免裝軟體，「新同文堂」網頁繁、簡中文轉換按鈕！（書籤小工具）看吧~

=update=
剛剛看了一下內容
bookmarlet是引入一個js檔
而這個js檔是搜尋頁面所有的元素
然後將找到的簡體中文都換成繁體的
可以找得到並轉換的字大概是2500多個中文字
會~~無腦的~~硬轉
而且沒有像Fx的新同文堂addon一樣有詞彙辨識
(例如：皇后->皇後)
所以如果比較介意或是謹慎的人就還是用addon囉
我是沒差哈哈哈用這個就好！

Life["Breathing"] » 瀏覽器

修正 IE無法顯示Facebook的Social Plugins

gmail不能收含有執行檔的zip檔

我的portable apps

Google Chrome可以用Greasemonkey囉

在IE中看iframe嵌入不同網域的網頁時 會無法使用cookie的問題

Firefox升級到3.5.x時 書籤工具列會縮起來

jQuery in Action Ch.7 筆記

jQuery in Action Ch.6 筆記

造飛機~

書籤小工具網頁簡轉繁、繁轉簡

在IE中看iframe嵌入不同網域的網頁時會無法使用cookie的問題

Firefox升級到3.5.x時書籤工具列會縮起來