//build array of times.
$times = array();
$time = strtotime("00:00:00");
$times["00:00:00"] = date("g:i a",$time);
for($i = 1;$i < 48;$i++) {
	$time = strtotime("+ 30 minutes",$time);
	$key = date("H:i:s",$time);
	$times[$key] = date("g:i a",$time);
}

To break it down, I set $time to start at Midnight or 00 Hours and then set my first $times array member to the lamens “12:00 am” using the date() function. Since there are 24 hours in a day I know there are 48 half hours in a day so I set my loop to run 48 times.

Lets break down the loop:

$time = strtotime("+ 30 minutes",$time);

This will add 30 minutes to the $time variable each time the loop runs.

$key = date("H:i:s",$time);

This sets $key to the military notation of the current $time (the why will become more obvious later).

Finally I set my next $times array member with:

$times[$key] = date("g:i a",$time);

Again the value of this member is set to the ordinary am/pm notation.

If you were to look at an array member in plain text it would look something like this:

$times["19:00:00"] = "7:00 pm";

Pretty simple, now just to display it. For my purposes I chose a select box.

<select class="required" name="CloseTime">
	<option value="">--Select--</option>
	<?php 
	foreach($times as $key => $value) {
	?>
	<option value='<?php echo $key; ?>'<?php if(isset($CloseTime) && $CloseTime == $key) echo " selected='selected'"?>><?php echo $value; ?></option>
	<?php
	}
	?>
</select>

Since I set up my $key as military notation I am able to use $key as the value of the <option>. I did this so I can easily put that value in the DB as a TIME and not have to worry about stripping the ” am” and ” pm”. Alternatively since $value was set up with am/pm notation it displays nicely to the user as 7:00 PM rather than 19:00 thus allowing regular Joe to keep his fingers in his nose rather than use them to figure out what time that is.

Yesterday I spent a good part of the day setting up the absolutely fantastic framework PhoneGap.  If you don’t know what PhoneGap is, and you are a web developer, you are truly missing out. The only thing I can compare it to (from a high level) is Adobe Air.  Air lets you build a page out of html, css, and js and then renders it in a webkit self-contained browser that you can then package up and distribute on any platform that runs air (Win/Mac/Linux), and yes you can also build Air apps with Flex and Flash.  PhoneGap is similar to Air as it too uses html, css, and js to build apps for Android, iOS, WebOS, Blackberry, Symbian, and Nokia.

Now don’t let my title fool you, there is a guide (and a pretty good one at that) waiting for you in the PhoneGap Wiki, the problem is that it is now out of date and will cause you grief if you try to follow a few of the steps because they look like they are the right steps to follow.  That’s why I’ve created this entry to walk you through the mistakes I blundered through to get it set up and working on my Windows 7 box (My mac died, and my linux lappy is a netbook – not ideal for developing on… plausible, but not ideal).

The Installation

If you point your browser toward phonegap.com you can grab the latest version of PhoneGap that is ready for the taking (note that the big download button in the top right will give you the master package, that is to say that you’ll get compiled versions of phone-gap for all devices.  If you GIT in, you can pick up just the resources for the device you want to develop for).  Also you should notice a large ‘Get Started’ button (click that open in a new tab).

Starting on the ‘Get Started’ page, go ahead and click on the ‘Android (Eclipse)’ link. This will drop you in the wiki for setting up Android development with PhoneGap. Please note that I am writing this for version 0.9.1, so by the time you find and read this, my guide may be well out of date.  Lets follow the listed steps (with my commentary)

- Install JDK 1.6 – Yep, totally accurate and awesome, do NOT download the JRE, make sure you get the JDK (you may also need to set up a JAVA_HOME system or user variable).

- Install Eclipse – This one is wicked straight forward. Just about any ‘brand’ of eclipse will do, if you can hit the update site to install ADT, you can use that version of eclipse.  For the fun of it I even managed to install ADT into IBM Rational Application Developer, but you may want to stick with the vanilla Galileo version of eclipse.

