Grow your CSS skills. Land your dream job.

Fund rotator

  • # July 3, 2012 at 12:16 pm

    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.

    # July 3, 2012 at 12:41 pm

    Here is what I currently have. http://jsfiddle.net/DGjKK/

    I would like to use an image instead of text if that could be done for the numbers.

    # July 3, 2012 at 2:09 pm

    I’m not sure if this is exactly what you were looking for? If you need an example of how to get the text converted to images, I can help you with that too. Let me know if this is what you wanted or not.

    link: http://codepen.io/chrisxclash/pen/12/1

    # July 3, 2012 at 3:05 pm

    That is what I’m looking for.

    # July 3, 2012 at 3:11 pm

    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.

    Numbers Example: http://t1.ftcdn.net/jpg/00/13/58/98/400_F_13589810_1tbmnDxe03nY99LApuxUQau2GgEycXzU.jpg

    # July 6, 2012 at 2:24 pm

    Hey, check out this plugin and see if you can get it working. Let me know if you have any trouble and possibly show me your code if you have any issues.

    link: http://bloggingsquared.com/jquery/flipcounter/

    # July 6, 2012 at 2:45 pm

    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 .

    index.html file.















    The only thing in my style.css right now is background-color: #FFFFFF;

    # July 6, 2012 at 3:21 pm

    Here’s a small codepen of it. The jQuery is kind of messy, but that’s because I had to keep declaring the image location since it wouldn’t allow me to define it once.

    link: http://codepen.io/chrisxclash/pen/12/2

    # July 6, 2012 at 3:58 pm

    @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.

    # July 6, 2012 at 4:42 pm

    Ah poop, haha. You’re totally right. I wasn’t actually paying attention to what I was doing. I’ll throw the fixed link in a sec.

    Here’s the fix, nice catch @Schmotty.

    link: http://codepen.io/chrisxclash/pen/12/5

    # July 9, 2012 at 10:31 am

    A coworker found this one and I was wondering if someone might be able to shed some light on the javascript for me. http://cnanney.com/journal/code/apple-style-counter-revisited/#options

    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.





    # July 9, 2012 at 2:53 pm

    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.

    link: http://codepen.io/chrisxclash/pen/23/2

    # July 10, 2012 at 8:31 am

    @ChrisxClash – I understand how to make it stop with a button, but what I was confused about was how to make it shop with a variable value. For example say my Goal was $200 but I’m currently at $50, I want it to stop at $50.

    # July 10, 2012 at 12:11 pm

    I noticed that there was a $ in the digits.png file. I know that you did not create this flip-counter and I appreciate your’s any one else that has helped effort in helping me. Is there an easy way to reference the section of the image to show the dollar sign?

    # July 10, 2012 at 12:56 pm

    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?

    link: http://codepen.io/chrisxclash/pen/23/4

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".