[SOLVED] Progress bar

Sir Softsand · May 29, 2007

I tried to add ?score=50 to the URL but that didn't work.

kenrbnsn · May 29, 2007

In my code sample, change

<?php
  $pbar_width = (isset($_GET['w']))?$_GET['w']:10;
  echo '<span class="pbar" style="width:' . $pbar_width . '%;"> </span>';
?>

to

<?php
  $pbar_width = (isset($_GET['score']))?$_GET['score']:0;
  echo '<span class="pbar" style="width:' . $pbar_width . '%;"> </span>';
?>

Ken

Sir Softsand · May 29, 2007

Ok, Is there a way to add text to it? I did it before with a .gif button I used this name for the button in a CSS file: .button

Then I did this on the page I used the button on: <div class=".button">title here</div>

maxim · May 29, 2007

you can use output buffering, and to it with text like using dots for example. check out hudzilla.org

Sir Softsand · May 29, 2007

I'd rather like to use the CSS way if that is possible.

kenrbnsn · May 29, 2007

Do you want text inside, below, or above it?

Sir Softsand · May 29, 2007

Ok, now I got another problem, when I enter this URL of the bar between img tags it says that the image isn't accessable.

progressbar.php?score=50

PS: I want the text inside, I can change font color and stuff like that myself, I only need to know how to put it there.

Sir Softsand · May 29, 2007

I entered the bar code between img tags here too (post above), but it shows a blank line.

per1os · May 29, 2007

It shouldn't be accessible. If you want it displayed like an image you have to use the www.php.net/image image functions along with headers.

The CSS is to be on the page and it will not act like an image at all other than it sorta looks like one on the page.

Lumio · May 29, 2007

I made a little function:

<?php
function createBar ($val, $max, $width='150', $height='15', $_col_bar=array(0,128,0), $_col_bg=array(255,250,255)) {
	$im = imagecreatetruecolor($width, $height);

	$col_bar = imagecolorallocate($im, $_col_bar[0], $_col_bar[1], $_col_bar[2]);
	$col_bg  = imagecolorallocate($im, $_col_bg[0], $_col_bg[1], $_col_bg[2]);

	imagefill($im, 0, 0, $col_bg);

	$min = $val / $max;
	$gr_min = $width * $min;

	$points = array(	0,	 0,
				$gr_min, 0,
				$gr_min, $height,
				0,	 $height);
	imagefilledpolygon($im, $points, 4, $col_bar);
	return $im;
}

header('Content-type: image/jpeg');
imagejpeg( createBar(200,300, 500, 20, array(255, 128, 0), array(230, 235, 255)) );
?>

Remember to only use that function without outputting anything (with echo, ...) and don't use plain-text (like html code, ...)

So how does it work:

createBar ($val, $max [, $width] [, $height=15] [, $_col_bar] [, $_col_bg])

$val = value (example 200)

$max = maximal value (example 300)

$width = width of bar in pixel (example 500)

$height = height of bar in pixel (example 20)

$_col_bar = color of bar (an array ... used like array (r, g, b))... so for example array(255, 128, 0) (orange))

$_col_bg = background color (the same as $_col_bar)

Sir Softsand · May 29, 2007

It shouldn't be accessible. If you want it displayed like an image you have to use the www.php.net/image image functions along with headers.

The CSS is to be on the page and it will not act like an image at all other than it sorta looks like one on the page.

Then why does this one work?:

progress.php?score=30

Sir Softsand · May 29, 2007

Anyone? ???

kenrbnsn · May 29, 2007

Please repost the script that is being used for the above image. Also post the script that uses the CSS code.

Ken

Lumio · May 29, 2007

Anyone? ???

I gave you an example to do that with php

Sir Softsand · May 29, 2007

I don't have the script of the image I showed. This is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Progress Bar</title>
<style>
.bar {
  display: block;
  width: 100px;
  border: 1px solid #B2B2B2;
  height: 8px;
}
.pbar {
  display: block;
  background-color: #FFE83F;
  float: left;
  height: 8px;
}
</style>
</head>
<body>
<div class="bar">
<?php
  $pbar_width = (isset($_GET['score']))?$_GET['score']:0;
  echo '<span class="pbar" style="width:' . $pbar_width . '%;"> </span>';
?>
<div style="clear:both;line-height:0.01em"> </div>
</div>
</body>
</html>

Sir Softsand · May 29, 2007

Anyone? ???

I gave you an example to do that with php

I'd rather try to use the code I have now first.

Sir Softsand · May 29, 2007

So how can I make it work as image on fora?

Sir Softsand · May 29, 2007

Can anyone help me please? I'd like the bar to work as soon as possible.

Lumio · May 29, 2007

how do you want to solve it... with php or css?

MadTechie · May 30, 2007

Then why does this one work?:

it does work

progress.php?score=0

progress.php?score=20

progress.php?score=50

progress.php?score=70

progress.php?score=100

http://www.bf2stats.nl/progress.php?score=20

20 = the percentage

Sir Softsand · May 30, 2007

I want a bar like the green bars show above that I can use as image on fora and websites.

taith · May 30, 2007

if you do it the css way... you can not only get it static by php... if you really want... you can make it move via javascript...

css makes the world go round... lol

Sir Softsand · May 30, 2007

I used CSS and php, this is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sander's Progress Bar</title>
<style>
.bar {
  display: block;
  width: 100px;
  border: 1px solid #B2B2B2;
  height: 8px;
}
.pbar {
  display: block;
  background-color: #AD0008;
  float: left;
  height: 8px;
}
</style>
</head>
<body>
<div class="bar">
<?php
  $pbar_width = (isset($_GET['score']))?$_GET['score']:0;
  echo '<span class="pbar" style="width:' . $pbar_width . '%;"> </span>';
?>
<div style="clear:both;line-height:0.01em"> </div>
</div>
</body>
</html>

kenrbnsn · May 30, 2007

That is basically the code I provided yesterday. How are you integrating it into your code?

Ken

Sir Softsand · May 30, 2007

That is indeed the code I got from you, but it doesn't work as an image. I can't enter it on fora and websites.

Sign In

[SOLVED] Progress bar

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information