I am trying to get a stylish scroll using jquery it is having a problem.

See more:

HTML

jQuery

jQuery-UI

Hi!! I am using a div and when div contents overflow i am using a scroll which we get from jquery i have used following code for it....

<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.jscrollpane.min.js" type="text/javascript"></script>

then for css :

<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />

when i click on a button the div opens and scroll works for first time but when i click on it second time the size of div enlarges from 250px to 855px... so wanted... ur help to resolve the issue... the jquery is as follows....

function scrollstyle()
{
    $(function()
    {
        $('.scroll-pane').each(
            function()
            {
                $(this).jScrollPane(
                    {
                        showArrows: $(this).is('.arrow')
                    }
                );
                var api = $(this).data('jsp');
                var throttleTimeout;
                $(window).bind(
                    'resize',
                    function()
                    {
                        if ($.browser.msie) {
                            if (!throttleTimeout) {
                                throttleTimeout = setTimeout(
                                    function()
                                    {
                                        api.reinitialise();
                                        throttleTimeout = null;
                                    },
                                    50
                                );
                            }
                        } else {
                            api.reinitialise();
                        }
                    }
                );
            }
        )
    });
}

this function i am calling after binding the div... and div in HTML is as follows:

<div id="divshowcomments" style="display: none; width: 250px; height: 435px; border: 1px solid #353535;
      border-radius: 7px; position: relative; background-color: grey; top: -480px;
      left: 160px;overflow:auto;" class="scroll-pane"  runat="server">
  </div>

so can u please help me as to why the div is expanding when btn clicked second time...

Thanking You in advance.....