Hallo webmasters,

ik heb een vraagje. Ik ben druk bezig met een aantal aanpassingen aan de site van mijn stichting http://www.come-and-help.org/index. Nu wil ik een donatie meter plaatsen waarop mensen kunnen zien hoeveel duizend euro we al hebben van de benodigde €35.000.

Nu lijkt het me leuk dat je die meter omhoog ziet lopen en stopt bij het bedrag wat we hebben. Is daar een jQuery functie of scriptje voor? Dan ga ik daar is even mee spelen :-).

Alvast bedankt voor jullie reactie!

Diederik van Andel

Hier ben ik ook wel benieuwd naar. De countdown / textarea tellers vind je veel op Internet. Ik was laatst ook op zoek naar een soort geld meter.

Ik zoek even mee op Internet.

Zoiets:

http://no.nl/PaC
Rechts in het menu.

Jaa zoiets inderdaad. Alleen het lijkt me dan mooi dat het balkje oploopt van nul naar de tussenstand. Maar ik kan het nog steeds niet vinden.

Voor onze website hebben we een meter van http://www.fundraiserinsight.org/thermometer/ gebruikt.

Het balkje loopt niet op zoals je graag wilt, maar misschien heb je er toch wat aan.

Hoi Karin,

ik heb hem direct op onze site geplaatst. Werkt erg goed!
Uit ons CRM komt het bedrag wat we tot nu toe hebben.

Of te wel, geweldig!

Died

Goedzo. Mooi project trouwens!

of in het klein, met alleen javascript & een soort van animatie

PHP Code:

<div id="meter"><div id="geld"></div></div>
<br />
<div id="text"></div>
<script>
    var cur = 5600;
    var i = 1;
    updateMeter();
    function updateMeter(){
        if(i <= cur){
            var calc = (i / 35000) * 100;
            document.getElementById('geld').style.width = calc+'%';
            document.getElementById('text').innerHTML = '&euro; '+i;
            if(cur > 5000 && i+100 < cur){
                i += 100;    
            }
            else if(i+10 < cur){
                i += 10;
            }
            else {
                i++;
            }
            setTimeout(updateMeter,10);
        }
    }
</script> 


stijl:

PHP Code:

<style>
#meter {
    display:block;
    float:left;
    width: 100px;
    height: 10px;
    background: red;
}
#geld {
    display:block;
    float:left;
    height: 10px;
    background: blue;
}
</style> 


Ik denk dat de Google Chart API hier heel erg geschikt voor is:

http://code.google.com/intl/nl-NL/ap...hart_gall.html

Code:

https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Met de jQuery UI is het heel makkelijk! Maar volgens mij ben je al voorzien ;-)