Question

I have used the scroll bar which is extracted from this site http://jscrollpane.kelvinluck.com/arrow_hover.html. I have integrated a ajax show hide function for some text. My problem is the scroll doesn’t works properly if i used the ajax show hide within the scroll pane. If i click the Click to open some text will open underneath it. But some of the text at the bottom will not displayed. It gets cut off. The scroll height doesn’t exceed.

The following is my html code.

<div class="scroll-pane">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
    eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
    mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
    consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
    bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
    semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
    quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
    eu lacus semper viverra. </p>
  <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p>
  <p>
  <div class="avatar_content">
    <div><strong>KeysorSoze:</strong></div>
    <p>Spitfire might thwart the 3-peat but he won’t thwart The Dynasty.  One and done, Levi!</p>
    <div><a href="javascript:void(0);" onClick="javascript:ajaxshow('replybox');">Click to open</a></div>
  </div>
  <div id="replybox" style="display:none;">
    <div align="right" style="position:relative;"><a href="javascript:void(0);" onClick="javascript:ajaxhide('replybox');">close</a></div>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
      amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
      amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p>
  </div>
  <div style="clear:both"></div>
  </p>
  <p> last content</p>
</div>

This is my css

.scroll-pane
{
    width: 500px;
    height: 200px;
    overflow:auto; background-color:#CCCCCC;
}

This is the script for ajax show hide

<script type="text/javascript">
function ajaxshow(id){
document.getElementById(id).style.display = 'block';
}
function ajaxhide(id){
document.getElementById(id).style.display = 'none';
}
function hide(id){
if (document.getElementById){
obj = document.getElementById(id);
obj.style.display = "none";
}
}

</script>

How can i correct that?

Answer 1

You need to reinitialize jScrollPane when the content changes. Something along these lines:

function ajaxshow(id){
  document.getElementById(id).style.display = 'block';
  jQuery('.scroll-pane').jScrollPane();
}
function ajaxhide(id){
  document.getElementById(id).style.display = 'none';
  jQuery('.scroll-pane').jScrollPane();
}