Scrolling down after modifying div.innerHTML ?

bwucke · Jan 4, 2006

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.

RobG · Jan 4, 2006

writeOnceDebugEverywhere() said:
- 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.

writeOnceDebugEverywhere() · Jan 4, 2006

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

PageUp and PageDown button!	1	Feb 5, 2004
iFrame vertical scroll bar	1	Mar 20, 2007
SOLUTION: Body onscroll, scrollTop, scrollLeft not working with master pages ???	0	Nov 25, 2006
Enforcing Validation based on Drop-Down choice	5	Jun 7, 2004
comp.lang.c Answers to Frequently Asked Questions (FAQ List)	15	Apr 1, 2006
comp.lang.c Answers to Frequently Asked Questions (FAQ List)	1	Feb 1, 2004

Scrolling down after modifying div.innerHTML ?

bwucke

RobG

writeOnceDebugEverywhere()

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads