There are several new goodies in the most recent release of the CNET libraries. I’ve got examples and details in the wikitorial, but here’s a quick list:

• JsonP – handles grabbing Json from a foreign domain; works a lot like Ajax
• Element.smoothShow/smoothHide – a height/opacity transition for an element to add it to the page smoothly.
• Element.setPosition – position an element relative to another (the window or another dom element)
• ProductPicker – a generic “picker” to allow users (typically in a CMS) to choose an item from a data source.
• stickyWinHTML – a default html block for in-page popups
• SimpleSlideShow – a very, very simple slideshow for dom elements or images

Have fun.

Continuing in my current project of rewriting all the javascript on Download.com (pity me), I encountered the functions on the screenshots page. A quick rewrite and here’s my SimpleGallery class. It’s not super-duper fancy but it’s not meant to be. Read the rest of this entry »

Today on Ajaxian there’s a post about Joe Hewitt’s recent presentation where he demonstrates the nice new features in Firebug 1.0 (note that the ajaxian post actually includes a video of Joe presenting Firebug from last may, which I think is an error as the post refers to this most recent presentation). If you haven’t had time to fool around with Firebug, or feel like you’re not getting everything out of it that you can, you really should watch this presentation.

So I spent an entire day discovering a quirk about javascript that I must now share. In a previous post on creating default settings for classes/objects I discussed the following technique:

var Widget = new Class({
	initialize: function(element, options){
		this.element = element;
		this.options = Object.extend({
			offsetX: 0,
			offsetY: 0
		}, options || {});
		this.setPosition();
	},
	setPosition: function(){
		this.element.setStyles({
			left: this.options.offsetX + 'px',
			top: this.options.offsetY + 'px'
		});
	}
});

Now, this isn’t a very useful class, but it illustrates the technique. The functions in our class don’t have to worry if the options are defined; they are either what the default value is or they are what the user passed in. If the user elects to just pass in a subset of the values, that’s fine:

var myWidget = new Widget(myElement, {offsetX: 100});
//myElement will be offset by 100 on the left,
//zero (the default) on the top

But what if you want to extend the functionality of your class later? What if you want to be able to insert more default options?

Here’s what I was doing that caused me trouble: Read the rest of this entry »

If you don’t know javascript, or you like learning by watching people do things, you might like the “Mootools for the Rest of Us” series over at beautyindesign.com.

It’s not as complete at my Mootools Primer/Tutorial but it is pretty friendly. You get to watch a screencast of someone setting up a document with Mootools and then implementing a few effects like Drag, Resize, Opacity, as well as an Ajax example.