back to main table of contents

A tutorial/howto for HTML_Progress - Part 3

August 6, 2003

By Laurent Laville

Table of Contents

• Javascript customization
  • Default values
  • Horizontal Bar with color characters
  • Horizontal Bar with background image

Javascript customization

The major change since version 0.4.x is that default javascript code is now embedded in core class HTML_Progress (see getScript method). It will avoid to forget URL of javascript companion as it was origin of malfunction in past.
But in other case, option to override default javascript code allows to customize output, as you will see now on next examples progress3r and progress1r.

[Top]

$p->addScript('progress3.js');

...
switch(progress2)
{
 case 10:
	document.getElementById('progressCell9').className = "cell1";
	document.getElementById('progressCell9').innerHTML = "9";
 case  9:
	document.getElementById('progressCell8').className = "cell1";
	document.getElementById('progressCell8').innerHTML = "8";
...

$css->setStyle('#progressCell0', 'color', 'silver');
$css->setSameStyle('#progressCell1,#progressCell2', '#progressCell0');
$css->setStyle('#progressCell3', 'color', 'yellow');
$css->setSameStyle('#progressCell4,#progressCell5,#progressCell6', '#progressCell3');
$css->setStyle('#progressCell7', 'color', 'red');
$css->setSameStyle('#progressCell8,#progressCell9', '#progressCell7');

• cell 0,1,2 will have silver foreground color,
• cell 3,4,5,6 will have yellow foreground color,
• cell 7,8,9 will have red foreground color

<?php 
/**
 * Display a horizontal loading bar with percent info, 
 * filled in reverse order (right to left)
 * from 0 to 100% increase by step 5%
 * with custom configuration and javascript override.
 * 
 * @version    $Id: howto-part3.html,v 1.1 2003/08/06 15:59:12 Farell Exp $
 * @author     Laurent Laville <laurent.laville@worldonline.fr>
 * @package    HTML_Progress
 */

require_once ('HTML/Progress/BarHorizontal.php');

$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 3r");
$p->setMetaData("author", "Laurent Laville");

$layout = array(
    'width'         => '200px',
    'border-width'  => '1px',
    'border-color'  => 'navy',
    'cell-width'    => '10px',
    'active-color'  => '#3874B4',
    'inactive-color'=> '#EEEECC'
);

$bar = new HTML_Progress_Bar_Horizontal('reverse', &$p, $layout);
$bar->setText(true, array('size' => '14px'));

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#eeeeee');
$css->setStyle('#progressCell0', 'color', 'silver');
$css->setSameStyle('#progressCell1,#progressCell2', '#progressCell0');
$css->setStyle('#progressCell3', 'color', 'yellow');
$css->setSameStyle('#progressCell4,#progressCell5,#progressCell6', '#progressCell3');
$css->setStyle('#progressCell7', 'color', 'red');
$css->setSameStyle('#progressCell8,#progressCell9', '#progressCell7');
$p->addStyleDeclaration(&$css);
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '30%');
$css->setStyle('div.col2', 'margin-left', '35%');
$css->setStyle('div.col2', 'border', '1px solid red');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '50%');
$p->addScript('progress3.js');
$p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>');
$p->addBodyContent('<div class="col2">');
$p->addBodyContent('<h1>Example 3 reverse</h1>');
$p->addBodyContent('<p>Laurent Laville, August 2003 </p>');
$p->addBodyContent('<p><i>Numbers in cells are made by javascript file <b>progress3.js</b></i>');
$p->addBodyContent('<br/>This example as example 1/reverse, show you how to customize and handle events by JavaScript.</p>');
$p->addBodyContent('</div>');
$p->display();

for ($i=0; $i<21; $i++) {
/*  You have to do something here  */
    $bar->display(5);
}

?>

[Top]

Horizontal Bar with background image

The most important in following PHP script comes from one line of code :

$p->addScript('progress1.js');

that allows to override the default script.

progress1r.php

<?php 
/**
 * Display a horizontal loading bar with background image, 
 * filled in reverse order (right to left)
 * from 0 to 100% increase by step of 10%
 * with default colors, and javascript override.
 * 
 * @version    $Id: howto-part3.html,v 1.1 2003/08/06 15:59:12 Farell Exp $
 * @author     Laurent Laville <laurent.laville@worldonline.fr>
 * @package    HTML_Progress
 */

require_once ('HTML/Progress/BarHorizontal.php');

$p = new HTML_Page();
$p->setTitle("PEAR::HTML_Progress - Example 1r");
$p->setMetaData("author", "Laurent Laville");

$layout = array(
    'width'             => '253px',
    'background-color'  => '#EBEBEB',
    'padding'           => '0px',
    'border-width'      => '1px',
    'border-style'      => 'inset',
    'border-color'      => 'white',
    'cell-width'        => '25px',
    'cell-spacing'      => '0px',
    'active-color'      => '#000084',
    'inactive-color'    => '#3A6EA5'
);

$bar = new HTML_Progress_Bar_Horizontal('reverse', &$p, $layout);

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#c3c6c3');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$p->addStyleDeclaration(&$css);
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '30%');
$css->setStyle('div.col2', 'margin-left', '35%');
$css->setStyle('div.col2', 'border', '1px solid red');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '50%');
$p->addScript('progress1.js');
$p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>');
$p->addBodyContent('<div class="col2">');
$p->addBodyContent('<h1>Example 1 reverse</h1>');
$p->addBodyContent('<p>Laurent Laville, August 2003 </p>');
$p->addBodyContent('<p><i>Image <img src="download.gif"/> in cells are made by javascript file <b>progress1.js</b></i>');
$p->addBodyContent('<br/>This example as example 3/reverse, show you how to customize and handle events by JavaScript.</p>');
$p->addBodyContent('</div>');
$p->display();

for ($i=0; $i<10; $i++) {
    $bar->display(10);
}

?>

Have a quick look on piece of Javascript code to progress1.js file.

...
switch(progress2)
{
 case 10:
	document.getElementById('progressCell9').className = "cell1";
	document.getElementById('progressCell9').innerHTML = '<img src="download.gif"/>';
 case  9:
	document.getElementById('progressCell8').className = "cell1";
	document.getElementById('progressCell8').innerHTML = '<img src="download.gif"/>';
...

With this line, you will change cell color from inactive ("cell0") to active ("cell1"). Default action!

	document.getElementById('progressCell9').className = "cell1";

and with the other one, you will put this picture in corresponding cell.

	document.getElementById('progressCell9').innerHTML = '<img src="download.gif"/>';

This example will produce :   

[Top]

back to main table of contents