Filtered keystrokes with JavaScript

This small set of scripts should give you a starting point for filtering the valid input to certain form fields to ensure that you shouldn’t end up with input that you don’t want*.

Basically you’d have the following javascript functions defined:

function isNumber( evt ) {
	valid		= true;
	if( evt.which || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		if( charCode > 31 && ( charCode < 48 || charCode > 57 ) ) {
			valid	= false;
		}
	}
	return valid;
}

function isValidEmailCharacter( evt ) {
	valid	= true;
	if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		var char		= String.fromCharCode( charCode );
		var re			= new RegExp( /([0-9A-Za-z-_@.])/ );
		valid			= re.test( char );
	}
	return valid;
}

function isValidPhoneCharacter( evt ) {
	valid	= true;
	if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		var char		= String.fromCharCode( charCode );
		var re			= new RegExp( /([0-9+\s\[\]])/ );
		valid			= re.test( char );
	}
	return valid;
}

Read the rest of this entry »

Getting and Setting anchors with JavaScript

Something I’ve been playing with recently that’s not very well documented is using JavaScript to retrieve and to update the current page anchor from a URL.

It’s very simple to do. In order to retrieve the page anchor (i.e. get test from http://chris-miller.org/88#test:

var anchor = self.document.location.hash.substring( 1 );

Setting the anchor to update, for example to http://chris-miller.org/88#newAnchor it can be achived using:

self.document.location.hash = "newAnchor";

Very useful for creating permalinks to AJAX loaded content or JS popups.
- Chris

Fade between two divs using mootools

MooToolsI’ve been playing with mootools for a while, they’re very nice, making easy work of some nice visual tweens and effects.

One thing I was struggling a bit to do was fade between two divs, having the first one fade out then the second fade in. Rather than grabbing a plugin to do it I wanted a small bit of JavaScript I could embed in a page, I couldn’t find one anywhere.

It’s pretty simple to do, the code below should give you a starting point to set up some JS to fade between 2 or more divs.

function fadeBetweenDivs( div1, div2 ) {
	$$( div1 ).fade( "out" );
	(function(){
		$$( div1 ).setStyles({
			display:	'none',
			opacity:	0
		});
	}).delay( 150 );
	(function(){
		$( div2 ).setStyles({
			display:	'block',
			opacity:	0
		});
	}).delay( 150 );
	$$( div2 ).fade( "in" );
}

That is all,
- Chris

Sequel Pro: Manage MySQL Databases under Mac OS X

Sequel Pro Icon
I do a lot of web development; it’s my full time job, my hobby and a means to potentially earn some money on the side. I need a set of good tools in order to make aspects of the work easier or I’d spend my entire life at odds with what I do. A good Database Management System (DBMS) tool is one such tool since database management and manipulation plays such a large part of developing any content managed website, especially for quick modifications, testing and deployment.

MySQL is my DB of choice, due to working mainly on LAMP architecture systems. The best tool by far I’ve found for managing MySQL databases under Mac OS X is Sequel Pro (previously CocoaMySQL).

Read the rest of this entry »

Connectivity in Social Media

I’ve been playing around with various social media sites lately, trying to integrate them so my wealth of assorted knowledge gets to as many of the various places as possible. My Twitter feed now updates my Facebook and Linkedin statuses; Last.fm scrobbled tracks appear here in the sidebar and on Facebook; Flickr photos appear here as well as on Facebook.

This got me to thinking about the types of people I connect to on each of these social media networking sites. In my eyes this blog serves a different purpose and has a separate target audience to my Linkedin or Facebook profiles.

In light of this I’m giving a rundown of the groups and categories of people I connect to via each of these sites and their envisioned usage in my eyes.

Read the rest of this entry »