Scrolling News Ticker

This is a nice feature of many sites that attempt to provide up-to-date information for their users. If you need to present several bits of information at once, then a dynamic news ticker could be just the thing. With a bit of work you can even integrate the news ticker with an RSS feed to present breaking news from other sites without having to do any work in creating content yourself.

We'll keep it simple and create a scrolling news ticker across the top of each page on the site. The ticker will show information stored in a .txt file on the site. While you can't tell that this information is scrolling across the screen from the screenshot, this is what the addition will ultimately look like:

create content I my account | my blog | news aggregator | administer | logout Scicllihij News Tickei by mioiilanel 11 This book was brouytit to ytiu by Packl Publishing 11 it was written by D,

You can hopefully tell from the various fonts displayed in the ticker above that it is possible to add HTML elements such as links to the individual items (shown in a bold font). This means you can use this ticker to add links to sponsors, or even add image links. There is quite a lot of scope for change; so we will look at how to get everything up and running—what you create with the ticker is then up to you and your imagination.

Advanced Features and Modifications

Obtaining the Ticker

The first task is of course to actually find a workable ticker script. In this case, a free ticker script was downloaded (after a brief search on Google) from mioplanet at http ://www. miopl anet .com/ rsc/newsti cker_javascript.htm. The conditions of use presented on this page are fairly simple and you should make sure you understand the terms before you continue. Assuming you are happy to continue, download the JavaScript source-code file, entitled webticker_1ib.js, and save it to the theme folder you are currently developing in—in the case of the demo site this is currently box_grey_dev.

If you are going to use a few widgets like this, it may be better to create a widgets folder within your theme in order to keep everything neat and tidy and easy to locate.

Next, open up the page.tpl.php file and search for a suitable place to add the ticker. The actual code required to add the ticker to your web page is given on the mioplanet page, and you can simply copy and paste this directly into your site. Since I wanted the ticker to appear along the top of the screen, I added the code in here:

<?php if (count($primary_1inks)) : ?> <u1 id="primary">

<1i><?php print $1ink?></1i> <?php endforeach; ?> </u1> <?php endif; ?>

<DIV ID="TICKER" STYLE="overf1ow:hidden; width:100%" onmouseover="TlCKER_PAUSED=true" onmouseout="TlCKER_PAUSED=fa1se"> <? inc1ude "ticker.txt"?> </DIV>

<script src="webti cker_1ib.js" 1 anguage="j avascri pt"x/s cri pt>

<td c1ass="sidebar" id="sidebar-1eft">

As you can see, this places the script after the header information within the same <div> tag, but above the table that houses the main content and left and right sidebars.

The most important part of this script is the reference to the webticker_1ib.js file. In this instance I have added the relative path to the file (webticke r_1ib.js) so that this will not have to change once the site is deployed to the host server.

If you find that your scrolling ticker is just not scrolling, try referencing it with the relative file path, for example: /drupa1/themes/box_grey_dev/webti cker_1ib.js. In the unlikely event this doesn't work, try using the fully qualified path: C:\\apache2tri ad\\htdocs\\drupa1\\ themes\\box_grey_dev\\webticker_1ib.js. If this works, remember to write a note somewhere that reminds you to change this path appropriately once you have deployed your site to the live host. It is generally bad practice to include absolute file paths like this in your scripts for precisely this reason.

In the event you have to enter a path and not just the filename, it is a good idea to escape backslashes with another backslash (\\) on Windows machines to prevent any confusion with special characters being misinterpreted—alternatively, use forward slashes.

Finally, notice that I have added a short PHP snippet to include a file called ticker.txt underneath the first added <div> tag. If you would rather test whether the ticker is working correctly before dealing with additional code, then replace:

Hi! You should see me scrolling across your page.

and view your site in your browser. You should see the message scrolling across your page, like this:

Article Marketing Knockdown

Article Marketing Knockdown

The lifeblood of any online business is in being able to generate highly targeted, consistent traffic to your websites, landing pages and squeeze pages.

Get My Free Ebook

Post a comment