jScrollable Custom scroll bars

I’m working on a nice little WordPress job today. The designs are great, but the designer hasn’t really catered for variable content heights (it’s a list of items driven from a post category, each one has a little drop down box which displays the full post content).

Something I see quite a lot to be honest, the designer uses the same piece of Lorem Ipsum for each section – that’s fine but it’s a CMS and the client is going to be sticking in all kinds of different content which will need to be catered for. We are left with the following list of options;

  • The client has to create content which is exactly the same length as the Lorem Ipsum, for every instance (a total non-starter)
  • I have to write script which truncates the content at a certain word/character limit (again, client not happy, wondering where that content which took them all that time to write went)
  • I truncate the content and automatically add a read-more link which takes them to a single.php post for the content. This is OK, and it’s good to be thinking along the lines that the post could be accessed via single.php (ie via a sitemap generator)
  • I format the CSS so that scrollbars appear for any content which is going to breakout of it’s holding container.
  • I do as above, but style them so they actually look nice rather than the default browser bars which would look awful in the design I’m working in (and most other designs to be fair).

So I chose the latter. Deployed jScrollpane (http://jscrollpane.kelvinluck.com). Been stumped on this for a good 45 minutes, thought I’d share this nugget with the world;

Problem: For some weird reason the scroll bars weren’t appearing at all, all code was loaded in fine, everything was working as expected but there was no jspScrollable class being added to the parent div, and no scroll bars.

Answer: I was trying to apply the scrollbars to a series of divs with their CSS set to display: none;. This won’t work, if they are not there then the scrollbars won’t be applied.

The solution was for me to set the set the visibility to hidden after the jScrollpane script had done it’s magic in my onload.js file.

$('.scroll-pane').jScrollPane();
$(".hidden-details").hide(); // We hide the details tabs after jScrollPane has been applied.