2017.3.3
日記にコメント送信欄をつけてみたい#5
じゃあ続き作るよ。
まず閉じるボタンの実装ですね。だいぶ無理をしないとスクロールが発生するし、スクロールが必要になるぐらい広めにコメント入力欄を大きくした方が打ち込みやすいであろうということで、どれだけスクロールしようと常に右上に閉じるボタンがあるって感じの方が良さそうですね。
これを実装するには･･････まぁ、flexにしてもいいんですけど、せっかくなのでposition:fixedで固定したいですよね。省スペースになります。
しかし、ここで問題となるのがどう足掻いてもボックスの右上にfixedすることができないという問題があります。
ボックスの幅が固定ならいいんですけど、ウィンドウ幅に合わせて伸縮するんですよね。そう作ってます。なので、絶対座標で指定できず、無指定でなんとかなるのは左端のみです。
ここで都合よくボックス幅分divが広がってくれればいいんですけど、そうもいかないみたいで。当然width:100%も効かないです。正確には、ウィンドウ幅を取得してきます。というか、CSSのだるいところってここですよね。問答無用で親要素の幅取ってきてくれたらいいのにね。
仕方がないのでjavascriptで強引に固定します。初期値をjavascriptに覚え込ませ、そこでfixedさせるわけですね。
起きるであろう問題としては、途中でウィンドウサイズが変えられたらおそらくバグりますがそんな動作通常では有り得ないので無視しましょう。
やることは簡単ですね。普通に任意の場所に表示させ、座標を取得し設定して、fixedです。
フォーム側はfixedに設定することによりレイアウトが崩れるので、それを見越したコーディングをしなくてはいけませんね。
あと、気づいたのですがdisplay:noneだと座標が取得できないのですが、それに加えて後で表示させたところで取得できないのは変わらないということですね。
ただ、なんかX座標だけは取得できてるくさいので、とりあえずY座標だけは直接指定することにします。コメントフォームの縦幅は200pxで固定なので、簡単ですね。
$(document).ready(function () {
$(".diary_comment_button").on('click', function () {
if($('#diary_comment_toppage').length){
//トップページの場合
$("#diary_comment_toppage").show();
$("body").css("margin-bottom","200px");
}else{
//日記ログの場合
$("#diary_comment_logs").css("display","flex");
}
$("#comment_close").css("top",$(window).height()-200);
$("#comment_close").css("left",$(".diary_comment_class").offset().left + $(".diary_comment_class").outerWidth(true) - 35);
$("#comment_close").css("position","fixed");
});
});
これでいけましたね。ここで表示させた×マークにイベントリスナーでも効かせればおそらく閉じるボタンになるはずですね。やってみましょうか。
まずやんなきゃいけないのはカーソル変更ですかね。やはりわかりやすさは大事です。これはCSSで設定できますね。簡単です。
では、こちらにイベントリスナーを設定しましょう！！閉じるには、display:noneにすれば宜しいでしょう！！！あと明らかに元々ある閉じるボタンも要らないので消してスマートにしましょう！！！
･･････別にプログラムは簡単ですしもう載せなくていいか(笑)
ということで、閉じるとこまで実装したので、これでだいぶ使いやすくなったんじゃないでしょうか。