- FitVids.js
- A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
- Convert a Menu to a Dropdown
- We'll create a dynamic menu that converts to a dropdown when viewed on a small screen.
- Better Linkable Tabs
- Each tab will have it's own URL for linkability and we'll solve a few common problems that come up.
- Anything Slider
- jQuery-based slider with lots of features: hashtag linking to direct slides, "infinite" sliding, easing, dynamically built (any number of slides), multiple navigation systems, API, and more...
- Slide To Unlock
- Like the iPhone's homescreen, the slider must be dragged from left to right to unlock. That part works with JavaScript (even on mobile with touchevents!) but the coolest part is the moving gradient highlighted text. WebKit only.
- Download Files View Demo
- Organic Tabs
- Click the tabs to swap out content below, but the area fluidly adjusts in size to the new content, rather than jerk up or down.
- Google Maps Slider
- Roll over different locations and see the Google Map slide to center that location, as well as show a custom pin.
- jQuery Accordion Widget with CSS Sprites
- There are four buttons on this example, each of which has three states. That would normally be 12 images (thus 12 server requests), but thanks to the CSS sprites technique it is only one. The technique is demonstrated practically in the form of an accordion widget.
- Download Files View Demo
- Radio Buttons with 2-Way Exclusivity
- A group of radio buttons with horizontal exclusivity.
- Download Files View Demo
- Anything Zoomer
- A small area, a hidden large area, and a pop-up zoomer to "reveal" the larger area as your mouse scrolls over it. [jQuery plugin]
- Value Bubbles for Range Inputs
- Range inputs (by default) don't offer any user feedback of what their current value is, or their value as you move around the handle. This JavaScript adds a small output bubble above the handle to show that information.
- Middle Box Links
- Rolling over a widget darkens it and appends a link directly in the middle.
- Download Files View Demo
- Filtering Blocks
- Choose from a series of links to filter "results" below.
- Download Files View Demo
- Unique Twitter Updates Page
- Twitter provides a simple little javascript snippet for placing your recent tweets on any webpage. This is a little static webpage that makes use of that snippet and puts a unique design around it.
- Download Files View Demo
- Persistent Headers
- This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you've scrolled past that relevant section.
- Download Files View Demo
- Moving Boxes
- jQuery powered slider-thingy. Boxes slide by left and right by clicking the tabs, clicking the next box itself, or using the keyboard. They also "zoom" in and out.
- Download Files View Demo
- Grid Accordion
- A grid of cells expand both vertically (like a regular accordion) as well as horizontally to display the content they contain.
- Slot Machine Tabs
- Three columns in each content box rotate like a slot machine to reveal the content in the next content box when a new tab is clicked.
- MagicLine Navigation
- Slides a highlight (underline or background) to a new navigation item (and back) when they are hovered over. Optional color fading.
- Download Files View Demo
- Simple jQuery Dropdowns
- Very simple, minimally styled, jQuery powered dropdown menus. Cross browser friendly and maintains navigation "trail". Each "level" is clearly marked in the CSS.
- Download Files View Demo
- Auto-Playing Featured Content Slider
- This is an alteration based on the jQuery "Coda Slider" plugin. Each "slide" can be any kind of html content whatsoever, or be a full-size image with an overlay. Each slide also has a unique thumbnail which can be clicked to go to the corresponding slide, with an arrow above it to indicate the active panel. And... its auto-playing!
- Download Files View Demo
- View Source Button
- Using jQuery, Code Prettify, and CSS3 :target, we can make a button that pops up a nice looking view of the current pages source code.
- Circulate
- jQuery plugin to animate something in a circle.
- Download Files View Demo
- Custom Order Form
- jQuery is at it again handling all the calculations in this simple order form.
- Download Files View Demo
- Start/Stop Slider
- This is a jQuery based slider which auto-detects the number of "slides". There are multiple animations per slide, which auto-plays, but has a start/stop button. Very easy to adapt.
- Download Files View Demo
- Play Sound on :hover
- Play a sound when the mouse hovers over an element. Shows different techniques using jQuery and HTML5 audio.
- Download Files View Demo
- Your Own Social Home
- Many of the webs "social" sites offer up API's to get data out of them for use on your own sites. Sites like Flickr, Twitter, and ScrnShots offer up these API's in JSON format which makes it really easy for us to grab and display this information on any ol' static page. This example uses jQuery to grab and display the info. Should be fairly easy to alter to pull your own stuff.
- Download Files View Demo
- Photo Revealer
- A line of cropped photo thumbnails on a string. Clicking the "More Info" button expands the photograph to full size and reveals additional information about the photo. Photos are loaded on page load so there is no waiting after the click. Uses jQuery.
- Download Files View Demo
- Animated Knockout Letters
- Knockout letters animate themselves into place. Uses jQuery.
- Download Files View Demo
- Step-by-Step Seminar Registration
- As different "steps" of the registration process are completed, the current step gets check off as done and the next step lights up. Includes some very basic form validation.
- Download Files View Demo
- Indeterminate Checkboxes
- Checkboxes actually have three visual states: checked, unchecked, and indeterminate (even back to IE 6). The indeterminate state can only be set by JavaScript. This demo is of a set of nested checkboxes, a common use case for this third visual state.