CSS Javascripts Tips and Tricks

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Download Files  View Demo

Convert a Menu to a Dropdown

We'll create a dynamic menu that converts to a dropdown when viewed on a small screen.

Download Files  View Demo

Better Linkable Tabs

Each tab will have it's own URL for linkability and we'll solve a few common problems that come up.

Download Files  View Demo

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...

Download Files  View Demo

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.

Download Files  View Demo

Google Maps Slider

Roll over different locations and see the Google Map slide to center that location, as well as show a custom pin.

Download Files  View Demo

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]

Download Files  View Demo

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.

Download Files  View Demo

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.

Download Files  View Demo

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.

Download Files  View Demo

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.

Download Files  View Demo

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.

Download Files  View Demo