Tutorial :centre thumbnail in scrollbar (jQuery)


Please check out this page: http://onomadesign.com/wordpress/identity-design/hans-appenzeller/

The thumbnails on the right, link to different portfolio items (Wordpress single posts). I want the thumbnail of the active project to be vertically centred in the scrollbar when the user enters the page. Right now, it resets the scrollbar, so people lose sight of navigation. How to accomplish this using jQuery?



First add the class of "selected" to the li of the current link and use that class to add your margin rather then inline css

Looks like you are using the jScrollPlane Plugin. Which will let you do something like this with your current code.


See this page for the jScrollPlane scrollTo functionality


Try this and report what happens, I'm unable to test this myself:

$(function() {      // Get the link that points to the current page      var $active_link = $('a[href=\''+window.location.href+'\']');              // Get the scroll pane that the link is in      var $scroll_pane = $active_link.closest('#scroll-pane');        // Get the position where we should scroll      var scrolltop = $active_link.offset().top - $(window).height() / 2;      // Scroll amount must be at least 0      scrolltop = scrolltop < 0 ? 0 : scrolltop;        // Scroll the scrollpane so that the link sits at the middle      $scroll_pane.scrollTop(scrolltop);  });  

Note that this needs some refinement, but first you have to confirm that this works in your case â€" I'm just guessing on the scroll-pane part according to the documentation of jScrollPane.


I found out that the jScrollPane plugin, has a ScrollTo function of his own: http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html. Even with jQuery selectors (at the bottom).

And I managed to give the current thumbnail image a class, called 'currentthumb'.

Now I just need to make that ScrollTo function happen on page load and not on a click event, right? This looks to be easier, no?


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »