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>

the content is smaller than the container so no scrollbar is displayed. or am i missing something? — Andy, Jun 15 '11 at 12:04

score 2 · Answer 1 · answered Jun 24 '11 at 12:20

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!

I'm glad you found it helpful! Thanks for making a comment! – Dimitri Vorontzov Mar 03 '12 at 06:13 — Dimitri Vorontzov, Mar 03 '12 at 06:13

score 0 · Answer 2 · answered Feb 14 '12 at 08:48

0

this work for me

<div class="lista_exitos">
    <div>  <!--- fake div for counting content height --->
       <p>long text ...</p>
    </div>    
</div>

answered Feb 14 '12 at 08:48

fullpipe

368
4
14

JScrollpane not showing

2 Answers2