PEAR::HTML::Progress example: Blue Sand Plus
Author: Laurent Laville
Description: horizontal progress meter with javascript customization

examples

# Blue Sand Plus

$Date: 2005/07/25 10:25:30 $

- Introduction
- Render options
- Ouput
- PHP source syntax highlight
- Play demo

## Introduction

This example requires :

- PEAR::HTML_Progress 1.2.2 or better.

This example will run a natural horizontal ProgressBar with blue skin. It will also show you how to print something inside cells with an external javascript (replaced internal code).

Percent text info is centered on a 60 pixels width area, on right side of the progress bar.

[Top]

## Render options

Here are options to build the progress bar cells :

    active-color   = #3874B4
    inactive-color = #EEEECC
    width          = 10

HTML_Progress_UI::setCellAttributes()
Here are options to build the progress bar border :

    width = 1
    color = navy

HTML_Progress_UI::setBorderAttributes()
Here are options to build the progress bar string (percent text info):

    width            = 60
    font-size        = 14
    background-color = #EEEEEE
    align            = center

HTML_Progress_UI::setStringAttributes()
Here is the external javascript source-code which replace internal code :

    var isDom = document.getElementById?true:false;
    var isIE  = document.all?true:false;
    var isNS4 = document.layers?true:false;
    var cellCount = 10;

    function setprogress(pIdent, pValue, pString, pDeterminate)
    {
            if (isDom)
                prog = document.getElementById(pIdent+'installationProgress');
            if (isIE)
                prog = document.all[pIdent+'installationProgress'];
            if (isNS4)
                prog = document.layers[pIdent+'installationProgress'];
            if (prog != null)
                prog.innerHTML = pString;

            if (pValue == pDeterminate) {
                for (i=0; i < cellCount; i++) {
                    showCell(i, pIdent, "hidden");
                }
            }
            if ((pDeterminate > 0) && (pValue > 0)) {
                i = (pValue-1) % cellCount;
                showCell(i, pIdent, "visible");
            } else {
                for (i=pValue-1; i >=0; i--) {
                    showCell(i, pIdent, "visible");
                    if (isDom)
                        document.getElementById(pIdent+'progressCell'+i+'A').innerHTML = i;
                    if (isIE)
                        document.all[pIdent+'progressCell'+i+'A'].innerHTML = i;
                    if (isNS4)
                        document.layers[pIdent+'progressCell'+i+'A'].innerHTML = i;
                }
        }
    }

    function showCell(pCell, pIdent, pVisibility)
    {
        if (isDom)
            document.getElementById(pIdent+'progressCell'+pCell+'A').style.visibility = pVisibility;
        if (isIE)
            document.all[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility;
        if (isNS4)
            document.layers[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility;

    }

href: ./progress_number.js

[Top]

## Output

### Screenshot

[Top]

## PHP source syntax highlight

Open source listing in a new window.

[Top]

## Play demo

Run the script.

[Top]