Forums

Maddtechwf

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.

Maddtechwf

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.

ChrisxClash

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

Maddtechwf

That is what I'm looking for.

Maddtechwf

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

ChrisxClash

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/

Maddtechwf

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.


<html>
	<head>
		<title>Demo Counter</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot; type="text/javascript"></script>
		<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="js/jquery.flipCounter.1.2.pack.js" type="text/javascript"></script>
		<link type="text/css" rel="stylesheet" media="screen" href="style.css" />
	</head>
	<body id="body2">
		<div id="counter"><input type="hidden" name="counter-value" value="100" /></div>
<script type="text/javascript">
/* <![CDATA[ */
        jQuery(document).ready(function($) {
                $("#counter").flipCounter();            
        });
/* ]]> */
</script>
	</body>
</html>

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

ChrisxClash

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

Schmotty

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

ChrisxClash

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

Maddtechwf

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.


<div id="wrapper"><div id="flip-counter" class="flip-counter"></div></div>
	
		<script type="text/javascript">
		//<![CDATA[
	
		$(function(){
			
			// Initialize a new counter
			var myCounter = new flipCounter('flip-counter');
			myCounter.setIncrement(100).setPace(600).setAuto(true);
		});
	
		//]]>
		</script>

ChrisxClash

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

Maddtechwf

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

Maddtechwf

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?

ChrisxClash

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

Maddtechwf

@ChrisxClash - Since I couldn't get the $ to work on the counter I was trying to use, I decided to give flipCounter another shot and I have most of it working except for the $ and the flip animation. I modified the flipCounter-medium.png and added a new sprite at the end for the $. I just can't seem to figure out how to reference it in the jquery.flipCounter.1.2.js to get it working.

Maddtechwf

Okay, so now I have the rotator working exactly the way I want it. Can anyon help me fix my last issue though. I have a javascript function that reads numbers from a .txt documents and displays them correctly. How can I pass the numbers to another javascript instance?

http://jsfiddle.net/maddtechwf/9aLMV/

treehouse : what would you like to learn today?

Forums

Fund rotator