...

PHP Driven Percentage Bar

seco
11-11-2008, 01:56 AM
I was curious one day with general php math. I decided to try something.

Although its not intense code, its is minimal and can be quite effective if used int he right way. Here is an example.

EXAMPLE (http://www.oregongoldhunters.com/percent/)

CODE (http://www.oregongoldhunters.com/percent/code.phps)

As for the database, I just have a table with per_id and per_num for giving the div heights some value.

as seen here:

<?php
mysql_connect("localhost", "user", "pass") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());

$result = mysql_query("SELECT * FROM percent")
or die(mysql_error());

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Dynamic Percentage Bar</title>
</head>

<body>
<?php
while($row = mysql_fetch_array( $result )) {
?>
<div id="wrap">
<div style="height:<?php echo (100-$row['per_num']); ?>px;"></div>
<div class="top"></div>
<div class="center" style="height:<?php echo ($row['per_num']); ?>px;"></div>
<div class="bottom"></div>
<div class="num"><?php echo ($row['per_num']); ?>%</div>
<div style="text-align:center;">id:<?php echo ($row['per_id']); ?></div>
</div>
<?php } ?>
</body>
</html>

a simple connection, a fetch and a few divs.

This is a vertical bottom to top bar.

This line adjusts the height from the top of the WRAP div to the top of the TOP div.
I am basing my percentage on 100% at the cap. So, 100 - # = TOP #.

# = per_num

so if per_num = 25

100 - 25 = 75, making padding div 75

padding div:
<div style="height:<?php echo (100-$row['per_num']); ?>px;"></div>

Now the CENTER div, this is the main column that adjust height graphically.

adjusts it height based on per_num

<div class="center" style="height:<?php echo ($row['per_num']); ?>px;"></div>

Let me know what you think, check out the example page to see what i mean.

Fou-Lu
11-11-2008, 02:01 AM
Not bad, looks nice and easy to use.

Moving this to PHP Snippets.

seco
11-11-2008, 02:05 AM
Thanks, didn't see that forum.

seco
08-18-2009, 08:10 PM
Ive made some changes and additions to this. you can get the download here

http://www.blueicestudios.com/php-percentage-bar/

Demos here
http://www.blueicestudios.com/percent/

seco
09-15-2009, 06:07 AM
ive added animation to the bar, when the page loads it will animate up to the percentage. there are a couple links "numbers" to click to see it in action.

View Demo (http://www.blueicestudios.com/percent/animated.php)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum