Angular directive to make text marquee if it overflows its container, in the style of old iOS music app. Instead of fully scrolling off-screen then looping, it only scrolls until the overflowed text is shown (i.e., the entire string has been displayed to its last character).

Run npm start to see the demo.

Dependencies

Angular 1.6
jQuery 3.3

Usage

Via NPM: npm install --save overflow-marquee

This will also give you the demo and the tests.

If you simply want to include the code, get the overflow-marquee.min.js and overflow-marquee.min.css from the /build folder, and include it in your page.

Example

Rollcall for all options!

<html>
    <head>
        <!-- Include jQuery, Angular, and the overflow-marquee code here -->

        <script>
            angular.module('Stuff', ['overflow-marquee']);
            angular.module('Stuff').controller(function($scope) {
                $scope.woo = false;
            });
        </script>

        <style>
            html, body {
                margin: 0; padding: 0; background: #E9967A; font-family: Helvetica, Arial, sans-serif;
            }
            #content {
                width: 400px; height: 40px; line-height: 40px; position: relative; top: calc(50% - 20px); margin: 8px auto; background: #FFF;
            }
        </style>
    </head>

    <body ng-app="Stuff">
        <div id="content">
            <span overflow-marquee
                overflow-marquee-speed=1
                overflow-marquee-pause="foo"
                ng-click="foo = !foo"
                ng-init="foo = false">Mama just killed a man; put a gun against his head, pulled the trigger now he's dead. 
        </div>
    <body>
</html>

Options

All options are optional. :wink:

overflow-marquee-speed (Integer)

Pixels shifted per 25 milliseconds. Default is 1.

overflow-marquee-pause (Angular Expression)

Use overflow-marquee-pause to pause conditionally. Bind it to a variable or an expression. Go crazy with as many as 50 marquees on one page!

Tests

The tests are made with Karma, Mocha, and Chai. Run them with:

npm test

Development

Contributions are welcome!

Keywords

FAQs

What is overflow-marquee?

Is overflow-marquee popular?

Is overflow-marquee well maintained?

Last updated on 29 Jan 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install