Text (rel)

Overview

This example will run a basic progress bar with percent info and additional text label, using the relative position.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The percent label added by default is pct1 and is right side aligned on the progress bar :

Property Value Default
left   5
top   5
width   50
height   0
align   right
valign   right
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color  #000000

While the simple static text label txt1 is top (left) side aligned on the progress bar (lines 19-24):

Property Value Default
left 0 5
top   5
width   50
height   0
align   right
valign top right
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color red #000000
See also :

Source Code

  1. <?php
  2. /**
  3. * Basic Horizontal ProgressBar
  4. * with a simple text label on top side (using relative position).
  5. *
  6. * @version    $Id: text1.php,v 1.4 2006/05/24 08:45:07 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_Progress2
  9. * @subpackage Examples
  10. * @access     public
  11. */
  12. require_once 'HTML/Progress2.php';
  13.  
  14. $pb = new HTML_Progress2();
  15. $pb->setAnimSpeed(300);
  16. $pb->setIncrement(10);
  17.  
  18. // Adds additional text label
  19. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Progress2 - Simple Example');
  20. $pb->setLabelAttributes('txt1', array(
  21.     'valign' => 'top',
  22.     'left' => 0,
  23.     'color' => 'red'
  24. ));
  25. ?>
  26. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  27.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  28. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  29. <head>
  30. <title>Text Label relative Progress2 example</title>
  31. <style type="text/css">
  32. <!--
  33. <?php echo $pb->getStyle(); ?>
  34.  
  35. body {
  36.     background-color: #E0E0E0;
  37.     color: #000000;
  38.     font-family: Verdana, Arial;
  39. }
  40.  -->
  41. </style>
  42. <?php echo $pb->getScript(false); ?>
  43. </head>
  44. <body>
  45. <p style="background-color:lightblue;
  46.           width:500px;height:150px;
  47.           text-align:center;">
  48. 500x150</p>
  49. <h1>Text and Percent Labels using relative position </h1>
  50.  
  51. <?php
  52. $pb->display();
  53. $pb->run();
  54. ?>
  55. <p>&nbsp;</p>
  56. <p>Process Ended !</p>
  57.  
  58. </body>
  59. </html>