Sometimes we face a special requirement which we have never been earlier. Few days ago, I have a requirement to update div top position based on its changing height. I tried to resolve it by using different way and at last got success.
HTML
1 2 3 | <div id="updateDiv"> <span> 1.1 query executed.</span> </div> |
CSS
1 | #updateDiv { overflow:auto; height:200px; width:400px;} |
In this div, span tag is appending dynamically on execution of batch query with the query execution message, so div height would be increased and when height will go beyond 200 px. It will get scroll bar and always scroll will go on top. But we need to div always scroll to latest message.
Solution
1 2 3 4 5 6 | <Script> function updateDiv() { $('#updateDiv').scrollTop($('#updateDiv').scrollHeight); } </script> |
We need to call ‘updateDiv’ function after adding span in the div.
This is really a simple and easy solution.