Multiple jquery scripts issue

Question

Can you help me out with an jquery issue on my demo site. I have two jquery scripts running. One for a circular content that moves left / right and one for multiple vertical scrollable contents (with jscrollpane) using both scripts on the same page.

When a item is slide open, the text can be scrolled up and down. When I slide to the next content (with the left and right arrow) while not closing the content and return back to previous page the vertical scroller is locked. A page refresh is needed to reset the vertical scroll function.

When first closing the content this issue doesn't show up. Can you help me pointing out the issue. I have tried about anything listed on http://jscrollpane.kelvinluck.com/.

Thanks, Martijn

chrisn · Accepted Answer · 2012-01-08 19:38:08Z

1

The reason this is happening is because the carousel script you are using is cloning the elements and then adding them to the end of the carousel. Since you are only calling $('.scroll-pane').jScrollPane(); in the initial page load, items with this class that are dynamically created will not be initialized with the jQuery scrollpane plugin.

The only way I've found so far to accomplish what you're looking to do is to modify the carousel script directly, and destroy() and reinitialize the pane every time the new object is created.

I've added a jsFiddle here which shows a working example. The one caveat to it is that since the pane is destroyed and rebuilt, the scrolling position is always moved back to the top when the element has been recreated.

edited Jan 8, 2012 at 19:38

answered Jan 8, 2012 at 14:05

chrisn

2,13515 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Martijn Over a year ago

Tnx for the reply chris! Is there an easy fix to have the jQuery scrollpane plugin work with the carousel?

chrisn Over a year ago

@Martijn I have amended my answer with a possible solution

Martijn Over a year ago

@ Chris N Tnx for the amendment! I changed the script in lines 19 and 27 to $(this).clone(true, true).css(... Unfortunatly the scroll option still freezes...

Martijn Over a year ago

Just brilliant, an excellent solution! Thanks for solving the issue!

Martijn Over a year ago

Could you review a new small addition in the script which doesn't seem to work and is addressed in my latest question?

Collectives™ on Stack Overflow

Multiple jquery scripts issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related