jQuery Fluid Content Scroller
Plugin Description
jQuery Fluid Content Scroller Plugin makes navigation through long item lists like news, events, blog posts, etc. smooth and easy. Plugin is represented with the tabbed navigation panel at the top and at the bottom of the page / list container allowing to instantly scroll up and down to a particular post on the list.
- Contributor: Orange35
- Requires: jQuery 1.4.2+ or jQuery 2.x
- Tested up to: jQuery 1.10.2 and jQuery 2.0.3
- Stable tag: 1.0.2
- License: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
Product Features
- Responsive design
- Touch friendlyness
- Smooth animation
- jQuery 1.4.2+ or jQuery 2.x
- Free for non-commercial use
- Free updates
- Unminified source
- Cross-platform & cross-browser
Usage
Plugin is free for non-commercial use. For commercial use, choose one of the available purchasing license options on our website.
Installation
- Copy files to your website directory
- Make sure you have jQuery (see requirements above) loaded
- Add plugin stylesheet and script to page (see example below)
- Initialise the plugin
Plugin Initialization
<link rel="stylesheet" href="css/jquery.fluidContentScroller.css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.fluidContentScroller.js"></script> Example of the Full Screen mode with default behaviour plugin initialization
$("#content").find("> .post").fluidContentScroller(); Example of the Custom Container with custom navigation tab labels plugin initialization
$('#scroll-content').find("> .post").fluidContentScroller({ container: '#scroll-content', navItem: { title: '[data-cs-title]' } }); Example of the Custom Container with Twitter Bootstrap tootips plugin initialization
$(function () { var tipCallback = function () { return $('h2:first', $(this).data('csTarget')).text(); }; $(".demo-item").fluidContentScroller({ container: '#scroll-content', onInit: function (target, top, bottom) { top.find('li').tooltip({ title: tipCallback, container: 'body' }); bottom.find('li').tooltip({ title: tipCallback, container: 'body' }); }, navItem: { onBeforeClick: function (link) { link.tooltip('hide'); } } }); }); Available Options
You can pass these options as key/value objects to the fluidContentScroller() method. It is also possible to modify defaults directly at $.fn.fluidContentScroller.defaults.
| Name | Description |
|---|---|
| container | Scrollable container for navigation Type: {undefined|String|HtmlElement|jQuery} Default: document.body |
| autoWrap | Adds a wrapper around the container; can be used only when container is not 'body' Type: {Boolean} Default: true |
| scrollSpeed | Scrolling duration after a click on navigation tab Type: {Number} Default: 750 |
| scrollEasing | Container scroll easing function Type: {undefined|String} Default: undefined |
| onInit | Called after plugin initialization and navigation build Type: {Function} Params: {jQuery} target, {jQuery} topNav, {jQuery} bottomNav Default: undefined |
| nav.className | Class name that gets added to the top and the bottom navigation bars Type: {String} Default: 'cs-nav' |
| nav.topClass | Class name of the top navigation bar Type: {String} Default: 'cs-top' |
| nav.bottomClass | Class name of the bottom navigation bar Type: {String} Default: 'cs-bottom' |
| nav.wrapClass | Class name of content wrapper (added when autoWrap = true) Type: {String} Default: 'cs-wrap' |
| nav.showEffect | Navigation show effect; can be used only when container is not 'body' Type: {undefined|String|Object} Default: undefined |
| nav.hideEffect | Navigation hide effect; can be used only when container is not 'body' Type: {undefined|String|Object} Default: undefined |
| nav.duration | Duration of the show/hide animation for navigation bar Type: {Number} Default: 400 |
| navItem.title | Source for navigation item title (example "[data-cs-title]") Type: {undefined|String|Function} Default: undefined |
| navItem.showEffect | Show effect callback Type: {Function} Default: $.fn.fadeIn |
| navItem.hideEffect | Hide effect callback Type: {Function} Default: $.fn.fadeOut |
| navItem.duration | Items show/hide effect duration Type: {Number} Default: 200 |
| navItem.effectInterval | Interval between item show/hide effects Type: {Number} Default: 25 |
| onBeforeClick | Called before navigation item click animation Type: {undefined|Function} Params: {jQuery} link, {jQuery} target Default: undefined |
| onAfterClick | Called after navigation item click animation Type: {undefined|Function} Params: {jQuery} link, {jQuery} target Default: undefined |
Changelog
1.0.0
- Initial Public Release
1.0.1
- Added
fluidContentScroller.jquery.jsonfile
1.0.2
- Reformatted
LICENSEfile - small changes in README.md
Bug Reporting/Feature Request
Would like to report a bug or request a new feature? Feel free to create a new issue for that purpose.
##Credits Plugin is created and maintained by Orange35
Copyright & License
Copyright © 2013 Orange35
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
