...

View Full Version : scroll to bottom of div



footballer27
05-23-2012, 09:16 PM
Hey all,
I've tried a bunch of things to make my chat room scroll to the bottom.



$(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


#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

footballer27
05-24-2012, 03:08 AM
anybody? anything?
I'm I missing something dumb?

devnull69
05-24-2012, 03:18 PM
jQuery has a method for .scrollTop() but there is no method for .scrollHeight(). You'll have to use JS native .scrollHeight instead


$('#chatWindow').scrollTop($('#chatWindow')[0].scrollHeight);

or even simpler without jQuery


var chatWindow = document.getElementById('chatWindow');
chatWindow.scrollTop = chatWindow.scrollHeight;

footballer27
05-24-2012, 07:42 PM
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.



$(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


var chatWindow = document.getElementById('chatWindow');
chatWindow.scrollTop = chatWindow.scrollHeight;

devnull69
05-24-2012, 08:32 PM
You'll have to create a function and call it whenever you update the chatWindow


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');

footballer27
05-24-2012, 09:09 PM
right, which I what I think I'm doing here.



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

footballer27
05-25-2012, 07:42 AM
help. please?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum