AutoScrolling a DIV tag

Sorry for the double post. but it wasn't even remotely in the right spot before.

I wrote this little code segment to illustrate the idea of what I want. I'd like to be able to automatically scroll the DIV to the bottom when you add stuff to it.

<html>
<head>
<title>Auto Scrolling Div</title>
<head>
<script type="text/javascript">
<!--
function addStuff() {
    var stuff = document.getElementById('foo').value;
    oldStuff = document.getElementById('bar').innerHTML;
    newStuff = oldStuff + ' ' + stuff;
    document.getElementById('bar').innerHTML = newStuff;
}
-->
</script>
</head>
<body>
<div id="bar" style="overflow: auto; height: 150px; width: 100px;">
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff
</div>
<input type="text" id="foo">
<input type="submit" value="Add Stuff" onclick="addStuff()">
</body>
</html>

So, you type something in and click Add Stuff. It will scroll to the bottom so you can see what you just added. That would be awesome.

Thanks in advance

zeromancer

Newbie Poster

8 posts since Aug 2005

Reputation Points: 10

Solved Threads: 1

6 Years Ago

Research the JavaScript "scrollTo" method, then post a follow-up if you have any specific questions about it.

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

I founf that, but the next problem i ran into was finding out where i should scroll to. in other words, finding out where the bottom of the DIV is.

zeromancer

Newbie Poster

8 posts since Aug 2005

Reputation Points: 10

Solved Threads: 1

6 Years Ago

Understood. Your next assignment, then, is to research "offsetTop" and "offsetParent".

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

Zero, you ever get this? I have a div that holds an asp.net Label and need it to scroll to the bottom.

mbowles

Newbie Poster

2 posts since Sep 2005

Reputation Points: 10

Solved Threads: 0

6 Years Ago

You have to explain exactly what it is you want. You cannot scroll, as far as I know, the inner contents of a DIV element. However, you can scroll the browser window, using the "scrollTo()" method.

You can know the size of an element, using it's "clientHeight" property, for example, and its position on the page, using offsetTop & offsetParent.

Here's a simplistic example of scrolling:

<html>
<head>
<script type="text/javascript">

function myScroll()
{
  x = document.getElementById("myDiv");
  h= x.clientHeight;
  self.scrollTo(0,h);
}

</script>
</head>
<body onload="myScroll();">
<div id="myDiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Donec tristique lectus sit amet est. Vivamus sit amet lacus. 
Morbi convallis sem nec lectus. 
Nullam in odio ac augue porttitor semper. 
Nam leo. Morbi varius molestie felis. Etiam egestas. 
Donec vitae mauris vitae nisi gravida pharetra. In molestie eros eu tellus. 
Suspendisse a mi vitae nulla vehicula lacinia. 
Ut pellentesque lobortis ipsum. Quisque a leo. Curabitur tincidunt. 
Fusce est velit, condimentum sed, convallis in, blandit hendrerit, eros.
</p>
</div>
</body>
</html>

I simply measure the clientHeight of the DIV element, and tell the browser to scroll to that position. This doesn't take into account that the DIV might be nested, etc. You'll need to use the offsetTop and offsetParent properties to make the code robust. Search for those terms, you should easily find everything you need, which is why I didn't spell it all out for the previous poster.

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

Yeah, I needed to scroll the contents of a div. I went back and modified my StringBuilder to use insert instead of append and now my text gets added to the top of the display so with aut scroll of style tags kicks in, it scrolls the old stuff out the bottom. Was building a chat system for our portal.

thanks

mbowles

Newbie Poster

2 posts since Sep 2005

Reputation Points: 10

Solved Threads: 0

6 Years Ago

here's the answer. thanks to those that tried to help.

<html>
<head>
<title>w00t!</title>
<script type="text/javascript">
<!--
function addStuff()
{
  var loc = document.getElementById('myDiv');
  var stuff = document.getElementById('in').value;
  var old = loc.innerHTML;
  loc.innerHTML = old+stuff+'';
  var div = document.getElementById('myDiv');
  h = div.scrollHeight;
  div.scrollTop = h;
}
-->
</script>
</head>
<body>
<div id="myDiv" style="overflow: auto; height: 200px; width: 300px; border: 1px solid #666; background-color: #ccc; padding: 8px"></div>