- Install the Android SDK – Another fairly straight forward piece.  Download the SDK, unpack it (to root), then open it and update any of the pieces you need (in my case, everything). Once you are finished, make sure you’ve added the SDK to your PATH, and crack open your freshly installed eclipse and install the ADT.

- Install Apache ANT – Go and grab the latest binary of Apache Ant. After grabbing the zip, uncompress it somewhere (root sounds good), and add that path (I used the bin folder instead of the unpacked root) to your system PATH.

- Install Ruby – This step was my first hang-up.  Since I am not a Ruby programmer, and where I work refers to Ruby as the devil, I have had no previous interaction with Ruby.  So do NOT follow the original Ruby download link, instead head over to the RubyInstaller. This will install Ruby into your system without having to grab extra dependencies and monkey with your path (it contains a code monkey that does that for you ). After you have installed Ruby, you are ready to attempt to install nokogiri.  Since I had never used Ruby and only knew of it as a mystical scripting language that does… uh… well… you can build things with it.  I had no idea what the line “install nokogiri via – gem install nokogiri’ meant.  So I cracked open my command line and typed ‘install nokogiri via – gem install nokogiri’, and of course nothing happened. What you really need to type is just:

gem install nokogiri

then wait 5-10 minutes as nokogiri is downloaded and installed (there I just saved you an hour of changing your PATH, cracking open .bat files and trying to ascertain what they are doing, and surfing Google to figure out why there doesn’t seem to be an ‘install’ or ‘via’ command in ruby).

-Install Git – There are plenty of ways to install git, you can use Cygwin (blech), or you can grab the nice msysgit program. Keep in mind that msysgit is in preview, so don’t expect a fully-functioning, never-crashing, awesome piece of awesomnicity. But it does work, and I’m a fan of it. After you get msysgit installed, remember to generate an SSH keypair! When following the SSH keypair link, don’t attempt it in command prompt, crack open ‘Git Bash’ from your start menu.

- Whew! Almost there! all that’s left is to make sure you installed ADT and the Android SDK correctly, so follow the hello world from either a book, online tutorial, or the official hello world from Google.

- Ok, here’s the second hang up, and quite the massive hang up it is.  The directions here say that you need to either roll with step 10a, or 10b.  10b says that it is the ‘old way’ and is what comes bundled in the “read me” for PhoneGap 0.9.1.  10a is an exercise in futility that will get you giving up and playing “The Force Unleashed” for 2 hours while you cool down by throwing storm troopers against the wall and stabbing the ones that lived with your light-saber. So just to be clear… SKIP 10A!

Lets do this instead, get your resources put into a folder, say “C:\www “. Make sure you include your icon.png file (if you don’t have one, borrow the one bundled with PhoneGap – phonegap/framework/res/drawable/icon.png).  For testing purposes, I copied the files from my phonegap/example folder to C:\www  (index.html, master.css, and phonegap.js). Now lets follow the readme and run:

ruby ./droidgap \\android-sdk-windows TestGap TestGap.com C:\\www C:\\phonegap\projects\TestGap

• Note that the double back-slashes were used because I’m running Windows 7 on my development box, if you are running a different version of windows, using the double backslashes will probably mess you up.

• If you received a ‘.’ is not recognized as an internal or external command, operable program or batch file. Then you left off “ruby” before “./droidgap”.  droidgap is a ruby script, and as such must be called from ruby, if you had ruby on and still got that error, then you don’t have ruby in your system PATH, add it and try again.  If you received any other error, you will need to correct what is broken (missing xml config, bad files, etc).

• Another thing to keep in mind, there are a few places (including the wiki) that will tell you that your local.properties file is hosed, and you’ll probably be confused because you DON’T HAVE ONE.  Don’t worry about it, that is a generated file, it doesn’t come pre-packaged, so don’t think your download is bad when you unpack the zip and it’s not there. When you run the droidgap script it will create one for you (populated off of the values entered when calling that script).

