jQuery Fluid Content Scroller

jQuery Fluid Content Scroller

Released 4 years ago , Last update 4 years ago

jQuery Fluid Content Scroller Plugin makes navigation through long item lists smooth and easy. Plugin is represented with the tabbed navigation panel at the top and at the bottom of the page / list container.

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.

Pricing

14 day 14-day money-back guarantee

FREE

Hosted License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Non-commercial use

$28.99

5 Domains License

  • Perpetual license

  • 5 sites, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

  • 6 months support

$49.99

Unlimited License

  • Perpetual license

  • Unlimited sites, servers

  • No distribution (hosted use only)

  • Commercial use

  • 6 months support

Usage

Installation

  1. Copy files to your website directory
  2. Make sure you have jQuery (see requirements above) loaded
  3. Add plugin stylesheet and script to page (see example below)
  4. 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

View Demo

$("#content").find("> .post").fluidContentScroller();

Example of the Custom Container with custom navigation tab labels plugin initialization

View Demo

$('#scroll-content').find("> .post").fluidContentScroller({
    container: '#scroll-content',
    navItem: {
        title: '[data-cs-title]'
    }
});

Example of the Custom Container with Twitter Bootstrap tootips plugin initialization

View Demo

$(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

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
4 licenses, starting from From » FREE View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
No comments have been posted yet.