Solved

Javascript Counter Like Google's Space counter or Walmarts Savings counter

Posted on 2008-10-06
8
504 Views
Last Modified: 2012-05-05
Hello Experts, I'm looking for a code snippet of a Javascript counter similar to Google's "Lots of Space" counter found on their mail home page or similar to Walmart's American Savings counter found on their homepage. Both are rolling counters. In the Walmart example it shows how many dollars they've saved american families. (See attached image of Walmart example).

I need a counter that will count how much my company donated to charity. So similar to the attached jpg file, it would display the rolling dollar amount donated.

Can you please provide me with the code that would adequately solve this problem?

I'm currently employing php and mysql. Its safe to assume the sum total contributed will come from a mysql table and the browser will reflect an incrementing counter.
wlmrt-cntr.jpg
0
Comment
Question by:aristanoble
  • 2
  • 2
  • 2
8 Comments
 
LVL 8

Expert Comment

by:MatthiasVance
Comment Utility
You would need to use a timer and the XmlHttpRequest to query a php page which would contact your mysql database to retrieve a total and then let the javascript update your content accordingly.

More information about the XmlHttpRequest can be found here:
http://developer.apple.com/internet/webcontent/xmlhttpreq.html
http://www.w3schools.com/XML/xml_http.asp

If you need more help, just post a reply and I'll provide some sample code.

Kind regards,

Matthias Vance
0
 
LVL 27

Expert Comment

by:ddrudik
Comment Utility
It appears that Google's counter is just a JS estimation of the storage over time based on the current date/time, view their page source for the code used.
0
 
LVL 27

Expert Comment

by:ddrudik
Comment Utility
Walmart's site has a careful disclaimer with their savings counter, I would suspect it is also just an estimation based on current date/time.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 1

Author Comment

by:aristanoble
Comment Utility
Yes Matthais I would need a bit more help. Viewing the Google source code only reminded my how I never understood Japanese (it was all foreign to me). I'm totally a beginner in javascript, even more so with Ajax, but it's important that I utilize this display method, albeit estimation values. I would greatly appreciate the code please.
0
 
LVL 8

Accepted Solution

by:
MatthiasVance earned 375 total points
Comment Utility
At the moment I don't have many time explaining the code, I'll be back in my office in 2 days.
I hope this assists you in the meantime.

Note: The code is kind of IE7-specific and doesn't contain any error checking.

Kind regards,

Matthias Vance
// counter.php

<div id="counter">0</div>
 

<script language="JavaScript">

	// Load data for the first time

	refreshCounter();

	

	function refreshCounter() {

		var req = new XMLHttpRequest();

		req.onreadystatechange=function() {

			if(req.readyState == 4 && req.status == 200) {

				var elem = document.getElementById('counter');

				elem.innerHTML = req.responseText;

			}

		}

		req.open("GET","http://localhost/test/counter_get.php",true);

		req.send(null);

		

		// Set timer again

		setTimeout("refreshCounter()",1000);

	}

</script>
 

// counter_get.php

<?php

	$connection = mysql_connect("<host>", "<user>", "<pass>");

	mysql_select_db("<db>");

	$result = mysql_query("SELECT SUM(amount) FROM march;", $connection);

	$value = mysql_result($result, 0);

	echo $value;

?>

Open in new window

0
 
LVL 1

Author Comment

by:aristanoble
Comment Utility
Now is it IE-7 specific due to the use of 'XMLHttpRequest'; I've been reading that different browsers require different request methods, the solutions for that look simple enough to implement. I'll get working on that and post my results.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
echo button 13 45
PHP Sum Column in Table 3 25
JavaScript Scope issue 4 15
Remove Protocol if at start of string? 3 11
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now