jQuery jScrollPane - it simply won't work! :'(

Question

Hey folks,

OK - I'll admit, I'm quite a beginner in this jQuery-department. I've probably made some amateur mistake, but hey, you gotta learn somewhere! :)

So I'm using jScrollPane: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

I want to use it style the scrollable area in my second column. Specifically, I would like to apply and format the scrollbars on the div #ajaxresults

My page is... rather jQuery heavy. I don't know if any variables are conflicting or something... in fact I really have no idea at all why this isn't working.

Take a look at my problematic page: http://furnace.howcode.com

In the header, I've set this to go:

    <!-- Includes for jScrollPane --> 
<script type="text/javascript" src="http://localhost:8888/js/jquery.mousewheel.min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://localhost:8888/js/jScrollPane.js"&gt;&lt;/script&gt; 
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/stylesheets/jScrollPane.css" /> 
<script type="text/javascript"> 
$(function() {
    $('#ajaxresults').jScrollPane();
});
</script> 

(I've changed localhost on the server copy though)

Nothing ever seems to work with the #ajaxresults div. I've set, as the jScrollPane docs say, overflow:auto on it but still no luck. I find that when jScrollPane DOES seem to 'run' it just moves the div down about 100 pixels. Try it for yourself.

Perhaps someone could help? There's quite a few jQuery plugins there so I don't know if something's colliding/crashing etc...

Please note the site is still in development between myself and a friend, which explains the personal messages we submit to each other ('Hi Donnie!' etc. :D ). Also, when you view the page nothing may appear in the second column for a few seconds - it's just fetching the data via Ajax. So give it a little time.

Thanks very much!

Jack

Answer 1

After viewing your code, the first thing that strikes me is that you've placed JS code inside the "ajaxresults" div. Generally it's best to keep your code outside the target div. Place the empty div like so:

<div id="ajaxresults" class="scroll-pane"></div>

At the bottom and use jQuery to populate with something like .append() or .html(). There are lots of options. I'm sure there are more things I could knit pick but this seems to be first major change I'd suggest.

This might be a bit of a process.

Also, if you don't already have Firebug, I might suggest getting a copy. It can really be helpful in jQuery debugging.