Category : Javascript | Author : Chtiwi Malek | First posted : 12/23/2012 | Updated : 8/18/2014
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 full stack 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
Memory leak?
Very nice piece of software, however I think there might be a memory leak. I'm using the endless scroll on a div in which I show live data obtained from a web service. On the $.ajax() success callback function, the live data is updated, i.e. the html content of the scrolling div gets replaced, and endlessScroll() is called again. The latter is necessary, otherwise the scrolling stops. Div contents get updated every 20 seconds. I have noticed that, within few minutes, the browser becomes less and less responsive. Using Chrome's memory profiler, I can see that the used memory keeps increasing, with a typical sawtooth shape, growing from an initial ~5MB to ~45MB in around ten minutes. I believe this is due to the fact that I endlessScroll() is invoked at every content refresh. Any suggestion on how to fix this issue? Thanks a lot!
- by Valerio on 4/23/2014
issue
if there is only one image than i don't want to scroll it across the panel.is it possible with this plugin?
- by dollar on 8/29/2014
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


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