The code for all the following features can be viewed using your browser's standard developer tools. But for simplicity I've provided links to display the code in a new tab or window. Also, some of the code is minified and the links take you to more easily readable, unminified code.
These widgets were designed to be installed on any website (configurable by the site owner via their Kachingle account, to provide their site name and logo – in this case for my own blog, In Silico). They talk to the Kachingle server, and provide the user with status information and UI.
(Try mousing over the widget. Click "Explore more" to experiment with the UI. To view the full range of functionality, click "Sign Up" or "Join Kachingle" to get a free trial at kachingle.com. When you return, you'll be in a logged-in state and can turn "kachingling" on and off for this or other sites.)
The widget is displayed in an iframe, and the popup or overlay that appears on mouseover is in its own iframe. There are two separate pieces of JavaScript to control these:
Loaded into the host page, this code
Loaded into the overlay iframe itself (hosted at kachingle.com), this code
(Note, the markup and CSS was designed by somebody else; the JS was all mine, and I wrote the PHP/MySQL that provides the correct dynamic data.)
I conceived, designed, and built this add-on for Firefox, Chrome, Safari, and Internet Explorer browsers in order to solve a difficult problem at Kachingle: the chicken-and-egg problem of getting users to sign up though we had few participating sites, and getting sites to participate though we had few signed-up users. We were relying on sites to install the widget. KachingleX broke that impass by letting us install the widget for our users on any site without the site owner having to do anything.
To try it yourself:
Browser extension code. KachingleX consists of the following three scripts:
I've displayed the Chrome code here; each of the other browsers has its own version of the browser-specific parts. For Firefox and Safari there are similar JS scripts. In Internet Explorer, most of the IE-specific code is in a DLL written in C++.
This is a "speed learning" demo more than a demo of my JS prowess. I wrote this in early 2010 after exactly two days of exposure to JavaScript. This code shows the level of what I can produce in a language I've never seen before, after the most minimal start-up time. (View demo)