You are viewing phreakhead

Previous Entry | Next Entry

jScrollPane Pain

Powerbass
So I've been using the jScrollPane plugin for jQuery on one of the Smithsonian websites I've been working on. It's a great plugin, but one of the main problems with it is that it doesn't handle anchor links well (or at all, really). Here is a fix. Just paste this code into a script tag in your document and everything will work automagically (as long as your scrollpane divs are of class "scrollPane" and you are using jScrollPane > 1.2 and jQuery > 1.2):

<script type="text/javascript">
 $("a[href^='#']").bind(
	'click',
	function()
	{
		var targetElementSelectorString = $(this).attr('href');
		var anchorName = targetElementSelectorString.substr(1); //strip the hash

		if (anchorName.length > 0) {
			var anchorSelector = "a[name='" + anchorName + "']";
			var anchor = $(anchorSelector).eq(0);
			
			if (anchor.length > 0) {
				var pane = anchor.parents(".scrollPane").eq(0);
			
				if (pane.length > 0) {
					//var pos = $anchor.offset().top - $pane.offset().top;
					pane[0].scrollTo(anchorSelector);
					
					return false;
				}
			}
		}
		return true; //just follow the link if it's not to a scrollpane
	}
);
</script>

Comments

( 1 comment — Leave a comment )
(Anonymous)
Dec. 19th, 2008 10:53 pm (UTC)
Hi El Fuego,

Glad you like jScrollPane. You may want to make sure you are using the latest version of the plugin as I added some similar code to this in the 1.2 release a while back:

http://www.kelvinluck.com/2008/11/jscrollpane-12-released/

Let me know if you have any problems with the latest release,

Cheers,

Kelvin :)

p.s. Your script won't work with content which was added to the page after you can the script. I use event delegation to avoid this problem...
( 1 comment — Leave a comment )

Latest Month

August 2009
S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Page Summary

Powered by LiveJournal.com
Designed by Tiffany Chow