How to use jQuery jScrollPane and scrollTo plugins in the same script

Question

I'm building my first js/jQuery site and I've run into a hiccup. I'm trying to use both jScrollpane (Kelvin Luck) and scrollTo (Ariel Flesler) plugins in one script. If I comment one out, the other works. Are they mutually exclusive? Do I need to unbind functionality out of jScrollpane to remove a 'scrollTo' call conflict or something? (I have no idea how to do that).

I'm using jScrollPane 2beta11 and scrollTo 1.4.2. Here's my stripped-down code using both:

// JavaScript Document
$(document).ready(function() {

    //jScrollPane Init
    $('#scrollingDiv').jScrollPane({
    });

    //scrollTo Refresh
    $('div.scroll-pane').scrollTo( 0 );
    $.scrollTo( 0 );

    //Buttons
    var $scrollDiv = $('#scrollingDiv');
    var next = 1;

    $('#but-rt').click(function(){
    $scrollDiv.stop().scrollTo( 'li:eq(1)', 800 );
    next = next + 1;
    });

});

I'm aware that jScrollPane has it's own scrollTo functionality, but I need scrollTo's jQuery Object selectors in my particular project. I know I've got my HTML/CSS lined up fine because each function works as long as the other is commented out.

(By the way, I plan on using "next" variable to increment scrollTo button once I figure out how... not related to my problem tho.)

Any help is much appreciated. Let me know if there's anything else I need to supply. Thanks!

-Patrick

Answer 1

See how to use ScrollTo functionality of JscrollPane from the following url,

http://jscrollpane.kelvinluck.com/scroll_to.html

Hope this will help you...

Answer 2

I too was trying to use both jScrollpane (Kelvin Luck) and scrollTo (Ariel Flesler) plugins in one script. I've come across an easy solution which doesn't even require Ariel Flesler's AWESOME Script, if you don't necessarily require animated scrolling. I wanted to be able to scroll to a label in a list of items when the page loads. Here's how i did it:

$(function()
    //Declare the ID or ClassName of the Scroll Element
    //and the ID or ClassName of the label to scroll to

    MyList = $('#MyElementID OR .MyElementClassName');
    MyLabel = $('#MyElementID OR .MyElementClassName');

    // Initiate the Scrollpane
    MyScroll = $(MyList).jScrollPane();

    // Connect to the jScrollPaneAPI
    jScrollPaneAPI = MyScroll.data('jsp');

    // Get position co-ordinates of the Label
    var MyLabelPosition = $(MyLabel).position();

    // Convert position co-ordinates to an Integer
    MyLabelPosition = Math.abs(MyLabelPosition.top);

    // Scroll to the Label (0-x, vertical scrolling) :)
    jScrollPaneAPI.scrollTo(0, MyLabelPosition-3, true);
});

There's a small bug with the exact positioning when a list gets longer, will post a fix asap...