Defining the JavaScript functions - PHP

First, we'll define the function "createNewsDiv()", which will simply create the containing <div> element for displaying news in sequence. Its definition is as follows:

createNewsDiv=function(){

// create news containing <div> element

var newsDiv=document.createElement('div');

newsDiv.id='news';

// insert news <div> into document structure

document.body.appendChild(newsDiv);

}

As you can see, the above function is easy to understand. It simply creates a <div> element, then assigns to it an ID attribute "news", handy for tying a style to the element. Finally, the function inserts it into the Web document tree. Notice that I've opted to append the news <div> as a new child element of the body, using the line:

document.body.appendChild(newsDiv);

However, this might be quickly changed to set a different insertion point. Let's suppose we want to hang the news <div> element inside another container <div>. If we do so, the above expression would be replaced with the following line:

document.getElementById('container').appendChild(newsDiv);

That's not rocket science, right? Now that we've created the news container, let's have a look at the next function, "rotateNews()", which as its name implies, displays in sequence our headlines at a specified time interval. Here's the function code:

rotateNews=function(){

// get news containing <div>

var newsDiv=document.getElementById('news');

if(!newsDiv){return;}

// create new <div> element

var div=document.createElement('div');

div.id='news';

// create paragraph for each news line

var p=document.createElement('p');

// style <p> element

p.style.fontFamily='Verdana';

p.style.fontSize='11px';

p.style.fontWeight='bold';

p.style.color='#c00';

if(counter==numNews){counter=0;}

p.appendChild(document.createTextNode(news[counter]));

// insert paragraph into <div> news

div.appendChild(p);

// replace old <div> node with new <div> node

newsDiv.parentNode.replaceChild(div,newsDiv);

counter++;

// rotate news every 10 seconds

setTimeout('rotateNews()',10*1000);

}

Although the function has plenty of explanatory comments, let's break it down to see how it works. As usual, most of JavaScript tickers are governed by a counter, which controls the sequence for displaying information. In our case, we stick to that trusted technique, using the "counter" variable to program that sequence, and display the headlines at given time intervals. Bored? Just keep reading.

Our next step is to manipulate the document structure and generate the HTML elements that hold each headline. Thus, first we grasp the news <div> containing element for further replacement. Second, we create a <div> element in memory, and assign to it an ID attribute. This element will be the generic container for our news ticker, as we'll see in a moment. Next, we need to create an HTML element to place every headline in the document.

For this purpose, I've decided to create a paragraph and apply a style it, specifying a font type, font size, and color, respectively. Therefore each one of the headlines will be rendered inside a <p> element. Still with me, right? Okay, now let's check out the function's workhorse.

Remember that we used the "createJavaScript()" PHP function to store data in the "news" array? With such a useful structure, all that we need to do is create a text node and insert the corresponding headline value into the paragraph element. The line below does exactly that:

p.appendChild(document.createTextNode(news[counter]));

As you can see, the "counter" variable behaves as a headlines pointer, to display the information in the correct sequence. Once our headline is inserted into the Web page, what else can we do? Not much, really. The only thing left is to display the headline content, increment the counter, and make the whole process happen each N milliseconds, in the following way:

// insert paragraph into <div> news

div.appendChild(p);

// replace old <div> node with new <div> node

newsDiv.parentNode.replaceChild(div,newsDiv);

counter++;

// rotate news every 10 seconds

setTimeout('rotateNews()',10*1000);

I thought that we'll never get to this point! If the explanation was a little confusing, things are going to be a lot clearer, when you see the full source code. But didn't I forget something? Of course, the final step is to trigger both JavaScript functions, once the page is loaded:

// execute functions when page is loaded

window.onload=function(){

if(document.getElementById){

createNewsDiv();

rotateNews();

}

}