JQuery jScrollPane - it just won't work!: '(
OK - Let's say I'm pretty new to this jQuery department. I must have made some mistake, but hey, you have to learn somewhere! :)
So I am using jScrollPane: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
I want to style the scrollable area in my second column. Specifically, I would like to apply and format the scrollbars on a div#ajaxresults
My page ... is rather jQuery heavy. I don't know if any of the variables are conflicting or something ... In fact, I really have no idea why this doesn't work.
Take a look at my problem page: http://furnace.howcode.com
In the title, I have set the following:
<!-- Includes for jScrollPane -->
<script type="text/javascript" src="http://localhost:8888/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/stylesheets/jScrollPane.css" />
<script type="text/javascript">
$(function() {
$('#ajaxresults').jScrollPane();
});
</script>
(i changed localhost to server copy though)
Nothing ever works with the #ajaxresults div. I installed as the docs say jScrollPane overflow:auto
, but still no luck. I find that when the jScrollPane DOES appears to be "fired", it just moves the div by about 100px. Try it yourself.
Perhaps someone can help? There are quite a few jQuery plugins out there, so I don't know if something is colliding / crashing, etc.
Please note that the site is still in development between me and a friend, which explains the private messages we present to each other (“Hello Donnie!” Etc: D). Also, when the page is viewed, nothing can appear in the second column for a few seconds - it just fetches the data via Ajax. So give him some time.
Many thanks!
Jack
a source to share
After looking at the code, the first thing that struck me was that you put the JS code in the "ajaxresults" div. It is generally best to keep the code outside of the target div. Place an empty div like this:
<div id="ajaxresults" class="scroll-pane"></div>
See below and use jQuery to fill with . append () or . html () . There are many options. I'm sure there are more things I could knit, but this seems to be the first major change I would suggest.
It might be a bit of a process.
Also, if you don't have Firebug yet , I can suggest getting a copy. This can be useful when debugging jQuery.
a source to share