| Current File : //opt/RZphp5/includes/doc/HTML_Progress2/docs/TDG/ch05.html |
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Chapter 5. Quick Start with HTML_Progress2
</title>
<link rel="stylesheet" href="book.css" type="text/css" />
<meta name="generator" content="DocBook XSL Stylesheets V1.69.1" />
<link rel="start" href="index.html" title="HTML_Progress2 Manual" />
<link rel="up" href="pt02.html" title=
"Part II. Getting Started" />
<link rel="prev" href="ch04.html" title=
"Chapter 4. Introduction" />
<link rel="next" href="ch05s02.html" title="Processing " />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c4 {margin-left: 0.5in; margin-right: 0.5in;}
div.c3 {font-family: monospace;}
h2.c2 {clear: both}
p.c1 {font-weight: bold}
/*]]>*/
</style>
</head>
<body>
<table class="progress2Header">
<tr>
<td>
<img src="img/pear_progress2.gif" align="left" alt=
"PEAR Progress2 logo" />
<h1>
HTML_Progress2 : The Definitive Guide
</h1>
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr>
<th colspan="3" align="center">
Chapter 5. Quick Start with HTML_Progress2
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch04.html">Prev</a>
</td>
<th width="60%" align="center">
Part II. Getting Started
</th>
<td width="20%" align="right">
<a accesskey="n" href="ch05s02.html">Next</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="chapter" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title">
<a name="developers.quickstart" id=
"developers.quickstart"></a>Chapter 5. Quick Start with
HTML_Progress2
</h2>
</div>
<div class="toc">
<p class="c1">
Table of Contents
</p>
<dl>
<dt>
<span class="sect1"><a href=
"ch05.html#id4785377">Designing</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href=
"ch05.html#id4785195">Shape</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch05.html#id4787347">Cells</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch05.html#id4787439">Border</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch05.html#id4787500">Background</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch05.html#id4787579">Fill
direction</a></span>
</dt>
</dl>
</dd>
<dt>
<span class="sect1"><a href="ch05s02.html">Processing</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href="ch05s02.html#id4784653">With a
user callback</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch05s02.html#id4788206">Without
user callback</a></span>
</dt>
</dl>
</dd>
<dt>
<span class="sect1"><a href="ch05s03.html">Strategy of
handling</a></span>
</dt>
<dd>
<dl>
<dt>
<span class="sect2"><a href="ch05s03.html#id4787845">Strategy
1: moveNext</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch05s03.html#id4785293">Strategy
2: moveStep</a></span>
</dt>
</dl>
</dd>
</dl>
</div>
<p>
Start using HTML_Progress2 straight away.
</p>
<p>
Through samples code that are possible real cases we will study all
features of the HTML_Progress2 package. Additional tutorials will help
you to learn what are others features: <a href="ch06.html" title=
"Chapter 6. Indeterminate Mode">Indeterminate Mode</a>,
<a href="ch07.html" title="Chapter 7. Listener">Listener</a>,
<a href="ch08.html" title=
"Chapter 8. Quick Start with HTML_Progress2_Monitor">Monitoring</a>,
<a href="ch09.html" title=
"Chapter 9. Quick Start with HTML_Progress2_Generator">Generator</a>
interactive tools.
</p>
<p>
There are two main phases in developement and use of a progress meter:
designing and processing.
</p>
<div class="sect1" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title c2">
<a name="id4785377" id="id4785377"></a>Designing
</h2>
</div>
<div class="toc">
<dl>
<dt>
<span class="sect2"><a href=
"ch05.html#id4785195">Shape</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch05.html#id4787347">Cells</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch05.html#id4787439">Border</a></span>
</dt>
<dt>
<span class="sect2"><a href=
"ch05.html#id4787500">Background</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch05.html#id4787579">Fill
direction</a></span>
</dt>
</dl>
</div>
<p>
You have probably your ideas of what it should look like: shape,
size, colors. So how to build it ?
</p>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4785195" id="id4785195"></a>Shape
</h3>
</div>
<p>
Even if it's not yet ready to be display, following source code
will create a new instance of the HTML_Progress2 class that is
ready to build an horizontal (default shape) progress bar:
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<p>
If you want to build others shapes like :
</p>
<div class="itemizedlist">
<ul type="disc">
<li>vertical progress bar, use constant <code class=
"constant">HTML_PROGRESS2_BAR_VERTICAL</code>
</li>
<li>square or rectangle, use constant <code class=
"constant">HTML_PROGRESS2_POLYGONAL</code>
</li>
<li>circle or ellipse, use constant <code class=
"constant">HTML_PROGRESS2_CIRCLE</code>
</li>
</ul>
</div>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setOrientation</span><span class=
"br0">(</span>HTML_PROGRESS2_BAR_VERTICAL<span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<p>
Only with horizontal and vertical progress bar, you have ability to
choose between smooth or cell rendering. What is it ?
</p>
<p>
A smooth progress bar is a full bar that look like this:
</p>
<div class="screenshot">
<img src="img/bullit.png" alt="" />
</div>
<p>
while cell progress bar look like :
</p>
<div class="screenshot">
<img src="img/basic1.png" alt="" />
</div>
<p>
Remember that default progress meter is horizontal progress bar
with ten cells (as above). If you want to have smooth progress bar,
or change cell spacing (in pixel), use the <code class=
"methodname">setCellAttributes()</code> method with <code class=
"literal">spacing</code> attribute.
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellAttributes</span><span class=
"br0">(</span><span class=
"st0">'spacing=0'</span><span class="br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<div class="note c4">
<table border="0" summary="Note">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Note]" src="img/admons/note.png" />
</td>
<th align="left">
Note
</th>
</tr>
<tr>
<td align="left" valign="top">
it's not a real smooth progress meter as HTML_Progress2_Lite
can do.
</td>
</tr>
</table>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4787347" id="id4787347"></a>Cells
</h3>
</div>
<p>
By default, an horizontal or vertical (and even circle/ellipse)
progress meter have ten cells, one for each ten percent.
</p>
<p>
Among attribute you can change there are: size (height, width) and
color(active inactive). See <a href="re25.html" title=
"HTML_Progress2::setCellAttributes">setCellAttributes()</a> method
for all details and default values.
</p>
<p>
We can also enlarge or reduce the cell count of the progress bar
with the <a href="re23.html" title=
"HTML_Progress2::setCellCount">setCellCount()</a> method.
</p>
<p>
If we want to have a twelve cells horizontal progress meter with
largest square (20x20 pixels) and red skin, then write :
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellCount</span><span class=
"br0">(</span><span class="nu0">12</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellAttributes</span><span class=
"br0">(</span><span class="kw3">array</span><span class=
"br0">(</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'active-color'</span>
<span class="sy0">=></span> <span class=
"st0">'#FF0000'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'inactive-color'</span>
<span class="sy0">=></span> <span class=
"st0">'#FF9900'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'width'</span> <span class=
"sy0">=></span> <span class="nu0">20</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'height'</span> <span class=
"sy0">=></span> <span class="nu0">20</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'spacing'</span> <span class=
"sy0">=></span> <span class="nu0">4</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<div class="note c4">
<table border="0" summary="Note">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Note]" src="img/admons/note.png" />
</td>
<th align="left">
Note
</th>
</tr>
<tr>
<td align="left" valign="top">
You can also use an html string that defines attributes list.
In our sample we will write:
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellAttributes</span><span class=
"br0">(</span><span class="st0">'active-color=#FF0000
inactive-color=#FF9900 width=20 height=20
spacing=4'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4787439" id="id4787439"></a>Border
</h3>
</div>
<p>
A progress bar (horizontal or vertical) can be surrounded by a
border (it's not the default).
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setBorderPainted</span><span class=
"br0">(</span><span class="kw2">true</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setBorderAttributes</span><span class=
"br0">(</span><span class="kw3">array</span><span class=
"br0">(</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'width'</span> <span class=
"sy0">=></span> <span class="nu0">2</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'style'</span> <span class=
"sy0">=></span> <span class=
"st0">'solid'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'color'</span> <span class=
"sy0">=></span> <span class="st0">'red'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<p>
Partial script above, will produce an horizontal progress bar with
a red solid border; something like this:
</p>
<div class="screenshot">
<img src="img/border1.png" alt="" />
</div>
<div class="important c4">
<table border="0" summary="Important">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Important]" src="img/admons/important.png" />
</td>
<th align="left">
Important
</th>
</tr>
<tr>
<td align="left" valign="top">
Without <code class="methodname">setBorderPainted()</code>
method and a <code class="constant">TRUE</code> argument,
there won't be any border rendering. Even if you set a
positive width with <code class=
"methodname">setBorderAttributes()</code> method.
</td>
</tr>
</table>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4787500" id="id4787500"></a>Background
</h3>
</div>
<p>
A progress bar (horizontal or vertical) has a white background by
default, but you can change that. You may even use an image as
background. Don't worry if image is smaller (use <code class=
"literal">background-repeat</code> attribute) or bigger than
progress meter. Accuracy positionning is possible with usage of
<code class="literal">background-position</code> attribute.
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setProgressAttributes</span><span class=
"br0">(</span><span class="kw3">array</span><span class=
"br0">(</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'background-color'</span>
<span class="sy0">=></span> <span class=
"st0">'#339900'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'background-image'</span>
<span class="sy0">=></span> <span class=
"st0">'degrade.jpg'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'background-repeat'</span>
<span class="sy0">=></span> <span class=
"st0">'repeat-y'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellAttributes</span><span class=
"br0">(</span><span class=
"st0">'inactive-color=transparent'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<div class="tip c4">
<table border="0" summary="Tip">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Tip]" src="img/admons/tip.png" />
</td>
<th align="left">
Tip
</th>
</tr>
<tr>
<td align="left" valign="top">
Even if you want to use an image as background, don't forget
to add <code class="literal">background-color</code>
attribute as an alternative.
<p>
It's same feature as <code class="literal">img</code> tag
for html and its <code class="literal">alt</code>
attribute.
</p>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4787579" id="id4787579"></a>Fill direction
</h3>
</div>
<p>
Progress meter can be fill in two directions (ways) called
<span class="emphasis"><em>natural</em></span> or <span class=
"emphasis"><em>reverse</em></span>. Default behavior is natural
fill.
</p>
<div class="itemizedlist">
<ul type="disc">
<li>
<p>
For horizontal progress bar, natural way is from left to
right, while reverse way is from right to left.
</p>
</li>
<li>
<p>
For vertical progress bar, natural way is from down to up,
while reverse way is from up to down.
</p>
</li>
</ul>
</div>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setOrientation</span><span class=
"br0">(</span>HTML_PROGRESS2_BAR_VERTICAL<span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setFillWay</span><span class="br0">(</span><span class=
"st0">'reverse'</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setAnimSpeed</span><span class=
"br0">(</span><span class="nu0">50</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellCount</span><span class=
"br0">(</span><span class="nu0">15</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellAttributes</span><span class=
"br0">(</span><span class="st0">'active-color=#970038
inactive-color=#FFDDAA width=50 height=13'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setBorderPainted</span><span class=
"br0">(</span><span class="kw2">true</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setBorderAttributes</span><span class=
"br0">(</span><span class="st0">'width=1
color=#000000'</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setLabelAttributes</span><span class=
"br0">(</span><span class="st0">'pct1'</span><span class=
"sy0">,</span> <span class="kw3">array</span><span class=
"br0">(</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'font-size'</span>
<span class="sy0">=></span> <span class=
"nu0">8</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'color'</span> <span class=
"sy0">=></span> <span class=
"st0">'#FF0000'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'background-color'</span>
<span class="sy0">=></span> <span class=
"st0">'#C3C6C3'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'align'</span> <span class=
"sy0">=></span> <span class=
"st0">'center'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'valign'</span> <span class=
"sy0">=></span> <span class="st0">'bottom'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
<p>
Partial script above, will produce a vertical progress bar filled
in reverse way (top to down), that look like:
</p>
<div class="screenshot">
<img src="img/vertical1.png" alt="" />
</div>
</div>
</div>
</div>
<table class="progress2Footer">
<tr>
<td align="left">
HTML_Progress2 : The Definitive Guide
</td>
<td align="right">
v 2.4.0 : April 20, 2007
</td>
</tr>
</table>
<div class="navfooter">
<hr />
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="ch04.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="pt02.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="ch05s02.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Chapter 4. Introduction
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Processing
</td>
</tr>
</table>
</div>
</body>
</html>