Controls


start | destroy | reverse | pause | resume | toggle | fastforward | rewind | delay

hover over this to pause.

Event ResultsPosition using onEvaluate event:
Edge hit using onEdge event:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet sodales nibh. In hac habitasse platea dictumst. Duis ultrices elementum ligula sed fringilla. Curabitur placerat venenatis ipsum, et condimentum leo fringilla a. Etiam lectus nunc, viverra vitae aliquet ut, consequat at neque. Aenean sagittis felis at felis dignissim lobortis. Praesent elit neque, lobortis non gravida eget, iaculis nec dui. Sed congue, sapien ac molestie tincidunt, ligula purus accumsan magna, vel vulputate sapien orci non leo. Aenean pharetra est eget tortor suscipit et molestie sapien adipiscing. Proin bibendum dapibus risus, a tempor nisi dictum sit amet. Sed egestas aliquam nunc vel ultricies.

Nullam faucibus imperdiet ipsum, eget porta ipsum ornare a. Vivamus mattis cursus porta. Suspendisse sed augue sed felis accumsan sollicitudin eget quis justo. Praesent nec sem augue, quis lobortis leo. Nullam nisl purus, sagittis vel lobortis eget, volutpat in nisi. Nulla facilisi. Phasellus lorem purus, volutpat aliquet scelerisque a, ullamcorper ac augue. Nunc quis lacus vel massa tempor lobortis vitae ac tortor. Aenean facilisis sollicitudin diam ut accumsan. Nullam sollicitudin orci ac enim consequat quis lacinia metus tincidunt. Etiam bibendum consequat orci. Sed vel lorem ac tellus interdum mattis. Nam ut diam ut felis varius egestas. Pellentesque commodo tempus velit eu imperdiet. Vestibulum euismod augue ut dui tincidunt sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut congue justo a mauris laoreet posuere. Nullam vel est nisi, ut dignissim turpis. Nulla rhoncus hendrerit ante, in semper ante vehicula non.

Donec vel metus sapien. Vestibulum ac lectus arcu. Vestibulum in turpis ut metus feugiat dignissim sit amet ac justo. Maecenas ultrices, erat ac accumsan luctus, risus nibh vulputate justo, a sodales dolor dui vulputate elit. Maecenas ut arcu vel nisi vestibulum rhoncus id nec augue. Etiam rutrum, est ac vulputate mollis, justo justo accumsan massa, sed fermentum est metus aliquam nisi. Proin ultricies iaculis nisi, non eleifend tortor sodales et. Proin vitae elit mi, in aliquet tortor. Cras tellus metus, dapibus in viverra sed, pulvinar eu mauris. Etiam condimentum lectus id purus malesuada semper. Nam accumsan lacus ac lorem suscipit sit amet vestibulum nunc iaculis.

Sed neque orci, accumsan eu suscipit tristique, pharetra a turpis. Maecenas condimentum ipsum mi, quis suscipit eros. Nullam a est in ipsum lobortis iaculis sit amet ac eros. Nunc vehicula rutrum felis, sit amet sagittis sapien dignissim vel. Nullam porttitor interdum nunc porta hendrerit. Quisque ac magna posuere erat blandit placerat in sit amet tellus. Integer eu libero metus. In sed turpis ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Proin ullamcorper velit id lacus viverra dictum. Maecenas consequat ultrices pulvinar. Fusce tincidunt diam eget nibh vestibulum luctus. Ut ut ullamcorper nibh. Nunc fringilla luctus bibendum. Morbi in lorem dictum neque dictum adipiscing sit amet in ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer viverra pharetra erat eu tincidunt. Donec urna lorem, feugiat nec convallis eget, porttitor adipiscing mauris. Duis rutrum interdum vestibulum.

Integer at ligula turpis. Quisque vitae feugiat velit. Donec at nisl ac lectus commodo lacinia. Aliquam porttitor arcu a nisi convallis semper. Nunc vitae urna nec diam faucibus pellentesque eget at mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec urna tortor, ultrices non suscipit malesuada, semper sodales purus. Phasellus condimentum, tellus quis sodales viverra, enim orci viverra neque, et semper lacus ante quis nisi. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam congue molestie gravida. Quisque nec nisl hendrerit nisl facilisis hendrerit. Cras gravida, diam non feugiat pharetra, risus mauris suscipit erat, vel mollis eros nisi egestas dolor. Etiam blandit nunc in libero volutpat lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eu dui at turpis venenatis interdum in eget leo. Pellentesque et metus eu erat lacinia tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Summary

