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:

PHP

Javascript

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.

CSS

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.

Custom Post Creation Form

In my last post I put up some code for displaying a CPT as a “Pinterest type” wall using Wookmark. In this post I am going to put some code for creating a form for uploading a new post from an anonymous user.

Once finished it should look something like this (client name censored):
Screen-Shot-2014-10-17-at-9.25.39-AM

NOTE: Will look slightly different in IE8 but is still fully functional.

Because we are actually doing the validation ourselves for this instead of relying on a plugin like gravity forms I am just going to paste the entire page code so you can see it from top to bottom. I think it would be a little confusing broken up.

While I do include both javascript and PHP validation here please remember that there are a lot of smart assholes out there who may want to wreck your shit for no reason. Make sure you test the validation so it meets your standards.

Also, there are a couple javascript functions here and they are doing different things. If you read the function names and the comments it should be obvious what each part is doing. I included the needed code for <noscript> in case the user has disabled javascript since otherwise the form would not be functional.

Let me also draw your attention to the dropdown menu and the “Share an Image” section. The dropdown is a custom dropdown menu controlled with javascript. The “Share an Image” section is actually pretty neat and I am going to make a post explaining that by itself.

Screen Shot 2014-10-17 at 9.37.44 AM

There is a whole lot going on here and since this is not a tutorial site I am not going to walk you through it but hopefully it all makes sense.

We do have one more step to do of course. We need some Style. Here is some LESS

Notice I am setting some fonts to Futura. This is a font I have in my assets folder at the web root. You will probably have to figure out what to do with the fonts. I would check out Google Fonts which is what I normally use on my sites.

Hopefully this post can help you setup your own form for allowing users to upload their own content.