Solved

Div auto scroll to bottom

Posted on 2010-09-11
13
710 Views
Last Modified: 2012-05-10
Ive been trying to get a Div to load, and scroll to the bottom. The idea is to have a list of transactions, and have the div scroll to the bottom.

I found an article at 'http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html', and tried to put it in the onload of the div, but it doesnt scroll to the bottom. It doesnt produce any errors, just doenst work :-(

Any idea what Im doing wrong?

Thanks in advance!!!


<div id="divTransList" style="width:100%; height:150px; overflow:auto;" onload="javascript: var objDiv = document.getElementById('divTransList'); objDiv.scrollTop = objDiv.scrollHeight;">
        hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>hello</br>
    </div>

Open in new window

0
Comment
Question by:tonelm54
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33652966
The given page cannot be found!
0
 

Author Comment

by:tonelm54
ID: 33652970
Sorry, its including the ' at the end of the hyperlink.

The url is:-
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
0
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33652994
One, you have a syntax error "" should be typed "" and two anchor points use the name attribute, check out the following code:
<div id="divTransList" name="divTransList" style="width:100%; height:150px; overflow:auto;">

hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />

</div>

<script type="text/javascript">
window.onload= function event(onload) {window.location = "#divTransList"};
</script>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:antonybrahin
ID: 33652996
put the script in a function and call it after the div loads.
0
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33652998
Sorry:  ->
0
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33653004
It takes br and interpretes it as real code, the point is you have mistyped it.
0
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33653011
Like this:



hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello



<script type="text/javascript">
function jumpToAnchor (anchorPoint) {
      window.location = "#" + anchorPoint;
}

jumpToAnchor("divTransList");
</script>
0
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33653013
Like this:
<div id="divTransList" name="divTransList" style="width:100%; height:150px; overflow:auto;">

hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />

</div>

<script type="text/javascript">
function jumpToAnchor (anchorPoint) {
	window.location = "#" + anchorPoint;
}

jumpToAnchor("divTransList");
</script>

Open in new window

0
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33653023
I just saw the page let me change the code a little bit.
0
 
LVL 2

Accepted Solution

by:
kostantinos1995 earned 500 total points
ID: 33653045
I'm sure this is what you want:
<div id="divTransList" name="divTransList" style="width:100%; height:150px; overflow:auto;">

</div>

<script type="text/javascript">
function addTimeToDIV () {
	objDiv= document.getElementById('divTransList');
	// Your code goes here
	objDiv.innerHTML += new Date().getTime() + "<br />";
	// and ends here
	objDiv.scrollTop= objDiv.scrollHeight;
}

setInterval ("addTimeToDIV()", 500 );
</script>

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 33653540
if you only want the div to jump to the bottom once, on page load, do this:
<script type="text/javascript">
window.onload = function() {
   var elem = document.getElementById('divTransList');
   elem.scrollTop = elem.scrollHeight;
}
</script>

Open in new window

0
 
LVL 2

Expert Comment

by:sqlgang
ID: 33656433
Code for IE:

<html>
<body>
    <script language="javascript" type="text/javascript">
        function MoveDivToBottom() {
            var obj = document.getElementById("divTransList");
            document.getElementById("foodiv").innerHTML = document.getElementById("foodiv").innerHTML + "::" + obj.scrollHeight + ">>" + obj.offsetHeight;
            obj.scrollTop = obj.scrollHeight;
        }
    </script>
<div id="foodiv" style="display:none"></div>    
    <div id="divTransList" style="width: 100%; height: 150px; overflow: auto;">hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
        hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello
        <br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />
        hello<br />hello<br />hello        End
</div><script language="javascript" type="text/javascript">MoveDivToBottom();</script>

</body>
</html>

Open in new window

0
 
LVL 2

Expert Comment

by:sqlgang
ID: 33656438
For Non IE: You may remove the foo div and its innerHTML manipulation from the MovDivToBotom - as it is specific for the IE only where it needs some time to move to bottom - which it gets by doing some funny stuff.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question