kleur veranderen in dit script...
http://jsfiddle.net/GeekyJohn/vQ4Xn/
Heeft iemand een idee hoe ik de gevulde kleur (nu default groen) kan laten veranderen
van blauw (0-waarde) naar rood (max waarde)?
Blauw: #0000CC
Rood : #FF0000
De huidige kleur wordt hier bepaald:
.thermometer .progress {
...
background: rgba(20,100,20,0.6);
...
}
In mijn geval heb ik overigens het script aangepast zodat deze een schaal van 0 tot 100% heeft (ter info)
Ik heb zelf helemaal geen idee waar te beginnen :-(
dus een duwtje in de goede richting is meer dan welkom.
PhP is me bekend, mocht daarin een oplossing liggen nog.
Alvast dank,
M vr gr Eric
P.S. Het topic over dit script is hier te vinden:
http://community.sitepoint.com/t/code-for-a-fundraising-thermometer/21832/41
Daar is e.e.a. nét ietsje aangepast en gewijzigd, maar zo goed als niks.
Maar dat ter info.
Gewijzigd op 29/09/2014 00:15:09 door Eric T
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
function gradient($startcol,$endcol,$graduations=10)
{
$graduations--;
$RedOrigin = hexdec(substr($startcol,0,2));
$GrnOrigin = hexdec(substr($startcol,2,2));
$BluOrigin = hexdec(substr($startcol,4,2));
$GradientSizeRed = (hexdec(substr($endcol,0,2))-$RedOrigin)/$graduations; //Graduation Size Red
$GradientSizeGrn = (hexdec(substr($endcol,2,2))-$GrnOrigin)/$graduations;
$GradientSizeBlu = (hexdec(substr($endcol,4,2))-$BluOrigin)/$graduations;
for($i = 0 ; $i <= $graduations ; $i++)
{
$RetVal[$i] =
str_pad(dechex($RedOrigin+($GradientSizeRed*$i)),2,'0',STR_PAD_LEFT) .
str_pad(dechex($GrnOrigin+($GradientSizeGrn*$i)),2,'0',STR_PAD_LEFT) .
str_pad(dechex($BluOrigin+($GradientSizeBlu*$i)),2,'0',STR_PAD_LEFT);
}
return $RetVal;
}
$lowest = '0000CC';
$highest = 'FF0000';
$i = 0;
$colors = gradient($lowest, $highest, 100);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.color-div {
height:20px;
margin-bottom:2px;
color:#FFF;
}
</style>
</head>
<body>
<h2>$colors is een array met de volgende kleuren:</h2>
<?php
foreach($colors as $color)
{
echo '<div class="color-div" style="background-color:#'.$color.'">['.($i++).'] => #'.strtoupper($color).'</div>'."\n";
}
?>
</body>
</html>
function gradient($startcol,$endcol,$graduations=10)
{
$graduations--;
$RedOrigin = hexdec(substr($startcol,0,2));
$GrnOrigin = hexdec(substr($startcol,2,2));
$BluOrigin = hexdec(substr($startcol,4,2));
$GradientSizeRed = (hexdec(substr($endcol,0,2))-$RedOrigin)/$graduations; //Graduation Size Red
$GradientSizeGrn = (hexdec(substr($endcol,2,2))-$GrnOrigin)/$graduations;
$GradientSizeBlu = (hexdec(substr($endcol,4,2))-$BluOrigin)/$graduations;
for($i = 0 ; $i <= $graduations ; $i++)
{
$RetVal[$i] =
str_pad(dechex($RedOrigin+($GradientSizeRed*$i)),2,'0',STR_PAD_LEFT) .
str_pad(dechex($GrnOrigin+($GradientSizeGrn*$i)),2,'0',STR_PAD_LEFT) .
str_pad(dechex($BluOrigin+($GradientSizeBlu*$i)),2,'0',STR_PAD_LEFT);
}
return $RetVal;
}
$lowest = '0000CC';
$highest = 'FF0000';
$i = 0;
$colors = gradient($lowest, $highest, 100);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.color-div {
height:20px;
margin-bottom:2px;
color:#FFF;
}
</style>
</head>
<body>
<h2>$colors is een array met de volgende kleuren:</h2>
<?php
foreach($colors as $color)
{
echo '<div class="color-div" style="background-color:#'.$color.'">['.($i++).'] => #'.strtoupper($color).'</div>'."\n";
}
?>
</body>
</html>
Gewijzigd op 29/09/2014 03:07:32 door Frank Nietbelangrijk
Ik ga em in de loop van de dag even proberen als ik even tijd heb.
Top!
gr Eric
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php
function gradient($startcol,$endcol,$graduations=10)
{
$graduations--;
$RedOrigin = hexdec(substr($startcol,0,2));
$GrnOrigin = hexdec(substr($startcol,2,2));
$BluOrigin = hexdec(substr($startcol,4,2));
$GradientSizeRed = (hexdec(substr($endcol,0,2))-$RedOrigin)/$graduations;
$GradientSizeGrn = (hexdec(substr($endcol,2,2))-$GrnOrigin)/$graduations;
$GradientSizeBlu = (hexdec(substr($endcol,4,2))-$BluOrigin)/$graduations;
for($i = 0 ; $i <= $graduations ; $i++)
{
$RetVal[$i] = array(
round($RedOrigin+($GradientSizeRed*$i)),
round($GrnOrigin+($GradientSizeGrn*$i)),
round($BluOrigin+($GradientSizeBlu*$i))
);
}
return $RetVal;
}
$lowest = '0000CC';
$highest = 'FF0000';
$i = 0;
$colors = gradient($lowest, $highest, 100);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.color-div {
height:20px;
margin-bottom:2px;
color:#FFF;
}
</style>
</head>
<body>
<h2>$colors is een array met de volgende kleuren:</h2>
<?php
foreach($colors as $color)
{
echo '<div class="color-div" style="background-color:rgba('.$color[0].','.$color[1].','.$color[2].',0.6);">'.
'['.($i++).'] => rgba('.$color[0].','.$color[1].','.$color[2].',0.6)</div>'."\n";
}
?>
</body>
</html>
function gradient($startcol,$endcol,$graduations=10)
{
$graduations--;
$RedOrigin = hexdec(substr($startcol,0,2));
$GrnOrigin = hexdec(substr($startcol,2,2));
$BluOrigin = hexdec(substr($startcol,4,2));
$GradientSizeRed = (hexdec(substr($endcol,0,2))-$RedOrigin)/$graduations;
$GradientSizeGrn = (hexdec(substr($endcol,2,2))-$GrnOrigin)/$graduations;
$GradientSizeBlu = (hexdec(substr($endcol,4,2))-$BluOrigin)/$graduations;
for($i = 0 ; $i <= $graduations ; $i++)
{
$RetVal[$i] = array(
round($RedOrigin+($GradientSizeRed*$i)),
round($GrnOrigin+($GradientSizeGrn*$i)),
round($BluOrigin+($GradientSizeBlu*$i))
);
}
return $RetVal;
}
$lowest = '0000CC';
$highest = 'FF0000';
$i = 0;
$colors = gradient($lowest, $highest, 100);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.color-div {
height:20px;
margin-bottom:2px;
color:#FFF;
}
</style>
</head>
<body>
<h2>$colors is een array met de volgende kleuren:</h2>
<?php
foreach($colors as $color)
{
echo '<div class="color-div" style="background-color:rgba('.$color[0].','.$color[1].','.$color[2].',0.6);">'.
'['.($i++).'] => rgba('.$color[0].','.$color[1].','.$color[2].',0.6)</div>'."\n";
}
?>
</body>
</html>
Op zich werkt het...zij het dat ik de kleur niet in de thermometer heb.
De kleur wordt in principe gevuld binnen het javascript (met connectie naar css), waardoor je de meter langzaam ziet oplopen. Dus mijn vermoeden is dat dat oplopen van kleur a naar kleur b dan ook binnen het javascript moet gebeuren
Ik zal daarom eens kijken of ik dit php script kan omzetten binnen het javascript...
Wordt vervolgd...
Huidg resultaat:
http://www.jointheuniverse.com/thermo/
Code (php)
1
newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";
Omzetten van de functie naar javascript is zeker mogelijk. Laat maar weten als je er niet uit komt.
Ik heb dit al gevonden voor het omzetten van decimaal naar hex en andersom
Convert a number to a hexadecimal string with:
hexString = yourNumber.toString(16);
and reverse the process with:
yourNumber = parseInt(hexString, 16);
Om heel veel werk te voorkomen ben ik maar opnieuw begonnen met een eigen javascript gedeeltelijk op basis van wat je hierboven gaf Frank.
Zoals ik het nu heb, wordt meteen de volledige pagina geladen (html), en het javascript loopt gewoon door. Dat is perfect! Want dat was met alles via php doen helaas niet het geval.
Grappig genoeg is de gehele code ook een stuk korter geworden vooralsnog, maar uiteraard is hij nog niet af. Nog even mooi maken :-) Het begin is er echter...
http://www.jointheuniverse.com/thermo2/
Index.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
//html code hieromheen
[code]<?php
for($i=0;$i<=125;$i++){
echo "<div id='siteID".$i."' style='float:left;'> </div>";
}
?>
[size=xsmall][i]Toevoeging op 29/09/2014 17:06:18:[/i][/size]
En het javascript:
<?php
<script>
function progressBlocks(j){
//Choose your own paramaters:
var height = 3;//in pixels
var width = 60;//in pixels
var delay = 18;//milliseconds Blauw: #0000CC Rood : #FF0000
//Other variables
var dist = j*height + "px";
var siteid = "siteID" + j;
var red=255-(2*j);
var grn=0;
var blu=(2*j);
var color = "rgb("+red+","+grn+","+blu+")";
document.getElementById(siteid).style.zIndex='3';
document.getElementById(siteid).style.background=color;
document.getElementById(siteid).style.width=width+'px';
document.getElementById(siteid).style.height=height+'px';
document.getElementById(siteid).style.marginTop=dist;
document.getElementById(siteid).style.marginLeft='-'+width+'px';
j--;
if(j==0){return;}
setTimeout (function(){progressBlocks(j)}, delay);
}
$(document).ready(function(){
progressBlocks(125);
});
</script>
//html code hieromheen
[code]<?php
for($i=0;$i<=125;$i++){
echo "<div id='siteID".$i."' style='float:left;'> </div>";
}
?>
[size=xsmall][i]Toevoeging op 29/09/2014 17:06:18:[/i][/size]
En het javascript:
<?php
<script>
function progressBlocks(j){
//Choose your own paramaters:
var height = 3;//in pixels
var width = 60;//in pixels
var delay = 18;//milliseconds Blauw: #0000CC Rood : #FF0000
//Other variables
var dist = j*height + "px";
var siteid = "siteID" + j;
var red=255-(2*j);
var grn=0;
var blu=(2*j);
var color = "rgb("+red+","+grn+","+blu+")";
document.getElementById(siteid).style.zIndex='3';
document.getElementById(siteid).style.background=color;
document.getElementById(siteid).style.width=width+'px';
document.getElementById(siteid).style.height=height+'px';
document.getElementById(siteid).style.marginTop=dist;
document.getElementById(siteid).style.marginLeft='-'+width+'px';
j--;
if(j==0){return;}
setTimeout (function(){progressBlocks(j)}, delay);
}
$(document).ready(function(){
progressBlocks(125);
});
</script>
Gewijzigd op 29/09/2014 17:08:51 door Eric T
Er wordt gebruik gemaakt van jquery's .animate() functie. Deze functie regelt alles zelf. Je hoeft alleen maar de eindwaarde op te geven en te zorgen dat het element dat geanimeerd gaat worden de juiste beginwaarde heeft voordat je de animatie start.
Om kleurverloop te ondersteunen moet wel de jqueryui library worden toegevoegd.
toevoegen van jqueryui in de <head> van index.html:
Code (php)
1
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
Voeg deze regel maar eens toe:
Code (php)
1
newCSS[ "background-color" ] = "rgba(255,0,0,0.6)";
zet maar net onder deze regel:
Code (php)
1
newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";
Toevoeging op 29/09/2014 19:30:35:
Wel zul je de eindwaarde moeten berekenen als je de thermometer meer blauw wilt als de waarde waar die stopt lager is.
Toevoeging op 29/09/2014 19:31:42:
Ook de animatie duur zou voor een lagere waarder korter kunnen. Nu loopt een lagere waarde langzamer op dan een hogere waarde
Gewijzigd op 29/09/2014 19:28:47 door Frank Nietbelangrijk
Misschien nog even naar smaak aanpassen kwa grootte e.d. en dan is ie af :-)
Heel veel dank Frank voor alle hulp!