I can't get jQuery's jScrollPane to work! :(

Question

Oh, the frustration!

I have literally had the most frustrating morning ever. I've spent 4 and a half hours trying to get this to work.

The jQuery plugin in question is jScrollPane: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

My webpage is http://furnace.howcode.com - please just ignore the test data there during development ;)

So if you examine the source, you'll see this:

jQuery(document).ready(function() {
    $('#newesttab').addClass('selectedtab'); 
    $('#col2').addClass('newestcol');
    $("#ajaxresults").fadeOut("slow", function() {
        $.ajax({
            url: "<?php echo site_url('code/newest'); ?>",
            success: function(msg) {
                $('#ajaxresults').html(msg);
                $("#ajaxresults").fadeIn("fast");
                $('#col2').jScrollPane();
            }
        })
    });

The line $('#col2').jScrollPane(); is the line that's meant to make the jScrollPane trigger. It does... but, as you can see from the site, half of the div is cut off. I worked it out to be because #col2 has margin-left: 160px so it cuts off halfway. But, when I try to use a workaround, it breaks the rest of my page structure.

The second problem is that if I try and apply jScrollPane on any other div, I simply get no effect. I tried putting #col2 in a wrapper, #col2wrapper and applying it to that, but nothing at all worked. It's properly confusing.

If anyone can work this out, I will be so insanely pleased that I will give them a virtual high-five and other appreciative things.

Thanks!

Jack

Answer 1

Hi,

I think this is more css issues related with jScrollPane.css,

The problem is the width of jScrollPaneContainer. Look in Firebug what it does (if you don't use it, reconsider this, you saw in 5minutes, I was able to identify the problem without knowing your code before ^^). Try to delete position:relative of jScrollPaneContainer and position:relative in #col2, and it should work easier.

Edit : Simpler : just delete overflow:hidden; from class jScrollPaneContainer and it will do the trick.