JScrollpane not showing

Question

I've an issue with jscrollpane. When I load the web page, jscrollpane doesn't show but if I click one of the links of the page and then go back, jscrollpane is showing as it should.

The website is www.noved.info and the jscrollpane that is not showing is the one in section "casos de exito". If you click one of those links and then go back, you will see jscrollpane working. Jscrollpane is already working on the div above the mentioned.

Thanks in advance.

The code for the div not working is:

CSS:

.lista_exitos
{
    margin-left:5px;
    width:390px;
    height:400px;
    overflow:auto;
}

The HTML:

<div id="portfolio_container" class="contenedor_inferior" style="margin-left:7px;margin-top:5px;width:400px;height:413px;background-image:url(css-images/fondo_portfolio.png)">
    <div style="height:10px"></div>
    <div class="lista_exitos">
    <?php
    // PHP STUFF FOR GETTING DATA FROM DATABASE
         while ($fila = mysql_fetch_assoc($result))
         {
            echo '<p style="float:left;margin:0px;margin-left:5px;margin-bottom:5px"><a href="portfolio.php?id='.$id.'" alt="'.$nombre.'" style="margin-right:3px">
            <img src="imagenes/portfolio/'.$logo.'" width="180" border="0" align="absmiddle">
            </a></p>';
         }
    ?>
    </div>
</div>
<script type="text/javascript">
    $('.lista_exitos').jScrollPane();
</script>

Answer 1

You have to get jScrollPane attached to a load event, otherwise it tries to apply itself to content before it has loaded. jScrollPane doesn't "see" the whole content, because the content hasn't loaded completely yet, and "thinks" that it's not needed. When you come back from another page, the entire content has loaded, and jScrollPane applies itself.

It all boils down to this:

<script type="text/javascript">
$(window).load(function() {
    $('.lista_exitos').jScrollPane();
}); 
</script>

I recommend using $(window).load wrapper whenever you use jScrollPane.

Hope this helps!