Ticker command
Create a news ticker from a list of entries.
Basic Usage (HTML)
data-jkit="[ticker:speed=200;delay=1500]"
Advanced Init (JavaScript)
$('#myelement').jKit('ticker', { 'speed': '200', 'delay': '1500' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| speed | Int (Milliseconds) | 100 | The duration in milliseconds between each character, bigger = slower. |
| delay | Int (Milliseconds) | 2000 | The delay between each message |
| loop | “yes” or “no” | yes | Again start at the first message after alll messages were shown? |
Events
| Event | Description |
|---|---|
| showentry | Triggered when a ticker message is being shown |
| showentryN | Triggered when a specific ticker message is shown where “N” is the message number |
Examples
Basic example:
A news ticker from four list items where the last two entries are linked:
- Ticker Text 1
- Another one
- The third ticker text
- Even more text for the ticker
Source:
<ul data-jkit="[ticker]"> <li>Ticker Text 1</li> <li>Another one</li> <li><a href="http://fredibach.ch" target="_blank">The third ticker text</a></li> <li><a href="index.php">Even more text for the ticker</a></li> </ul>
Advanced example:
In this example we are combining the ticker command with the api command, the template command and some event magic to nicely display the latest jKit commits::
Source:
<div rel="jKit[template:action=set;name=commits]" style="display:none"> <ul> <li data-jkit-api-if="data[0]" data-jkit-api="data[0].commit.message"></li> <li data-jkit-api-if="data[1]" data-jkit-api="data[1].commit.message"></li> <li data-jkit-api-if="data[2]" data-jkit-api="data[2].commit.message"></li> <li data-jkit-api-if="data[3]" data-jkit-api="data[3].commit.message"></li> <li data-jkit-api-if="data[4]" data-jkit-api="data[4].commit.message"></li> </ul> </div> <div style="display:none" data-jkit="[show:speed=500;onevent=commits.complete]"> <div data-jkit="[api.commits:format=json;template=commits;url=https://api.github.com/repos/FrediBach/jQuery-jKit/commits][ticker:speed=50;delay=1500;onevent=commits.complete]">loading ...</div> </div>
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]