Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Saturday, December 23, 2006

[Javascript] Selectable Post Font Size for your best view!

之前有看到許多網站或討論區,有可以自行選擇顯示字型大小的功能,對於視力好的人來說或許字型小了些沒什麼影響,但有些老人家..(是我嗎..XD),有時就會覺得看得有些吃力,若能迅速的讓字型放大,不用再花時間ReLoad頁面的話,將會是個很不賴的工具!!

※當然藉由按 Ctrl++/ Ctrl+- (for Firefox),或者是Browser提供的放大縮小功能,不然就是通用的「Ctrl+滾輪上下滾」來達到放大縮小的功能,但我這個人比較龜毛,因為這兩種功能所表現出來的文字常常是破碎或是很醜,個人無法接受...時常因為這樣不逛那個站了…囧rz,並且透過上述的方式縮放頁面字型時,是所有版面的字型都會放大,也就連帶影響到Sibebar、Header...及其它非本文章內容的部份,整個網站當初設計好的版型都變了樣,喪失美感! 因此,我在此Blog中提供三種用於縮放文章內容
的合適字型讓大家選擇(位於此處)!!

至於在Yahoo Taiwan的新聞裡點進每一篇新聞之後,也有提供類似這樣子的工具,But...他每次點換字級大小之後,都必需要 Reload 部份的頁面,明明可以不用Reload的,為啥他這麼作…後來發現,廣告部份也隨著Reload換新的了...囧rz,想必這是最主要的原因吧,那是他們吃飯的工具,就給他reload一下吧...XD!!

參考資料來源:
懒人图库 LAYABOUT'S GALLERY
我根據上面所提供的的簡易版本,再修改成較適合於New Blogger版本 ^_^(當然再作適當的修改之後,其它Blog也都是可以套用的)。

在修改的過程中,又遇到某個語法getElementsByName在IE中的話只對表單的物件有作用...OMG..IE sux again!!還好有底下這位大哥的教學,解救了我...感恩!!
參考資料來源:
IE vs. FireFox 系列 - getElementsByName問題
於是,最後完整版的Javascript code (IE & Firefox 都正常) 就變成底下:

[Updated 2006-12-26] 針對留言中Benjamin網友所遇到的問題,在這裡提醒大家,貼底下code時應注意的事項:

由於Blogger在parse template語法有無錯誤時,他會檢查是否存在相對應的左括: <及右括: >,若不存在便會跟你說你的template語法沒有正確的close,導致儲存失敗。不幸的是,你若將Javascript嵌入template檔中,並且又很巧的,用到compare operator,例如:「小於:<」,如此一來他便會產生上述所提的,少了相對應的右括: >,而導語法錯誤啦! 因此,大家若要將底下這段javascript嵌入template中的話,記得將裡頭的<置換成&lt;

<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute("name");
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
zooms[i].style.fontSize = size+'px';
}
}
</script>
之後,因為我只讓本文內容(Post.body)的字型大小可供縮放,因此編緝template內容,將裡頭找到的所有
<p><data:post.body/></p>
都置換成底下的樣子
<span name='zoom'><p><data:post.body/></p></span>
如此,就可以將被 name='zoom' 的span tag包住的那些內容,賦予字型縮放的功能!!

最後在將你要提供此項功能的界面,填入此段程式碼即可,裡頭的數字以px為單位:
<a href="javascript:doZoom(16)">大</a>
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>
※展示出來的功能,請參照此圖,並加以操作看看…

61 Comments:

Who: Benjamin Class:
When: December 25, 2006 10:12 PM  

哈哈!這功能太好啦!!這樣我認識的那些個"真正"的老人們就沒理由說我Blog字太小,都給自己看開心的了!!

又能堅持住自己對Blog文字級數的搭配,又貼心的可以給閱覽者有良好的閱讀選項!!好文~~收了!!^_^

Who: Tsung-Kai Chen Class:
When: December 26, 2006 10:04 AM  

To benjamin:
哈哈! 我想對於搞Web Design的人,在文章內容方面,很少人會喜歡用大級數文字的吧!可能國外站也逛多了,英文字體在小級數的表現都還可以接受,但中文字卻無法在那種級數程度下有良好的閱讀性! 個人也是偏好較小號的字體^^,但諸如你說了,為了顧及全局…還是得提供較彈性的功能!

Who: Benjamin Class:
When: December 26, 2006 9:23 PM  

哇哈哈!!大感謝!!
我也把Blog的文章區搞上文字大小控制囉!!再謝 ^_^

