Formalize CSS - Teach your forms some manners!
One page website
Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery
jquery Scroll event in $(window), find out the position difference
Parallax Tutorials. Roundup from DesignFloat
The WOW effect is the very thing that can make the public interested in your online project. You can achieve this effect using parallax, for instance. Today’s roundup features Parallax Tutorials that can teach you how to create cool parallax effects using clear examples. Building a Parallax Scrolling Storytelling Framework jQuery Parallax Tutorial – Animated Header Background Create a Funky Parallax Background Effect with jQuery Create a Realistic Camera Move with Parallax Parallax Mapping Tutorial Parallax Scrolling Tutorial Parallax Slider with jQuery The Parallax Effects with jQuery Tutorial Awesome 3D Parallax Background Effect with jQuery Tutorial Parallax Serial Terminal
Learning from Twitter
An issue popped up on Twitter this past week that caused the web site to be generally unusable for many users. It appears as if attempts to scroll were unbearably slow and caused the site to be unresponsive. The Twitter team investigated and determined that if they reverted the version of jQuery that they used back to 1.4.2 from 1.4.4 the site would be responsive again. After more investigation they determined that the code that was slow was doing a contextual selector search for an item by class name, for example: $something.find(".class"). So – what happened? How did this come about? However, as with every performance change, while some things get way faster some things can also get slower. What’s interesting here is that we’ve been using querySelectorAll for our default selector engine in jQuery for quite some time now (doing $(‘.class’) would use querySelectorAll). This brings up the important point: Just how much faster is getElementsByClassName compared to querySelectorAll? So.
jQuery.parallax
Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
ColorBox
A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites. Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks Hey,
Masked Input Plugin
First, include the jQuery and masked input javascript files. Next, call the mask function for those items you wish to have masked. jQuery(function($){ $("#date").mask("99/99/9999"); $("#phone").mask("(999) 999-9999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999");}); Optionally, if you are not satisfied with the underscore ('_') character as a placeholder, you may pass an optional argument to the maskedinput method. Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method. You can now supply your own mask definitions. jQuery(function($){ $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999");}); You can have part of your mask be optional. jQuery(function($){ $("#phone").mask("(999) 999-9999? If your requirements aren't met by the predefined placeholders, you can always add your own. jQuery(function($){ $("#phone").mask("#hhhhhh");});
Redrawing Elycharts in a one document jQuery Mobile environment
Signature Pad · Thomas J Bradley
Download ZIP—GitHub Introduction The Signature Pad jQuery plugin will transform an HTML form into a signature pad. The Signature Pad has two modes: TypeIt and DrawIt. In TypeIt mode the user’s signature is automatically generated as HTML text, styled with @font-face, from the input field where they type their name. In DrawIt mode the user is able to draw their signature on the canvas element. The drawn signature is written out to a hidden input field as a JSON array using JSON.stringify(). Obviously, Signature Pad has a couple extra dependencies: Douglas Crockford’s json2.js and FlashCanvas 1.5. Signature Pad tries to maintain a certain level of progressive enhancement, while still giving developers enough control. Signature Pad works with both mouse and touch devices. Get the source code on GitHub: Demos Demo of accepting a signature—this demo showcases an HTML form and the Signature Pad ready to accept a new signature. How to Use the Plugin <?
Online JavaScript beautifier
