Open MagicVox.net
ヘッダメニュー
|
アンカー名を含むパーマリンクURLを用いると、記事中のコメントやトラックバックを一意に表すことができます。しかし、たくさんのコメントやトラックバックが並ぶ場合には、そのURLで示されるものがどれなのかハッキリと明示できれば混乱が少なくて済みます。そこで naoya さんがDampening, Buffering, OpenSearch, Ajax な Hackで触れられていた The Yellow Fade Techniqueを真似て、URLが示す目的のアイテムを目立たせるようにしてみました。
http://www.magicvox.net/archive/2006/02041724/#cid156
ここでは naoya さんの記事と同じく、 The Fade Anything Technique で公開されている fat.js を用いることにします。 そして、パーマリンクURLからアンカー部分を取り出して、フェード処理を行うよう JavaScript を追加します。
<div id="cid1">#cid1 の時フェード処理されるコメント 1 ...</div>
<div id="cid2">#cid2 の時フェード処理されるコメント 2 ...</div>
<div id="cid3">#cid3 の時フェード処理されるコメント 3 ...</div>
：
<!-- ↓JavaScript はページの最後のあたりに -->
<script type="text/javascript" src="/include/fat.js"></script>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href;
var idx = url.indexOf ("#");
if (idx != -1)
Fat.fade_element (url.substr (idx + 1, 256), 30, 3000, "#ff9999");
}
</script>
たったこれだけの改造ですが、 サイドバーの"最近のコメント/トラックバック"欄から直にジャンプした時に、 目的のコメントやトラックバックを随分と判別しやすくなりました。 再利用、バンザイ∩(´ω`)∩
Ajax とあんまり関係ないですね…使いこなせればもっと面白いことになりそうなんですけどね。
English
寄せられたコメント (全 2 件中、最新 5 件まで表示しています)
フェード処理の対象としたい部分を div や p 要素で囲って任意の id (例えば hogehoge)を振っておきます。
それから上の JavaScript の部分を追記しておけば，#hogehoge を付けてアクセスされた時に上で id を振っておいた領域がフェード処理されます。
とてもいい記事ですが、もうちょっと設置方法を教えませんか。