Sebastian Brink has developed a nice looking gallery application called qGallery It is really simple to use you just have to upload your images in full resolution together with a simple xml file and include the script and a simple div into the webpage. Everything else is done automatically. The gallery is creating every used [...]
Charts, Design Elements, Prototype
ProtoChart
ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. Features * Line, bar, pie, curve, mix, and area charts available * Multiple data series on same graph * Legend support * Customizable grid, grid border, background * Customizable axis-tick values (both x and y)
Calendar, Date & Time, Design Elements, Prototype
Timeframe: Prototype date range component
Stephen Celis got tired of wiring together two date pickers for the common use case of grabbing a date range, so he created timeframe, which is “Click-draggable. Range-makeable. A better calendar.”
Design Elements, LightBox, Mootools
Milkbox - Lightbox for Mootools 1.2
Another lightbox clone, but this is written for Mootools 1.2.
Design Elements, LightBox, Prototype
Lightview 2: Not just images, now on Prototype
Lightview was built to change the way you overlay content on a website. * Clean: Designed to compliment your content. * Fast: Smart image preloading. * Easy to customize: You don’t even have to know CSS. * Rounded: Adjustable rounded corners, without PNGs. * Smart resizing: Content will always fit on your screen. * Custom [...]
Design Elements, Gallery, Prototype
ProtoFlow: Coverflow for Prototype
Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow.
Design Elements, jQuery, Menu
Accordion Menu script
A list based vertical menu with nested content that expand and contract when the user clicks on a menu header. Specify which menu headers are expandable, style the headers differently depending on whether its content is expanded or not, and specify whether persistence of the menu states within a browser session should be enabled. Clean [...]
Carousel, Design Elements, jQuery
Step Carousel Viewer
Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. Contents for the Step Carousel Viewer can be defined either directly inline on the page or [...]
Design Elements, Javascript, Sliders
Unobtrusive Slider Control V2
Whenever a slider has focus, the arrow keys ←, →, ↑ and ↓ can be used to control the slider handle, the Home key to set the slider at it’s minimum value and the End key to set the slider at it’s maximum value. The slider can be associated with both text input and select [...]
CSS Techniques, Rounded Corner
One pixel notched corners as used by Google Analytics
Google Analytics has an interesting characteristic at their left nav: instead of each option being boxed in a clickable rectangle, there is a one pixel notch in each corner. It’s not necessarily a curved corner, but it is a little softer than a normal box. Here is how to do it.
Design Elements, Javascript, Tables
Creating a table with dynamically highlighted columns
How to create a table like Crazy Egg’s pricing table on their Pricing & Signup page. This tutorial will show you how to recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.