JScrollpane не отображается

Question

У меня проблема с jscrollpane. Когда я загружаю веб-страницу, jscrollpane не отображается, но если я щелкну одну из ссылок на странице и вернусь назад, jscrollpane отобразится так, как должно.

Веб-сайт www.noved.info, а jscrollpane, который не отображается, находится в разделе "casos de exito". Если вы нажмете одну из этих ссылок и вернетесь назад, вы увидите, что jscrollpane работает. Jscrollpane уже работает над div вышеупомянутым.

Заранее спасибо.

Код для div не работает:

CSS:

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

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

Вы должны привязать jScrollPane к событию загрузки, в противном случае он пытается применить себя к контенту до его загрузки. jScrollPane не "видит" весь контент, потому что контент еще не загружен полностью, и "думает", что он не нужен. Когда вы возвращаетесь с другой страницы, весь контент загружен, и jScrollPane применяется сам.

Все сводится к этому:

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

Я рекомендую использовать оболочку $(window).load всякий раз, когда вы используете jScrollPane.

Надеюсь это поможет!

Answer 2

Эта работа для меня

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