[Mornagest]

Hi,

Since we recently activated the reverse display for the chatbox, we experimented the scroll bar problem that occurs when someone posts a message in the chatbox (which seems to be a good usage of the mod ) or when the chatbox refreshes itself.

So I asked some help to a friend of mine (his nickname is Elzen, many thanks to him !!!) who has some JavaScript knowledges, and he found that solution :

1) load the vsa_chatbox template.

2) find these lines :

					vsacb_MessagesDiv = fetch_object('vsacb_messagearea');
					vsacb_MessagesDiv.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="99%" align="{vb:stylevar left}">' + vsacb_Messages.handler.responseText + '</table>';

3) replace them with those five :

					vsacb_MessagesDiv = fetch_object('vsacb_messagearea');
					<vb:if condition="$vboptions[vsachatbox_reverse_messages]">
					var cboxgap = vsacb_MessagesDiv.scrollHeight-vsacb_MessagesDiv.scrollTop;
					</vb:if>
					vsacb_MessagesDiv.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="99%" align="{vb:stylevar left}">' + vsacb_Messages.handler.responseText + '</table>';

This modification allows the rest to work


4) in the same template, locate those lines :

					<vb:if condition="$vboptions[vsachatbox_reverse_messages]">
					vsacb_MessagesDiv.scrollTop = vsacb_MessagesDiv.scrollHeight;
					</vb:if>

5) replace them by those :

					<vb:if condition="$vboptions[vsachatbox_reverse_messages]">
					vsacb_MessagesDiv.scrollTop = vsacb_MessagesDiv.scrollHeight-cboxgap;
					</vb:if>

6) save and enjoy



Bonus : if you use some smileys which are too big to fit in the chatbox lines, that can cause those lines to be shifted a bit (or more). Elzen also provided a solution :

7) find the three lines showed in 5) :

					<vb:if condition="$vboptions[vsachatbox_reverse_messages]">
					vsacb_MessagesDiv.scrollTop = vsacb_MessagesDiv.scrollHeight-cboxgap;
					</vb:if>

8) replace them with these :

					<vb:if condition="$vboptions[vsachatbox_reverse_messages]">
					vsacb_MessagesDiv.scrollTop = vsacb_MessagesDiv.scrollHeight-cboxgap;
					var imgs = document.getElementsByTagName("img");
					for (var i=0; i<imgs.length; i++) {
						if (vsacb_MessagesDiv.contains(imgs[i]))
							imgs[i].onload = function() {
								vsacb_MessagesDiv.scrollTop = vsacb_MessagesDiv.scrollHeight-cboxgap;
							};
					}
					</vb:if>

According to his demand, this patch is licensed under the WTFPL.