Javascript Limit Input

Often we need to prevent a user from using certain characters in inputs. Here is a brief snippet that seems to work pretty well for restricting a user’s input to 0-9 a-zA-Z. Also allows, returns, backspace and shift.

Also ended up making one for numbers / currency.


Zip Input


jQuery Sort Elements

A neat trick I have been using on a few of my more recent projects is the ability to sort elements on a page using jQuery. It is surprisingly simple when you think about how jQuery works. Since each element is just inside an an array ( $(‘.classes’) is actually an array to jQuery. ). So all we have to do is a standard sort using javascript.

Here I am using a data attribute (‘data-name’) to sort alphabetically. This also works for numbers.

In this instance I am first sorting by value and then by name. So if 2 elements had the same value it would sort them by name.

Another handy part of this is the reverse function.

Just add this function declaration anywhere jQuery is allowed and you can now reverse the order of the elements!

Here is a typical use for these functions.

There ya go! All you need to get started sorting elements with jQuery!

Feature Detection Touch events

A lot of people think that using the navigator agent to detect mobile / desktop is not correct. They swear by feature detection instead…and I suppose they have a point.

Here is a simple function which will allow touch events to work on both mobile and desktop devices.

Update: I recently found the above code not working as well as I wanted on some projects. I found another good way to use touchstart when available is like so:

Going forward I will use this.

jQuery Clear Form

Sometimes the HTML reset button isn’t going to work if you already have set the element defaults the reset will only set values back to default. This will blank your form.

Another function


PHP: Easy Carousel

Super easy carousel that doesn’t require bootstrap. This type of carousel is used when you need to display 2+ carousel items.

All that is required for this type of carousel is to add n items at the end of your carousel where n = numItems to show at once. Here is some example code:



One important note is that you need to have the callout container extending to a width wide enough to hold all callouts and then do an overflow hidden on the parent container to hide the overflow. That is somewhere in this code.


Now you should have a super simple IE8 compliant n carousel 🙂

Custom File Input Field

So we all know that every browser has their own way of displaying file fields and they all basically suck. Google is doing some neat things with their new Blink engine but unfortunately we cannot just develop for a single browser (someday…). Here is how I went about setting up a custom File Input Field with an image preview.

The end product looks something like this:
Screen Shot 2014-10-17 at 9.40.37 AM

First lets setup the HTML.

NOTE: This is only a part of the form. Remember, you will need to wrap this in a form tag with the enctype=“multipart/form-data” in order to work with files.

Couple things going on here. Take note that I am laying out a separate file field AND calling a different function when working with IE browsers. This means that this will not look or work quite the same in IE. The biggest difference being that no image preview will appear.

Now lets setup the Javascript functionality.

Hopefully none of this looks too strange. If you are at all familiar with jQuery and Javascript you should be able to figure out what is going on here. Notice that in the Non-IE MIME check there is a loop…that is because you COULD setup a multiple=”true” file input and it should still work more or less the same. However this exact code will not work with a multiple file field but it will get you 90% of the way there.

Lastly we are going to need some styling. Here is some LESS.

This less is taken out of context but it should be all you need.

NOTE: You will need to get your own cover image. I didn’t think it would be right to share mine but as you can see it can be anything you want.