Upload Images Using JS

I recently needed to update a form to update through AJAX so the page didn’t reload when submitted. The issue was that we had some images on this form. In the past I have used things like plupload, but that didn’t seem like the right approach in this instance.

At first I looked into the “fetch” api and saw a good post from Tania Rascia, but unfortunately the fetch API still isn’t fully adopted…DAMN YOU MICROSOFT!

Thankfully I was able to find a jQuery version of this same idea over on Makeitweb.com by Yogesh Singh.

I also needed to make sure I sent along post data with the FormData to update the rest of the form. Here is an example of the JS code I ended up using:

On the server script you can access this data just like any other form submission.

PHP

There we go! Now we can submit our form, including images, to our server script!

NOTE: We are using a custom function to serialize our form data. You can find that function here.

Convert Form to JS Object

This function will take your entire HTML form and convert all the inputs into a single JS object! Thanks to Dave over at Stack Overflow!

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.