marqueefy / marqueefy.github.io Goto Github PK

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Unable to set marquee direction via Javascript

Reduced test cases

<div class="marqueefy" tabindex="0">
    <div class="content">
        This text should scroll from left to right.
    </div>
</div>

const marqueeList = Array.prototype.slice.call(document.querySelectorAll('.marqueefy'))
marqueeList.map(m => {
  return new marqueefy.Marqueefy(m, { direction: 'right' })
})

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Marqueefy are you using?

v1.0.0

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The animation-duration is applied when the page loads. And is calculated based on the Marquee width and the specified Speed.

If the window is resized later, the Marquee will have to complete its animation within the animation-duration that was calculated based on earlier window size, and hence the speed will change.

In order to preserve the speed, the animation-duration has to be calculated when the page is resized.

Reduced test cases

Resize the window after page loads.

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Marqueefy are you using?

1.0.2