Sep 10
Sep 10
Slideshow UI controls can be found everywhere nowadays and usually come included, in some form, in most JavaScript libraries. Every now and then, though, its great to take a step back and actually learn how something like a slideshow widget is built.
JavaScript expert Christian Heilmann does just that in a multi-step tutorial that shows you how to build a maintainable, unobtrusive JavaScript slideshow component.
While the end result isn’t as robust as other controls, it is a nice way to get your hands dirty and understand the underpinnings of some of the cool widgets others are creating.
[via Ajaxian]
Sep 10
To round off the weekend, here’s a very cool Prototype-based solution for creating context menus:
Description
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page
Features:
- Lightweight: ~2 KB (~1.5 KB minified)
- Unobtrusive: Plays nice with JS turned off, uses its own namespace
- Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click)
- Fully customizable: Menu styling can (and is intended to) be easily defined in external stylesheet
- Fast: Menu container is rendered on page load, and only changes position on click
Specification
- Requires: prototype.js 1.6.0_rc0
- Tested browsers: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+
- Last modified on: 8/22/07
- Latest version: 0.5
- Author: kangax
It’s lightweight, cross-browser and looks very easy to implement. If kangax can throw in some more default themes, that would be very sweet! Overall, me likey! 
[via Ajaxian]
Sep 10
Sébastien Gruhier, AKA Mr. Proto, is at it again coming up with a new Portal class for Prototype which gives you that ability to create a UI like NetVibes or iGoogle. For those that don't know, Sébastien is also the author of the very sweet and popular Prototype Window and Carousel classes.
The Prototype Portal Class continues along the same lines providing a straightforward method of adding portlets and styling them. The portlets include DnD and selectables functionality making them fall neatly into place when dragging them around. The code to implement this is VERY easy to understand:
You need to instanciate a Portal class with those columns:
var portal = new Xilinus.Portal("#page div")
Add widgets to this portal. There is a Widget class, fully CSS skinnable (there is a default theme), just create a new Widget instance and add it to the portal by specifying the column index. For example:
portal.add(new Xilinus.Widget(), 0)
// Or with title and content
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);
While you still have to do the advanced legwork to build a Netvibe-like application, the Prototype Portal class gives you the foundation to build upon.
You can an example here and download the code here.
[via Ajaxian]
Sep 10
AjaxRain.com, the site dedicated to aggregating Ajax, JavaScript and RIA controls & libraries, has gotten a cool facelift and some much needed features. On top of that, they continue to post controls at an amazing rate with 638 submissions at last count.
Some of the new nuggets include:
- Storing favorites
- Comments
- Voting on entries
- Date that a submission was posted
- Enhanced search
- Expansion into posting RIA components based on SilverLight & Flex
MiniAjax.com, a site that was doing the same thing and started off with a bang, has since gone stale and it looks like AjaxRain now leads the pack. Are there other sites like these? If so, post the links in the comments.
[via Ajaxian]
Sep 10
Until we get into the browsers, we will need to create data pickers.
DatePicker is a simple one that users Prototype and Script.aculo.us, and does the basics well (although the fade can be a touch annoying to me).
Recent Comments