JscrollPane无法正确加载到div中

Question

I'm having an issue with jscrollpane loading into a div using the following function:

$(document).ready(function() {
  $("#shopping").click(function(event){
       $('#stage').hide();
      $('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });

The above code is on the index page and I'm calling up the "shopping page" as you can see above. I have four other links that call up pages, one page has a slideshow and I managed to load that one into the div simply by eliminating the Jquery repository link, but this page doesn't want to know.

On the "shopping" page I have the following script, I've searched most of the web and also on here, without success, but nobody else's solutions have worked for me. What am I doing wrong?:

<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="./css/jquery.jscrollpane.mod.css" rel="stylesheet" media="all" />


<script>

$(function()
{
$('.horizontal-only').jScrollPane(
{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
);

  });

Answer 1

Ok... After some digging and trial and error, I've found the solution to my problem, hunting on the web and stack, I found something that worked and I thought for all those that are complete noobs, like me, in javascript and Jquery I'd post my findings.

Current call up on index page:

  $(document).ready(function() {
  $("#shopping").click(function(event){
       $('#stage').hide();
      $('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });

I added the following to my index page (this is the page that is calling up the other pages) to the link of a specific page add:

 $.ajaxSetup({async:false});

then add the jScrollPane function after your call up eg:

 $('#stage').jScrollPane(
{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
);

So altogether it looks like this:

  $(document).ready(function() {
  $("#shopping").click(function(event){
       $('#stage').hide();
 //--added the async code here--//
       $.ajaxSetup({async:false});
      $('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
 //--moved the jscrollPane from the page I was calling to the index page code here--//  
      $('#stage').jScrollPane(
{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
);

This seems to be working for me at the moment, now I just need to re-edit some css and it's good to go.

Answer 2

I've found another workaround:

I've added the following code to the index.html:

$(function()
{
var api = $('.horizontal-only').jScrollPane(

{
    showArrows: true,
    arrowScrollOnHover: true,
    horizontalArrowPositions: 'split',
    hijackInternalLinks: false
}
).data('jsp');

$('#shopping').bind(
    'click',
    function()
    {
        api.getContentPane().load(
            'pages/shopping.html',
            function()
            {
                api.reinitialise();
            }
        );
        return false;
    }
);
});

I also made the jsp load in a separate div layer, as it was causing some styling conflicts and i can't determine where the issue is but this works.

What I also had to do is hide the new div layer from the other calls so basically:

$(#scroller).hide();

Thanks, I'm sure this isn't the best way, but as i've only had one reply on this issue, which was a question, think I've done rather well for a noob.