FlexNav - A jQuery Plugin for Responsive Menus
A Device-Agnostic Approach to Complex Site Navigation The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events with tap targets (the key feature of FlexNav). This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem.
Minimal setup for tabs
This page introduces you to the minimal setup for tabs. It's important to understand how this example works because it teaches you the theory behind tabs. Understanding this helps you to build any kind of tabs you want. Here is our example:
Roundabout for jQuery by Fred LeBlanc
It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results. Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.2). It works in all major modern browsers and even some of the older, not-so-modern ones.
slidr.js - add some slide effects.
Add as many Slidr's as you want - even place them within each other.Dynamic resizing - adapts to the size of its content, unless you don't want it to.Keyboard navigation - move your cursor on top of the demo below, and hit the arrow keys!Touch navigation (mobile) - change the slides below by swiping left, right, up or down! Include either slidr.js or slidr.min.js somewhere at the bottom of your html page, after the body content. slidr.js works on any inline, inline-block or block elements with an id defined. Valid slides include any first-level children elements with the data-slidr attribute set to some unique value within the parent scope. For example:
jQuery Fading Methods Example using fadeIn(), fadeOut() and fadeToggle()
Have you ever come across a situation where you had to fade in or fade out elements on a web page? I am sure you have and here in this article I’ll show you how to fade in hidden elements and later fade out elements using three jQuery methods such as fadeIn(), fadeOut() and fadeToggle(). Be careful while using these methods, as these are case sensitive. The first two methods that I’ll explain with examples are the fadeIn() and fadeOut() methods, followed by the fadeToggle() method. jQuery fadeIn() and fadeOut() Methods The jQuery fadeIn() method fades in all matched elements that you wish to explicitly define for fading in, using its unique id or a class.
ddSlick - a jQuery plugin for custom drop down with images
With traditional drop downs i.e. using <select><option></option></select> you are limited to only text and value. But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action.
jQuery Steps
Overview jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!
stickUp - a free jQuery Plugin
Setting up stickUp in Wordpress is a breeze. I am also working on development of a Wordpress Plugin version of stickUp, which will allow for an easy backend to work with and include many features. Its exactly the same as setting it up on any other website, but here are exact instructions for Wordpress users. First, you must download the stickUp javascript file 'stickUp.min.js' and place it in a directory called 'js' in your theme's directory. Create this directory if it doesn't already exist. You can get the file from our GitHub.
annyang! Easily add speech recognition to your site
Go ahead, try it… Say "Hello!" Annyang! Let's try something more interesting…
Flexible Nav jQuery library
Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page. Nav links are distributed proportionally to the page sections.
jQuery Local Storage done right (and easy)
By jared • January 3, 2012 This year we worked on a cool project (launching mid-2012) to help users plan their finances and retirement. The site involved lots of calculators to capture user data and return estimates for their mortgage, Social Security benefit and other factors they would need to help them plan.
6 jQuery growl-like notification systems
August 13th, 2009 - Frontend, jQuery Growl-like notifications seems to be a usable way to inform users about the status of their actions. There are many jQuery plugins that provide this kind of functionality and here’s a list of 6 growl-like notification scripts. 01. Achtung
jQuery Plugin – Increment ← Sean-O.com
jQuery Increment Plugin Inspired by this article on css-tricks.com, I decided to release a plugin dedicated solely to quick keyboard-based manipulation of numeric values in HTML input fields. It’s called Increment. Simply assign the set of inputs you wish to attach this behavior to:$('input.hours').increment(); And let your fingers do the walking: use the up arrow to increment values, down arrow to decrement.
