By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,587 Members | 1,047 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,587 IT Pros & Developers. It's quick & easy.

Scrolling down after modifying div.innerHTML ?

P: n/a
- 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/>';

- 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 ?

Jan 4 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a

writeOnceDebugEverywhere() napisal(a):
- 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/>';

- 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 ?


Keywords: scrollTop, scrollHeight.
Caveat: Non-standard, buggy.

Jan 4 '06 #2

P: n/a
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
Jan 4 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.