Wow, one thing after another! Okay. So I've been following an example in making a working chatbox- and it works properly (in terms of browser-server interaction, minus some obvious security things I probably should be implementing).
HOWEVER, I am trying to change the styling of my chatbox so that I can scroll in any browser, including mobile ones. Really, the problem is NOT being capable of scrolling in and of itself- overflow:auto property in CSS does work in every browser, save for just one small detail.
If you test this with a mobile browser, you'll find that you can scroll all the way to the bottom... but just when you get to the end, the textbox seems to snap a little bit of a ways back up instead of staying at the end. NOT ALL THE WAY TO THE TOP, but like 3 pixels or so. I really don't know what to do. I've researched a thing called a "rubber band" effect in mobile browsers, but I'm not quite sure that's related to my problem. Is it? Or is it possibly more related to the divs I'm posting inside the chatbox from the back end?
chatroom.php
<?php session_start();
#session_regenerate_id(true);
include ("dbconfig.php");
if(!isset($_SESSION['introd']))
{
header("Location: intro.php");
}
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<!-- <meta name = "viewport" content = "width=device-width, initial-scale=1.0"/>-->
<link rel = "stylesheet" type = "text/css" href = "site.css" />
<link rel="shortcut icon" href="index.html?img=favicon" type="image/ico" />
<script>
</script>
</head>
<body>
<?php include("header.php"); ?>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b><?php echo $_SESSION['user']; ?></b></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
$handle = fopen("log.html", "r");
$contents = fread($handle, filesize("log.html"));
fclose($handle);
echo $contents;
}
?></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
setInterval (loadLog, 2000); //Reload file every 2500 ms or x ms if you wish to change the second parameter
//If user submits the form
$("#submitmsg").click(function(event){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text:clientmsg});
//alert("About to post");
//event.preventDefault();
/*$.ajax({
type: "POST",
url: "post.php",
data: {text:clientmsg},
//dataType: text,
error: function(){
alert("Error receiving text");
},
success: function(response){
alert("Submission received: " + response);
},
});*/
$("#usermsg").attr("value", "");
return false;
});
//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
//Auto-scroll
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
});
</script>
<center><a href='logout.php'>Logout</a></center>
<p class = "content"> This is a page that is a scrap work in progress. </p>
<?php include("footer.php"); ?>
</body>
</html>
site.css
a {
text-decoration: none;
color: green;
}
p {
font-family:"sans-serif";
font-size:1.875em;
color: white;
text-align: center;
font-style: bold;
}
p.welcome {
font-family:"verdana";
font-size:1.875em;
color: white:
text-align: center;
font-style:bold;
}
p.content {
font-family:"verdana";
font-size:1em;
color: white;
font-style: italic;
}
p.nostyling {
color:black;
}
div.contentContainer {
border: 1;
cellspacing: 5;
cellpadding: 15;
width: 50%;
bgcolor: 251111;
}
img{
display:block;
margin:auto;
}
div.main {
width:50%;
margin:auto;
background:#251111;
}
div.bridge {
width:100%
}
div.deck {
width:100%
}
div.control {
float:left;
margin:0;
padding:1em;
color:white;
}
div.arsenal {
margin-left:25%;
background-color:#0A1616;
padding: 1em;
border: 15px solid #251111;
}
body {
background-color: #393635;
color: blue;
}
#wrapper, #loginform {
margin:0 auto 0 -7;
padding-bottom:25px;
width:450px;
border:2px solid #ACD8F0; }
#loginform { padding-top:18px; }
#loginform p { margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto;
-webkit-overflow-scrolling: touch;}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit { width: 60px; }
.error { color: #ff0000; }
#menu { padding:12.5px 25px 12.5px 25px; }
.msgln { margin:0 0 2px 0; }
post.php
<?php
session_start();
if(isset($_SESSION['user'])){
$text = $_POST['text'];
$fp = fopen("log.html", 'a') or die("Unable to open/write file!");
#chmod("log.html", 0777);
fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['user']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
fclose($fp);
echo "Just wrote the file";
}
?>
