Tuesday, October 7, 2014

Creating scroll up effect on JQuery Pajinate plugin

For website not using Bootstrap, the JQuery Pajinate can be used to organize content into blocks of pages to be displayed one at a time.

More info on the plugin is provided on this link, https://github.com/wesnolte/Pajinate

I've downloaded a copy to give the plugin a try. The demo page contains quite a number of samples on how to use the plugin.:

In instances where a page may display a long list and the navigation panel (see Two Nav Panels in screen shot above) is placed at the bottom, there may be a need to scroll up as the page link is clicked.

By applying some tweaks in the plugin, the desired effect can be achieved.

I've opened the plugin file jquery.pajinate.js to see where I can apply the tweaks. Scrolling down the code, I've chanced upon the event handler for the page links and decided to add a JQuery animate scroll up:

The tweak worked! I've scrolled down the demo page and clicked the page links at the bottom. The display jumped to the next page and the page scrolled to the top.

This is perfect in case the paginate displays a long list with the navigation panel at the bottom. Clicking any of the page links jumps to the next page block and scrolls up to the top.

Need help on some web coding task? Let me know about it. Email me at jun.dolor@gmail.com and I'll be more than happy to blog about it with my thoughts.

Hosting of the sample pages were provided for by the following:

No comments:

Post a Comment