Here it is in action:

As you can see, it has selected all of the check boxes within the selected area. No need to hold any other buttons as it only works when you've dragged over the starting checkbox.

Click here to check it out.

Recently, I had the task of creating a simple form to be submitted to a specific department member here on campus. I felt this was a great opportunity to utilize jQuery and to see just how simple I could make adding new fields, since I wanted the form to be somewhat dynamic (adding/removing of inputs and such).

After trying a few methods here and there, I was able to utilize a few jQuery functions and a nice plugin (jquery-formatcurrency) to make everything work as desired.

Here is what I came up with:

$(document).ready(function(){
 
	var total = 0;
 
	$('.currency').blur(function()
	{
		total = 0;
 
		$('.add').each(function(i,obj){
			total += $(obj).val()*1;
		});
 
		$('.subtract').each(function(i,obj){
			total -= $(obj).val()*1;
		});
 
		$('#total').val(total);
 
		$('.currency').formatCurrency({symbol:''});
	});
 
});

What's neat about this method is that it handles everything on the blur (loss of focus) of any element with the 'currency' class applied. That means it won't do anything to the field while a person is typing in it -- annoying for some people -- it waits until the user moves on to the next field or away from the field altogether.

The really cool part of what happens first is the mathematical operation. Notice the similarity between the following methods:

$('.add').each(function(i,obj){
	total += $(obj).val()*1;
});
 
$('.subtract').each(function(i,obj){
	total -= $(obj).val()*1;
});

The first method looks at all elements with the 'add' class applied. The .each jQuery function cycles through each matched element and feeds two variables to the attached function: an incremented index and the object reference itself. This makes a tally extremely simple as jQuery will automagically cycle through all the elements you want to either add or subtract based on what class you have applied. The same applies to both classes and, of course, can be extended if you want to do more complex mathematics or formatting to your fields.

After these methods run, the total variable now holds the correct sum for all fields properly classed either 'add' or 'subtract.' This can now be applied to the input field with an id of 'total':

$('#total').val(total);

This will set the 'total' input field's value to the sum of the fields.

Lastly, it will format all fields to currency using the formatCurrency function:

$('.currency').formatCurrency({symbol:''});

Notice I specify here that I do not want any currency symbol (e.g. '$') as I specify that outside the field itself to display to the user.

Again, all of this happens every time a field gets updated and loses focus. So yes, it's magic.

Sweet Date

Sweet Date is a very straight-forward dating service web site. People sign up, browse and find people that interest them, and they can either send them an instant message or they can send them a message using the site's built-in mailing system.

As far as the look goes, I chose blue because I think it looks great and because I thought I'd try adhering to some standards for emotional targetting this time (e.g. Color Wheel Pro / Blue). Additionally, I'm taking my time with the feel of the site as I don't want it to have a "thrown-together" appearance. Instead, I want people to know intuitively how to use the web site and where to go if they need help.

The reason I'm able to pay attention to these elements is because I'm using Smarty Templating Engine again, which makes development go a lot faster. Now I can focus on jQuery and Photoshop.

While I'm very aware that dating web sites are a dime-a-dozen these days, I've always wanted to build one for several reasons:

1. Ads pay reasonably well
2. The structure is reasonably simple
3. I need more large-scale web sites on my resume

Although at the moment, the web site is currently being built, the basic frame is in place with the look & feel largely intact. Once registration is open, feel free to open an account but the site will be largely in beta until I feel it is relatively complete.

Sitdiary

Sitdiary started back in 2001 as a very simple idea: I wanted other people to be able to post blog entries about anything they wanted. What started as a small idea soon grew into a user-base of over 250,000, where at its peak had over 100 users online at any given time.

Time after time, the bandwidth wasn't enough for this "small" site and I was forced to continuously upgrade on a monthly basis. At one point, the cost became more than I could handle and that's when the popularity of the site started to take a downward turn.

As the site would be out of commission for days at a time, the user base soon dwindled down to around 50,000 and all of a sudden, bandwidth wasn't too much of an issue.

Of course, if I knew then what I know now, I would have done quite a few things differently. For one, I would've chosen a catchier name. Secondly, I would've added some serious caching to this site to reduce overall demand on files and database. Thirdly, I wouldn't have built the database in such a fashion. When I started building Sitdiary, I figured the best way to build the database would be to give each user their own tables for: entries (posts), comments and friends. While this might work well for a few thousand users, the method quickly degrades over time as it is an unnecessary waste of space. Fourthly, I would have added a payment plan for the really dedicated users to help pay for the bandwidth costs.

Since then, I've upgraded the database to a more standardized format and after testing the speed before and after, I can tell you that the standardized format is significantly faster. I've also added page caching using Smarty.

Overall, I'm glad Sitdiary is still running despite its bumpy and uncertain past.

Bill Manager

Bill Manager was initially built as a way to remind me to pay my own bills, but as I talked to other people I found that they were interested in such a service -- especially for free.

On top of reminders, the site also features a few informational articles, a series of tips on financial responsibility and calculators.

Currently, the site is still going an upgrade to facilitate multiple users but should be up shortly.

It should be noted that since this site was created, several others have popped up on the 'bill manager' search that do pretty much the same thing. This is no surprise, but I'm in the process of coming up with a killer feature to set it apart (if only temporarily).

The Weight Loss Tracker

The Weight Loss Tracker is exactly as its name implies: a weight loss tracker.

Users create an account and enter their weight loss goal and starting weight. Immediately, they can begin logging their weight on a daily basis. This way, they can see their progress over time.

Additionally, the site provides code that will allow the user to display a graphical ticker displaying their progress on their way to their weight loss goal.

This site was the result of a personal challenge I gave to myself: to create a simple, fully functioning website (with code documentation!) within ten hours. And actually I completed the site in about seven (7) hours and spent the rest of the time making the code and documentation prettier.

Blogflare.com

Blogflare.com, started in 2007, was made to allow blogs of all varieties to be ranked according to traffic and several other factors. In addition, they receive free traffic and better search engine rankings as a result.

The biggest challenge for a site like this is the ongoing calculation of traffic statistics. Version 1.0 of the website calculated statistics every hour on the hour, which seemed efficient at the time but drained resources, especially on a shared hosting environment.

Version 2.0 of the website changed things up a bit. After testing, I found it was best to calculate ranks every 5-10 minutes to keep the data load small and the impact on performance minimal during the update. The reason for this is that data isn't allowed to grow too large before being reset in that five minute window.

Of course, I've toyed with the idea of spacing the updates 30 seconds to one minute apart but at that point, the updates become noticeable.