jscrollpane plugin is not working on Jquery AJAX made template

Question

I am trying to embed JScrollbar Plugin by Kelvin Luck. I am using a JQuery-Ajax built template from here.

I am developing a website for my sister's wedding. It is working fine without this plugin. However i wanted to use a custom scrollpane instead of the browser default. Even after several permutations in placing the .jscrollpane() action register, i get this non functional result.

At Present My js file is

    $(document).ready(function(){

/* This code is executed after the DOM has been completely loaded */


/* Defining an array with the tab text and AJAX pages: */
var Tabs = {
    'HOME'  : 'pages/page1.html',
    'Know the Groom'    : 'pages/page2.html',
    'Know the Bride'    : 'pages/page1.html',
    'Picture Gallery'   : 'pages/page4.html',
    'Events'    : 'pages/page4.html',
    'Give your wishes': 'pages/page2.html'
}

/* The available colors for the tabs: */
var colors = ['blue','green','red','orange'];

/* The colors of the line above the tab when it is active: */
var topLineColor = {
    blue:'lightblue',
    green:'lightgreen',
    red:'red',
    orange:'orange'
}

/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
    /* Sequentially creating the tabs and assigning a color from the array: */
    var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');

    /* Setting the page data for each hyperlink: */
    tmp.find('a').data('page',j);

    /* Adding the tab to the UL container: */
    $('ul.tabContainer').append(tmp);
})

/* Caching the tabs into a variable for better performance: */
var the_tabs = $('.tab');

the_tabs.click(function(e){
    /* "this" points to the clicked tab hyperlink: */
    var element = $(this);

    /* If it is currently active, return false and exit: */
    if(element.find('#overLine').length) return false;

    /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
    var bg = element.attr('class').replace('tab ','');

    /* Removing the line: */
    $('#overLine').remove();

    /* Creating a new line with jQuery 1.4 by passing a second parameter: */
    $('<div>',{
        id:'overLine',
        css:{
            display:'none',
            width:element.outerWidth()-2,
            background:topLineColor[bg] || 'white'
        }}).appendTo(element).fadeIn('slow');

    /* Checking whether the AJAX fetched page has been cached: */

    if(!element.data('cache'))
    {   
        /* If no cache is present, show the gif preloader and run an AJAX request: */
        $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

        $.get(element.data('page'),function(msg){
            //msg='<div class="scroll-pane">' + msg + '</div>'; // Add the scrollpane class to the fteched text
            $('#contentHolder').html(msg);

            /* After page was received, add it to the cache for the current hyperlink: */
            element.data('cache',msg);
        });
    }
    else $('#contentHolder').html(element.data('cache'));
    //$('.scroll-pane').jScrollPane({showArrows: true}); //Try to add the event register after the content is loaded
    e.preventDefault();
})

/* Emulating a click on the first tab so that the content area is not empty: */
the_tabs.eq(0).click();
});

and the html file is

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Happy Matromonial of Shubhi and Sunny</title>

<link rel="stylesheet" type="text/css" href="./script/main_styles.css" rel="stylesheet" media="all" />
<link rel="stylesheet" type="text/css" href="./script/jquery.jscrollpane.css" rel="stylesheet" media="all"  />

<script type="text/javascript" src="./script/jquery-1.7.1.js"></script>
<script type="text/javascript" src="./script/main_script.js"></script>
<script type="text/javascript" src="./script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="./script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./script/mwheelIntent.js"></script>
        <script type="text/javascript" >
            $(function()
            {
                $('#contentHolder').jScrollPane({showArrows: true});
            });
        </script>
</head>

<body>

<h1>This Website is under construction... Check every monday for changes.</h1>
<h2>View the <a href="./Activity_and_Change_log.html">Progress and change log. &raquo;</a></h2>

<div id="main">

<ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul>

<div class="clear"></div>

<div id="tabContent">

    <div id="contentHolder" >
        <!-- The AJAX fetched content goes here -->
    </div>  

</div>

</div>

In Summary, I am trying to set jscrollpane on the #contentHandler so that if fetched page is bigger than the div, the overflow:auto; CSS property should use better looking scrollbars instead of browser default.

Where am i doing wrong. This project i am doing is my first experience with Jquery, So i am not familiar how the plugins are used in a website. Any Help for noob, someone.

OK now the plugin is working.. But in the fallback mode. where the browser default scrollpane is displayed. i changed $(function() { $('.scroll-pane').jScrollPane({showArrows: true}); }); to $('scroll-pane').ready((function() { $('.scroll-pane').jScrollPane({showArrows: true}); })); Now can someone help me to get it working normally instead of fallback mode. — Abhinav Kulshreshtha
– Abhinav Kulshreshtha, Commented Mar 24, 2012 at 18:22

Yener Guller · Accepted Answer · 2012-12-31 20:15:46Z

Have a look at this page: http://jscrollpane.kelvinluck.com/ajax.html

...Because of the way jScrollPane works you need to use the getContentPane API method to get the element which you are adding content to and then reinitialise the scrollpane once you have changed the content...

Use this format:

var element = $('#someIdHere').jScrollPane();
var api = element.data('jsp');
api.getContentPane().html(msg);
api.reinitialise();

It should be used like this on your JS file:

var element = $('#contentHolder').jScrollPane({showArrows: true});
var api = element.data('jsp');

if(!element.data('cache'))
{   
    /* If no cache is present, show the gif preloader and run an AJAX request: */
    api.getContentPane().html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');
    api.reinitialise();

    $.get(element.data('page'),function(msg){
        //msg='<div class="scroll-pane">' + msg + '</div>'; // Add the scrollpane class to the fteched text
        api.getContentPane().html(msg);
        api.reinitialise();

        /* After page was received, add it to the cache for the current hyperlink: */
        element.data('cache',msg);
    });
}
else {
    api.getContentPane().html(element.data('cache'));
    api.reinitialise();
}
e.preventDefault();

Merk Maloney · Accepted Answer · 2012-04-23 20:55:05Z

0

The JScrollPane probably needs to reinit after the content changes via AJAX.

$(document).ready(function() {
    $('#contentHolder').jScrollPane({
        showArrows: true,
        autoReinitialise: true
    });
});

answered Apr 23, 2012 at 20:55

Merk Maloney

1211 silver badge5 bronze badges

2 Comments

Abhinav Kulshreshtha Over a year ago

tried this code. still in the fallback mode. Is there any requirement of specific folder structure for the plugin to work. i have the script and stylesheet at ./script/<script and css> and the images at ./img/icon.png

Merk Maloney Over a year ago

In your "non functional result" link, you have: $('.scroll-pane').ready((function(). Try changing that to $(document).ready(function().

Collectives™ on Stack Overflow

jscrollpane plugin is not working on Jquery AJAX made template

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related