0

On my website: www.industria.be/verkiezingen/infinity/www/

I made a content pane in the middle of the screen. I'm calling in jScrollPane to handle the intented overflow. This works smooth on the home/team and calendar page, however the sponsorpage is bugging. This sponsorpage contains the same container but here it is filled images. The jScrollPane function call is the same though but it does not work properly here. Sometimes the scrollbar won't appear or it is unable to scroll to the bottom of the container.

The jQuery code I used: 

$(document).ready(function(){
 $('#content').jScrollPane({
    scrollbarWidth: 10,
    scrollbarMargin: 10,
    dragMinHeight: 50,
    dragMaxHeight: 100,
    showArrows: false   
});});

The html:

<div id="content">
    <h1>Our sponsors:</h1>
    <a href="http://www.mydigipass.com/"
       target="_blank"><img src="img/myDIGIPASS-logo.png"
           alt="" width="650" height="152" class="sponsorbalk"/></a></br>
    <a href="http://www.dvs-entertainment.be"
       target="_blank"><img src="img/DVS-entertainment.png"
           alt="" width="250" height="125" class="sponsor"></a>
    <a href="http://winter.skikot.be/"
       target="_blank"><img src="img/skikot.png"
           alt="" width="284" height="140" class="sponsor"></a>
    <a href="http://www.imec.be/"
       target="_blank"><img src="img/imec.png"
           alt="" width="250" height="172" class="sponsor"></a>
    <a href="http://www.poweruser.be/"
       target="_blank"><img src="img/poweruser_black.jpg"
           alt="" width="400" height="217" class="sponsor"></a>
    <a href="http://www.delibere.be/new_design/index.php"
       target="_blank"><img src="img/de.png" alt=""
          width="225" height="50" class="right sponsor"></a>
    <a href="http://www.groept.be/www/"
       target="_blank"><img src="img/GroepT.png"
           alt="" width="180" height="180" class="left sponsor"></a>
    <a href="http://guldendraak.be/"
       target="_blank"><img src="img/gulden-draak.png"
           alt="" width="106" height="106" class="sponsor"></a> 
    <div id="sponsors">
      <p>We would like to thank all of the above sponsors for their co-operation and support to our team.</p>                   
    </div>
</div>

I hope someone could explain me why this is not working properly. Thanks in advance.

vyegorov
  • 21,787
  • 7
  • 59
  • 73
user1375280
  • 1
  • 1

1 Answers1

0

From your description I would suggest that you initialize the scroll pane after the images have loaded using $(window).load() rather than $(document).ready().

I just ran into a variation of this problem myself not too long ago.

Doug Melvin
  • 1