Auto scroll bottom of div text area

Hey

I need some advice how to autoscroll to the bottom of textarea. I have a div tag with style overflow:scroll and height:200px. That div is filled with text dynamically and soon text is at the bottom of the area. Now i need user to see last insertion of texts as they come so it’s important to scroll that text area. I have tried to use:

m = document.getElementById( ‘container’ );
m.scrollTop = m.offsetHeight;

where container is an id of the text area. That works fine only with small texts, but then scrolling just leaves behind. What is the right way to auto scroll text in div tag?

Thanks.

obj.offsetHeight will just return the displayed height of the element, not its content, some of which (overflow) may be hidden. The property you’re looking for is scrollHeight. Haven’t checked this in Opera…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

#text {
	width: 200px;
	height: 200px;
	overflow: scroll;
	padding-left: 3px;
	border: 1px #000 solid;
}

</style>
<script type="text/javascript">

onload = function()
{
	document.getElementById('text').addText = function()
	{
		s = '<br />scrollHeight: ' + this.scrollHeight;
		this.innerHTML += s;
		this.scrollTop = this.scrollHeight;
	}
}

</script>
</head>
<body>
<input type="button" value="add text" onclick="document.getElementById('text').addText()" />
<hr />
<div id="text">
<br /><br /><br /><br /><br /><br /><br /><br />
<script>
document.write('scrollHeight: ' + document.getElementById('text').scrollHeight);
</script>
</div>
</body>
</html>

Oh, that’s why. I tried your code with these browsers:

Opera 7.54 -> OK
Firefox 1.0 Preview Version -> OK
Internet Explorer 6.0.2900 -> OK

Thanks for your answer.

I have some other questions still, if you check this message.

  • is there anyway to check bandwith (incoming and outgoing data) with javascript?
  • what is the most sophisticated way to create and loop two dimensional associative arrays with javascript? I have a php background and could do it with php…
  • in php you can check if variable exists (isset( $any_var )) and that way i can overcome notices and errors. How this works with javascript? More specifically let’s say i have to check

if( array[id][session] exists && array[id][session] != some_variable ) {
    array[id][session] = some_variable;
}

Thanks.

And had a fourth question too:

Is it possible to change or disable window status bar text overall? I know window.status = ‘’ makes trick but only when action is “triggered”. However when page load external script window status bar shows ‘transferring data…’, ‘connecting to host…’ or something like that and i would like status bar to be empty even on transferring or getting data. Is it possible?

in php you can check if variable exists (isset( $any_var )) and that way i can overcome notices and errors. How this works with javascript?


var a = "I'm a.";
var b;
//var x --> does not exist

document.write("<div>" + a + "</div>");
document.write("<div>b = " + b + "</div>");
if (window.x) document.write("<div>x exists</div>");
if (!window.x) document.write("<div>x does not exist</div>");

7stud: that easy, thanks. :slight_smile:

what is the most sophisticated way to create and loop two dimensional associative arrays with javascript? I have a php background and could do it with php…

The most sophisticated? Like calling objects with functions for subscripts, where the functions randomly generate index names from characters produced by other objects that react selectively to the last 50 onkeydown and onkeyup events triggered by the user? This ain’t that:

var
two_d_array = new Array(),
row_name = "car",
col_name = "dealer_price",
max_rows = 2,
max_columns = 3;

//Create the two dimensional array:
for (var i =0; i < max_rows; i++)
{
	//Create an array for row i:
	two_d_array[row_name + i] = new Array();
	
	//Create the columns for row i:
	for(var x = 0; x < max_columns; x++)
	{
		//Assign row i, column x a value:
		two_d_array[row_name + i][col_name + x] = i + x;

	}
}


//Output the two dimensional array:
var row;
var col;

//Put an index string in 'row' (e.g. car0, car1):
for(row in two_d_array)
{
	//Put an index string in 'col' (e.g. dealer_price0, dealer_price1, dealer_price2):
	for(col in two_d_array[row])
	{
		//Use the index strings in row and col to access the value:
		document.write("<div>" + two_d_array[row][col] + "<div>");
	}
}

(I’ve read various notes in the literature which say the order of the output is not guaranteed when using for-in loops, so if that is a problem output the values with two nested for loops.)

Is it possible to change or disable window status bar text overall? I know window.status = ‘’ makes trick but only when action is “triggered”. However when page load external script window status bar shows ‘transferring data…’, ‘connecting to host…’ or something like that and i would like status bar to be empty even on transferring or getting data. Is it possible?

“You can update the defaultStatus and status properties at any time, but your specified text won’t actually appear in status line until all the JavaScript code that is running completes. Thus, if you attempt to animate the line to indicate progress during a lengthy computation, none of your updates to the status line will actually appear to the user.” (Javascript: The Definitive Guide)

That indicates you can’t do what you want.

  • is there anyway to check bandwith (incoming and outgoing data) with javascript?

I would think not. That is personal user information. Javascript gives the web programmer access to the browser(BOM) and the document(DOM), but the bandwidth of the user’s computer is not part of either of those. In fact, javascript doesn’t even give you access to the whole browser: for instance, you can’t access someone’s bookmarks because that is personal information.

Hi 7stud

I ment elegant but simple way whan talking about sophisticated. But you got my point, i can see. Example you gave me is fine for me.

Window status. My application is reading data from server each 1 to 10 seconds, so it’s quite ‘lengthy computation’ and updating status bar text has no effect in that case.

Bandwidth. Actually i was thinking if it’s possible to check the amount of data is transferred to the browser and amount of data is transferred to the server from page load and javascript-server interaction. Maybe that must be handled in server side.

Thousand thanks.

One thing more that i didn’t remember to ask yesterday. It’s about programming habits and modules with javascript.

How do you organize javascript files? I’d like to separate some functions and “classes” to their own files, but use in same application. Is this going to work or am i going to face some problems with it:

document.write( ‘<script language=“JavaScript1.2” DEFER type=“text/javascript” src=“http://www.mydomain.comi/jslibrary/script1.js”></SCRIPT>’ );
document.write( ‘<script language=“JavaScript1.2” DEFER type=“text/javascript” src=“http://www.mydomain.comi/jslibrary/script2.js”></SCRIPT>’ );

How do you organize “global” variables in long script document? Place them at the beginning of the file or at the beginning of the functions you may need them? How to define constants?

If you have references to the sites where this subject is handled i’d be glad to get those.