- ベストアンサー
チャットのスクロールバーについて
チャットのスクロールバーのエレベーター部分を 常に下に持ってきて、チャットがパソコンの画面最下部にきても いちいち手動でスクロールバーを動かさなくても、自動でエレベーターを 最下部にもってくる方法を、PHP、あるいはJavaScriptでどうすれば、 実現できるか、スクリプトを書いて教えていただきたいのですが。 どうぞよろしくお願いします。
- beterugius
- お礼率87% (194/221)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 >自分もそのログファイルをオープンして、トランケートすれば >と思ったのですが、buttonのオンクリックイベントでは、 >JavaScriptしか書けず、JavaScriptの関数の中でPHPスクリプトを書いても、判別してもらえませんよね？ そりゃ、サーバ側でPHPが出力するものにJavaScriptが含まれるわけで、それは無理な話です。 >PHPスクリプトで、ボタンのオンクリックイベントに応対する >関数は書けないものなのでしょうか。 送信内容ににhidden項目なりでどのボタンが押されたか送ればいいのでは？ <form id="formMain"> <input type="hidden" name="buttonValue"> </form> <button name="btn" value="btn1">削除</button> <button name="btn" value="btn2">削除２</button> こういうHTMLがあったとして <script> window.onload = function() { // name="btn"のエレメントを全て取得 var btns = document.getElementsByName('btn'); // 送信用のフォームを取得 var form = document.getElementById('formMain'); // name="btn"のエレメントに対してクリック処理を追加 for ( var i = 0; i < btns.length; i ++ ) { btns[i].onclick = function() { // クリックされたら送信用のフォームのbuttonValueに対して押されたボタンのvalueをセットする form.buttonValue.value = this.value; // そしてサブミットを実行 form.submit(); } } } </script> こういうJavaScriptを用意すれば PHP側ではbuttonValueに入ってくる値がどのボタンを押したかの値なのでそれで制御可能です。
その他の回答 (5)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >先ほどの、チャットの下部右欄のチャット文章そのものの最下部に「メッセージ削除」というリセットタイプのボタンを設けてあるのですが、その削除ボタンを押したら、そのチャットの文章（会話）をクリアしたいのですが、どうすればいいのでしょうか。今度は、テキストエリアなどのフォームの要素ではなく、 >ウィンドウそのものに書いたテキストのクリアとなりますが。 これはもう、サーバ側の処理の話ではないでしょうか？ chatbody.phpに発言をsubmitしているところを見ると、そこのスクリプトでログファイル(またはDB？)に追記して行っていると思います。 そこで、削除ボタンが押されたらという判別を入れて、ログデータの削除を実行すれば良いと思います。 (サーバ側の処理がどうやっているかわからないのでこのくらいしかアドバイスできません。) >なにせ、JavaScriptに疎いもので、本を調べても載ってません。どうぞよろしくお願いいたします。 まずはJavaScriptでやるべき作業であるかの精査も必要です。 また、やりたいことは基礎を複数絡めることで実現できることがほとんどであり、 なかなかピンポイントの情報はありません。(単純なものは除く)
お礼
ご回答、どうもありがとうございました。
補足
自分もそのログファイルをオープンして、トランケートすれば と思ったのですが、buttonのオンクリックイベントでは、 JavaScriptしか書けず、JavaScriptの関数の中でPHPスクリプトを書いても、判別してもらえませんよね？ PHPスクリプトで、ボタンのオンクリックイベントに応対する 関数は書けないものなのでしょうか。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 本文のクリアはいろいろ方法がありますが、現在のフレーム構成やサブミット先を見た限りでちゃちゃっと実装するなら以下のような感じになると思います。 ==== JavaScript function txtClear ( obj ) { obj.submit(); setTimeout( function() { obj.message.value = ''; },500 ); } ==== HTML <form target="mainFrame" name="form1" method="post" action="chatbody.php" onsubmit="txtClear(this);"> 別のフレームにsubmit先を指定しているため、送信後少しの間を空けて、クリア処理をしています。 フレームタグの細かい構成をちゃんと把握してれば、右下画面でsubmitを受けた後のonload(さきのスクロール処理を入れたところ)に 左側フレームのクリア処理を呼ぶようにすれば、小細工(500ミリ秒の待ち)は必要ないはずです。
お礼
お忙しい中、ご説明どうもありがとうございます。 感謝しております。
補足
お忙しいなか、申し訳ありませんが、最後にもうひとつ 質問させていただいてよろしいでしょうか。 先ほどの、チャットの下部右欄のチャット文章そのものの最下部に「メッセージ削除」というリセットタイプのボタンを設けてあるのですが、その削除ボタンを押したら、そのチャットの文章（会話）をクリアしたいのですが、どうすればいいのでしょうか。今度は、テキストエリアなどのフォームの要素ではなく、 ウィンドウそのものに書いたテキストのクリアとなりますが。 なにせ、JavaScriptに疎いもので、本を調べても載ってません。どうぞよろしくお願いいたします。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >いただいたソースを自分のチャットのスクリプトに埋め込んだのですが、やはり、スクロールバーが最上部に移動しています。 > >スクロールバーが自動的に最下部に移動するような、 >新しいものが下の、投稿時刻昇順使用での書き方を >申し訳ございませんが、再度ご記入いただけますか？ 提示したスクリプトでこちらの環境ではlastの部分が表示されるようにスクロールが最下部に移動します。 (データの表示順は特にスクリプトには関与しません) <div id="last">last</div>要素が一番下にあるか、極端に言えば</body>の前。 そこら辺を確認ください。
お礼
大変ありがとうございました。 一応、ちゃんと動作するようになりました。
補足
申し訳ありません。ついでと言ってはなんですが、 もう一つお聞きしてもよろしいでしょうか。 先ほどのチャット画面の下部の左右に分かれてるフレーム の左に名前とメッセージ入力欄があるのですが、 メッセージをENTERキーで送信したら、そのあとに そのメッセージを自動的にクリアするのは、どのような スクリプトを書けば実現できますか？（名前欄はそのまま 残す）一応、送信ボタンの右にリセットボタンを置いていますが、いちいちリセットボタンを押してクリアするのも ばかげてますし、同一<form>タグの中にあるので、 名前もリセットしてしまい、さらに使いにくいものに なってしまいます。 ちなみに下部の左欄のフレーム、input.phpファイルの ソースを下記に表示しておきます。 どうぞよろしくお願いします。 ------------------------------------------------- input.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>チャット</title> </head> <body background="./image/1107.gif"> <?php $syokai=1; ?> <form target="mainFrame" name="form1" method="post" action="chatbody.php"> <?php /*if($syokai==1){ echo("<p>お名前 ：<input type=\"text\" name=\"name\" id=\"name\" tabindex=\"1\"></p>"); $syokai=0; }*/ ?> <p>お名前 ：<input type="text" name="name" id="name" tabindex="1"></p> <p>メッセージ：</p> <p> <textarea name="message" id="message" cols="28" rows="5" tabindex="2"></textarea> <br><br> <input name="送信" type="submit" tabindex="3" value="送信"> <input name="リセット" type="reset" tabindex="4" value="リセット"> </p> </form> </body> </html>
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >フレームは上部と下部左右の3フレームありまして、 >下部左フレームに、名前とメッセージ入力欄があり、 >下部右フレームをターゲットにして、チャット文章を >表示する構成です。 >表示は新しいものが上の、投稿時刻降順の仕様です。 発言後に自動的に最下部までスクロール位置を動かすということでしょうか。 最新が一番上なのに一番下に持っていってよいのでしょうか。 またはある特定条件時に動かすイメージですか？ 仕様が曖昧ですので具体的なアドバイスになるかわからないのですが jQueryを利用すればアニメーションも含め、簡単に実装できます。 例えば、以下の場合はページ読み込み後に最下部へ移動します。 現在の発言が表示されるhtmlが出力されるサーバ側処理のスクリプトに うまく埋め込んでください。 ==== HTML <!DOCTYPE html> <html> <head> <title>test</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { $('html,body').animate({ scrollTop: $('#last').offset().top },'fast'); }); </script> </head> <body> <div style="height: 2000px;"> 2000 </div> <div id="last">last</div> </body> </html>
お礼
詳しいご説明どうもありがとうございました。
補足
すみません。間違えました＾＾； 表示は新しいものが下の、投稿時刻昇順の仕様でした。 いただいたソースを自分のチャットのスクリプトに埋め込んだのですが、やはり、スクロールバーが最上部に移動しています。 スクロールバーが自動的に最下部に移動するような、 新しいものが下の、投稿時刻昇順使用での書き方を 申し訳ございませんが、再度ご記入いただけますか？
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 チャットが画面最下部とはどのようなイメージでしょうか？ 大まかな画面構成、仕様を補足ください。 入力画面はどこか、表示は新しいものが上だとか
お礼
お返事いただき、ありがとうございました。
補足
フレームは上部と下部左右の3フレームありまして、 下部左フレームに、名前とメッセージ入力欄があり、 下部右フレームをターゲットにして、チャット文章を 表示する構成です。 表示は新しいものが上の、投稿時刻降順の仕様です。 画像を添付できないみたいなので、申し訳ありませんが。
お礼
詳しくご解説いただき、ありがとうございました。