Page 1 of 1

rank bar

Posted: Sat Jun 18, 2005 4:52 pm
by method_man
how would one make a rank bar so it goes from -100% to 100%?
would you use javascript?

Posted: Sat Jun 18, 2005 5:22 pm
by onion2k
Whats a rank bar?

Posted: Sat Jun 18, 2005 6:08 pm
by method_man
rank as in experience bar like show ammount of experience

Posted: Sat Jun 18, 2005 11:23 pm
by Ambush Commander
If you're looking for a visual representation, well, first, you could use CSS... or you could Images...

Code: Select all

<table id=&quote;xp_bar&quote; class=&quote;status_bar&quote;>
  <colgroup span=&quote;100&quote; width=&quote;1&quote; class=&quote;unit_percentPoint&quote;></colgroup>
  <caption id=&quote;xp_bar_textual&quote;>10023 experience points, 48% of required points until next level.</caption>
  <thead id=&quote;xp_bar_legend&quote;>
    <tr><td colspan=&quote;10&quote;>0%</td><td colspan=&quote;10&quote;>10%</td><td colspan=&quote;10&quote;>20%</td><td colspan=&quote;10&quote;>30%</td><td colspan=&quote;10&quote;>40%</td><td colspan=&quote;10&quote;>50%</td><td colspan=&quote;10&quote;>60%</td><td colspan=&quote;10&quote;>70%</td><td colspan=&quote;10&quote;>80%</td><td colspan=&quote;10&quote;>90%</td>
    </tr>
  </thead>
  <tbody id=&quote;xp_bar_visual&quote;>
    <tr>
      <td colspan=&quote;48&quote; id=&quote;xp_bar_visual_done&quote;> </td>
      <td colspan=&quote;52&quote; id=&quote;xp_bar_visual_notdone&quote;> </td>
    </tr>
  </tbody>
</table>
And then you'd have to style it yourself and hook it up or something.

Posted: Sun Jun 19, 2005 2:54 am
by method_man
thanks :D

Posted: Sun Jun 19, 2005 6:50 am
by Chris Corbyn
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/

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>';