Autoscroll provides the capability to scroll any scrollable element in any direction and provides a number of methods to manipulate the scrolling. It includes a pause on hover and the ability to add other elements as pause on hover triggers.

Note: calling autoscroll on the document element will error out, try instead to call autoscroll on document.body.

Defaults

$.fn.autoscroll.defaults = {
   start: {
      step: 50,
      scroll: true,
      direction: "down",
      pauseOnHover: true
   },
   delay: 5000,
   ffrw: {
      speed: "fast",
      step: 100
   }
};

Methods

[default]

$("scrollable").autoscroll([settings]);

    settings:

    {
       direction: "down",
       step: 50,
       scroll: true,
       pauseOnHover: true
       onEvaluate: function () {
          // code
       },    onEdge: function (edge) {
          // code
       }
    }

  • direction: Direction accepts a number of different formats. Each format is eventually evaluated as an angle from 0 to 360 on a standard Cartesian scale.
    • unit signed or unsigned number evaluated as degrees.
    • string up|down|left|right|upleft|upright|downleft|downright
    • unitrad signed or unsigned number ending with the letters rad evaluated in radians
  • step:signed or unsigned number evaluated as the number of pixels traversed over 1 second. Defaults to 50
  • scroll: true or false to initialize scrolling action as paused or not.
  • pauseOnHover: true or false to enable or disable pause on hover effect globally
  • onEvaluate: event that fires every 50 milliseconds while auto scrolling.

    onEvaluate: function () {
       // code goes here
    }

    this: element being scrolled

  • onEdge: event that fires upon encountering an edge during auto scroll.

    onEdge: function (edge) {
       // code goes here
    }

    edge = { x, y }

    this: element being scrolled

    edge.x: "left", "right" or null

    edge.y: "top", "bottom" or null

destroy

$("scrollable").autoscroll("destroy");

Stops any scrolling and destroys the autoscroller

pause

$("scrollable").autoscroll("pause");

Stops scrolling

resume

$("scrollable").autoscroll("resume");

Resumes scrolling

toggle

$("scrollable").autoscroll("toggle");

Toggles between pause and resume.

fastforward or rewind

$("scrollable").autoscroll("fastforward", [settings]);
$("scrollable").autoscroll("rewind", [settings]);

    settings
  • step: Step accepts a signed or unsigned number. It is evaluated as the number of pixels traversed over 1 second. Defaults to 100
  • speed: fast, slow or a unit indicating milliseconds

Advances or rewinds the scrolling while maintaining the current scrolling actions.

reverse

$("scrollable").autoscroll("reverse");

Reverses the scrolling direction by 180 degrees.

addpausesource

$("scrollable").autoscroll("addpausesource", value);

adds the passed in value (dom element, jQuery object or jQuery selector) as pause on hover triggers.

delay

$("scrollable").autoscroll("delay", [time]);

Pauses the scrolling for the specified time. Defaults to 5000 milliseconds

Changes V 2.41

  • Added option to not pause on hover of the main scrollable element

Changes V 2.4

  • Updated logic to test for jquery selector lengthinserted condition to check for DomHTMLElement and HTMLElement. Need to check if there is a better method to do this.
  • added event handling
  • removed "timers" dependency (except for "delay") method
  • fixed right direction bug that I probably introduced during dev of 2.4
  • updated delay and toggle to use pause and resume

Changes V 2.3

  • delay has been fixed. reworked so that it recalled autoscroll with pause and resume to accomplish task.
  • fastforward & rewind have been fixed. reworked such that it follows the hover methodology.
  • consolidated single call of r2d into calling function. No need to declare the function if its only called a single time.

Chagnes V 2.2

  • Choppy scrolling: choppy scrolling animation (still choppy at speeds under 20)
  • Minification: renamed some internal vars to be single chars yet still contextually relevant. removed extraneous vars.
  • Fix: fixed a bad "instance of" evaluation.

Changes V 2.1

  • moved attribute tracking into data() function.
  • combined start and update into [default] method call
  • converted stop to destroy
  • fixed radian to degree bug (had been assigning to unused variable
  • simplified 360 and 0 limit checks

Issues

  • delay command still has dependency on jquery.timers. The rest of the methods do not.
  • Errors out when applied to the document element. Workaround: use document.body instead.
  • need to refractor for smaller size. optimize the logic especially in the edge event handling.
  • delay appears to be broken
  • calling fastforward or rewind before the animation is complete will stop the autoscroll regardless of previous state.
  • The scrolling animation is a little choppy. Plan to rework that for smoother action. I think it has something to do with the frequent use of .stop()