不過,不知為啥,我直接複製文中的javascript到我的版型html中,位置都沒錯,內容也都沒動,可Blogger就是一直提示語法有誤耶~~噗!一直說不完整,就是不給存 @@

我只好山不轉路轉,將語法存成.js檔!嘻嘻~用呼叫的就....ok了~~

Who: Tsung-Kai Chen Class:
When: December 26, 2006 10:00 PM  

To Benjamin:
嘿嘿嘿,這時再偷教你一招,不收學費...^^
我發現Blogger在parse template語法有無錯誤時,他會檢查有無相對應的左括: <及右括: >。不幸的是,你若將Javascript嵌入template檔中,並且又很巧的,用到compare operator,例如:「小於:<」,如此一來他便會說,他便會說你語法錯誤啦!! 相信聰明的你一定懂的啦..^^

Who: Benjamin Class:
When: December 26, 2006 11:41 PM  

原來如此啊...難怪我前看後看,怎看都看不出語法哪裡有誤!!呵呵~~受教囉!!謝謝 ^^

Who: hvl Class:
When: February 05, 2007 12:55 AM  

哇。。Blogger能做到那么出色,实在佩服。

Who: Tsung-Kai Chen Class:
When: February 09, 2007 10:48 PM  

To hvl:
Blogger就是夠free呀...^_^ 想作到什麼樣程度都是ok的啦...哈哈,隨你搞..

Who: BearJess Class:
When: February 19, 2007 10:08 PM  

首先道句 新年快乐!!
我按着你说的做,可是A+/A- 猛按都没反映呀,是不是js冲突呢?搞不懂的说
顺便再请教下,我的Author comment highlighting and notification这个hack貌似也没反映,图片不显示呀
希望帮忙看下 谢谢
今晚准备又从你这盗取AJAX Labels Cloud 这个好东东,有意见可以保留^_^
http://bearjess.blogspot.com/

Who: Tsung-Kai Chen Class:
When: February 21, 2007 12:01 AM  

To bearjess:
Happy Chinese new year too ^_^
衝突唷? 應該不至於…我想應該是你在置換data:post.body的地方是不是沒弄好...不好應該是不會有太大的問題,你再檢查看看…
至於Author comment highlighting and notification這個hack,本來就不會顯示圖片了,顯示author photo的hack是"Comments with profile photos"這個才對唷..^_^
剛看了你的AJAX Labels似乎是成功囉,恭喜呀!!你的template頗有質感,自己畫的呀…真厲害,真羨慕你們這種有美工能力的人.. :D

Who: Even Wu Class:
When: February 22, 2007 2:33 AM  

事實上真正好的網頁設計,title header footer sidebar等等,應該要經得起瀏覽器的縮放,建議閱讀 Bulletproof web design 一書,改的好就再也不破碎。

Who: Tsung-Kai Chen Class:
When: February 22, 2007 11:14 AM  

To Even Wu:
嗯..是這樣子的呀,謝謝指導!! 有機會再來翻翻你推薦的那本書...
但我這懶鬼,可能沒這麼勤勞,哈哈…畢竟不是學這行的,玩票性質吧了..

Who: BearJess Class:
When: February 25, 2007 5:55 PM  

博客修改告一段落了,comment photo已经实现,但自行选择字型大小的功能看来只能放弃了,实在找不出问题.不过还是谢谢啦^_^,告知一下,已加链接,因为感觉用相片貌似不太好,所以自己画了一下,望见谅

Who: Tsung-Kai Chen Class:
When: February 26, 2007 3:48 PM  

To bearjess:
哈哈...恭喜呀,還幫我劃圖片打廣告,真是不好意思...XD, thx bear

Who: Peter Chen Class:
When: March 15, 2007 1:21 PM  

您好,想要請問您所提供的程式碼要貼在什麼部分呢,我使用的是New Blogger,按照了您的方法還從您網頁的原始碼觀察了許久,雖然張貼時沒有出現錯誤訊息,但最後點了sidebar的大、中、小卻沒有任何反應,所以想請問您這個問題,謝謝...

Who: Tsung-Kai Chen Class:
When: March 15, 2007 2:15 PM  

To Peter Chen:
至於這個問題,似乎你遇到的情形和 Bear Jess : http://bearjess.blogspot.com/,此位留言的人一樣,他也是會沒有作用...但大多數人都是可行的!!若沒看原始碼的話,這樣我也很難幫你Debug... ,真正不好意思啦... :p

Who: Peter Chen Class:
When: March 16, 2007 9:26 AM  

