Scrolling to the bottom of a div

[gerkintrigg]

I've made this chat program in Ajax:

 

http://www.ghostlypublishing.co.uk/chat

 

The only problem is that when you post something to it, the chat window needs to scroll but it's not doing it properly.

 

I wondered whether I'm doing it right...

 

the main code I have which should be doing the job is:

//Load the file containing the chat log
	function loadLog(){		
		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div				
				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
				if(newscrollHeight > oldscrollHeight){
					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
				}				
		  	},
		});
	}

It looks good to me, but hey - what do I know. )

 

Could anyone help out, please?

[Drongo_III]

This is just a stab in the dark but you might want to try using the jquery method .prop() instead of attr(). I believe that since jquery 1.6 attr() gets the value set in the markup - which is likely undefined. Whereas .prop retrieves it from the dom.

 

A way to test if this is the case would be to console.log or alert the value of var newscrollHeight and see what you're getting each time the ajax runs. You may have already done that tho!