custom scrollbar

jScrollPane .. I've heard bad things about it.

fleXscroll .. I've used it, it's nice, but it's not free.

jsScrolling .. I haven't used it, but it looks nice and it's free.

Improved email validation, plus multiple emails validation

jQuery validation plugin .. was causing ff2 to choke. It also didn't have a multiple-email validator .. or a split-up phone validator -- although on that last one, I highly advise you push back - a phone # field should just be ONE INPUT.

	// http://docs.jquery.com/Plugins/Validation/Methods/email
	email: function(value, element) {
	// contributed by Dennis Hall
	// simplified enough for ff2 to not choke
	return this.optional(element) || /^\s*[^ <>]+@[^ <>]+\.[a-z]{2,9}\s*$/i.test(value);
	},
	email_multiple: function(value, element) {
	// contributed by Dennis Hall
	// simplified enough for ff2 to not choke
	var length = value.length,
	indexOfSeparator = -1,
	isValid = true;
	///
	for(var i=0;i<length;i++){
	var ch = value.charAt(i);
	if( ch == ',' || ch == ';' || i == length-1){
	isValid = isValid && /^\s*[^ <>]+@[^ <>]+\.[a-z]{2,9}\s*$/i.test(value.substring(indexOfSeparator+1, (i==length-1?length:i)));
	indexOfSeparator = i;
	}
	}
	return this.optional(element) || isValid;
	},
	phone3: function(value, element) {
	// contributed by Dennis Hall
	// first field must be of the form "<field name id>-1", and other 2 fields must be of the form "<field name id>-2", "<field name id>-3"
	var idBase = element.id.replace(/-1$/,''),
	values = [value, $('#'+idBase+'-2').val(), $('#'+idBase+'-3').val()],
	requiredLengths = [3,3,4];
	///
	for(var i=0;i<3;i++){
	if(!/^\d+$/.test(values[i]) || values[i].length != requiredLengths[i]){
	return false;
	}
	}
	return true;
	},

view raw old-email-validation.js hosted with ❤ by GitHub

The *real* way to disable text selection

I was recently asked by UX to make the text of my fancy custom dropdown selects unselectable. A lot of silly scripts out there that disable text selection are application-unfriendly. They go beyond unselectable and make the element totally non-interactive. But I still want the dropdown to work when you click it. Solution = css for the "good" browsers, and javascript for internet explorer.

CSS

.unselectable{
    -moz-user-select: none;
    -webkit-user-select: none;
}

JS

if(document.attachEvent){
    function returnFalseFn(){
        return false;
    }
    jQuery('.unselectable').each(function(){
        this.attachEvent('onselectstart', returnFalseFn);
    });
}