Tuesday, February 2, 2010

Adding scrolling to div dynamically

Sometimes we need to add scrolling in a div element but we don't want to fix the height of the element initially.
That means...tag's height will be 0, but as soon as you fill the content of it through ajax etc. then you wish to add a scroll bar to it after reaching a specified height. How can we do that? Here is a simple solution:
You can made a Javascript function which will call after adding content to element.

function addScrollToDiv(){
var divHeight = document.getElementById("divid").offsetHeight;
if(divHeight > 250){
$('#divid').css({"height":"250px"});
$('#divid').css({"overflow":"auto"});
}else{
$('#divid').css({"height":""+divHeight+"px"});
}
}


That's it! How easy is it. Enjoy :)

1 comment:

  1. Thanks a lot lalit.
    Very good solution for the problem.
    This is what I was looking for.
    [;)]

    ReplyDelete