Home arrow PHP arrow Page 4 - PHP and JavaScript Interaction: Storing Data in the Client - Part 2

Defining the JavaScript functions - PHP

In the first article in this series, we developed a simple PHP function that dynamically generates a JavaScript array and populates it with external incoming data. In this article, we will develop a real world application using this method, in the form of a news ticker.

TABLE OF CONTENTS:
  1. PHP and JavaScript Interaction: Storing Data in the Client - Part 2
  2. A brief look at the "createJavaScript()" function
  3. Working in the client side: the JavaScript news ticker
  4. Defining the JavaScript functions
  5. A practical approximation: showing the news ticker in action
By: Alejandro Gervasio
Rating: starstarstarstarstar / 15
May 09, 2005

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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();

}

}



 
 
>>> More PHP Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: