Text (abs)

Overview

This example will run a basic progress bar with percent info and additional text label, using the absolute 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 aligned on bottom side of the progress bar (lines 23-24):

Property Value Default
left 120 5
top 50 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 text label txt1 is top (left) side aligned on the progress bar (lines 27-32):

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

Position the progress bar with main attributes (lines 17-21):

Property Value Default
position absolute relative
left 450 0
top 80 0
See also :

Source Code

  1. <?php
  2. /**
  3. * Basic Horizontal ProgressBar
  4. * with a simple text label on top side (using absolute position).
  5. *
  6. * @version    $Id: text2.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. $pb->setProgressAttributes(array(
  18.     'position' => 'absolute',
  19.     'left' => 450,
  20.     'top' => 80
  21. ));
  22.  
  23. $pct1 = array('left' => 120, 'top' => 25);
  24. $pb->setLabelAttributes('pct1', $pct1);
  25.  
  26. // Adds additional text label
  27. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Progress2 (c) 2005');
  28. $pb->setLabelAttributes('txt1', array(
  29.     'left' => 0,
  30.     'top' => -16,
  31.     'color' => 'navy'
  32. ));
  33. ?>
  34. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  35.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  36. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  37. <head>
  38. <title>Text Label absolute Progress2 example</title>
  39. <style type="text/css">
  40. <!--
  41. <?php echo $pb->getStyle(); ?>
  42.  
  43. body {
  44.     background-color: #E0E0E0;
  45.     color: #000000;
  46.     font-family: Verdana, Arial;
  47. }
  48.  -->
  49. </style>
  50. <?php echo $pb->getScript(false); ?>
  51. </head>
  52. <body>
  53. <p style="background-color:lightblue;
  54.           width:500px;height:150px;
  55.           text-align:center;">
  56. 500x150</p>
  57. <h1>Text and Percent Labels using absolute position </h1>
  58.  
  59. <?php
  60. echo $pb->toHtml();
  61. $pb->run();
  62. ?>
  63.  
  64. <p>Process Ended !</p>
  65.  
  66. </body>
  67. </html>