Skip to content
Related Articles

Related Articles

How to design a ticker using jQuery easy ticker plugin ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 17 Feb, 2022

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!