Savings Counter Module for DotNetNuke?

Question

I have searched long and hard for module that would show Customer Savings(in $$). There are two ways I wish to possibly implement this.

Method One:
Customer enters a "base" $$ amount, start date, and an incrementing value per time period
Ex: Base=$1,000,000; Start:1/1/2010; Increment=$100; Time Period=Minute
This would diplay $1,432,000 after exactly 3 days (3days*24hrs*60mins*$100=$432,000 since 1/1/2010)
Each time the person refreshed the page, the amount saved would be calculated based on the difference in time between the start date and current date, and displayed to the user.

Method Two:(IDEAL)
Same setup as above, but savings would be updated every second (and possibly with some kind of odometer-looking counter that is constantly rolling over).

Has anyone seen or heard of any module like this? I have searched high and low and the only "counters" I can find are hit counters and such. If no one is aware of any pre-existing modules, how could this be coded into a DotNetNuke module? I have not yet delved into the world of coding custom modules. I have only tweaked other modules to make them work the way I need.
Any and all help is greatly appreciated!

UPDATE:
Here is my final code. In the "footer" section (under Settings) of DNN HTML module: $(document).ready(function(){

setTimeout('countit()',1); //1 makes it display the value quickly after loading    
});

function countit()
{
  var amountperyear=4000000; //THIS IS THE ONLY NUMBER TO EDIT EACH YEAR

  var msperyear=31536000000; //milliseconds per year

  var today=new Date();
  var startdate=new Date(today.getYear(),0,00);  //January 1, of the current year at midnight?
  var diff=Math.ceil((today.getTime()-startdate.getTime())); //Time difference in milliseconds
  var newvalue=(diff*(amountperyear/msperyear)); // (# of ms) * (amount/ms)
  var displayvalue=newvalue.toLocaleString(); //Convert to currency formatting
  $("#mycounter").html("$"+displayvalue);
  setTimeout('countit()',500); //Have it update twice per second
}

</script>

In the Content section of the DNN HTML module:

<center>
This year, we've saved our customers:
<b><div id="mycounter"><i>Loading...</i></div></b>
</center>

NEW ISSUE:
This script is only working in Internet Explorer. In Chrome and Firefox the result in off by more than a billion. I'm not quite sure what is causing the issue, but I believe it has to do with the date math or the .toLocaleString() perhaps? Anyone who might have run into this issue before? Any insight or links would be greatly appreciated! For now, I simply but in some conditional comments but this can't be a permanent fix!

<![if !IE]>You must use IE to view this<![endif]-->

I would look for generic JavaScript counters you could embed in a text/html module. — notandy, Oct 28 '10 at 20:00
Do you know of any off the top of your head? If not, I'll look around when I get to work tomorrow. Thanks for the tip! — D.R., Oct 29 '10 at 02:30

score 2 · Accepted Answer · answered Nov 03 '10 at 23:47

2

Create an HTML file on your local hard drive and put this in it. Then open it in your web browser. It will start incrementing a number. What you are looking for does not exist in DNN but it can be done with some simple Javascript. This should get you started.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">

var count=5;

$(document).ready(function(){

setTimeout('countit()',1000);

});



function countit()
{
  var startmoney = 10;

  var today=new Date();
  var startdate=new Date(2010, 10, 01);  //this is actually 11-1-2010 the 10 is 0 based so actually month 11
  var one_day=1000*60*60*24;
  var diff=Math.ceil((today.getTime()-startdate.getTime())/(one_day));
       //diff is the main factor which is the difference in days between startdate & today

   count=count*2;
   var newvalue=startmoney*count*diff;

  $("#mycounter").html(newvalue);

   setTimeout('countit()',1000);
}

</script>
</head>
<body
<div id="mycounter"></div>
</body>
</html>

answered Nov 03 '10 at 23:47

Ryan Doom

2,407
1
16
13

I like the idea, I can add it into a simple "iFrame" module in DNN. I'm sorting through this trying to determine what exactly I might need to modify. I understand one_day (24hrs*60mins*60seconds) and I assume the 1000 is the amount per second. I would assume January 1, 2010 would be Date(2010,0,01), but I am unclear on "count". Also, this method has given me an idea: Start and zero and in the matter of a second or two, "scroll" up rapidly to the current amount, then update once per second beyond that. I would greatly appreciate any further help! – D.R. Nov 04 '10 at 01:18
I am going to mark this as the correct answer already since I am almost certain I will be using this method. – D.R. Nov 04 '10 at 01:19
1

Count was just a global variable added to do some randomness/increments and make it count up. Rather than using days like I am using you may want to do seconds which you are correct regarding the 24 60 60, so if you have seconds then each time the setTimeout calls countit it would do some calculation based on the seconds and make your $ value higher. Instead of doing an Iframe you could just include the – Ryan Doom Nov 04 '10 at 01:50
Are you sure about using the Html module? I had issues before because anything that needs to be included in the section of an html page gets removed in the HTML module. I've been playing around with it so far and will post up what I have as soon as I finish it! Thanks immensely for your help! – D.R. Nov 04 '10 at 01:53
Also, how could I format the number as a current amount. As in $123,456 instead of $123456 – D.R. Nov 04 '10 at 02:02
2

Formatting Currency: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript That could should work in the HTML module. I actually go edit the settings for the HTML module and there is a header / footer spot in the settings. I put it in the footer. Putting it there then doesn't mess with the format. Don't include the line for the ajax.googleapi stuff. But since the other code is wrapped in that $(document).ready that will only execute once the page has fully rendered / loaded. – Ryan Doom Nov 04 '10 at 13:00
Thanks for all your help! I solved it by just using the ".toLocaleString()" on the newvalue. I've updated my main post with the final working code – D.R. Nov 04 '10 at 15:21
One last quick question, any ideas why it would NOT be formatting correctly on a Mac? (I've tried both Safari browser and Chrome on it). The number displays with no comma separation and 5+ decimal places. I'd imagine this might be an issue with jQuery (or Java in general) not being installed on the machine? – D.R. Nov 04 '10 at 18:51

Savings Counter Module for DotNetNuke?

1 Answers1