https://github.com/pixelunion/joverscroll
jQuery plugin turns long strings of text into a scrolling marquee
https://github.com/pixelunion/joverscroll
Last synced: about 1 year ago
JSON representation
jQuery plugin turns long strings of text into a scrolling marquee
- Host: GitHub
- URL: https://github.com/pixelunion/joverscroll
- Owner: pixelunion
- Created: 2012-07-25T00:08:12.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2012-08-10T00:42:00.000Z (almost 14 years ago)
- Last Synced: 2024-03-26T12:58:30.094Z (over 2 years ago)
- Language: JavaScript
- Size: 115 KB
- Stars: 5
- Watchers: 29
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jOverscroll.js
A simple jQuery plugin handling text scrolling on hover. We found it a relatively common occurence that a design might need to accommodate text areas that on rare occasions contain more text than is expected (or fits) in situations where wrapping to the next line is not a good solution. We solve this problem in a few places by hiding the overflow and scrolling the text when the mouse hovered it, and having it snap back to normal when the mouse comes off it.
## Usage
The plugin is super easy to use:
$('#some .selector').jOverscroll();
You can override the default values (Note: if you don't set width, the plugin will not override the element's width):
$('#some .selector').jOverscroll({ width: 'auto', scrollTime: 500, scrollBackTime: 100 });
And you can chain it:
$('#some .selector').jOverscroll().css({ color: '#ff00ff' });
## Details
Keep in mind that it implicitly sets two CSS properties on the element(s) you pass it: whitespace to pre, and overflow to hidden. To scroll the text it is animating the text-indent property.