[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 778
  • Last Modified:

Div auto scroll to bottom

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
tonelm54
Asked:
tonelm54
1 Solution
 
kostantinos1995Commented:
The given page cannot be found!
0
 
tonelm54Author Commented:
Sorry, its including the ' at the end of the hyperlink.

The url is:-
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
0
 
kostantinos1995Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
antonybrahinCommented:
put the script in a function and call it after the div loads.
0
 
kostantinos1995Commented:
Sorry:  ->
0
 
kostantinos1995Commented:
It takes br and interpretes it as real code, the point is you have mistyped it.
0
 
kostantinos1995Commented:
Like this:



hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello



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

jumpToAnchor("divTransList");
</script>
0
 
kostantinos1995Commented:
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
 
kostantinos1995Commented:
I just saw the page let me change the code a little bit.
0
 
kostantinos1995Commented:
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
 
sam2912Commented:
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
 
sqlgangCommented:
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
 
sqlgangCommented:
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now