Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 64364

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Aug 22nd, 2005

AutoScrolling a DIV tag

Expand Post »

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.

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

Similar Threads

mozilla firefox problem with text in div tag in HTML and CSS
How to have the div layer center on any browser? in JavaScript / DHTML / AJAX

zeromancer

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

8 posts
since Aug 2005

Permalink

Aug 25th, 2005

Re: AutoScrolling a DIV tag

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

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Aug 25th, 2005

Re: AutoScrolling a DIV tag

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

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

8 posts
since Aug 2005

Permalink

Aug 26th, 2005

Re: AutoScrolling a DIV tag

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

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Sep 21st, 2005

Re: AutoScrolling a DIV tag

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

mbowles

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Sep 2005

Permalink

Sep 21st, 2005

Re: AutoScrolling a DIV tag

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:

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Sep 21st, 2005

Re: AutoScrolling a DIV tag

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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Sep 2005

Permalink

Sep 23rd, 2005

Re: AutoScrolling a DIV tag

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

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>

zeromancer

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

8 posts
since Aug 2005

Permalink

Jan 8th, 2008

Re: AutoScrolling a DIV tag

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:

(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.

dRoot84

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Jan 2008

Permalink

Jan 9th, 2008

Re: AutoScrolling a DIV tag

Click to Expand / Collapse Quote 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:
(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:

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.

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: sample Programs using Ajax controls links or programing code

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Displaying cookie contents in safari?

DaniWeb Message

Cancel Changes

User Name
Password