jQuery Ticker, Scrolling Text with CSS318 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