how would one make a rank bar so it goes from -100% to 100%?
would you use javascript?
rank bar
Moderator: General Moderators
-
method_man
- Forum Contributor
- Posts: 257
- Joined: Sat Mar 19, 2005 1:38 am
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
If you're looking for a visual representation, well, first, you could use CSS... or you could Images...
And then you'd have to style it yourself and hook it up or something.
Code: Select all
<table id="e;xp_bar"e; class="e;status_bar"e;>
<colgroup span="e;100"e; width="e;1"e; class="e;unit_percentPoint"e;></colgroup>
<caption id="e;xp_bar_textual"e;>10023 experience points, 48% of required points until next level.</caption>
<thead id="e;xp_bar_legend"e;>
<tr><td colspan="e;10"e;>0%</td><td colspan="e;10"e;>10%</td><td colspan="e;10"e;>20%</td><td colspan="e;10"e;>30%</td><td colspan="e;10"e;>40%</td><td colspan="e;10"e;>50%</td><td colspan="e;10"e;>60%</td><td colspan="e;10"e;>70%</td><td colspan="e;10"e;>80%</td><td colspan="e;10"e;>90%</td>
</tr>
</thead>
<tbody id="e;xp_bar_visual"e;>
<tr>
<td colspan="e;48"e; id="e;xp_bar_visual_done"e;>&nbsp;</td>
<td colspan="e;52"e; id="e;xp_bar_visual_notdone"e;>&nbsp;</td>
</tr>
</tbody>
</table>- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
Here's what I do for a visual representation of a numerical percentage.
1. Create a div with a background color (pale) the maximum length you would want your "rank bar". Set the height to whatever
2. Create another div inside that one with the same height and set width:{rank}% using CSS (apply a darker background-color.
I actually have daft page place holder I threw together in 10 mins when I was bored at work to show disk space usage.
http://corbyn.no-ip.org/
1. Create a div with a background color (pale) the maximum length you would want your "rank bar". Set the height to whatever
2. Create another div inside that one with the same height and set width:{rank}% using CSS (apply a darker background-color.
I actually have daft page place holder I threw together in 10 mins when I was bored at work to show disk space usage.
http://corbyn.no-ip.org/
Code: Select all
//Execute UNIX df command to read mounted disk info
$disk_data = (`df`);
$tot_size = 0;
$used_size = 0;
preg_match_all('/^.*?\s+(\d+)\s+(\d+).*$/m', $disk_data, $dm); //Extract relevant data
foreach ($dm[1] as $v) {
$tot_size += $v;
}
foreach ($dm[2] as $v) {
$used_size += $v;
}
//Disk information
$details['disk_size'] = round($tot_size/1024/1024 ,2) . 'GB';
$details['disk_usage'] = round($used_size/$tot_size * 100, 2) . '%';
$bar_pc = round($used_size/$tot_size * 100); //Percentage of disk space for bar graph
//A *sort of* bar graph using just CSS <----- the bit you need
$bar = '<div style="width:100%; border:1px solid #555555; height:10px; font-size: 7pt; text-align:left"><div style="font-size:7pt; height:10px; width:'.$bar_pc.'%; background-color:#E7FF7F; text-align:center">'.$details['disk_usage'].' used</div></div>';