Menu
Am trying to get the focus of my chat messages top the newest, at the bottom of the page but the scroll automatically goes to the top.Here is my code: js: $(document).ready(function){
$('#GridDiv').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
})
}
html:
{{ extend 'layout.html' }}
<head>
<title>Britam Intell Services</title>
<link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/index.css')}}">
<script src="index.js" language="javascript" type="text/javascript"></script>
</head>
<div class="well" id="GridDiv">
<div class="chatbox">
<div class="chatlogs">
<div class="chat">
{{for reply in replies:}}
<div class="chat self">
<div class="user-photo"><img src="{{=URL('static','images/userOne.png')}}"/></div>
<p class="chat-message">
<small>{{=prettydate(reply.created_on)}}</small>
{{=XML(reply.quest.replace('\n','<br>'))}}
</p>
</div>
</div>
<div class="chat">
<div class="chat friend">
<div class="user-photo"><img src="{{=URL('static','images/userTwo.png')}}"/></div>
<p class="chat-message">
{{=XML(reply.message.replace('\n','<br>'))}}
</p>
</div>
{{pass}}
</div>
</div>
{{=form.custom.begin}}
<div class='chat-form'>
<textarea name="message"></textarea>
<button>
Send
</button>
</div>
{{=form.custom.end}}
</div>
</div>
is there a way i can cod this to function properly to look like this with the newest message at the bottom:
561
It seems that when the click fires the document is not completely loaded (especially images) so the height is not the final one. You could check the document height with a console.log inside the click handler. Try to put the animation code line inside a timer, in order to get it executed after a page repaint.
setTimeout(function () {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}, 100};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
