Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts

    PHP Driven Percentage Bar

    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 Code:
    <?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:
    PHP Code:
    <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
    PHP Code:
    <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.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,978
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Not bad, looks nice and easy to use.

    Moving this to PHP Snippets.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #3
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    Thanks, didn't see that forum.

  • #4
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    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/

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •