How to design a ticker using jQuery easy ticker plugin ?
In this article, we will learn about the jQuery easy ticker plugin which acts like a news ticker having the facility of infinite list scrolls. It is highly customizable and flexible with a lot of features.
Download Link: https://github.com/vaakash/jquery-easy-ticker
Note: Download the “jquery.easy-ticker.js” pre-compiled file to include in the following codes for its working. Keep the library file in your working folder.
Example 1: The following code demonstrates the plugin with “up” and “down” buttons scrolling the ticker messages in up and down directions.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src= </script> <script type="text/javascript" src= "jquery.easy-ticker.js"> </script> <style> .myTicker { border: 2px solid black; width: 600px; } .myTicker ul { padding: 0; } .myTicker li { list-style: none; border-bottom: 1px solid green; padding: 10px; } </style> </head> <body> <h2 style="color:green">GeeksforGeeks</h2> <strong> jQuery easy Ticker plugin</strong> <br> <p></p> <button class="add">ADD</button> <button class="up">UP</button> <button class="down">DOWN</button> <h2>Ticker 1</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <h2>Ticker 2</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $('.myTicker').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: true, controls: { up: '.up', down: '.down' }, callbacks: { before: function (ul, li) { $(li).css('color', 'red'); }, after: function (ul, li) { $(li).css('color', 'blue'); } } }); addVar = 1; $('.add').click(function () { $('.myTicker ul').append( '<li>' + addVar + ':' + 'ADDED TEXT ' + 'As the placement season is back ' + 'GeeksforGeeks is here to help you ' + 'crack the interview</li>'); addVar++; }); var ticker = $('.myTicker') .easyTicker() .data('easyTicker'); $('.up').click(function () { ticker.up(); }); $('.down').click(function () { ticker.down(); }); }); </script> </body> </html> |
Output:
Example 2: The following code demonstrates the use of callback functions with default options, Developers can make custom changes as per the need.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src= </script> <script type="text/javascript" src="jquery.easy-ticker.js"> </script> <style> .myTicker { border: 2px solid black; width: 600px; } .myTicker ul { padding: 0; } .myTicker li { list-style: none; border-bottom: 1px solid green; padding: 10px; } </style> </head> <body> <h2 style="color:green">GeeksforGeeks</h2> <strong> jQuery easy Ticker plugin</strong> <br> <p></p> <button class="add">ADD</button> <button class="up">UP</button> <button class="down">DOWN</button> <h2>Ticker 1</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <h2>Ticker 2</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $('.myTicker').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: true, controls: { up: '.up', down: '.down' }, callbacks: { before: function (ul, li) { $(li).css('color', 'red'); }, after: function (ul, li) { $(li).css('color', 'blue'); } } }); addVar = 1; $('.add').click(function () { $('.myTicker ul').append( '<li>' + addVar + ':' + 'ADDED TEXT ' + 'As the placement season is back ' + 'GeeksforGeeks is here to help you ' + 'crack the interview</li>' ); addVar++; }); var ticker = $('.myTicker') .easyTicker() .data('easyTicker'); $('.up').click(function () { ticker.up(); }); $('.down').click(function () { ticker.down(); }); }); </script> </body> </html> |
Output:
.png)
.png)