Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    85
    Thanks
    13
    Thanked 1 Time in 1 Post

    scroll to bottom of div

    Hey all,
    I've tried a bunch of things to make my chat room scroll to the bottom.

    Code:
    $(document).ready(function () {
        //$('#chatWindow').prop("scrollHeight");
        //$('#chatWindow').animate({ scrollTop: $('#chatWindow').prop('scrollHeight') });
        //$("#chatWindow").attr({ scrollTop: $("#chatWindow").attr("scrollHeight") });
        //$("chatWindow").animate({ scrollTop: $("chatWindow").prop("scrollHeight") }, 3000);
        try {
            $("#chatWindow").prop({ scrollTop: $('#chatWindow').prop("scrollHeight") });
        } catch (e) { alert(e.Message); }
    });
    nothing works.

    here is the element style
    Code:
    #chatLeft #chatWindow {
    	height: 200px;
    	width: 445px;
    	margin-right: 15px;
    	margin-bottom: 10px;
    	background-color:white;
    	overflow:auto;
    }
    and the site url is fiveinarowgame.net if you want to look at that too. thanks a bunch

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    85
    Thanks
    13
    Thanked 1 Time in 1 Post
    anybody? anything?
    I'm I missing something dumb?

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    jQuery has a method for .scrollTop() but there is no method for .scrollHeight(). You'll have to use JS native .scrollHeight instead
    Code:
    $('#chatWindow').scrollTop($('#chatWindow')[0].scrollHeight);
    or even simpler without jQuery
    Code:
    var chatWindow = document.getElementById('chatWindow');
    chatWindow.scrollTop = chatWindow.scrollHeight;

  • Users who have thanked devnull69 for this post:

    footballer27 (05-24-2012)

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    85
    Thanks
    13
    Thanked 1 Time in 1 Post
    So his answer does move the scroller down. I can't get it to stay down though. I need to refresh the chat window on a regular basis, and the scrollTop does equal scrollHeight for a moment, then it changes back to default again. again, help will be appreciated.

    Code:
    $(document).ready(function () {
        updateChat();
        var chatWindow = document.getElementById('chatWindow');
    chatWindow.scrollTop = chatWindow.scrollHeight;
    });
    
    
    
    function updateChat() {
        var chatWindow = document.getElementById('chatWindow');
        chatWindow.scrollTop = chatWindow.scrollHeight;
    
        $.get("Home/refreshChatText", {}, function (html) {
            $("#chatWindow").replaceWith(html);
        });
    
        
    
        $.get("Home/refreshChatHeader", {}, function (html) {
            $("#chatHeader").replaceWith(html);
        });
    
        $.get("Home/refreshPlayerList", {}, function (html) {
            $("#playerList").replaceWith(html);
        });
        var chatWindow = document.getElementById('chatWindow');
        chatWindow.scrollTop = chatWindow.scrollHeight;
    
        setTimeout('updateChat()', 2000);
        
    }
    I tried over using this to try and make sure it would work, it still doesn't though
    Code:
    var chatWindow = document.getElementById('chatWindow');
        chatWindow.scrollTop = chatWindow.scrollHeight;

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You'll have to create a function and call it whenever you update the chatWindow
    Code:
    function scrollDown(id) {
       var element = document.getElementById(id);
       element.scrollTop = element.scrollHeight;
    }
    
    // somehow your chatWindow has been updated (user input, loaded content etc)
    // afterwards, call the function
    scrollDown('chatWindow');

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    85
    Thanks
    13
    Thanked 1 Time in 1 Post
    right, which I what I think I'm doing here.

    Code:
    function updateChat() {
    
         //update the chat window here
        $.get("Home/refreshChatText", {}, function (html) {
            $("#chatWindow").replaceWith(html);
        });
        
        //scroll the chat window down here
        var chatWindow = document.getElementById('chatWindow');
        chatWindow.scrollTop = chatWindow.scrollHeight;
    
        //update chat at regular interval
        setTimeout('updateChat()', 2000);
        
    }
    I must be missing something though

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    85
    Thanks
    13
    Thanked 1 Time in 1 Post
    help. please?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •