Parallax Scrolling

There are a million really good examples and tutorials for parallax stuff. I really like Skrollr.js

Thanks to ihatetomatoes.net for the demo on how to use Skrollr.

Here is some code for a single element parallax example. I left in some other classes and I am not including the styling for the element…figure that out yourself. In fact I found it easy to setup and get the div looking pretty THEN go back and add the parallax stuff.

Some Inline CSS. (Does not including non Skrollr Styling)

Javascript…this is literally all you need to use after including the script. (NOTE: If supporting IE < 9 make sure to get the skrollr.ie.js file as well.

A couple important notes:

1. I ended up needing to wrap the entire page in an element with an id of ‘skrollr-body’ in order for skrollr not to break on mobile. If you notice that the page doesn’t move at all on mobile you probably need to add this id somewhere.

2. iOS devices in particular DO NOT WORK with skrollr. This is because in order to save battery life iOS devices turn of Javascript when the page is scrolling…this makes parallax implementation impossible.

3. If your site is responsive or changes sizes for any reason make sure to include the forceHeight : false parameter when initializing skrollr or else you will end up with extra space at the bottom of your page.

Target Every Element…Except One

Sometimes I need to have an action, like closing/hiding a menu, that requires the ability to click anywhere but the div/menu itself in order to take an action. Here is a neat way I found to do such a thing. Thanks Sandeep!

You will of course have to edit this to work for your project.

Javascript Mobile Detection

Found on StackOverflow http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery#answer-3540295

Seems to work pretty well. Have not tested on all devices but does work for all Android and iOS devices I tested

Simple Fading Carousel

Usually I am using bootstrap and it’s carousel works pretty well but sometimes I don’t want or don’t have access to the bootstrap carousel. Here is a sample of a basic carousel I have used in a few places.

HTML + PHP

Javascript

LESS

So if you are just visiting and are trying to use this…good luck. I don’t really want to explain some of the functions or what is going on…thankfully I already know 🙂

 

Javascript Contains Prototype

I always hated using the indexof method to detect strings in javascript. I found a nice prototype method which makes these kinds of checks easier.

Returns true or false.

 

Loop Through Multiple File Mimetypes

I needed to check mimetypes to be sure the user knew right away if one of the files they wanted to upload was accepted. Here is (most of) the code I ended up using. You will need to edit to fit your needs.

Here is the HTML being used.

Check out how to get the WordPress mimetype array from PHP into Javascript here.