FancyTooltips Fix

FancyTooltips,源自Nice Titles,是一個很流行的wordpress plug-in。Nice Titles顧名思義就是顯示更漂亮的title屬性,而FancyTooltips除了title,還支援<acronym> <abbr> <ins> <del>這些標籤。當滑鼠游標指到這些link/text的時候,就會秀出一個漂亮,且包含有用資訊的方框(如同本站所使用的)。

不過FancyTooltips,搭配Firefox 1.5+顯示時,有一個缺點,就是不明原因,有時候會重覆秀出同樣的內容2~3次(例圖)。前陣子在整理站台時想把它改好,javascript功力很弱的我,馬上體會到javascript很難debug。就算用debugger,會在hit breakpoint的時候focus out,沒remote debug,要用來處理像這種和hover有關的東西實在很難辦到。

再來就發現Nice Titles沒這個問題,於是就想說那把Nice Titles改到像FancyTooltips一樣的功能如何?開始動手時第一件發現的事就是Nice Titles parse datetime屬性完全是亂搞,出來都是invalid time(怎麼沒人發現?)。而FancyTooltips那份也沒有處理時區的部份,都當成localtime,所以會和wordpress預設都用+00:00差了好幾個小時。想要自己parse timezone,搞了半天就發現,datetime格式可長可短,要完整parse,要寫個不小的parser,於是就又把它丟著沒動一段時間。

事實上之前就有人寫了一個重覆顯示的work around(可以在他的站去看效果),在fancytooltips.css中加入以下兩行:

div.fancytooltip > p {display:none;}
div.fancytooltip > p:first-child {display:block}


算是頭痛醫頭的辦法,就把多出來的藏起來。不過我不太喜歡,因為這樣只剩一行,比較不漂亮。而Firefox 1.5的pseudo element selector還沒辦法支援到nth-child這類複雜的運算,所以我選不到second child。後來就發現沒問題的Nice Titles,就跑去研究,然後鑽到死胡同裡面去停止。

但是前兩天和人討論CSS3規格的時候,想到nth-child,再次聯想到之前這個問題。於是終於想通,我不能選第二個,為什麼不能選最後一個?於是加上last-child之後,變成以下這樣:

div.fancytooltip > p {display:none;}
div.fancytooltip > p:first-child {display:block}
div.fancytooltip > p:last-child {display:block}


果然就沒問題了!在Firefox 1.5和IE6就沒問題了。(last-child是Firefox 1.5有支援到的CSS3 selector,所以可以用,IE則是上面三行都不吃,所以不會影響原來的行為。在一些CSS2 ready但是不支援last-child的browser,效果可能會類似只做前兩行。不過反正現在Firefox 1.5和IE6是大宗,其它就算了:p)

再來就是datetime的問題。仔細想想,wordpress的<ins> <del>標籤並不會幫你插入server timezone,而永遠都是+00:00的UTC時間。那麼只供wordpress使用的話就不需要parse timezone,直接build UTC date就好了。
oDate = new Date(nYear, nMonth, nDay, nHours, nMinutes, nSeconds);
改成oDate = new Date(Date.UTC(nYear, nMonth, nDay, nHours, nMinutes, nSeconds));即可。

廢話很長,總之就這樣把FancyTooltips兩個傷腦筋的問題給解決了。有需要的人可以自行修改,或嫌麻煩,下載內含修改的檔案蓋過原來的plug-in。

留言

  1. [...] FancyTooltips在Firefox下會顯示雙重tooltip是個老問題了,而之前我也弄了個修正,但是因為舊的修正和IE7相處不太愉快,最近一直在想辦法改良它。 [...]

    回覆刪除

張貼留言

這個網誌中的熱門文章

文言文

談談台灣人使用統傳漢字的優越心態

台灣工程師常唸錯的英文單字