5

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: enter image description here

user3346746
  • 327
  • 3
  • 14
  • Do you want it to scroll automatically when the page loads? If so, don't use a `.click()` handler, as that will only trigger the scrolling when the div in question is clicked. Also, I don't see what this has to do with web2py (I see you are using web2py, but this is a pure Javascript/jQuery question that has nothing to do with web2py). – Anthony Apr 11 '17 at 14:55
  • :)@Antony...I am dong lots of stuff on web2py hence the tag..my bad. – user3346746 Apr 11 '17 at 14:59
  • am still struggling in how o code that. A little help maybe – user3346746 Apr 11 '17 at 16:15
  • you want like that? : http://stackoverflow.com/questions/25505778/automatically-scroll-down-chat-div – apsuva Apr 20 '17 at 14:20
  • just noticed. they're beautiful ladies <3 <3 <3 :D – xGeo Apr 21 '17 at 12:17

1 Answers1

1

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};
itacode
  • 3,721
  • 3
  • 21
  • 23
  • reply.quest and reply.message are lists from dal. When a new item is added to the list, it shows up in the view(at the bottom) with the rest of the items.Could you please get me the code of how it works, am very new to js, css. I tried this with firefox, chrome but the behavior is the same, scrolls to top and not what i expect – lobjc Apr 16 '17 at 11:32
  • If you had a test web site I could try to debug it. – itacode Apr 17 '17 at 00:12