AJAX

AutoScrolling a DIV tag

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2005

Posts: 8

Reputation: zeromancer is an unknown quantity at this point

Solved Threads: 1

zeromancer zeromancer is offline

Offline

Newbie Poster

AutoScrolling a DIV tag

Aug 22nd, 2005

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.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: AutoScrolling a DIV tag

Aug 25th, 2005

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

•

Join Date: Aug 2005

Posts: 8

Reputation: zeromancer is an unknown quantity at this point

Solved Threads: 1

zeromancer zeromancer is offline

Offline

Newbie Poster

Re: AutoScrolling a DIV tag

Aug 25th, 2005

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.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: AutoScrolling a DIV tag

Aug 26th, 2005

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

•

Join Date: Sep 2005

Posts: 2

Reputation: mbowles is an unknown quantity at this point

Solved Threads: 0

mbowles

Offline

Newbie Poster

Re: AutoScrolling a DIV tag

Sep 21st, 2005

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

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: AutoScrolling a DIV tag

Sep 21st, 2005

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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.

•

Join Date: Sep 2005

Posts: 2

Reputation: mbowles is an unknown quantity at this point

Solved Threads: 0

mbowles

Offline

Newbie Poster

Re: AutoScrolling a DIV tag

Sep 21st, 2005

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

•

Join Date: Aug 2005

Posts: 8

Reputation: zeromancer is an unknown quantity at this point

Solved Threads: 1

zeromancer zeromancer is offline

Offline

Newbie Poster

Re: AutoScrolling a DIV tag

Sep 23rd, 2005

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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+'<br />';
  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>
<br />
<input type="text" id="in">
<input type="button" onclick="addStuff()" value="Add">
</body>
</html>
<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+'<br />';
  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>
<br />
<input type="text" id="in">
<input type="button" onclick="addStuff()" value="Add">
</body>
</html>

•

Join Date: Jan 2008

Posts: 2

Reputation: dRoot84 is an unknown quantity at this point

Solved Threads: 0

dRoot84

Offline

Newbie Poster

Re: AutoScrolling a DIV tag

Jan 8th, 2008

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:

Help with Code Tags

(Toggle Plain Text)

<div id='scrollContainer'> <!-- set stiggi yiggy in your css file (#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];

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

I LOVE PROTOTYPE!

Last edited by dRoot84; Jan 8th, 2008 at 8:14 pm.

•

Join Date: Sep 2005

Posts: 1,085

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: AutoScrolling a DIV tag

#10

Jan 9th, 2008

•

Originally Posted by dRoot84

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:
Help with Code Tags

(Toggle Plain Text)
<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>
<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];
Whoops... one line of code? oh yes baby, yes!

I LOVE PROTOTYPE!

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:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

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.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!