https://github.com/grrowl/newsticker
jQuery plugin for basic scroller
https://github.com/grrowl/newsticker
Last synced: 12 months ago
JSON representation
jQuery plugin for basic scroller
- Host: GitHub
- URL: https://github.com/grrowl/newsticker
- Owner: grrowl
- Created: 2012-04-12T01:00:51.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2012-04-12T05:03:18.000Z (over 14 years ago)
- Last Synced: 2025-06-26T17:50:55.005Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# newsTicker
Basic news ticker, you give it a list and it cycles through each item. You can write:
```javascript
$('ul#latestNews').newsTicker();
```
or define the following awesome options (defaults shown):
```javascript
$('ul#latestNews').styledForms({
timeout: 4500, // timeout between auto-progression
direction: 'down', // or 'up', 'left', right'
animSpeed: 'slow', // or 'fast' or a time in milliseconds
pauseOnHover: true, // whether to pause the auto-progression on element hover
nextSelector: '', // selector for a "next" button
prevSelector: '' // selector for a "prev" button
});
```
the direction is reversed when you go to a previous item.
The plugin operates on all children of the element you run it on, so it's reccommended you use a list. You're displaying a list of stuff after all. There is some required CSS:
```css
ul {
position: relative; /* required, or use 'absolute' */
overflow: hidden; /* required */
height: 40px; /* or similar value */
}
ul li {
/* position: absolute; -- not required, will be set by the plugin.
not setting it in CSS will mean users without JS enabled will only see your first item */
height: 40px; /* from the parent ul */
line-height: 40px;
}
```
I encourage you to [check out demo.html](https://github.com/grrowl/newsTicker/blob/master/demo.html) to see it all in action.