Seeds to get you started
Downloads
- Grid Accordion
- A grid of cells expand both vertically (like a regular accordion) as well as horizontally to display the content they contain.
- 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...
- 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.
- 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.
- 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.
- 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]
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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