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
CODE
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.
