Using jQuery to make your site more appealing.

On http://www.get2know.me we test every now and again the barrier for entry onto our site. At first our forms were clunky, required users to type their date of birth in manually and we would make sense of it using PHP’s strtotime() function and then we would validate it after that. Next we modified the date form to have a specific format ‘mm/dd/yyyy’ which was checked by a custom validation class, then Zend Framework’s default date validation class after a reworking. Finally I sat down and began pondering what would be the easiest way for a user to get onto our site and if I can apply that principle to one or more fields on our forms, there has to be a better way… The answer, jQuery. jQuery has slew of UI widgets available in their UI library that we have skinned and use repeatedly on the site. Instead of clunky drop downs or text areas that require some weird format we now have the Datepicker widget beautifully themed and it restricts the age of the person signing up with the service to match our TOS (still validated on the back end :) ). Secondly we have a zip code field on our form which if anyone has had to manage locations knows that this could be a PITA. Using jQuery’s auto complete functionality I now have users locked into our geolocation information with a nicely formated dropped down menu. Take a look at the images below demonstrating how forms should be built.

Scroll detection in browsers

The problem: Design a set of JavaScript functions that will work across browsers which will enable a form submit button after a element containing legal text has been fully read, i.e. scrolled to the bottom.

The solution:

<script type="text/javascript">
		$(function() {
		$('#long-text').scroll(function(e) {
			if(($(e.target).height() + e.target.scrollTop) == e.target.scrollHeight) {
				$('#submit').attr('disabled', false);
			}
		});
	});
</script>

Here is a working demonstration. This assumes that you utilize the jQuery library, otherwise there is not really a simple solution to detect scrolling at the DOM level.