Convert Form to JS Object

Every have a form you get the data from so you can manipulate it in JS? Good news! Dave over at Stack Overflow has the function for you!

Usage is as simple as:

var formObject= $(‘form’).serializeObject();
Requires jQuery

Remove / Defer jQuery

If you use the WordPress built in jQuery you might have noticed taking some hits on your pagespeed. Here are a couple functions to increase your pagespeed score while still keeping jQuery usable.

 

Skrollr Menu

In my last post I talked about extending the easing functionality of jQuery. Here is what I was using that easing for. My custom skrollr menu!

HTML / PHP

First we need to setup the menu itself. Here is a shortened version of what I did.

I am going to skip over the actual skrollr section code because that is a large chunk of code that will vary greatly for each project. I leave that part to you!

Javascript

Here is the code needed to make your skrollr menu work.

There we go! Surprisingly simple to setup your own skrollr menu!

65gpg_tr

Here is what the menu looks like when you are looking at the third section ( …sort of. I didn’t want to screen shot the entire project ).

Note: If you want to setup your own menu for skrollr you should also check out the skrollr menu plugin. It works pretty well, but I had more fun making my own.

Another Note: The ‘easeOutQuad’ function is not built into jQuery. You will need to get jQuery UI or add your own easing functionality to use non standard easing functions. See my previous post.

Extend jQuery Easing Functionality

I was recently implementing a skrollr page and was setting up a custom menu. I realized that most of the cool easing functions were not available with the standard jQuery install, and I didn’t want to include jQuery UI (or any of it’s pieces). I found a link on Stack Overflow which had a really nice easing extension for jQuery.

Easing Function

I actually cut out most of these easing functions when I put it in my own project, but I figured I would include the entire list function here.

Once you include this in your project and you connect it to your jQuery object you can use any of these easing functions normally.

 

Javascript Count Words

In case the title isn’t obvious, this is some Javascript code to count the words in a text area. I totally stole it from RezaSh on StackOverflow.

 

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