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.

Another, much simpler, way to limit currency is like so:

 

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.