Premium Templates

 WebPlus Templates

Image Galleries

 PrettyPhoto

 Hover Zoom

Image Effects

 Nivo Slider

 Circle Navigation

 Piecemaker 2

 EasySlider

 Image Slider

 Slide Thumbs

 Sliding Boxes

 Featured List

 Before and After

Video Players

 NonverBlaster:hover

 Flowplayer Video

Audio Player

 Mp3 NonverBlaster

Other Effects

 Animated Portfolio New

 Jquery Fade In/Out

 Accordion

 Smooth scrolling

 Unique scrollbar

 Page Peel

 News Ticker

Copyright © Flying Cow Labs All Rights Reserved.

Website crafted using the Serif Software Suite

Home Templates About Newsletter
Home

If you’ve found these tutorials useful please help the world's poorest communities by making a small donation to WaterAid - Even if it’s just a one-off gift of £2 it would be massively appreciated.

News Ticker

Add a simple horizontal image and text scroller using JavaScript and CSS. This MooTools script has the ability to rotate images and text without stopping or returning to the start of the list unlike a lot of other news/image tickers around.

This script originates from eccemedia

1. Download the zipped file - Includes the JavaScript files, CSS, images and as usual a single paged WebPlus file so you can see how the code is incorporated in a WebPlus website.


2. Click on Tools in the WebPlus workspace > Site Manager > File Manager > Add File > and add the 2 .js files and the .css file. Click ‘New Folder’ This will place a new folder in the Root of the site, name it ‘images’ then add the images from the downloaded image file. This has now embedded all the files used to make the news ticker work within the WebPlus file.


View the file tree and it should look like this!

    
    
    
    
    
News Ticker Demo

4. Finally you will need to add the following HTML code to the body of the page.


Copy to clipboard > Insert > Web Object > HTML > Paste to Body


Placement of the news ticker will depend on the placement of the HTML Code Fragment.

3. Include the following script in the head of the master page or the page you wish to display the news ticker.


Copy to clipboard > Insert > Web Object > HTML > Paste to Head.

    

Previewing the page in your browser will now display a fully functional news scroller!


If you have any problems setting up the news ticker in your own website you can post your query in the Serif Addons Forum