I have a list of images contained within jScrollPane and when you click on a image some fancy pants animations occur. The problem is I need to get the location of the image from the top of the screen. I can easily do this with jQuery when not using jScrollPane but when I use location doesn't change. How can I find the location of the image with respect to the movement within jScrollPane?
how I'm building the images.
grid = $('#grid'),
str = '';
grid.empty();
$.each(main_images,function(i,v){
str += '<li gallery="'+i+'"><div class="title">'+(content.navgrid[2][i].title )+'</div><a ng-href="#" class="zoom"><img src="'+main_images[i]+'"/><span></span></a></li>';
});
grid.append($(str));
grid.jScrollPane({hideFocus:true});
I experimented with the Chrome developer tools and this demo:
http://jscrollpane.kelvinluck.com/auto_reinitialise.html
If you open the developer tools and inspect the <p> tags that are injected into the pane, you'll see there is an offsetTop property on each one. That might be what you're looking for.