back to main table of contents

A tutorial/howto for HTML_Progress - Part 3

August 27, 2003

By Laurent Laville

Table of Contents


Javascript customization

Default values

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]

Horizontal Bar with color characters

To have a nice output like that, you have to hack the default javascript code
$p->addScript('progress3.js');
See HTML_Progress.getScript() method in
API documentation for details.

Piece of code to progress3.js file
...
for (i=progress2-1; i >= 0; i--) {
    if (isDom) {
        document.getElementById('progressCell'+i+'a').style.visibility = "visible";
        document.getElementById('progressCell'+i+'a').innerHTML = i;
    }
    if (isIE) {
        document.all['progressCell'+i+'a'].style.visibility = "visible";
        document.all['progressCell'+i+'a'].innerHTML = i;
    }
    if (isNS4) {
        document.layers['progressCell'+i+'a'].style.visibility = "visible";
        document.layers['progressCell'+i+'a'].innerHTML = i;
    }
}
...
cell 0,1,2 will have silver foreground color,
$bar->setCell(range(0,2), array('color' => 'silver'));
cell 3,4,5,6 will have yellow foreground color,
$bar->setCell(range(3,6), array('color' => 'yellow'));
and cell 7,8,9 will have orange foreground color
$bar->setCell(range(7,9), array('color' => 'orange'));
progress3r.php
<?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.2 2003/08/27 22:52:37 Farell Exp $
 * @author     Laurent Laville <pear@laurent-laville.org>
 * @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");

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

$bar = new HTML_Progress_Bar_Horizontal('reverse', $p, $options);
$bar->setText(true, array('size' => 14, 'width' => 60, 'background-color' => '#eeeeee'));
$bar->setCell(range(0,2), array('color' => 'silver'));
$bar->setCell(range(3,6), array('color' => 'yellow'));
$bar->setCell(range(7,9), array('color' => 'orange'));

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#eeeeee');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$css->setStyle('a:link', 'color', 'navy');
$css->setSameStyle('a:visited, a:active', 'a:link');
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '25%');
$css->setStyle('div.col2', 'margin-left', '30%');
$css->setStyle('div.col2', 'border', '1px solid red');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '80%');

$p->addStyleDeclaration($css);
$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><i><b>Laurent Laville, August 2003</b></i></p>');

$note = <<< TEXT
<p><i>Numbers in cells are made by javascript file <b>progress3.js</b></i>
<br/>This example show you how to customize (see setCell API) and handle events by JavaScript.</p>
TEXT;

$p->addBodyContent($note);
$p->addBodyContent('</div>');
$p->display();

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

?>
This example will produce :   

[Top]

Horizontal Bar with background image

The most important in following PHP script comes from two lines of code :
$css->setStyle('.cell1', 'background-image', 'url("download.gif")');
$css->setStyle('.cell1', 'background-repeat', 'no-repeat');
no need to override the default javaScript.

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.2 2003/08/27 22:52:37 Farell Exp $
 * @author     Laurent Laville <pear@laurent-laville.org>
 * @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");

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

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

$css = $bar->getStyle();
$css->setStyle('body', 'background-color', '#c3c6c3');
$css->setStyle('body', 'font-family', 'Verdana, Arial');
$css->setStyle('a:link', 'color', 'navy');
$css->setSameStyle('a:visited, a:active', 'a:link');
$css->setStyle('div.col1', 'float', 'left');
$css->setStyle('div.col1', 'width', '25%');
$css->setStyle('div.col2', 'margin-left', '30%');
$css->setStyle('div.col2', 'border', '1px solid red');
$css->setStyle('div.col2', 'padding', '1em');
$css->setStyle('div.col2', 'height', '80%');
$css->setStyle('.cell1', 'background-image', 'url("download.gif")');
$css->setStyle('.cell1', 'background-repeat', 'no-repeat');

$p->addStyleDeclaration($css);
$p->addScriptDeclaration( $bar->getScript() );
$p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>');
$p->addBodyContent('<div class="col2">');
$p->addBodyContent('<h1>Example 1 reverse</h1>');
$p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>');

$note = <<< TEXT
<p><i>Image <img src="download.gif"/> in cells are made by background-image property of CSS cell1 class</i>
<br/>This example show you how to customize a progress bar by stylesheet properties.</p>
TEXT;

$p->addBodyContent($note);
$p->addBodyContent('</div>');
$p->display();

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

?>
This example will produce :   

[Top]

back to main table of contents
$Id: howto-part3.html,v 1.2 2003/08/27 22:52:37 Farell Exp $