RPCSI had an extremely outdated website. Thanks to Jason Harrop (and the rest of the folks at Aptera Inc.), they now have a beautiful website design. I was the web developer on the project and had the opportunity to build out some special applications for them. One of their requests was a Loan Calculator. While looking around the web at other loan calculators, I decided I wasn't very impressed. When you click on that "Calculate" button, you want to see the numbers almost immediately. That is why I decided to AJAXify their calculator.
Optimized For: IE7, IE8, Firefox 2, Firefox 3
JQuery Dropdowns
I recently changed my preference of JavaScript libraries (Prototype -> JQuery). I was able to create quick & flexible dropdowns using JQuery's show and hide methods. JQuery also offers event listeners that only call the show/hide methods when an event has fired (mouseover & mouseout). The pages in the dropdown are added dynamically through MODx.
Non-Web Fonts
I often find myself having to develop sites that use fonts that are not web fonts. For example, the designer on this project decided to use Century Gothic for some of the headings within the site. A quick fix - Facelift Image Replacement. Using JavaScript and PHP, this library allows you to keep your site SEO Friendly while keeping the non-web fonts. It works by rendering the text into images after the page has loaded (only the text you specify).
AJAX Loan Calculator
This was a fun mini-application that I had the opportunity to build. The goal was to develop a loan calculator that would display a quick summary and a table of payments. I designed the application (using Photoshop) and then sliced out the images I needed. Using Prototype's AJAX methods, I called a PHP file (with the formulas) which returned the results.
This project could have easily been done all in Javascript but was required to keep the client-side code limited.