JonMifsud
Web Developer & Consultant

jQuery Ticker, Scrolling Text with CSS3

18 May 2013

News websites & Blogs, always try to make their best in order to show the latest news & updates to their visitors in the least obtrusive way possible. That is where something like a Ticker comes in, it takes little space as it scrolls the text across the page.

The jQuery Web Ticker plugin has garnered thousands of downloads since first launched; however as the numbers of downloads increased; other technologies started coming to the fore, such as CSS3. This led to a major overhaul of the plugin, being updated from its initial core created for jQuery 1.4.2 to its latest version which requires jQuery 1.7.

Whilst scrolling text and lists is still the core of this plugin various extras were added in version two.

First came support for Updates and RSS feeds. With AJAX starting to play an important part in web development it is essential that you are able to update your ticker live with the text still scrolling; rather then having to wait for the user to click elsewhere. This feature comes in especially handy for websites dealing with Flash news and live data, especially in the finance sector where market prices fluctuate continuously. RSS feeds are supported as long as they come from the same domain; due to cross-domain request constraints. By setting a frequency update a minute or two; you ensure that your visitors can stay updating by looking at the scrolling news and not requiring a refresh every few minutes.

In version 2.1, the next major release also included what should be considered a major improvement. The addition of CSS3 transitions, whilst the standard jQuery animate works perfectly fine; it does tend to use quite some resources from the respective browsers when scrolling text. The change to CSS3 was thus required to streamline the process and take less computational resources, in the end leading to a smoother transitioning ticker.

For those doing the update this does require some additional CSS rules to ensure that you are using the correct linear easing function. The jquery ticker binds to the transition ready event; so every time your text scrolls to the edge; it is moved to the back of the queue and the next transition (distance & duration) is calculated and started again.

The jQuery ticker still supports non css3 compliant browsers, in this case it falls back to the previous jQuery animate methodology. Thus the end user will not be effected and still served with your scrolling news list.

For the Full Documentation on how to use the jQuery Web Ticker & downloads please visit the jQuery WebTicker Page

Written by Jonathan Mifsud

Jonathan Mifsud is a web developer by day and an SEO enthusiast by night. He provides freelance web development and consultancy services and is available for hire. You can get in touch with him on twitter and Google+

Comments

Leave a Comment
Ta

Hi Jon. Your example has been working but it run slow down after few seconds. After that It run faster then run slow down and this repeat again and again. So can you give me some advices to fix this bug?

Reply

19 Sep 2013 @12:24pm

An

I've tried your example but it didn't work. The text didn't scroll. Can you give me another example?

Reply

19 Sep 2013 @9:50am

Samantha

Hi, Jonathan!

Love this plugin! We've been using it on a nonprofit site for a few months, and since the update a few days ago, it appears to have stopped working. It also doesn't seem to be working on your site, either.

Any ideas?

Reply

22 May 2013 @6:10pm

Jon

Hi Samantha, had a minor issue with IE & Firefox support; I've released a patch earlier today which fixed both issues. Took some time as was confirming with those who raised the issues that it works well for them.

Note that if you're using it on your website with the latest version there might be some CSS you might need to update.

Reply

23 May 2013 @8:47pm

Post a new Comment

Please write your name.
Please enter your comment
Please enter your email address.