jquery jscrollpane destroy then recreate/reinitialize

Question

I can initialize jScrollPane by following code.

$("#scroll-pane").jScrollPane();

And can reinitialized with reinitialize function. It all works fine.

But I have a feature in my page when user resize window as width as low 480px (mobile mode) I will need to destroy $("#scroll-pane") jScrollPane. I can destroy it with:

$("#scroll-pane").data('jsp').destroy();

This works too. But when I resize back to desktop size window following code don't work.

$("#scroll-pane").jScrollPane();

Any idea? Any workaround?

Answer 1

When initializing the jscrollpane for the first time, this would work

$("#scroll-pane").jScrollPane();

but after destroying the instance of jscrollpane if you need to re-initialize you need to call like this

$("#scroll-pane").jScrollPane().data().jsp

Check out the Live Demo here: http://jsfiddle.net/dreamweiver/j3nE3/178/