COREBlog のカレンダーを Ajax 化 2.1
こないだのCOREBlog のカレンダーを Ajax 化 2では、やはり他の日の上を通ってしまうじゃないかという意見が出たので修正しました。
カレンダーの日付の上にカーソルを持っていくと、カーソルの右下(場合によっては真下とか左下)にピンクのエリアが出てきて、その中にエントリへのリンクが並んでいます。ピンクのエリアの右上の×をクリックするとピンクのエリアがなくなります。
変更点は以下の通り。
- エントリがリストされる div のクラスをちゃんとスタイルシートに書いた。
.topics {
width: 160px;
text-align: left;
visibility: hidden;
position: absolute;
background-image: url(http://matatabi.homeip.net/blog/setomits/images/balloon_bg.gif);
background-repeat: repeat;
}
- 日付の箇所の top と left を計算するようにした(いとうさんありがとうございました!)。
calendar.jsの
var l = 0, t = 0;
for (var obj = document.getElementById(aid); obj != null; obj = obj.offsetParent) {
l += obj.offsetLeft;
t += obj.offsetTop;
}
var wwidth = window.innerWidth ? window.innerWidth : document.body.clientWidth;
if (l + 160 > wwidth)
l = wwidth - 175;
のあたり。