My Wishlist (0)
10 USD Orange35

Fluid Content Scroller

More Views

  • Fluid Content Scroller on different devices
  • Example Fluid Content Scroller plugin

Fluid Content Scroller

1.0.2
Fluid Content Scroller is a responsive jQuery plugin that allows to instantly navigate through long content lists like blog posts, book chapters, events, news, etc.
If you know your custom theme may get in conflict with the extension, include this option in your purchase and have us take care of installation and any compatibility problems there may occur. Learn More >

* Required Fields

$10.00
Buy Now

Description

jQuery Fluid Content Scroller Plugin makes navigation through long item lists like news, events, blog posts, etc. a lot easier. 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.

Example Fluid Content Scroller plugin

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
  1. Superb Bootstrap JQ plugin

    Review by Ian Simpson on May 31, 2014
    Quality
    5

    Superb Bootstrap JQ plugin. Just bought a license - works brilliantly straight out of the box. I'll show all my colleagues


Write Your Own Review

How do you rate this product? *

Stars 1 star 2 stars 3 stars 4 stars 5 stars
Quality

Magento Editions Compatibility

  •   Magento CE 1.6
  •   Magento CE 1.6.1
  •   Magento CE 1.6.2
  •   Magento CE 1.7
  •   Magento CE 1.8
  •   Magento CE 1.8.1
  •   Magento CE 1.9

Supported Browsers

  •   IE8, IE9, IE10, IE11
  •   Firefox,
  •   Safari,
  •   Chrome

License Information

Fluid Content Scroller by Orange35 is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Product Update

Product updates are available for free within 90 days from the product purchase date, then updates are available depending on the "Support Period" option selected during the purchase. Support Period can be readjusted upon your request.

Refund Policy

14-Day Money Back. If having doubts on whether or not the extension is what you need, it's always better to contact us beforehand.

Bug Reporting/Feature Request

Would like to report a bug, request a new feature or simply ask a question? Feel free to either contact us via live chat, submit a contact form or email us at support@orange35.com and we'll gladly assist you.

Installation

  1. Copy files to your website directory
  2. Make sure you have jQuery loaded (Tested up to: jQuery 1.10.2 and jQuery 2.0.3)
  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 inizialization. View demo

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

Example of the Custom Container with custom navigation tab labels plugin inizialization. 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 inizialization. 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.

NameDescription
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

Bug Reporting/Feature Request

Would like to report a bug, request a new feature or simply ask a question? Feel free to create a new issue or email us at info@orange35.com for that purpose.