Question

Good evening, i’m trying to use jScrollPane in a WordPress template and i’m going crazy, always shows a “non-skinned” scrollbar…

This code is loaded in the header.php, .portfolio-post-content contains only text:

<script type="text/javascript" charset="utf-8">
    $(function() {
            $('.portfolio-post-content').jScrollPane();
        });
</script>

The element in style.css:

.portfolio-post-content { width:130px; float:left; overflow: auto; height: 500px; }

The HTML out:

    <!-- Main Page Content Begin -->

    <div id="main"> 

      <div id="page-content" class="portfolio-container main-container-single-portfolio" style="position:relative;">

        <div class="container sidebar-left single-project">    

          <!-- Media Begin --> 
          <div class="portfolio-post-media twelve columns"></div>
          <!-- Media End -->        

          <!-- Content Begin -->       
          <div class="portfolio-post-content four columns">text...</div>
          <!-- Content End -->

The header file loads jScrollPane.css before the other .js files.
It sounds like a problem related to the nested div elements.

Thanks,

Answer 1

1:

<script type="text/javascript" charset="utf-8">
    var $ = jQuery.noConflict();

    $(function() {
        $('.portfolio-post-content.four.columns').jScrollPane();
    });
</script>

2: http://www.radiospeck.it/barchitects/wp-content/themes/spacing/js/jquery.mousewhell.js?ver=3.4.2

Not loaded

3:

.portfolio-post-content.four.columns {
   height: 200px;
}

you can test with:

jQuery('.portfolio-post-content.four.columns').css({
    height: '200px'
}).jScrollPane();