rank bar

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
method_man
Forum Contributor
Posts: 257
Joined: Sat Mar 19, 2005 1:38 am

rank bar

Post by method_man »

how would one make a rank bar so it goes from -100% to 100%?
would you use javascript?
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Whats a rank bar?
method_man
Forum Contributor
Posts: 257
Joined: Sat Mar 19, 2005 1:38 am

Post by method_man »

rank as in experience bar like show ammount of experience
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post 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.
method_man
Forum Contributor
Posts: 257
Joined: Sat Mar 19, 2005 1:38 am

Post by method_man »

thanks :D
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

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