Category JavaScript Archive

昨日某ブログの管理人さんとの飲み会の席で「誰もfixed.jsの事を話題にしないのは何故だ？」なんて事を言われました。

fixed.jsはIE6でposition: fixed;を使う事を可能にするライブラリで、僕の頭の中にはposition: fixed;を使う事自体頭になく特に気にした事はなかったのです。

つい先日Webマニュアル関連のコーディングをする事になった話をし、これ左サイドのナビを固定出来たらな...なんて話をしたら、なんでfixed.jsを使わないんだ！って事を言われました。

早速DLして使ってみると...いやこりゃ結構便利（笑）使わせていただきます！

fixed.js Downloadサイト

上記サイトの最下部moduleのテキストからダウンロード可。
headタグ内に

<script type="text/javascript" src="fixed.js" ></script >

の記述をすればOK

2009.4.13追記

fixed.jsだとIE8でエラーが出るので別のライブラリを使ったほうがよさそうです。Cyokodog::Diaryでposition:fixedに関するエントリーがありました。

class属性を与えるだけで画像のエッジにドロップシャドウやインナーシャドウ、はたまた角丸を与えてくれるJavascriptライブラリcorner.js。

便利なのが角丸+ドロップシャドウ、インナーシャドウ+ドロップシャドウなど複合して使えるところ。

ただ大きな問題がWindows IE6にもIE7にも対応してないところ。けれどもclassを与えるだけなのでサクっと付けたり外したり出来るのは魅力。

corner.js

IE7で正式にサポートされた24bit png。今年はこのpngを使ったサイトが流行しつつあるけど、このアルファチャンネルを持った24bit pngをIE6以前で使うにはアルファイメージローダーというややっこしい記述をする必要があった。しかもアルファイメージローダーを使用した要素内にリンクがあった場合、リンクが効かないという使うには致命的な欠点があった。

しかーし！なんとIE6以前で24bit pngを表示させ、リンクの機能もばっちりのJavascriptライブラリがDesign Walkerさんのブログで配布されてました。

いや〜こういったライブラリは助かりますね〜ありがたく使わせていただきます！

先日のエントリーで個別アーカイブページでLightbox JSが動作しないと書きましたが、いろいろなことが起こるのやすなおさんが教えてくれた小粋空間のエントリーをよーく読んだら解決いたしました（苦笑）

その内容と言うものはbodyに記述されたonloadイベントハンドラがLightbox JSと競合してしまう問題でした。そういえば仕事でLightbox JSを導入したときにonloadと競合したことを思い出しました...てな訳でこれで個別エントリー問題の件は無事解決しました。

7月7日のエントリーでThickboxを導入したけれど、Livedoorブログから移行するにあたってThickboxからLightbox JSに変更することにしました。理由は単純、Thickboxは設定するCSSが多かったからです（苦）。

Lightboxにして一つ問題が発生。何故か個別ページでLightboxが利かない。いくつかのサイトを巡ってみたけど解決策が見つからない...

最近流行の画像をフォーカスさせて見せるスクリプトを導入。Light Boxにしようかな？と思ったけど何となくThickboxの方をチョイスしてみた。

使用方法は簡単でこちらのサイトのDownload This Exampleからファイルをダウンロード。中のglobal.cssとcircle_animation.gifとjquery.js、thickbox.jsを取り出して使用。それぞれのファイルをcss、js、imagesフォルダに格納してthickbox.js内に記述されているcircle_animation.gifのパスを変更すればOK。global.css内のプロパティを書き換えれば色々変更も出来る。とりあえずデフォルトでしばらく使って見よっと。

写真はハワイに行った時の写真でアラモアナビーチで撮りました。