•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 426,416 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,310 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 21348 | Replies: 11
 |
•
•
Join Date: Aug 2005
Posts: 7
Reputation: 
Rep Power: 0
Solved Threads: 1
Newbie Poster
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.
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
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
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 35
Research the JavaScript "scrollTo" method, then post a follow-up if you have any specific questions about it.
•
•
Join Date: Aug 2005
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
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,590
Reputation:
Rep Power: 7
Solved Threads: 35
Understood. Your next assignment, then, is to research "offsetTop" and "offsetParent".
•
•
Join Date: Sep 2005
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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,590
Reputation:
Rep Power: 7
Solved Threads: 35
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:
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.
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.
•
•
Join Date: Sep 2005
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
thanks
•
•
Join Date: Aug 2005
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
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+'<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:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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:
Now we do the script thing...
Whith that you can easily scroll to a specific element in your scroll container:
Whoops... one line of code? oh yes baby, yes!
I LOVE PROTOTYPE!
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'> <!-- 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 7:14 pm.
•
•
Join Date: Sep 2005
Posts: 689
Reputation:
Rep Power: 6
Solved Threads: 41
Practically a Master Poster
Re: AutoScrolling a DIV tag •
•
•
•
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:
<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];
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:
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!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- mozilla firefox problem with text in div tag (HTML and CSS)
- How to have the div layer center on any browser? (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: sample Programs using Ajax controls links or programing code
- Next Thread: Displaying cookie contents in safari?