<input type="text" id="in">
<input type="button" onclick="addStuff()" value="Add">
</body>
</html>

zeromancer

Newbie Poster

8 posts since Aug 2005

Reputation Points: 10

Solved Threads: 1

4 Years Ago

Hi guys, I know this thread was years ago, but I think many many people are looking for a solution for this problem but not finding anything.

Scrolling a scrollable DIV tag is pretty easy by using the fabulous prototypejs framework by www.prototypejs.org .

Lets see what we've got here...

some html:

<div id='scrollContainer'>  <div id='scrollTo1'>maaaany</div> <div id='scrollTo2'>maaaany</div> <div id='scrollTo3'>maaaany</div> <div id='scrollTo4'>maaaany</div> <div id='scrollTo5'>...content</div> </div>

Now we do the script thing...

Whith that you can easily scroll to a specific element in your scroll container: $('scrollContainer').scrollTop = $('scrollTo3').cumulativeScrollOffset()[1];

:icon_eek: Whoops... one line of code? oh yes baby, yes!

I LOVE PROTOTYPE! :icon_redface:

dRoot84

Newbie Poster

2 posts since Jan 2008

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Hi guys, I know this thread was years ago, but I think many many people are looking for a solution for this problem but not finding anything.

Scrolling a scrollable DIV tag is pretty easy by using the fabulous prototypejs framework by www.prototypejs.org .

Lets see what we've got here...

some html:

<div id='scrollContainer'>  <div id='scrollTo1'>maaaany</div> <div id='scrollTo2'>maaaany</div> <div id='scrollTo3'>maaaany</div> <div id='scrollTo4'>maaaany</div> <div id='scrollTo5'>...content</div> </div>

Now we do the script thing...

Whith that you can easily scroll to a specific element in your scroll container: $('scrollContainer').scrollTop = $('scrollTo3').cumulativeScrollOffset()[1];

:icon_eek: Whoops... one line of code? oh yes baby, yes!

I LOVE PROTOTYPE! :icon_redface:

You don't need prototype for something this simple. The post just before this actually had the solution.

You can also do something as simple as:

div.scrollTop = 10000;

Giving any element a scrollTop of a number larger than its height will scroll it to the bottom. So any large number you know the div height will not exceed will work.

digital-ether

Nearly a Posting Virtuoso

Moderator

1,293 posts since Sep 2005

Reputation Points: 461

Solved Threads: 101

4 Years Ago

You don't need prototype for something this simple. The post just before this actually had the solution.

You can also do something as simple as:
div.scrollTop = 10000;
Giving any element a scrollTop of a number larger than its height will scroll it to the bottom. So any large number you know the div height will not exceed will work.

Crystal clear, but this was not what I wanted. Sure you can scroll to the bottom of an Element by just giving it a very large number that sure will be larger than its content height, but what I ment was to scroll to a specific position in the scrollable div, and thats what I showed. :icon_wink:

*By accident I found this thread and thought this could be interesting for someone else finding also the thread*

dRoot84

Newbie Poster

2 posts since Jan 2008

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Crystal clear, but this was not what I wanted. Sure you can scroll to the bottom of an Element by just giving it a very large number that sure will be larger than its content height, but what I ment was to scroll to a specific position in the scrollable div, and thats what I showed. :icon_wink:

*By accident I found this thread and thought this could be interesting for someone else finding also the thread*

Oh I missed your point. Yes, the original post was just on how to scroll to the bottom but yours shows how to scroll to any element in a DIV. Good one.

:)Offtopic:

Here is how you do it with mooTools. It also allows you to animate the scrolling which can be quite pleasing to look at:

new Fx.Scroll(Parent, {
		wait: false,
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	}).toElement(Child);

WhereParent is the Element the element with the overflow/scrollbars and child is a Child element within the scrolling element.

You could substitute child for: Parent.childNodes[n] where n is the index of the childNode. (IE6 may cough on empty Text Nodes)

digital-ether

Nearly a Posting Virtuoso

Moderator

1,293 posts since Sep 2005

Reputation Points: 461

Solved Threads: 101

This article has been dead for over three months

You