Scrolling News Ticker

News tickers can be a nice feature for sites that attempt to provide up-to-date information (such as breaking news). 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, but you can use still 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 up to your imagination.

Chapter 9

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.mioplanet.com/rsc/newsticker_javascript.htm. The conditions of use presented on this page are fairly simple, so make sure you understand the terms before downloading and using anything.

Assuming you are happy to continue, download the JavaScript source-code le, entitled webticker_lib.js, and save it to the theme folder you are currently developing in:

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

Next, open up the . info le (this example will utilize the Barlow theme because we made space for this feature earlier on when discussing themes) and add a reference to the ticker JavaScript le:

stylesheets[all] [] = typography.css stylesheets[all] [] = layout.css stylesheets[all] [] = style.css scripts[] = webticker_lib.js regions[left] = Left sidebar regions[right] = Right sidebar regions[before_content] = Before content

; Information added by drupal.org packaging script on 2007-12-20

Save this and then reload the theme.

Next, the actual code required to add the ticker to a web page is given on the mioplanet page, so copy and paste this directly into the page.tpl.php le in the space created (recall we added an additional section to the template page earlier in Chapter 8):

<?php print theme('links', $primary_links, array('class' => 'links primary_menu')) ?> <?php } ?>

Advanced Features and Modifications

<?php print theme('links', $secondary_links, array('class' => 'links secondary_menu')) ?> < ?php } ?> </div> </div>

<div id="content">

<div class="newcontent">

<DIV ID="TICKER" STYLE="overflow:hidden; width:100%" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false"> <? include_once('ticker.txt'); ?> </DIV> </div>

<div id="sidebar-left" class="sidebar"> <?php print $left; ?> </div> < ?php } ?>

As you can see, this places the script at the top of the content in its own <div> tag with class="newcontent".

It is necessary to wrap the content of the webticker_lib .js le within the jQuery $(document) .ready(function() {

statement to prevent the ticker script being run before the page elements are in place. When you do this, ensure that you leave the TICKER_tick function outside of the jQuery statement, otherwise this will also lead to problems.

In addition, the new code references a ticker. txt le that needs to be created and saved in the theme folder before attempting to use the script. 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. Make sure this text is longer than the width of your scroller or else it may not scroll at all.

and view the site in your browser.

Chapter 9

You should see the message scrolling across your page. If that works, replace the text message with the PHP include statement, and let's move on.

Adding the Content

For our humble purposes, all we really need to do is feed the JavaScript le we have just installed on our site a list of lines to print out to the screen. You can add in pretty much anything you want here; however, ensure that you test everything thoroughly before releasing it to the public.

Before adding lines of information to ticker. txt, bear in mind that you should try to create a standard format for each news item, so that the work in creating new elements is minimized. In this case, each line is delimited by a single vertical bar, except the start and end of the first and last element that have two in order to keep everything even.

The following snippet shows the current contents of the ticker. txt le on the demo site:

|| <a href="http://www.mioplanet.com/rsc/newsticker_javascript.htm" target="_blank"><strong>Scrolling News Ticker</strong></a> by <a href="http://www.mioplanet.com"

target="_blank"><strong>mioplanet</strong></a> | | This book was brought to you by <a href="http://www.packtpub.com"

target="_blank"><strong>Packt Publishing</strong></a> | | It was written by <em>David Mercer</em> who has worked on a number of books for Packt and also contributes to <a href="https://www. ranktracer.com">RankTracer</a> and <a href="http://www.linkdoozer. com">LinkDoozer</a>. For more info please find him at his LinkDoozer homepage... ||

...and this is what the result is (bear in mind that the text would be moving from right to left across the screen):

hianw- Fcrumi

r- ,:.-" I :„ t . I';irt ■ I'ibS, lting • T.. .v - --•/ ... 1 ■ .-. ..-• • I .-. >---. ■ --.; .■'• •■.';■■ • •■■ - :. .•••'•.:.:. --¡i.-^;- -< "

Navigation

" 1>VTO

Wfl t«^ lhaS 4 ra p&q pfeifl Iut, arc. a ^hc* fer goed fc-y I pnxim tf r—^V^aSfd, £LI uuisffciyi cJ L1! Chmjn^, epécii jèy ftp hru* ipfùAtCén rtlù Jfl h=£*ptM>te -A H&MOu1 IhJE ifl 1uILjWU£4# JHhj Kâ^ÉMI^!

* j&

You might even want to try and experiment with adding images or even a special style. In this way, title icons or logos can be added to each item.

Advanced Features and Modifications

The main problem with this script as it stands is that it requires you to manually enter each item, which will no doubt become a pain several times a day for the next ten years. There are several ways around this:

Create a script to pull information from a database. Pull information from an RSS feed.

Only enter content that changes infrequently — such as links to sponsors. Get someone else to do it for you.

While we won't continue on this topic here; it would be great experience for you to attempt any one or more of the previous list of options with the exception of the third, which is covered by default.

Remember to be very, very careful not to introduce errors or security problems when using code from someone else—either in or outside the Drupal community. Ensure that you understand what the code is doing and that it is tested thoroughly before going live with it.

Article Marketing Gold

Article Marketing Gold

Discover How You Can Use The Huge Power of Article Marketing To Drive Highly Targeted Traffic To Your Website and Instantly Become THE Person Your Prospects Want To Buy From.

Get My Free Ebook


Responses

  • madihah
    How to display ticker drupal?
    7 years ago
  • beth
    How to create news scroller in drupal?
    7 years ago
  • Max
    How to open webticker_lib.js?
    7 years ago
  • STEFAN
    What information can we add into a scrolling ticker?
    7 years ago
  • eyob brhane
    How to make news scroller with newsticker drupal?
    7 years ago
  • benjamin
    How to make scrolling blocks in drupal?
    7 years ago
  • MILLA
    How to make news ticker to your site?
    7 years ago

Post a comment