At the moment I am building an chatbox for my work, I got it all working fine on PC, it refreshes on a certain second, when I send/receive a message the last message is shown at the bottom.
The problem now, is that everything works too on the phone EXCEPT, auto scrolling down to the last message. So you only see the second last message, you need to scroll down with your finger on the phone to see the last message.
I tried many things as in cSS only or jQuery methods, nothing seems to work, maybe you guys can help me find the golden ticket.
Current code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/chatbox.css?v=5121">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div class="main">
<div class="box">
<h1>Chat</h1>
<section class="chatbox">
<section class="chat-window">
<div id="chatboxajax"></div>
</section>
<form class="chat-input" method="post">
<input type="text" name="message" autofocus autocomplete="off" placeholder="Message..." />
<input type="submit" style="position: absolute; left: -9999px"/>
<button>Send</button>
</form>
</section>
</div>
</div>
<script>
$('#chatboxajax').load("chatboxAjax.php");
setInterval(function(){
$('#chatboxajax').load("chatboxAjax.php");
}, 1000);
</script>
</body>
</html>