I’m not the worlds greatest js coder but I can understand it when I look at something already created. With that said, here is what I need some help with.
I’ve found tons of rotators out there but nothing like what I need. I needing one to track how far we are from a goal. For example: We have a goal of $30,000 to be raised but we have only raised 5,000. It would be nice to be able to show that we have raised $5,000 but under the image, have a dive that says we only need $XX,XXX to reach our goal by a certain date. It would also be nice for it to show a percentage of the goal so far.
I really appreciate any help on this.
http://www.angelo.edu/services/giving/ This is one that someone pointed out to me but I’m wanting to use a different style of numbers. I like the look of the old fashion clocks, that had the numbers split in half and they flipped over.
Thanks Chris. I downloaded the code off of the site and followed the steps to implement it but have had no luck. I’m posting my code below because I’m playing with this on a local WAMP setup.
File Structure: index.html, img/flipCounter-medium.png, js/jquery.easing.1.3.js, and js/jquery.flipCounter.1.2.js .
The only thing in my style.css right now is background-color: #FFFFFF;
@ChrisxClash is that math correct? $25000 to go is not 16.67% of $30000. You divided the current by the total which gives you the current percent, but not the percentage to go.
It should be:
var percent = (toGo/total)*100;
But either way Madd wants to use it, nice work.
I’ve got it working on a localhost setup but there are a few things I cannot figure out and when I posted a comment, the creator still has yet to respond.
1) How can I make the $ appear before the numbers?
2) I’m trying to implement the “Stop” sub function but can’t seem to get it working correct. I want to check the current myCounter value and if it’s at a certain point, I would like it to stop.
Here’s a version using a psuedoelement for the $ sign. If you need it to work in older browsers, you can throw an element before it with the content/css of the pseudoelement.
Also added a stop button to show you how it works.
My bad, I must have misread your stopping question. I threw together an example of how to make it stop when you want. In the version I threw together, it will increment by two, until it reaches 150. You can also do smart incrementing, where you specify how long you want it to take, rather than just a constant speed.
As for the $ symbol, I saw that in the digits.png file, but I can’t see anywhere in his documentation or js file where he allows you to use it. Maybe it’s a future implementation?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".