Scriptaculous, MooTools, jQuery and much more: all you need to develop modern web interfaces and add new features to your website.This is a collection of the best tutorials for web designers I found this month browsing some websites I often read. It also includes some of my post :) Take a look!
1. Most used CSS TricksA nice compilation of the most used CSS tricks in web design (rounded corners without images, style your order list, tableless forms, double blockquote, gradient text effect, vertical centering with line-height and more...)
2. Simple, Powerful Product Highlighter with MooToolsHow to create a flexible tool for highlighting your sites products or services using the MooTools javascript framework.
3. Timeframe: Prototype date range componentStephen 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."
4. Rating Boxes with StarboxStarbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.
5. Navigation bar with tabs using CSS and sliding doors effectThis tutorial illustrates how to design a navigation bar with tabs using CSS and status effects (active, hover, link).
6. Create beautiful tooltips with easePrototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.
7. Solving 5 Common CSS HeadachesCSS is a relatively simple language to learn. Mastering it, on the other, can prove a little more difficult. Compensating for various browser inconsistencies alone can produce a migraine. In this article, we'll demystify five of the most head thumping issues that you'll encounter when building web applications.
8. Lazily load functionality via Unobtrusive Scripts
David Kees has written about Using Prototype to Load Javascript Files, which is an implementation of the general technique of loading functionality via scripts based on the availability of DOM elements.
9. Nice calendar with date-pickersCalendar is a Javascript class ready to use that adds accessible and unobtrusive date-pickers to your form elements.
10. Fantastic News Ticker Newsvine-like using MootoolsThis tutorial explains how to implement a "News" Ticker, with vertical scrolling, using mootools. It's very simple and quick to implement in your web projects.
11. Ajax Forms with jQuery
Travor Davis illustrates how easy it is to turn a regular form into a AJAX form.
12.Sexy Sliding JavaScript Side Bar Menu Using MootoolsA simple animated sidebar using mootools ready to use in your web projects.
13. Pure CSS Animated Progress BarHere's a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.
14. Drag & Drop Sortable Lists with JavaScript and CSSIn Web applications I've seen numerous, and personally implemented a few, ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification...boo.
15. PHP components: AutosuggestI published this simple "PHP component", ready to use, to implement a search form with an autosuggest feature using PHP and MySQL. For all ajax beginners this is the most simple way to implement it (just with 8Kb) and the only thing you have to do is modify some parameters. Take a look at this post for all related infos.
16. Slick Tabbed Content Area using CSS & jQueryOne of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we're going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we'll achieve the same thing using the jQuery library.
17. Multiple File Upload Magic With Unobtrusive Javascript
This tutorial illustrates how to upload multiple file with one ore several file inputs using jQuery.
18. Add grunge effect to text using simple CSSIn this short tutorial you will see how to add grunge effect to your text using just CSS and one image
19. Creating a fading headerA simple tutorial which explains how to create a fading header graphic using some basic XHTML and CSS and some unobtrusive Javascript, using the jQuery library, for the effect itself.
20. Accessible unobtrusive content scrollerThis tutorial explains how to implement an unobtrusive content scroller.
21. How to Display Your RSS Count in a Cool TooltipHow to display the current subscriber count using a combination of an extremely simple jQuery script and a PHP snippet.
22. Ext Accordion Widget ExampleThis page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page.
23. LightboxXL -prototype pluginLightbox functionality that you're used to with embed Flash movies using prototype.
24. Change form elements appearance using FancyFormFancyForm is a powerful checkbox replacement script used to provide the 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-supporting browsers.
25. FORM elements design using CSS and list (ul and dl)This tutorial explains how to design a pure CSS FORM using lists <ul>.
If you have other interesting links to suggest, please share them adding a comment!
Related Content
Woork table of contents
Scriptaculous effects compilation ready to use
Mootools effects compilation
