https://stackblitz.com/edit/vue-fo6xxi?file=src%2FApp.vue%3AL8

Is there any callback events available?

Hi @tjenkinson if i have added more than one space between the text of marquee it takes only one space.

In loop function, i am using result of
const marqueeItemElements = document.querySelectorAll('.item') as NodeListOf<HTMLElement>; const items = Array.from(marqueeItemElements).map((el) => { return ()=> el ; }); loop(marquee, items)
Please check for me!!

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Hey,

in the loop section, theres this sentence:

When returning DOM elements each function should build the element from scratch, as the same DOM element is not allowed to appear on the marquee multiple times.

As far as I understand, it can cause issues for long activity apps, because creating DOM elements 1 million times over a perioud of X hours will slowdown the DOM renderer (browser), no?
Is there a way to have only the maximum needed elements, or set a maximum and if overseeded, re-use older elements already in the DOM?

Or does the engine take care of it themselves?

Thanks!

Hi,
Thanks for your work,
I have a javascript error on my devtool, only on safari with the loop function :

TypeError: undefined is not an object (evaluating 'e.borderBoxSize[0]')

They are the same error on your demo page.

I am implementing this plugin in the angular project.
This is how I implemented it. I am getting an error on key 'dynamicMarquee' as 'Cannot find name 'dynamicMarquee'.

Code:
import { Marquee } from "dynamic-marquee";

const $marquee = document.getElementById("marquee");
if (!$marquee) {
throw new Error("The element #marquee wasn't found");
}

const marquee = (window.m = new dynamicMarquee.Marquee($marquee, {
  rate: -100,
}));

window.l = dynamicMarquee.loop(
  marquee,
  [
    function () {
      return "Contrary to popular belief, Lorem Ipsum is not simply random text";
    },
    function () {
      return "It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old";
    },
    function () {
      return "Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source";
    },
    function () {
      return 'RLorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC';
    },
  ],
  function () {
    var $separator = document.createElement("div");
    $separator.innerHTML = "&nbsp|&nbsp";
    return $separator;
  }
);

Hi!

How to add fetch support from json file?

Thank you!

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

hi.
thanks for your useful library.
how can i change that direction to Left to Right?

How does one word wrap, when doing up/down scrolling? 🙄

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Hello, I'm using your perfect code, and everything is ok, except one thing, that render of marquee is a little jerky in vertical axis. Is it possible to do something? We are using 1080i50 output on caspar.

Hello,

is it possible to implement something like "stop on touch / mouseover"?

Its 'harder' because the elements are created on the fly.
I've tried something like this, but it wouldnt catch it:

jQuery(document).on('touchstart mouseover mousedown', '.my_element_class', function () {
                if (!marquee) {
                    return;
                }
                marquee.setRate(0); // pause
            }.on('mouseleave', '.my_element_class', function () {
                if (!marquee) {
                    return;
                }
                marquee.setRate(marquee_speed); // resume
            }));

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Steps to regenerate:

1. Create a hello world in Angular (Latest version)
2. Apply dynamic marquee

import { Component } from '@angular/core';
import { Marquee } from 'dynamic-marquee';

@Component({
  selector: 'home',
  template: `
    <div>
      <div id="marquee"></div>
    </div>
  `,
})
export class HomeViewComponent {
  $marquee: HTMLElement;
  marquee: Marquee;

  ngAfterViewInit() {
    this.$marquee = document.getElementById('marquee')!;
    this.marquee = new Marquee(this.$marquee, {
      rate: -100,
    });

    const $item = document.createElement('div');
    $item.textContent = 'testing123';
    this.marquee.appendItem($item);

    this.marquee.onItemRequired(({ immediatelyFollowsPrevious }) => {
      setTimeout(() => {
        this.marquee.appendItem("new");
      },0);
    });
  }
}

4. Give build using ng build --base-href "/applicationName/"
5. Run the dist file

Dymaic marquee doesnt work properly. Texts are overlapping with each other. There is no error logged.

Hello,

is it possible to loop items which contain not only text but for example a <a href... wrap?

Hi,

Does it support stop marquee on mouseover and resume marquee when mouse moves away from it?

Thank you

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

I am getting a console.error No room for item.

I am not sure what is wrong.

Checking the demo page and running marquee.clear():

Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
    at dynamic-marquee@2:7
    at dynamic-marquee@2:7

I can reproduce this with a local use of dynamic-marquee.

The marquee by default starts off screen, but I'd like it to start in screen and visible, how can I achieve that?

@tjenkinson I have found one new issue of Character overlapping. please see the attached image:

Hi, I noticed that using elements containing images in the items of the loop builders array leads to an infinite loop where the library never stops calling onItemRequired as the items height is evaluated as 0.

Here is an example:

const marquee = new Marquee($target, { upDown: true, rate: 20 })

const builders = items.map(item => {
  return () => {
    const el = document.createElement('div')
    el.innerHTML = item // item is HTML code like '<div><img ... /></div>'
    // height is needed to prevent infinite loop
    el.style.minHeight = $target.clientWidth * 232 / 213 + 'px'
    return el
  }
})

loop(marquee, builders)

Hi,
How can i start the marquee from filling the content.

Hi @tjenkinson My client wants to start the text crawl from perticular position, So have you given any method by which i can get or set the crawl position?