Wolfram My Writing How To Make ASCII and HTML Status Bars | | Search |
Sometimes web site designers go to great lengths to make little status bars out of images. I like these low tech solutions. I think I first saw these elsewhere, but I wrote them myself. Feel free to use them on your pages.
ASCII slider:
60% Completed [==============||=========] 60% Status Bar in 100% HTML
Observe how slick the HTML code is for that...by using the width attribute for the table tag expressed as a percentage of the table, you only have to change that number to change the value of the status bar --
<!-- BEGIN status bar - sets slider width to 160 pixels --> <table width=160 border=0 cellpadding=0 cellspacing=0> <tr> <td> <!-- this table is for the verbal display of info --> <table width="100%" border=0 cellpadding=0 cellspacing=0> <tr> <td align="center"><small>30% Complete</small> </td> </tr> <tr> <td align="center"> <!-- this table is for the visual display of info, set black box width here --> <table width="120" border=0 cellpadding=0 cellspacing=2 bgcolor="black"> <tr> <td bgcolor="gray" align="left"> <!-- this table is for the blue box, image is for Netscape and opera bug --> <table width="30%" border=0 cellpadding=0 cellspacing=0 bgcolor="blue"> <tr> <td><img src="/images/dot_clear.gif" width=1 height=13 alt="" border=0> </td> </tr> </table> <!-- close blue box table --> </td> </tr> </table> <!-- close blue box table --> </td> </tr> </table> </td> </tr> </table> <!-- END status bar -->
|
$1000 * | * | * | * | * | * | * | ** | **** | *** | **** | !***** | ************* | ************* $50 $Old equipment----------------------------> $bleeding edge (! = where I like to buy my technology equipment)
Here's another one.
60% *** * * * * 52% * * 50% *** * * *** * * * * * * * * * * * * * * * * * * * * * * * * * *
Here's a table in ascii
+----------+----------+----------+----------+----------+ | 2001 | 2002 | 2003 | 2004 | 2005 | +----------+----------+----------+----------+----------+ | Margit | John | Mary | Eliza | Steven | +----------+----------+----------+----------+----------+ | Red | Green | Blue | Purple | Black | +----------+----------+----------+----------+----------+
Here's some Mac software for converting tables to ascii
About This Page
Please let me know if you see any other cool ascii graphs or sliders and I'll publish them here for you. Please let me know if anything on this page is misleading or if it needs updating or additions.eric@wolfram.org
Please feel free to link to this page so that others can find it. It's easy to link to this page, just copy the text below onto your web page:
<a href="http://wolfram.org/writing/howto/ascii_slider.html">Make ASCII and HTML status bars</a>