目的のコメントやトラックバックを JavaScript で目立たせる

Posted by
ぴろり
Posted at
2005/09/21 23:58
Trackbacks
関連記事 (0)
Comments
コメント (2)
Post Comment
コメントできます
Category
MovableType カテゴリ

 アンカー名を含むパーマリンクURLを用いると、記事中のコメントやトラックバックを一意に表すことができます。しかし、たくさんのコメントやトラックバックが並ぶ場合には、そのURLで示されるものがどれなのかハッキリと明示できれば混乱が少なくて済みます。そこで naoya さんがDampening, Buffering, OpenSearch, Ajax な Hackで触れられていた The Yellow Fade Techniqueを真似て、URLが示す目的のアイテムを目立たせるようにしてみました。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

 例えば、以下のようなURLで記事にアクセスされた時には、 ページ中にあるコメントIDが156のコメントの色を変化させてリーダに気付かせるようにします (具体的にはこちらのサンプルが判りやすいです)
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 とあんまり関係ないですね…使いこなせればもっと面白いことになりそうなんですけどね。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

寄せられたコメント (全 2 件中、最新 5 件まで表示しています)

Posted by
ぴろりぴろり
at
2006/10/01 12:30
ID
D/h6/HkQ
うーん,説明不足でしたか(汗
フェード処理の対象としたい部分を div や p 要素で囲って任意の id (例えば hogehoge)を振っておきます。
それから上の JavaScript の部分を追記しておけば,#hogehoge を付けてアクセスされた時に上で id を振っておいた領域がフェード処理されます。
Posted by
ikiasikias
at
2006/10/01 05:10
ID
RJpPL1TM
こんばんは。
とてもいい記事ですが、もうちょっと設置方法を教えませんか。

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。