This time I will share jQuery Plugin and tutorial about Small News Scroller Plugin with jQuery and jQuery UI – Telex, hope it will help you in programming stack.
| File Size: | 9.9 KB |
|---|---|
| Views Total: | 13060 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Telex is a jQuery & jQuery UI based scroller widget which takes an array of text messages and convert them into a horizontal text scroller. Similar to the traditional marquee element and intended for news ticker and horizontal text scroller.
Basic usage:
1. Include the needed jQuery and jQuery UI libraries on the web page.
1 |
<link rel="stylesheet" href="/path/to/jquery-ui.css"> |
2 |
<script src="/path/to/jquery-1.11.3.min.js"></script> |
3 |
<script src="/path/to/jquery-ui.min.js"></script> |
2. Download the plugin and include the telex.js script after jQuery library.
1 |
<script src="dist/telex.js"></script> |
3. Create a container for the text scroller.
1 |
<div id="news-ticker"></div> |
4. Call the function on the container and add an array of text messages you want to scroll through.
01 |
$('#news-ticker').telex({ |
02 |
messages: [{ |
03 |
id: 'msg1', // message ID |
04 |
content: 'Breaking News 1', |
05 |
class: 'news-1' // css class |
06 |
},{ |
07 |
id: 'msg2', |
08 |
content: 'Breaking News 2', |
09 |
class: 'news-2' |
10 |
}] |
11 |
}); |
5. Customization options.
01 |
/** |
02 |
* Delay time before scrolling starts in milliseconds |
03 |
*/ |
04 |
delay: 1000, |
05 |
06 |
/** |
07 |
* integer, time it takes for a message to scroll along main window in milliseconds |
08 |
*/ |
09 |
duration: 5000, |
10 |
11 |
/** |
12 |
* 'normal' (to left) or 'reverse' (to right) - direction of movement |
13 |
*/ |
14 |
direction: 'normal', |
15 |
16 |
/** string, timing-function used for the animation; 'ease-in-out' may be another useful value |
18 |
*/ |
19 |
timing: 'linear', |
20 |
21 |
/** |
22 |
* boolean, pause ticker on hover |
23 |
*/ |
24 |
pauseOnHover: true, |
25 |
26 |
/** |
27 |
* array of messages. |
28 |
* A message is a plain object having the properties: |
29 |
* - content The content of the message. Can be text, but also a piece of HTML (like a link). |
30 |
* - id (Optional). Id of the message, starting with a word character. It is only used in the |
31 |
* - class (Optional). The CSS-class of the message. May be used for styling purposes. |
32 |
*/ |
33 |
messages: [] |
6. Public methods.
1 |
// pause the scroller |
2 |
$("#demo").<a href="https://www.jqueryscript.net/time-clock/">date</a>line("pause"); |
3 |
4 |
// resume the scroller |
5 |
$("#demo").dateline("resume"); |
7. Change the default CSS styles in the telex.js.
1 |
$('<style>').text('.telex{overflow: hidden;white-space: nowrap;}.telex-inner{height: 36px; line-height:36px; padding:10px 0;width: 60000px;}.telex-msg{display: inline-block;height: 100%;}.telex{background-color: #E95546;}.telex-msg{padding-left: 1.5em;padding-right: 1.5em;}').insertBefore($('[rel=stylesheet]').first()); |
This awesome jQuery plugin is developed by sjaakp. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
