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

A practical approximation: showing the news ticker in action - 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

Wouldn't be convenient to put all the pieces together and illustrate how the news ticker does its job? I totally agree. In a step-by-step sequence, here's our functional example: 

First, let's create the "news.txt" file with some possible values:

Google expands its search capabilities adding video searching. Are you ready to submit your personal video?

PHP hits new levels of performance with PHP5. Visit www.php.net to find out more!

Want to be completely protected from Internet attacks? Disconnect your computer right now!

Interview with possible alien creature! He said they're using MySQL to store world domination plans.

Monkey proved to be a lot smarter as a Linux system administrator in weird experiment. Oops, we're lost!

Next, let's work with the code:

<?php

// include the PHP function

require_once('createjavascript.php');

// generate the "news" JavaScript array, populating it with news data file

// here is where the PHP-JavaScript interaction takes place

echo createJavaScript('news.txt','news');

// display a regular HTML page including the JavaScript functions to generate the news ticker

?>

<html>

<head>

<title>CLIENT-SIDE NEWS TICKER</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">

var numNews,counter;

// count number of news

numNews=news.length;

// initialize news counter

counter=0;

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

}

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

}

// execute functions when page is loaded

window.onload=function(){

if(document.getElementById){

createNewsDiv();

rotateNews();

}

}

</script>

<style type="text/css">

/*define style for news container*/

#news {

background: #eee;

padding: 2px 0px 2px 10px;

border: 1px solid #000;

}

</style>

</head>

<body>

</body>

</html>

That's all we need. Our news JavaScript ticker is running smoothly! Of course the above list is a rough presentation. We might move the JavaScript functions out to an external file, as well as our brief CSS rules. What's more, the complete Web page can be generated by using a template file, which rapidly separates content from logic and visual presentation. What else can we ask for?

Bottom line

In this second part, we've demonstrated how to use PHP-JavaScript interaction for building a nice extensible news ticker, hopefully showing that this kind of process is relatively easy to manipulate for specific purposes. But the best part is still coming! In the last part of this series, we'll move one step beyond using this approach by building a complete record paging system, all without getting our head into the server. To find out more, stay tuned!



 
 
>>> 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: