忍法！折り畳みの術
たまに見かける「続きを読む」を押すと、ページが切り替わらずにニョキっと出てくるサイト。私もあれがやりたいと思っていた所、2004年7月号のINTERNET MAGAZINEでブログ特集、まさにその技を紹介していた。
だが、ここで一つ問題が。「この記事の続きを隠す」をクリックして、元の状態に戻した時にスクロールバーが下の方に行ったままなのだ。つまり、戻した時に読んでいた記事のタイトルに戻るわけではなかったということだ。
この微妙な動き、どうにかならないものか。ユーザビリティーがあるようで、ない。でも、機能は使いたい。よく分からぬjavascriptを読解しようとしても、到底無理な話である。
そこで、ネットに頼ることにした。検索キーワードは「」記事を表示 javascript 隠す。その中に、気ままにポロポロさんのページを発見。こちらのサイトは非常によく書かれていて結構チェックしていたサイトだ。
何か良い情報あるかな～・・・と眺めていると、早速折りたたみ式文章という記事を発見。そして、早速設定することにした。
▼Javascriptの記述
function showHide(entryID, entryLink, htmlObj, type) {
if (type == "comments") {
extTextDivID = ('comText' + (entryID));
extLinkDivID = ('comLink' + (entryID));
} else {
extTextDivID = ('extText' + (entryID));
extLinkDivID = ('extLink' + (entryID));
}
if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
▼INDEXファイルの記述
<a id="<$MTEntryID pad="1"$>" name="a<$MTEntryID pad="1"$>"></a>
<MTEntryIfExtended>
<div id="extLink<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'entry');return false;">Read More... ≫</a>
</div>
<div id="extText<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="#<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'entry');return true;">« All done!</a>
</div>
</MTEntryIfExtended>
赤字は、私がちょっと変えた部分です。こうすることによって記事を消した時、該当記事のタイトルまで戻ります。
なんだかだいぶ、満足です。
気ままにポロポロさんありがとう！
Posted by JOJO at 12:51
コメント
ひとこと : 2005年02月13日 12:01
JOJOLOGを