不好意思,那我該如何將原始碼寄給您呢?
用mail的方式可以嗎?

Who: Tsung-Kai Chen Class:
When: March 16, 2007 10:40 AM  

To Peter Chen:
當然可以呀…只是可能要我有空的時候,才能幫你改看看...無法很即時的給你回覆就是了!! E-Mail: chenkaie@gmail.com

Who: Peter Chen Class:
When: March 16, 2007 3:24 PM  

謝啦,我已經寄出了,由於不知道如何完整備份出來,所以我Copy & Past將所有的程式碼貼在mail上寄出...

慢慢來沒關係,感謝你願意幫忙...

Who: Balaboo Class:
When: March 17, 2007 12:17 PM  

我找不到
< p >< data:post.body/ >< /p >
這條程式碼...

怎麼辦...

Who: Tsung-Kai Chen Class:
When: March 19, 2007 8:03 AM  

To 李阿瑋:
咦...應該是temlate有被你改過了,預設的template記得都是有的(要不然就是我記錯了),不然試著找"<data:post.body/>"這項,總該有吧...取代看看效果如何囉!

Who: Niner Class:
When: March 24, 2007 2:44 PM  

Hi Kaie,
我也是找不到
<p><data:post.body/></p>,
但是有<data:post.body/>。於是我將所有的<data:post.body/>
變成
<code><span name='zoom'><p><data:post.body/></p></span></code>,
但是還是不成功,無法改變字體大小,不知是什麼原因。

我用的 Template 是從這下載的。
我把 javascript 另存成 .js 檔放到我 Google Pages 的網頁空間。
我的 Blog 在此
謝謝回答 !!

Who: Tsung-Kai Chen Class:
When: March 26, 2007 8:04 AM  

To Niner:
似乎成功了對吧..^_^ 我剛進去點時,用Firefox和IE都是正常的,恭喜你啦,難不成你用Safari那我就沒得測了. XD

Who: Cellocoffee Class:
When: July 08, 2007 3:31 AM  

hi, 來潛水很久的大提琴媽媽+電腦白痴
請問第一部分跟"size大中小"的語法是要箝在哪裡? 多謝多謝

Who: Tsung-Kai Chen Class:
When: July 08, 2007 11:36 PM  

To cellcoffee:
你好.. 第一部份嵌在 </head> 這行之前即可!!
"size大中小"就看你想放在blog中的哪個地方囉...看你自己囉!! 你可以建立一個"HTML/JavaScript的網頁元素",把語法貼在裡頭...即可!!

Who: Cellocoffee Class:
When: July 11, 2007 6:48 AM  

成了!!yeah!!這樣我爸媽救回很高興了!!
多謝多謝

Who: Tsung-Kai Chen Class:
When: July 11, 2007 5:46 PM  

To Cellocoffee:
恭喜呀! 你開心、我開心、大家都開心..

Who: ang ang Class:
When: August 17, 2007 3:36 PM  

Hey Kaie,

怎麽我的程式碼裏頭沒有
< p >< data:post.body/ >< /p > 也沒有
< data:post.body/ >

請問該如何下手?謝謝!

Who: Tsung-Kai Chen Class:
When: August 18, 2007 1:59 PM  

To ang ang:
這麼奇怪呀...應該不可能呀,是不是你忘了勾選"expand widget element",我用英文的控制台,不知中文的叫啥,應該是”擴展xxxx"的

Who: ang ang Class:
When: August 18, 2007 6:37 PM  

Kaie:
我成功添加了。謝謝你!原來我之前沒有展開小裝置範本,我不曉得什麽時候才應該展開?還有。。。請問你上方的Home,Ajax Tags Cloud。。。是如何添加?不知是否方便講解?謝謝!

Who: Tsung-Kai Chen Class:
When: August 18, 2007 7:44 PM  

To ang ang:
除非你只有作小動作的修改,如改css的部份,不然其實大部份時候都得勾選那個選項,反正你每次都勾,保証不會錯的 ^_^

你可以參考這一篇 http://0rz.tw/482R2 他有提供source code,裡頭所有看 supernav 這個keyword有關的文字都是組成那個(Header)物件所需的元素,要不然你直接檢示我Blog的source code也可以..我是學那個網頁的..

Who: 土人 123 Class:
When: August 29, 2007 10:42 AM  

找這個找好久囉,謝謝大大,收下囉~

另外請問一下,如果我希望「大 中 小」這幾個字在左邊框架的置中位置,應該加上什麼碼呢?

謝謝~

Who: Tsung-Kai Chen Class:
When: August 29, 2007 11:11 AM  