- Lets open your generated project! – Open Eclipse and File -> New -> Project. Then choose Android -> Android Project. Give your project a name, click the radio button for “Create project from existing source”, and browse to your generated project folder (if you followed what I typed that would be in C:\phonegap\projects\TestGap).  Next choose the API level (for information reguarding API levels, please consult the Android docs), and click  OK.

• Note that unless you modified your AndroidManifest.xml file, the default is ’2′. My projects (once created inEclipse) threw build errors until I had changed this to a higher level (I don’t remember if it was when I switched to 1.6, or 2.1, but I was playing with those two builds). Also remember that if you change the AndroidManifest.xml file, that you’ll need to right-click on your project and change the build target to match (well, you don’t have too, but you’ll get warnings and something that looks like an error but isn’t, so I’d say you *should* change the project build target to match).
• Don’t forget to add the phonegap.jar to your project. Expand the libs folder and then right-click on phonegap.jar and choose “BuildPath -> Add to Build Path”, if you do forget, you’ll get project errors and be unable to fix them.

Once you have the project imported/created and you are error-free, launch the app (either through the Android Emulator, or through your android phone/debugging hardware (I’m not providing the steps to setting that up, but if you have debugging hardware, you probably already know how to use it ). I tested both, and while the emulator did load it, since it was an emulator, it didn’t really work (hard to test an accelerometer from an emulator).  Testing on my HTC Hero though was pure beauty; geo-location worked, the beep button played my notification sound, and the accelerometer was returning good data, it was awesome!

Hopefully this will give you a good head-start into developing with PhoneGap in Windows for Android.  PhoneGap is awesome and I hope that it continues to grow, get better, and get used.  If you find it helpful, drop them a line, I know personally that they are very fast to contact and good to work with if you run into a problem.

Let me know if this entry needs any fixes, or images/screen captures to help you out with.

$("#selector").scroll(function() {
   var elem = $(this);
   var position = elem[0].scrollHeight - elem.scrollTop();
   if(position == $(elem).outerHeight())
      $(":button:contains('submit')").removeAttr("disable");
   else
      $(":button:contains('submit')").attr("disable","disable");
});

A few things to note:
the “elem[0]” that defines “var position” is significant for some reason, I tried it without the “[0]” and it broke, I’m not 100% sure why so if anyone wants to weigh in, that would be great. Secondly, it is good to keep in mind that the “disable” attr is not supported on IE7 and lower so in order to fix band-aid this I simply made the button look disabled by doing something like.

if(position == $(elem).outerHeight())
     $(":button:contains('submit')").css("cursor","pointer");
else
     $(":button:contains('submit')").css("cursor","text");

Ultimately this only fakes people out if they pay attention to their cursor, which is probably less than 50% of the time. so really the best way to do this i found is as follows:

$("#selector").scroll(function() {
   var elem = $(this);
   if(checkScrollTop(elem))
      $(":button:contains('submit')").css("cursor","pointer");
   else
      $(":button:contains('submit')").css("cursor","text");
});

Then I Have a function called checkScrollTop() which takes an argument.

function checkScrollTop(elem) {
   var position = elem[0].scrollHeight - elem.scrollTop();
   if(position == $(elem).outerHeight()) {
      return true;
   }
   return false;
}

And last but definatley not least, a click event on the button so we can catch those trying to cheat w/ IE7 and (gulp) below.

$(":button:contains('submit')").click(function() {
   var elem = $("#selector");
   if(checkScrollTop(elem))
      $('#step1_disable').hide();
   else
      alert("Please read the entire policy before clicking \"submit\"");
});

to break it down, the $(“#selector”).scroll function simply decorates the button, while the click event on the button determines if the user can continue, if not it pops an alert up telling them what they must do. both events use the checkScrollTop(elem) function which measures the position of the scroll-bar.
Happy Annoying people

-=HTML JS PHP ETC =-

http://www.noupe.com/ajax/30-fresh-ajax-tutorials-and-techniques.html – More Ajax tutorials (in case you forgot )

http://www.webconfs.com/15-minute-seo.php – seo checklist, shows some ranking weight numbers (looks like for google and bing mostly).

http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/ – Image preloading using css, javascript, or javascript (heh heh, I mean ajax)

http://www.dzinepress.com/2010/01/25-high-quality-premium-as-free-wordpress-themes/ – WordPress themes for everyone! quick don’t make your own, use these!

http://designreviver.com/general/the-best-google-chrome-extensions/ – mmmmm… Chrome links… I’ve been using chrome a lot more these days.

http://www.modernizr.com/ – Get your HTML5 and CSS3 on now dang it! Seriously though, pretty cool lib, it doesn’t add HTML5 or CSS3 to your browser, but lets you control the fail-over features.

http://devmoose.com/coding/20-htaccess-hacks-every-web-developer-should-know-about – love that htaccess file.

http://jilion.com/sublime/video – This was featured on ajaxian, but here is a nice html5 video player (that means webkit (and it’s variants) for now).  Looks pretty sweet

http://designreviver.com/tips/5-practical-ways-using-ajax/ – good list of resources that point out 5 great ways to incorporate a little ajaxery into your site.

http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-walker-from-star-wars-2.html – Grab a webkit browser and click the link, it’s time for some CSS3 animation, AT-AT style (funny that you could use jQuery to do this for the last couple of years, but nice to see CSS3 starting to make serious dents in flash and animation).

http://firefogg.org/ – Great plugin that lets you easily encode ogg theroa video files.

http://diveintohtml5.org/video.html – Encoding guide for HTML5 video. It’s an excerpt from a book, good reading though, shows fall-back support for IE with flowplayer.

http://camendesign.com/code/video_for_everybody – another take on html5 video, this time without javascript (although it does use conditional tagging… and plenty of it)

http://www.filamentgroup.com/lab/introducing_enhancejs_smarter_safer_apply_progressive_enhancement/ – a javascript framework that tests a browsers ability to handle new javascript and css features. Definetly not a bad idea.

http://www.lukew.com/ff/entry.asp?1007 – It’s all about conversion Change up your forms to increase your site conversion rates… Good read.

http://devsnippets.com/article/getting-started-with-codeigniter-and-how-to-create-all-those-great-apps.html – fantastic tutorial on getting started with CodeIgniter.

http://www.klauskomenda.com/code/javascript-programming-patterns/ – a nice read on different programming patterns in javascript (singleton in js? yeah, this covers that).

http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/ – CSS3 is hot, seriously, it makes everything just so nice.

http://slimstat.net/ – free live stats for your site (php & mysql)

http://samuli.hakoniemi.net/debugging-and-testing-in-internet-explorer-made-easy/ – great article on tools to use for IE development, and I was using most of them (which is sad because they really don’t stack up very well compared to say Firebug and the webkit inspector (Chrome and Safari), but it’s a great set of tools if you don’t have any at all

http://chrispederick.com/blog/web-developer-0-1-for-google-chrome/ – Chrome gets the Web Developer Tool Bar! yay! way to go Developer-Man!

http://speckyboy.com/2010/04/21/15-javascript-and-plugins-and-tutorials-for-adding-ratings/ – just like the link says, 15 links for plugins and tutorials on how to add a ratings system to your site.

http://ajaxian.com/archives/desktop-notifications-with-webkit – Webkit is winning over a little more each day…

http://www.noupe.com/tools/the-importance-of-cross-browser-compatibity-tips-and-resources.html – Good round up of toolsl to make sure your site renders correctly in different browsers

-= jQuery =-

http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/ – cross domain issues be gone! thanks to an almost-exploit with yahoo

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/ – Nettuts brings you the quick and dirty updates to what jQ 1.4 can do.

http://james.padolsey.com/javascript/jquery-lint/ – If you’ve used lint before, you know what this is, if you haven’t, prepare to get your feelings hurt.

http://speckyboy.com/2010/01/20/25-tutorials-and-resources-for-learning-jquery-ui/ – I haven’t used jQuery UI since it’s first version, but if I ever wanted to, here’s where I’d start learning to use it.

http://colorpowered.com/colorbox/ – lightbox with many good features (pre-loading, ajax, iframe, etc)

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/ – Unit testing js has never been so fun (well if you can call unit testing fun)

http://demos.usejquery.com/ketchup-plugin/ – nice form validation, simple, easy to customize, nice plug in.

http://pixelmatrixdesign.com/uniform/ – Lets you customize all form elements, and makes them look the same cross-browser

http://razorjack.net/quicksand/ – Effect transition library for jQuery.

http://code.google.com/p/jloader/ – This is a content pre-loader plugin for jQuery, rather than just pre-load images, it can work with a div, or the entire page.

http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2 – live and die are used slightly differently with the new delegate and undelegate commands

http://www.learningjquery.com/2010/03/detecting-ajax-events-on-the-server – a nice read on handing the returns or xhr’s

http://www.smashingmagazine.com/2010/03/12/45-fresh-useful-javascript-and-jquery-techniques-and-tools/ – The smashing list of jQ hotness for the last month.

http://www.1stwebdesigner.com/resources/top-jquery-chart-libraries-interactive-charts/ – 5 jQuery charting libs for your charting goodness, I’ve used at least two of them.

http://nivo.dev7studios.com/ – Easy awesome (with 9 transition effects) image slider powered by the one and only jQuery.

http://www.noupe.com/javascript/35-fresh-javascript-jquery-tools-and-resources.html – Round up of jQ goodies from Noupe.

http://www.jstorage.info/ – While not limited to jQuery (also works for prototype and moo), this is a good tool to enable html5 local storage, or if not available will default to the userData variable.

http://aext.net/2010/04/jquery-shadow-motion-effect/ – interesting idea using the standard animation package with jQ. The author is also hinting at releasing a plugin in the future.

http://css-tricks.com/resolution-specific-stylesheets/ – Good post on using a little jQ to change your style-sheet based on window size. And yes you could go fluid, but this is for MORE features, not the same thing in a smaller/bigger space

http://www.codenothing.com/archives/2010/8-jquery-micro-optimization-tips/ – some great tips to speed up your jQ.

-= Tools & Misc=-

http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/ – Firefox pluginery for color palatte grabbiness.

http://winebottler.kronenberg.org/ – Get yer winders apps running on your macapple.

http://getmediacore.com/ – jinzora may have met its match.

https://chrome.google.com/extensions/detail/idhfcdbheobinplaamokffboaccidbal – Resolution Test, if you’re using chrome to develop, here’s your window resize tool

https://chrome.google.com/extensions/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi – Pendule is a Chrome extension that allows you to do various tasks that the Developer Toolbar in Firefox lets you do.

http://code.google.com/webtoolkit/speedtracer/ – This is a Google developed tool for Chrome that helps you speed up your site (js, css, layout, dom execution, dom handling, ajax, etc). For windows and linux, you just start chrome with an option, mac users get to install a little somethin’ somethin’.

http://www.drumbot.com/ – Tools for musicians

http://lifehacker.com/5484934/run-your-own-free-proxy-through-the-google-app-engine – free proxy is good…

http://dimdim.com/ – Wicked easy, and free screen-sharing/meeting from your browser.  Works pretty well too.

http://bigbluebutton.org/ – if you happen to have an ubuntu server just sitting about you can use this to set up your own video conference sessions (or meetings with desktop sharing, file sharing etc.)

http://matthiasschuetz.com/pixelzoomer/ – cool plug in for Firefox to help you steal, I mean acquire those hard to find colors and measure space for accurate rerepresentation.

http://speckyboy.com/2010/04/12/mobile-web-and-app-development-testing-and-emulation-tools/ – great list of emulators for mobile development

http://lifehacker.com/5515093/qsynergy-makes-multi+system-control-easier-and-prettier – I used to use Synergy all the time, it’s great to hear that someone has given the interface a good look and control.

http://mariocrossover.com/ – wow… best flashy app ever… EVER I SAY!

http://www.webresourcesdepot.com/open-source-media-framework-from-adobe/ – Adobe, open-source media goodness.  Sure I haven’t checked it out yet, but I will…. soon

-= Images & Fonts =-

http://www.webresourcesdepot.com/12-amazing-and-free-stock-photo-resources/ – the link name says it all, a round up of free stock image resources.

http://speckyboy.com/2010/01/13/50-photoshop-brush-collections-1000s-of-brushes/ – Holy brushes batman!

http://www.junauza.com/2010/01/20-more-awesome-gimp-brush-sets.html – Yay for gimp brushes (and sorry to those who can’t hit deviantart due to a freakishly restrictive opendns setting and/or proxy)

http://designreviver.com/freebies/50-free-dark-grungy-fonts-and-textures/ – Some of the fonts I’ve linked to before, but it’s always nice to group your grunge.

http://www.noupe.com/freebie/free-grunge-styles-and-resources.html – Some nice grunge styles for the photoshoppers in our audience.

http://www.texturepalace.com/ – Lots and lots and lots of textures

http://speckyboy.com/2010/02/22/a-round-up-of-50-fresh-photoshop-tutorials-and-techniques/ – Nice photoshop tutorial list

http://www.iconfinder.net/free_icons – something like 10k free icons for the taking

http://www.noupe.com/tutorial/40-outstanding-photo-manipulation-tutorials.html – a round up of photo manipulation tutorials

http://speckyboy.com/2010/03/08/14-free-mobile-app-development-icon-sets/ – free icons for the next time you make a mobile app

http://365psd.com/day/23/ – a free psd every day of the year… could be meh, could be great, time will tell right?

http://webdesignledger.com/freebies/the-best-e-commerce-icons-all-in-one-place – Yep, just what the link says.

http://pc.de/icons/ – 4 free icon sets. Yay for free!

http://findicons.com/ – an icon search engine.

http://www.webdesignerdepot.com/2010/03/techniques-for-squeezing-images-for-all-they%e2%80%99re-worth/ – fantastic article on how to maximize your image squeezery.

http://www.noupe.com/fonts/10-free-beautiful-calligraphic-fonts.html – Get your calligraphy on with these free* fonts (*always check the free, cos sometimes free is personal use only).

http://www.webdesignerwall.com/general/30-free-fonts-for-creative-projects/ – more font round up, yes they include some fonts that have been listed before, but I think I saw a few new ones in there too.

http://www.browsercover.com/ – while the layout sucks, the site is pretty cool, upload an image and have it place a browser around it

http://www.smashingmagazine.com/2010/04/15/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources/ – huge icon set, plenty of goodness for whatever you are working on.

-= Mac =-

http://devsnippets.com/article/20-new-extremely-useful-mac-apps-for-designers.html – Mac users, I haven’t forgotten about you, here’s another list of utils you can use when you develop.

That should keep you busy for a while, hopefully long enough for me to get next months LinkPost ready to go.  As always, corrections, concerns, and the like are appreciated in the comments.

I wanted my forwarding to actually redirect to a new action so that the decorator would be applied to the new action instead of the current one, so I tried this approach:

forward = mapping.findForward("blahblah");
forward.setRedirect(true);

This doesn’t work.  The reason is because the forward that you are using is defined in the struts config file, so you are attempting to modify an existing forward. This is not what you want to do because it will affect ALL future uses of that forward, hence the error. Here is the correct way to accomplish this:

forward = new ActionForward(mapping.findForward("blahblah"));
forward.setRedirect(true);

UPDATE: An astute reader pointed out that this is probably only an issue if you haven’t set redirect=”true” in your struts config, and that you should always set redirect to true if you are forwarding to another action anyway. Good catch Casey!

$("#searchForm").submit(function() {
	//the regular expressions in this function are not meant for validation as much as determining which value to search by.
	var submitted_appid = $(".search input[name=AppID]").val();
 
	if(/^[\d]+$/.test(submitted_appid) == true) {
		//do nothing since the input is already properly named
	} else if(/^[\d-]+$/.test(submitted_appid) == true) {
		//change name of input to SSN
		$(".search input[name=AppID]").attr("name","SSN");
	} else if(/^[A-Za-z]+$/.test(submitted_appid) == true) {
		//change name of input to LastName
		$(".search input[name=AppID]").attr("name","LastName");
	} else {
		//no match, alert the rep and return false
		alert("invalid search value:\nfor SSN please use numbers and at least one dash '-'\n for LastName use only letters\n for AppID use only numbers")
		return false;
	}
	//there was a match add an action and submit the form.
	$(this).attr("action",'search.php');
	$(this).submit();
});

The HTML

<div class="search">
    <form id="searchForm" name="searchForm" method="post" action="">
	<input type="text" name="AppID" value="Search..." />
    </form>
</div>

Then your search app would do something like the following

if(isset($_POST['AppID']) {
     //enter sql code here
} else if(isset($_POST['SSN']) {
    //enter sql code here
} else if(isset($_POST['LastName']) {
   //enter sql code here
}

Basically the jQuery decides what to search on based on the characters in the input field, if the wrong mix of characters is present then we fire off an alert message notifying the irresponsible party and correcting their ignorant ways.

below is what I came up with:

/* -- jQuery Colourific */
/* -- v 1.0 - January 2008 */
/* -- by ben watts (http://www.benwatts.ca/sandbox/jquery-colourific/) */
 
//$(document).ready
$(function(){
	setupColourific();
});
 
// setupColourific
function setupColourific(){
	var elements = new Array();
	elements[0] = $("td.Upload"); // the element that's changing
	elements[1] = $("td.Notes");
	elements[2] = $("td.LoanTitle");
	elements[3] = $("td.hdr");
	elements[4] = $("body#body");
	for(i = 0; i < elements.length; i++){
		changeColour(elements[i]);
	}
	window.setInterval( function(){changeColour(elements[0]);}, 1000);
	window.setInterval( function(){changeColour(elements[1]);}, 1500);
	window.setInterval( function(){changeColour(elements[2]);}, 2000);
	window.setInterval( function(){changeColour(elements[3]);}, 2500);
	window.setInterval( function(){changeColour(elements[4]);}, 3000);
 }
 
// changeColour
function changeColour(e){
 
	// random values between 0 and 255, these are the 3 colour values
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
 
	// puts the hex value inside this element (e is a jquery object)
	//e.text(getHex(r,g,b)); 
 
	// change the text colour of this element
	e.css("background-color", getHex(r,g,b)).fadeIn();
 
}
 
// intToHex()
function intToHex(n){
	n = n.toString(16);
	// eg: #0099ff. without this check, it would output #099ff
	if( n.length < 2)
		n = "0"+n;
	return n;
}
 
// getHex()
// shorter code for outputing the whole hex value
function getHex(r, g, b){
	return '#'+intToHex(r)+intToHex(g)+intToHex(b);
}

Obviously you’ll need to change the selectors to something relevant for your purposes. It’s probably not something you want to use on a regular basis but would make a great april fools day joke, or if you feel like a ceasure go ahead and mess with the time interval.

I can’t take full credit for this script, the original can be found at This site

more to come soon.