As the Web grows and becomes more dynamic, more and more websites have user-generated content and tools that greatly improve the user experience in terms of usability and accessibility.
1. Calendars and Timelines: Examples and Demos Link
Create astonishing iCal-like calendars with jQuery
Similar to the iPhone Calendar application, with event description that shows up on mouse hover. The trickiest part is making your images seamless and using a single image for all the graphics whenever possible to decrease download time. Check out the demo here.
This element enables you to pick dates with a simple slider bar. By dragging the bar over the timeline, the dates change instantly. And when the user decides to manually change dates, the bar is automatically adjusted to the corresponding dates. Check out the demo here9.
Elegant animated weekly timeline11
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, that you can customize and reuse quickly in your Web projects. Check out the demo here12.
Unobtrusive datePicker widget
Date Picker jQuery plug-in allows users to select a date or range of dates easily. It includes a lot of options: multiple calendars; single, multiple and range selection; marking of special, weekend and special dates; an easy-to-customize look via CSS; custom day to start the week, a fit with the viewport.
2. Navigation Examples and Demos Link
Create a simple, powerful product highlighter with MooTools21
The Accordion widget and its InfoPanel are components that use the Ext JS Library24. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
jQuery ListNav Plug-In25
This jQuery plug-in provides an easy way to unobtrusively add a letter-based navigation widget to any <ul> or <ol> list. An easily stylable (via CSS) nav bar appears above the list, showing the letters A through Z. Clicking one of the letters filters the list to show only the items starting with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items are contained in that list. Check out the demo here26.
3. Tool Tip Examples and Demos Link
Duplicate the jQuery home page tool tips using MooTools28
The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools.
Coda pop-up bubbles
Re-create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image.
4. Menu Examples and Demos Link
Fading Menu – Replacing Content35
The example page below has three menu items for three content areas: “Home,” “About” and “Contact.” When a menu item is selected, its menu graphic is shown at full opacity and its corresponding content area is shown, while the other menu items are faded and their content areas hidden. With jQuery, you can fade in the menu item being clicked, fade out all other menu items, display the corresponding content area and hide all other content areas. Check out the demo here36.
jQuery Context Menu plug-in38
jQuery Context Menu is a context menu plug-in for jQuery. It is designed to make implementing context menu functionality easy, and it requires minimal effort to configure. Check out the demo here.
e24TabMenu – AJAX drop-down tab menu
e24TabMenu is a plug-in written for script.aculo.us. It is a tab menu that expands and collapses smoothly. Check out the demo here.
5. Slider Examples and Demos Link
Ultra-versatile slider for websites46
A simple step-by-step tutorial for implementing an ultra-versatile slider with horizontal scrolling and animated effects using MooTools. Check out the demo here47.
6. Slideshow Examples and Demos Link
Easy Slider enables images or any content to slide horizontally or vertically on click. Features include: auto-slide, continuous sliding, “Go to first” and “Go to last” buttons, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page. Check out the demo here54.
Supersized – full-screen background/slideshow jQuery plug-in56
Supersized is a jQuery plug-in that automatically resizes (background) images to the size of the browser and runs them as a slideshow. It is lightweight and plays nice with all browsers. Check out the demo here57.
Prototype Carousel with script.aculo.us 65
A Prototype-based carousel that allows for n-item paging. Items within the carousel can be extracted from the HTML itself and so can be indexed by search engines. It also allows for vertical, horizontal and grouped paging. Check out the demo here66.
7. Image Cropping Examples and Demos Link
This simple tool gives your users the ability to create a selection area that can be used to crop an image live on your website. You can set a minimum size for the selection, real-time preview, support for HTML resizing, on and off toggles, CSS styling and more.
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
8. Image Previewing Examples and Demos Link
The imgPreview plug-in allows users to preview an image before clicking it and preloads the image so that when a user does click it there is no waiting time. The image preview displays in a tool tip-like box on hover. Check out the demo here75.
FancyZoom meets Prototype
Orderedlist rewrote FancyZoom77 in Prototype with some small changes. It now uses Apple’s rounded corners78 and supports pretty much any HTML you can throw in a <div> (images, text, Flash, etc.). It was built using Prototype and script.aculo.us; AJAX was not used, so it now works with any HTML already included on the page. Check out the demo here.
A fully featured demo showing the power of the Dojo toolkit. The markup is valid, with two external “script” tags that load progressive enhancements to an otherwise plain list of anchors and thumbnails. Check out the demo here79.
9. File Upload Examples and Demos Link
FancyUpload is a file-input replacement tool that features an unobtrusive multiple-file selection menu and queued upload, with an animated progress bar. It is easy to set up, server-independent and completely styleable via CSS and XHTML. It uses MooTools, so it works in all modern browsers. Check out the demo here84.
The Extension:UploadForm is an Ext.form.BasicForm extension that allows you to easily upload multiple files to a server. The files are added to a queue first and then uploaded to the server. Check out the demo here.
10. Auto-Complete Examples and Demos Link
Proto! Textbox list meets auto-completion
11. Lightbox Examples and Demos Link
Lightview was built to change the way you overlay content on a website. Designed to complement your content, it has the following features: smart image preloading, customization without CSS, adjustable rounded corners, no PNG required, resizing to always fit the screen and one-click slideshow.
A jQuery Lightbox clone with some great features: automatic resizing to fit large images in the window; a nice drop shadow under zoomed items; grouping of related items with navigation; inline and iframe content displays; customization through settings and CSS.
A Lightbox clone that renders to many media formats correctly, with some nice animation effects.
12. Form Examples and Demos Link
FancyForm is a powerful checkbox-replacement script that provides ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supported browsers.
Changing form input styles on focus with jQuery102
This tutorial will help spice up your form with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery. Check out the demo here103.
Using input values as hints110
Give users hints on what to input in textfields. Each field auto-clears when the user clicks or tabs to it. If nothing is entered, the hint reappears once the user moves away.
Custom Form Elements112
This script enhances form elements including checkboxes, radio buttons, file upload, textfield, textarea, images and the select, submit and reset buttons. Check out the demo here113.
13. Table Examples and Demos Link
Built in MooTools, TableGear gets your data onto a Web page. It handles submitted data both from AJAX calls and a standard post, and it returns data to the application. Check out the demo here.
14. Worth Checking Out: Examples and Demos Link
Instead of using images or Flash to show your website’s text in the font you want, you can use typeface.js and just write in plain HTML and CSS, as if your visitors had the font installed locally.
Building an interactive map with jQuery instead of Flash129
This map was made to be as engaging as possible by using smooth animations and crisp graphics. Check out the final map here130.
jQuery Fade In.Fade Out
This effect fades an element to 30% upon page load, then brings it to full opacity when hovered over. The effect can be assigned to virtually anything on a website, whether an image, text, link or even a div. Check out the demo here.
Morph effect on mouseenter/mouseleave134
In this tutorial, you’ll see how to add some amazing effects to an unordered list on mouseover with the element Method: morph and how to make a whole list item region clickable with Mootools 1.2. The goal is to turn a boring unordered list into something fun to click on. Check out the demo here135.
This is a customizable, editable jQuery plug-in. Currently, it can convert any tag (span, div, p, etc.) to text input, password, textarea or drop-down list. You can easily extend it by adding your own input type using the “editableFactory” object.
15. AJAX Examples and Demos Link
AJAX username availability checker using MooTools 137
Why make users submit forms when you can use AJAX to let them know right away if their chosen usernames are available? Here’s how to implement a username availability checker using MooTools 1.2. Check out the demo here138.
Ajaxify is a jQuery plug-in that can convert all links on a Web page into an AJAX load and submit requests. Check out the demo here.
AJAX file upload
This plug-in, for both jQuery and Prototype, allows users to easily upload multiple files without having to refresh the page. And any element can be used to open the file selection window. Check out the demo here.
AJAX page loads using MooTools Fx.Explode139
A nice MooTools effect: click on any Fx.Explode140 element, and it “explodes” off the screen. Click it again, and it magically reappears. Check out the demo here141.
Animated AJAX Record Deletion Using MooTools143
- 1 http://jquery.com
- 2 http://mootools.net/
- 3 http://www.prototypejs.org
- 4 http://script.aculo.us/
- 5 http://stephencelis.com/projects/timeframe
- 6 http://stephencelis.com/projects/timeframe#example_information
- 7 http://stephencelis.com/projects/timeframe
- 8 http://dateslider.googlecode.com/
- 9 http://ajaxorized.com/dateslider/v1.3/example1.html
- 10 http://dateslider.googlecode.com/
- 11 http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
- 12 http://woorktuts.110mb.com/weeklytimeline/timeline.html
- 13 http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
- 14 http://www.eyecon.ro/datepicker/
- 15 http://www.eyecon.ro/datepicker/
- 16 http://tobielangel.com/examples/auto-scrolling-page-navigation
- 17 http://tobielangel.com/examples/auto-scrolling-page-navigation
- 18 http://tobielangel.com/examples/auto-scrolling-page-navigation
- 21 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
- 22 http://nettuts.s3.amazonaws.com/022_Mootools/example.html
- 23 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
- 24 http://www.extjs.com/
- 25 http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
- 26 http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx
- 27 http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
- 28 http://davidwalsh.name/jquery-homepage-mootools
- 29 http://davidwalsh.name/jquery-homepage-mootools
- 30 http://www.nickstakenburg.com/projects/prototip2/
- 31 http://www.nickstakenburg.com/projects/prototip2/
- 32 http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
- 33 http://buildinternet.com/live/smoothmenu/animated-menu.html
- 34 http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
- 35 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
- 36 http://css-tricks.com/examples/MenuFader/
- 37 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
- 38 http://abeautifulsite.net/notebook/80
- 39 http://abeautifulsite.net/notebook/80
- 40 http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/
- 41 http://developer.expressionz.in/downloads/mootools_double_pinned_slider_with_clipped_gutter_image_v2.2/slider_using_mootols_1.2.html
- 42 http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/
- 43 http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/
- 44 http://www.solutoire.com/experiments/scrollbar/index.html
- 45 http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/
- 46 http://woork.blogspot.com/2009/01/ultra-versatile-slider-for-websites.html
- 47 http://woorktuts.110mb.com/art_of_reuse_code/index4.html
- 48 http://woork.blogspot.com/2009/01/ultra-versatile-slider-for-websites.html
- 49 http://og5.net/christoph/article/A_better_Pagination
- 50 http://og5.net/christoph/Scripts/Pagination/index.php?start=10
- 51 http://og5.net/christoph/article/A_better_Pagination
- 52 http://www.efectorelativo.net/laboratory/noobSlide/
- 53 http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
- 54 http://cssglobe.com/lab/easyslider1.5/05.html
- 55 http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
- 56 http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
- 57 http://buildinternet.com/live/supersized/
- 58 http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
- 62 http://css-tricks.com/moving-boxes/
- 63 http://css-tricks.com/examples/MovingBoxes/
- 64 http://css-tricks.com/moving-boxes/
- 65 http://miedlar.com/dev/carousel/
- 66 http://miedlar.com/dev/carousel/Prototype_1_6_Sample.html
- 67 http://miedlar.com/dev/carousel/
- 68 http://tools.uvumi.com/crop.html
- 69 http://tools.uvumi.com/crop.html
- 70 http://kroppr.rborn.info/
- 71 http://kroppr.rborn.info/
- 72 http://deepliquid.com/content/Jcrop.html
- 73 http://deepliquid.com/content/Jcrop.html
- 75 http://james.padolsey.com/demos/imgPreview/full/
- 77 http://www.cabel.name/2008/02/fancyzoom-10.html
- 78 http://www.apple.com/ilife/iphoto/
- 79 http://dante.dojotoolkit.org/dojobox/anon/release/dojo/demos/cropper/demo.html
- 81 http://the-stickman.com/files/mootools/multiupload/
- 83 http://digitarald.de/project/fancyupload/
- 84 http://digitarald.de/project/fancyupload/2-0/showcase/photoqueue/
- 85 http://digitarald.de/project/fancyupload/
- 86 http://extjs.com/learn/Extension:UploadForm
- 87 http://extjs.com/learn/Extension:UploadForm
- 88 http://capxous.com/
- 89 http://capxous.com/try.html
- 90 http://capxous.com/
- 91 http://mattberseth2.com/datatable_with_autocomplete_filter/
- 92 http://plugins.jquery.com/project/autocompletex
- 93 http://plugins.jquery.com/project/autocompletex
- 94 http://www.nickstakenburg.com/projects/lightview/
- 95 http://www.nickstakenburg.com/projects/lightview/
- 96 http://www.coders.me/ejemplos/sexy-lightbox-2/
- 97 http://www.coders.me/ejemplos/sexy-lightbox-2/
- 98 http://fancy.klade.lv/
- 99 http://fancy.klade.lv/
- 100 http://lipidity.com/fancy-form/
- 101 http://lipidity.com/fancy-form/
- 102 http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
- 103 http://buildinternet.com/live/jqueryform/jqueryform1.php
- 104 http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
- 105 http://mootools.floor.ch/en/demos/formcheck/index.htm
- 106 http://mootools.floor.ch/en/demos/formcheck/index.htm
- 107 http://mootools.floor.ch/en/demos/formcheck/index.htm
- 108 http://zendold.lojcomm.com.br/fvalidator/
- 109 http://zendold.lojcomm.com.br/fvalidator/
- 110 http://mir.aculo.us/2009/1/7/using-input-values-as-hints-the-easy-way
- 111 http://mir.aculo.us/2009/1/7/using-input-values-as-hints-the-easy-way
- 112 http://customformelements.net/
- 113 http://customformelements.net/demopage.php
- 114 http://customformelements.net/
- 116 http://sandbox.scriptiny.com/sorter/
- 118 http://www.drasticdata.nl/DDDrasticGrid.php
- 119 http://www.drasticdata.nl/DDDrasticGrid.php
- 120 http://www.kryogenix.org/code/browser/sorttable/
- 121 http://www.kryogenix.org/code/browser/sorttable/
- 122 http://tool-man.org/examples/sorting.html
- 123 http://tool-man.org/examples/sorting.html
- 124 http://www.nickstakenburg.com/projects/starbox/
- 125 http://www.nickstakenburg.com/projects/starbox/
- 126 http://abeautifulsite.net/notebook/87
- 127 http://abeautifulsite.net/notebook_files/87/demo/
- 128 http://abeautifulsite.net/notebook/87
- 129 http://www.newmediacampaigns.com/page/jquery-vs-flash-for-interactive-map
- 130 http://ncmarinescience.com/
- 131 http://www.newmediacampaigns.com/page/jquery-vs-flash-for-interactive-map
- 132 http://woork.blogspot.com/2008/02/opacity-change-using-scriptaculous.html
- 133 http://woork.blogspot.com/2008/02/opacity-change-using-scriptaculous.html
- 134 http://web-kreation.com/index.php/tutorials/morph-effect-on-mouseenter-mouseleave-with-mootools-12/
- 135 http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/
- 136 http://web-kreation.com/index.php/tutorials/morph-effect-on-mouseenter-mouseleave-with-mootools-12/
- 137 http://davidwalsh.name/ajax-username-availability-checker-mootools
- 138 http://davidwalsh.name/dw-content/ajax-username-check.php
- 139 http://davidwalsh.name/ajax-mootools-fx-explode
- 140 http://mootools.kassens.net/fxexplode/
- 141 http://davidwalsh.name/dw-content/fx.explode.php
- 142 http://davidwalsh.name/ajax-mootools-fx-explode
- 143 http://davidwalsh.name/animated-ajax-record-deletion-mootools
- 144 http://davidwalsh.name/dw-content/mootools-record-delete.php
- 145 http://davidwalsh.name/animated-ajax-record-deletion-mootools
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.