To 土人 123:
改成底下這樣就ok了..

<div style="text-align:center"
<a href="javascript:doZoom(20)">●變大 </a>
<a href="javascript:doZoom(16)">●中型 </a>
<a href="javascript:doZoom(13)">●變小 </a>
</div>

Who: fREE2Software Class:
When: October 10, 2007 7:39 PM  

Kaie's站長你好

在我的blog加了這個,是成功可變字型大小,不過只在首頁表。
按標題後想再改變字型大小就不能了
未知可否教一下我
謝謝啦!

Who: Tsung-Kai Chen Class:
When: October 11, 2007 9:22 AM  

To fREE2Software:
咦...不行嗎!! 我試了是ok的...你的意思應該是指,在http://chenkaie.blogspot.com/首頁,這功能可以用,但是點了標題之後,類似
http://chenkaie.blogspot.com/2006/12/javascript-selectable-post-font-size.html
這個功能就失效了對吧...我應該沒有會錯意!!

Who: fREE2Software Class:
When: October 20, 2007 8:00 PM  

Kaie's站長你好~

問題以解決了~

因為我之前放在head內

現在改放在body內~就ok了 :)

Who: Tsung-Kai Chen Class:
When: October 22, 2007 12:02 AM  

To fREE2Software:
太棒了,恭喜你解決問題了...上次我用Fx開是ok的,可能問題出在IE上吧,anyway...解決就好啦!

Who: mai Class:
When: July 28, 2008 12:01 PM  

請問你的連超後,會有個另開視的圖示
那是要寫什麼css的語法呢?

Who: Tsung-Kai Chen Class:
When: July 28, 2008 4:42 PM  

To mai:
我想你說的不是css語法,是指html語法,加入底下的東西<a target="_blank" ...></a>即可開新視窗。

Who: 辦公室文具 Class:
When: August 27, 2008 3:56 PM  

CSS的用法我到現在還沒搞明白,知道加層的用法,但還是容易搞亂,看來要思路清晰才行!!

Who: Tsung-Kai Chen Class:
When: August 28, 2008 12:01 AM  

To 辦公室文具 :
css 很好懂的..多看多學多模仿就會了...
若有裝firefox記得裝firebug這個plugin!

Who: Anonymous Class:
When: September 01, 2008 9:47 PM  

hi kaie

From what i understand, 1)the Script goes into the html layout....2)replace post.body with that spannamezoom code...3) add that dozoom in the sidebar html widget.

i tried adding the script and preview ....it gaves me and error that says "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup."

Who: shining Class:
When: April 21, 2009 12:33 AM  

很好用,不會改到標題大小。謝謝。


目前看起來,第一次載入時的字體大小只能用百分比來設定,其他(large等字樣、px)都會導致上述語法失效。

Who: Tsung-Kai Chen Class:
When: April 21, 2009 2:17 AM  

To shining:
感覺,應該不會失效才是,因為那個填入的數值是以px為單位,有強制給了..致於詳情要看了才知道

Who: Lonyice,小龍 Class:
When: May 24, 2009 6:44 AM  

我試了好久都沒成功..

不知道問題到底在哪...

之前那個部落格就可以..

Who: Tsung-Kai Chen Class:
When: May 24, 2009 5:09 PM  

@小龍
這樣我也不知問題在哪,有有blog可以看才知道!!剛去你那晃一下,沒看到相關link可以點!

Who: Lonyice,小龍 Class:
When: May 25, 2009 10:54 PM  

因為沒有效 所以被我先拿掉了

我現在把他放上去了
連結在側欄日曆下~

按了都沒反應..

Who: Tsung-Kai Chen Class:
When: May 25, 2009 11:55 PM  

@Lonyice
你的這段code少了一個分號。仔細看底有個粗斜體的分號...XD,反正整段換成這個就對了
function getElementsByName_iefix(tag, name) {var elem = document.getElementsByTagName(tag);var arr = new Array();for(i = 0,iarr = 0; i < elem.length; i++) {att = elem[i].getAttribute("name");if(att == name) {arr[iarr] = elem[i];iarr++;}}return arr;};
function doZoom(size){var zooms = getElementsByName_iefix("span", "zoom") ; for (var i = 0; i < zooms.length; i++) {zooms[i].style.fontSize = size+'px';}}

Who: Lonyice,小龍 Class:
When: May 26, 2009 1:16 AM  

真是太感謝了~~

總算完全改好了


這樣老人家就不會抱怨字太小了XD

Who: Anonymous Class:
When: October 26, 2009 2:04 PM  

