Category : Javascript | Author : Chtiwi Malek | First posted : 12/23/2012 | Updated : 12/24/2012
Tags : jquery, jquery plugins, effects, smooth, transitions, scrolling, plugins, endless
Endless Div Scroll jQuery Plugin

Endless Div Scroll jQuery Plugin

This simple, but useful jquery plugin will apply a smooth endless/infinite scrolling effect to any div content, including texts, links, pictures, divs, anchors ... it consists of one lightweight javascript file (~1kb).

You can set up multiple scroll areas, it can be easily controlled via multiple parameters like scrolling direction, steps, speed and also you can apply a pause on mouse over. Also the width and height can be fixed or fluid (percentage).

Check out the demo page to see the Endless Div Scroll jQuery Plugin in action :

Usage :

It's easy to use this plugin, just add theses javascript lines to activate the scroll animation for one or many divs on your page/website :
$(window).load(function () {
  $("#divId").endlessScroll({ width: '90px', height: '10px', steps: -2, speed: 40, mousestop: true });
  // Recopy the previous line to add scrolling to other divs.
});

Parameters :

  width : Desired div's width.
  height : Desired div's height.
  steps : pixel step for the scrolling, also controls the direction, a negatif value (left), a positive value (right).
  speed : animation speed, from 0 (quicker) to infinite (slower).
  mousestop : if set to true the scrolling stops when the mouse is over the div.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old, professional web & software developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Chrome issue at < 100% page width
Many thanks for the great scroller. I found that Chrome assigns the wrong width to the the el1 and el2 containers, it sets them to 100% of the containing element and not the full width of the contained elements.

To fix this I modified line 34 of the non-minified code to read:

  var act_width = 0;
        $(e1).find('img').each(function() {
          act_width += $(this).width();
        });
        e1.css({ "position": "absolute", "width": act_width+"px" }).clone().attr('id', elemId + "2").insertAfter(e1);

Many thanks!
By Andy on 11/6/2013
width issues
Expanding on the previous comment a little bit. I had a problem in where the two generated slides overlapped after only a few elements, and did not slide through all elements before disappearing. The js code did not compute the width of the entire scroll properly (note that it was a fairly hefty scrollbar, ~6600px wide, and the original code measured only one third of that). So using the above snippet as a base, I modified it to: var act_width = 0; $(e1).children().each(function() { act_width += $(this).outerWidth(); }); e1.css({ "position": "absolute", "width": act_width+"px" }).clone().attr('id', elemId + "2").insertAfter(e1); Now the proper width is measured and the scrollbar no longer overlaps itself.
By zyrobs on 2/13/2014
comment form issue
And on another note, the smart editor of the comment form does not submit messages at all, keeps returning "please type in your comment" errors. I had to submit the above before the editor loaded for it to pass, which of course mangled up the linebreaks.
By zyrobs on 2/13/2014
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access
or
» Latest
» Random/Popular
© Codicode | Content and source © 2013