chat.php

<script type="text/javascript">
var aus = '';
function ScrollDown(){
	$('#flux').bind('scroll', function() {
		if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) {
			aus = 'true';
		}else{
			aus = 'false';
		}
	})
}

function fx_chat(form,target)
{
  var _target=target;
  var url=form.action;  
  var data=$(form)[(form.method.match(/^post$/i))?'serializeArray':'serialize']();
  $(_target).load(url,data,function(){setTimeout(function(){$(_target).empty();},2000);});
  $('#inhalt').val('') 
  return false;
}

var lastTimeID = 0;

function getChatText(){
	var LTD = lastTimeID;
	$.ajax({
		type: "GET",
		url: "lib/chat.php?lastTimeID="+lastTimeID
	}).done(function( data )
	{
		var jsonData = JSON.parse(data);
		var jsonLength = jsonData.results.length;
		var html = "";
		for (var i = 0; i < jsonLength; i++) {
			var result = jsonData.results[i];
			html += '<li class="list-group-item" style="padding:1px;"><div class="row"><div class="col-md-2 text-left">'+result.usrname+'<br><small>(' + result.chattime+ ')</small></div><div class="col-md-10 text-left">'+result.chattext+'</div></div>';
			lastTimeID = result.id;
		}
		ScrollDown();
		$('#ajax_chat').append(html);
		if(LTD == 0){
			var objDiv = document.getElementById("flux");
			objDiv.scrollTop = objDiv.scrollHeight;
		}
		
		if(aus == 'true'){
			var objDiv = document.getElementById("flux");
			objDiv.scrollTop = objDiv.scrollHeight;
		}
	});
}

setInterval(function(){
	getChatText(); 
}, 1000);

</script>
<?php 
head("");
echo '
<center>
	<br>
	<div class="card" style="max-height:500px; overflow:auto;" id="flux" onload="ScrollDown();">
		<div class="card-body">
			<ul class="list-group">
				<span id="ajax_chat"></span>
			</ul>
		</div>
	</div>
	<hr>
	<div id="chatcontainer"></div>
	<form method="post" action="js/chat.php" onsubmit="return fx_chat(this,\'#chatcontainer\');" >
		<div class="input-group">
			<input id="inhalt" class="form-control" name="inhalt">
			<div class="input-group-append">
				<input type="submit" class="btn btn-success" class="form-control" value="Senden">
				<input id="chat_button" class="btn btn-default" type="button" onclick="window.location.href = \'?content=/chat/archiv\';" value="zum Chat Archiv">
			</div>
		</div>
		
	</form> 
	<br>
</center>';
foot();
?>