你好,我套用了以上的code還是無法變動字型大小@@ 也用span name='zoom' tag包住data:post.body部分仍無動於衷,請問我的問題癥結在哪了?謝謝~~
這是我的bloghere

Who: Tsung-Kai Chen Class:
When: October 26, 2009 8:55 PM  

@Anonymous:
你把你的Blog鎖住了!

Who: Anonymous Class:
When: October 26, 2009 10:13 PM  

不好意思,測試時把它locked,已經開了,謝謝~

Who: 烈燄 Class:
When: November 22, 2009 4:31 PM  

您好,我想請問一下我用blogger(新版文章編輯器)或 Windows Live Writer 寫的文章,使用這個 hack 並不能成功,但用blogger(舊版文章編輯器) 寫的文章卻可以用.我試找到的原因是 blogger(新版文章編輯器)fontSize是用英文大中小表示或 Windows Live Writer是用數字表示而
blogger(舊版文章編輯器)是用百分比表示,那如果我想把這個 hack 改成新版可以
使用該如何改呢?又或者您是用什麼寫blogger的文章.

Who: 烈燄 Class:
When: November 22, 2009 5:05 PM  

您好,我用blogger(新版文章編輯器)或 Windows Live Writer 來寫的文章都不能正常使用這個HACK,但用blogger(舊版文章編輯器)則可以正常,我試找問題所在,原因好像是blogger(新版文章編輯器)fontSize是用英文大中小來表示,Windows Live Writer是用數字來表示,而blogger(舊版文章編輯器)是用百分比表示,請問有方法或改參數來使用這個HACK嗎?或您是用什麼來寫blogger文章.請大大有空幫我解答一下謝謝?

Who: Tsung-Kai Chen Class:
When: November 23, 2009 10:13 PM  

@烈燄
我猜用Windows Live Writer來寫的話,他自己會包一層,裡頭的style有指定字型大小的參數,所以無論你外層怎麼指定改變字型大小的屬性也不會有變化。所以,若你用WLW寫的話,POST上去之後,再用blogger連進去,將內文中跟font-size有關的參數都手動拔掉就OK了,只是麻煩點就是了,我猜的啦,我也沒用過WLW。我都是用blogger內建的編輯器直接撰寫而已。

Who: 烈燄 Class:
When: November 23, 2009 11:22 PM  

感謝您的回答,我也是用blogger內建的編輯器來寫,只是新版編輯器不能用這個HACK
,所以才想來問您看看,另請問如字體是採用xx-small, x-small, small, medium, large, x-large,這種方式的話,那您上面的HACK裡的fontSize = size+'px';這裡的單位可以改嗎?如可以那要成什麼單位呢?謝謝歐!

Who: Tsung-Kai Chen Class:
When: November 23, 2009 11:33 PM  

@烈燄
新版編輯器呀,那我就沒用過了..
其實跟xx-small, x-small, small, medium, large, x-large,這種表示方式沒什麼關系,主要是因為這個hack是針對這個<data:post.body/>裡頭的內容包一層,餵給fontsize這個值,若你的文章內容有個別指定了字型大小的參數的話,那就無法透過這方式動態改變大小囉,除了那些沒被特別指定的才會有作用。

Who: Buy Aussie 澳洲代購代買服務 Class:
When: May 31, 2011 5:18 PM  

Kaie大大你好,

看了你的文章及網友的留言,試了很多種方法,改來改去,還是沒有成功. 我的版型裡只有一個data:post.body,試過改成你提供的樣式,也是沒有成功.不知道是不是忽略什麼地方了?? 謝謝!

Who: Tsung-Kai Chen Class:
When: June 27, 2011 12:16 AM  

@Buy Aussie,
Sorry這麼晚才回,之前看了你的留言之後,一直忘到現在。我剛看了你的Blog的source code,發現你這一個步驟(如下),應該就弄好,不然就OK了!
<span name='zoom'><p><data:post.body/></p></span>

Who: puppy chen Class:
When: February 09, 2013 12:04 AM  

最近剛使用blogger 考古到這篇文,非常實用~

我參照文章的方式,
再參考21樓的方法(我的code跟那位大大一樣)
成功改變文章大小.

不過之前搬家過來的文章不會受影響
(反正舊文章本身是大字的)

太棒了xd

Who: 陳世興 Class:
When: February 02, 2016 11:59 AM  

雖然這篇文章已經有點久了
但是我經由他人的介紹得以拜讀您的文章
實在佩服您的熱心分享!!
只是小弟我還是功敗垂成QQ