There was need for a news ticker which is a widely available function for JavaScript. The ticker had to be oriented horizontally, which is common and easy to implement. However, the requirement given was to scroll lines vertically.

The problem is the size of the message may exceed the width of the ticker space. To resolve the space discrepancy, the message is broken up on the backend into smaller segments which will easily fit within the confined space of the ticker. The messages segments are loaded as an unordered list. Once loaded the JS takes over.

The JS gets the line height for the messages and starts a timer, which is set to 5 seconds. After 5 seconds, a half second scrolling animation occurs, which shows the next message segment and hides the previous segment. The previously displayed segment is moved to the bottom and the timer is reset to 5 seconds.

For an example in the real world (if the ticker is currently in use): Wellington Insurance Group

To view the JS code: Click here

Otherwise, here is a local example: Click here

Dynamic Dropdown Demo: Click here