In order scroll to bottom of div, you need to know the height of the div. The more contents inside the div, the more value of height. So basically you need to wait for all contents finish display on the div, then only you can get the height of the div, then only you can execute the function scrolling to bottom of div.
To scrolling to bottom, you just need javascript codes below :
<script type="text/javascript">
function asd(){
d = document.getElementById('div_id');d.scrollTop = d.scrollHeight;
}
asd();
</script>
It work perfectly on Firefox, but it is not working on IE. Why? Because the contents are not finish displayed inside the div before execute asd();. You need to wait for all contents finish rendered into the div, then only execute asd();. To do that, you can use either 1 of them :
1 - <body onload="asd()"> or
2 - jquery $(document).ready(function(){asd();}); or
3 - jquery $(function(){asd(); });.
The 3 methods above work perfectly when the contents of div are not fetched from other page by AJAX or Jquery. If you use ajax or jquery to fetch the contents from other page into the div. For example, jQuery.get("showMsg.php, function(data) { $('#div_id.span_class').append(data); });, you will have another problem on IE. The 3 methods are just to make sure the body/document is finish rendered, too bad they can't detect whether or not ajax/jquery has finish fetching data from other page into the div. To detect it, you can use this javascript functions :
function countdivnum(){
var totalItems=$('#content div').length;
if (totalItems<20){ // make sure all 20 items are loaded, then only start execute scroll funtion.
setTimeout("countdivnum();",1000);
} else if (totalItems==20){
//alert("asdw");
updatestatus();
scrollalert();
}
}
$('document').ready(function(){
countdivnum();
});
Let me explain the codes above. As I use ajax/jquery to fetch multiple <p>...</p> from other page into the div. When the page is loaded, I call countdivnum() which counting the number of <p>(s) inside the <div id="content">. If (totalItems<20) mean the contents are not finish loaded, so wait for 1 seconds then call coundivnum() again to count the number of divs again.
Posted by Zac1987 on
24 May, 2011
0 comments