writeOnceDebugEverywhere() wrote:
- I believe it is a simple question:
my onclick event for the button looks as follows:
......
// reference to the <div id="messages" :
var mDiv=document.getElementById('messages');
mDiv.innerHTML += 'bla.. bla.. bla';
mDiv.innerHTML += '<br/>';
Rather than just plonking text and <br> elements into the div,
consider using DOM and appending P elements with text content.
- at the some point, when <div> area becomes full, I want somehow to
scroll down, because of I cannot see last added message without manualy
scrolling down.
My question is, wheter is possible, and how ?
Yes, but it requires non-standard (and therefore unreliable)
scripting. Try the following, which should cover most browsers and
fail gracefully (i.e. do nothing) where not supported.
It attempts to use scrollIntoView. If that's not supported, it tries
scrollTop. If neither work, nothing happens.
It works in Safari 1.0.3 and Firefox 1.5. As far as I can tell it
/should/ work in IE 5.2 (Mac) but it doesn't. It should work in IE 6
on Windows and maybe IE 5 too.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>...</title>
<style type="text/css">
#xx { height: 5em; width: 15em; border: 1px solid red;
overflow: scroll; }
</style>
<script type="text/javascript">
// Just to make new lines obvious
var aCounter = 0;
function addPara(id, txt)
{
var mDiv = document.getElementById(id);
var newP = document.createElement('p');
newP.appendChild(document.createTextNode(aCounter+ + + ' ' +txt));
mDiv.appendChild(newP);
if (newP.scrollIntoView) {
newP.scrollIntoView(true);
} else if ('number' == typeof mDiv.scrollTop){
mDiv.scrollTop = 10000;
}
}
</script>
</head>
<body>
<input type="button" value="Add text"
onclick="addPara('xx', 'Blah blah blah');">
<div id="xx"></div>
</body>
</html>
Feature testing ignored for brevity.
--
Rob
