Question

I am writing a small shoutbox/chat app where I am using the following piece of code to refresh the message log div every 0.5 seconds and to refresh to the bottom to show the latest message.

$(setInterval(function() {
    $('.messageLog').load('display_messages.php');
    window.location='#bottom';
}, 500));

the ‘#bottom’ refers to a empty div I have put at the end of the ‘.messageLog’ div so I have a location to refer to as the bottom of the message log. The problem with this method is, when I am trying to login (by simply typing in a username and pressing the sign-in button through a small form at the top of the chatbox) the username input field keeps getting refreshed and put out of focus every 0.5 seconds in firefox and internet explorer (works fine in chrome). The problem turns out to be the line “window.location=’#bottom'”, which is causing the input field focusing problem.

I was wondering if there was a way around this so that I can still refresh the message log every 0.5 seconds and automatically scroll to the bottom while not interfere with users trying to sign in through the username field.

Answer 1

remove the anchor, use this instead

$(".messageLog").attr({ scrollTop: $(".messageLog").attr("scrollHeight") });