Scrollbar position

[otester]

Currently got chat box done using SQL and PHP, however when text overflows the scroll bar won't stay at the bottom..

 

Currently using this code (within header):

 

<script language="text/javascript">

        var objDiv = document.getElementById("site_chat_box");
	objDiv.scrollTop = objDiv.scrollHeight;

</script>

 

Unfortunately it doesn't work 

 

Any ideas?

 

 

Thanks,

 

otester

[Alex]

Setting the scrollTop attribute initially won't do any good. You'll have to adjust the scrollTop attribute every time that chat is appended to the div.

[otester]

Setting the scrollTop attribute initially won't do any good. You'll have to adjust the scrollTop attribute every time that chat is appended to the div.

 

So is there anyway to achieve what I want to do?

 

I've been hunting around the net and it currently isn't looking very good for me

[Alex]

Just find the part in your script where new messages are added to the div and right after it place that code to update the scrollTop.

[otester]

Just find the part in your script where new messages are added to the div and right after it place that code to update the scrollTop.

 

Ok I changed the code between the header to:

 

<script language="text/javascript">
	var objDiv = document.getElementById("site_chat_box");
</script>

 

I have a file which deals with the database and relaying the message to the div, I added this after the php tags:

 

<script language="text/javascript">
objDiv.scrollTop = objDiv.scrollHeight;
</script>

 

 

Still doesn't work :/

 

Btw I am using overflow-x and overflow-y properties (CSS3).

[Alex]

Are the messages appended using JavaScript or are the messages loaded when the pages loads? If the latter then you can do something like this:

 

<script type="text/javascript">
window.onload = init;
function init() {
    var objDiv = document.getElementById("testid");
    objDiv.scrollTop = objDiv.scrollHeight;
}
</script>

[otester]

Are the messages appended using JavaScript or are the messages loaded when the pages loads? If the latter then you can do something like this:

 

<script type="text/javascript">
window.onload = init;
function init() {
    var objDiv = document.getElementById("testid");
    objDiv.scrollTop = objDiv.scrollHeight;
}
</script>

 

The messages are loaded by fetching them from an SQL database, no JavaScript involved in the process, so when the page loads.

[Alex]

Then did you try my solution?

[otester]

Then did you try my solution?

 

Works perfectly, thank you very much for your help!

 

 

(For anyone else that reads this: AlexWD's solution went between header tags and no extra JavaScript code was needed).