[SOLVED] PHP Chat - Scroll down upon refresh

twilitegxa · July 19, 2009

I have a chatroom that refreshes every 1000 seconds and I would like to know how I can upon refresh have the most recent message showing instead of the chat window going back up to the top of the list. Here are the files that show the chat:

chatframe.php

<?php

print "<iframe src='chatlog.php'  name='chatlogframe' width='80%' height='400'></iframe>";

print "<br><br>";

print "<iframe src='submit.php' width='80%' height='250' frameborder='0' class='message'></iframe><br><br>";

?>

submit.php

<?php

session_start();

?>

<html>
<head>
<title></title>
<style type="text/css" media="screen">
/*<![CDATA[*/
@import url(global.css); 
/*]]>*/
</style>
</head>
<body>

<?php

include "connect.php";

if(isset($_POST['submit'])) //if submit button push has been detected

{

   $message=$_POST['message'];

   $name=$_SESSION['userName'];

   if(strlen($message)<1)

   {

      print "You did not input a message";

   }

   else if(strlen($name)<1)

   {

      print "You are not logged in. Please log in.";

   }

   else

   {

      $message=strip_tags($message);

      $IP=$_SERVER["REMOTE_ADDR"]; //grabs poster's IP

      $checkforbanned="SELECT IP from ipbans where IP='$IP'";

      $checkforbanned2=mysql_query($checkforbanned) or die("Could not check for banned IPS");

      if(mysql_num_rows($checkforbanned2)>0) //IP is in the banned list

      {

         print "Your IP is banned from posting. Please contact administration.";

      }

      else

      {

         $thedate = date("U"); //grab date and time of the post

         $insertmessage="INSERT into chatmessages (name,IP,postime,message) values('$name','$IP','$thedate','$message')";

         mysql_query($insertmessage) or die("Could not insert message");

    



      }

   }



      

}

print "<form action='submit.php' method='post' name='form'>";

//print "<strong>Your name:</strong><br>"; not needed

//print "<input type='text' name='name' size='20'><br>"; not needed

print "<strong>Your message:</strong><br>";

print "<textarea name='message' cols='40' rows='4'></textarea><br>";

print "<a onClick=\"addSmiley('')\"><img src='images/smile.gif'></a> "; //replace images/smile.gif with the relative path of your smiley

print "<a onClick=\"addSmiley('')\"><img src='images/sad.gif'></a> ";

print "<a onClick=\"addSmiley('')\"><img src='images/wink.gif'></a> ";

print "<input type='submit' name='submit' value='submit'></form>";

print "<script language=\"Java Script\" type=\"text/javascript\">\n";

print "function addSmiley(textToAdd)\n";

print "{\n";

print "document.form.message.value += textToAdd;";

print "document.form.message.focus();\n";

print "}\n";

print "</script>\n";

print "<br><br>";



?> 
</body>
</html>

chatlog.php

<html>
<head>
<title></title>
<style type="text/css" media="screen">
/*<![CDATA[*/
@import url(global.css); 
/*]]>*/
</style>
</head>
<body>

<?php

include "connect.php";

$getnummessages="SELECT COUNT(*) as messagecount from chatmessages";

$getnummessages2=mysql_query($getnummessages) or die("blah");

$getnummessages3= mysql_result($getnummessages2, 0);

if($getnummessages3>21)

{

   $startrow=$getmessages3-20;

}

else

{

  $startrow=1;

}

$getmsg="SELECT name, message from chatmessages order by postime ASC limit $startrow,$getnummessages3";

$getmsg2=mysql_query($getmsg) or die(mysql_error());

while($getmsg3=mysql_fetch_array($getmsg2))

{

  $message=Smiley($message); //Smiley faces

   print "<font color='teal'><b>$getmsg3[name]:</b></font> $getmsg3[message]<br>";



}



function Smiley($texttoreplace)

{

    $smilies=array( 

    

    

    '' => "<img src='images/smile.gif'>",

    ':blush' =>"<img src='images/blush.gif'>",

    ':angry' =>"<img src='images/angry.gif'>",

    ''=>     "<img src='images/shocked.gif'>",  

    'fuck'=>"$#$%",

    'Fuck'=>"&$#@"

  



    );



    $texttoreplace=str_replace(array_keys($smilies), array_values($smilies), $texttoreplace);

    return $texttoreplace;

}

?>

<script>

  setTimeout("window.location.replace('chatlog.php')",1000);



</script>

</body>
</html>

It always scrolls back up to the top when it refreshes. I would like it to stay scrolled down upon refreshing. How can I do this?

Also, I get the message:

Notice: Undefined variable: message in C:\wamp\www\chatlog.php on line 46

How do I need to define this variable? Can anyone help with that as well?

Daniel0 · July 19, 2009

Either display the messages in reverse chronological order (i.e. newest first) or use Javascript to scroll to the bottom. Something like

object.scrollTop = object.scrollHeight;

Also, I get the message:

Notice: Undefined variable: message in C:\wamp\www\chatlog.php on line 46

How do I need to define this variable? Can anyone help with that as well?

You cannot use a variable before you have defined it. Kind of like you cannot eat food you have not yet made. The solution is trivial, define it before you first try to use it.

twilitegxa · July 19, 2009

Where would I put that JavaScript code at to make it work?

twilitegxa · July 19, 2009

And I thought the variable was defined on this line:

$message=Smiley($message); //Smiley faces

How would I define it? Can anyone help me out?

Daniel0 · July 19, 2009

Where would I put that JavaScript code at to make it work?

I don't know because I don't want to read all your code. Besides, it was not just plug and play.

And I thought the variable was defined on this line:

$message=Smiley($message); //Smiley faces

How would I define it? Can anyone help me out?

Yes, you are defining it there, but in the definition you're using it. That's like answering "I am me" to the question "Who are you?"

twilitegxa · July 19, 2009

Well, I defined it like this:

$message=' ';

before the other variable that defined it within itself, and now it works. :-)

Still trying to figure out a way to make it scroll tot he bottom. I tried the method you suggested, but it actually shows it scrolling down to the bottom each time it refreshes, so I need it to not scroll, but automatically BE at the bottom. So I need to find another way I guess. Any other suggestions? Other than displaying the messages in reverse order?

Daniel0 · July 19, 2009

<div style="height:200px;overflow:auto" id="theDiv">
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo
</div>

<script type="text/javascript">
object = document.getElementById('theDiv');
object.scrollTop = object.scrollHeight;
</script>

Doesn't result in a noticeable lag between page load and scroll.

twilitegxa · July 19, 2009

My script is being displayed within an iframe. I'm having some trouble implementing your suggestion into the iframe instead of a div as you have it. Any suggestions?

Daniel0 · July 19, 2009

Try something like this in your frame:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>

<div>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>
foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo
</div>

<script type="text/javascript">
window.onload = function() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>

</body>
</html>

twilitegxa · July 19, 2009

Well, that works, but you can still notice a jump, so I guess I will just change it to display in the reverse order. Thanks for all the help!

Daniel0 · July 19, 2009

You could also periodically load new messages using AJAX and generate the DOM elements. That would prevent refreshing.

twilitegxa · July 19, 2009

Thanks, I will look into that. :-)

Sign In

[SOLVED] PHP Chat - Scroll down upon refresh

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information