Examples: Posts

I added large close and confirm buttons to the default stickyWinHTML layout. You can make them read whatever you want and you can assign callback functions to them getting clicked. They are optional, and not visible by default. Note the section in the link above about how the onClose event is NOT the same as the onClose event for StickyWin.

That little "x" for closing the StickyWin is pretty small, and on pages like in our CMS, I think an easier to click close button would make it easier to deal with these things, especially if you end up opening them often. If you don't specify a closeTxt or confirmTxt value, the buttons are not there. The callbacks are not required. Example:

PLAIN TEXT

JavaScript:

new StickyWin({
  content: stickyWinHTML('the caption', 'this is the body', {
    width: '400px',
    closeTxt: 'close',
    confirmTxt: 'okey-dokey',
    onClose: function(){alert('closed!')},
    onConfirm: function(){alert('confirmed')}
})});

new StickyWin({
content: stickyWinHTML('the caption', 'this is the body', {
width: '400px',
closeTxt: 'close',
confirmTxt: 'okey-dokey',
onClose: function(){alert('closed!')},
onConfirm: function(){alert('confirmed')}
})});

Helping out our CMS group today I hacked out a new little widget class called "Confirmer" that handles notifying the user when something they've done on the page requires some sort of notice. An auto-save, or the failure to auto-save, or any other sort of message.

It's designed to be unobtrusive so it doesn't annoy the user too much if it happens a lot. You can have the prompt inline in the page or floating over it. The message just fades in and then back out. It comes with default styles that can easily be overridden, the message displayed can be changed every time you call it, and its easy to position it relative to an element or at the edge of the screen.

Quick example:

PLAIN TEXT

JavaScript:

new Confirmer().prompt(); //watch the upper right of your screen

new Confirmer().prompt(); //watch the upper right of your screen

More examples and details in the wikitorial.

Over at Ajaxian today they have a post on miniajax.com which describes itself as "a showroom of nice looking simple downloadable DHTML and Ajax scripts".

I'm not sure if they authored these scripts or if they just collected them all into slick looking examples. Some of the items link to other sites, but some they seem to host.

Some of these things I think would do well to write as plugins for the Mootools library but if Valerio (the gatekeeper for Mootools) doesn't want it I think some of them would do well to be added to the CNET Library.

This goes hand-in-hand with the patterns project that we're trying to kick off here. I think this page could really help inform that work...

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 »

Mootools 1.0 is out. Fancy new site design and docs.

We've already refactored all our code for 1.0, though it is not yet released to the CNET site. We're entering into QA now...

I've also released the second part of my wiki tutorial series, this time giving working examples of all the CNET common code. The CNET Libraries are comprised of common code (widgets, shortcuts, etc.) and implementation code - code that is specific to a given page or application. The implementation code is usually just implementing and executing functions and libraries in the common portion of the library. The wikitorial for the CNET common code focuses on this generic content. Form validation, date pickers, carousels, etc. Dig in! Oh, and if you have a chance, Digg the tutorials, too. You'll find shortcuts to do that in the right navigation column in the tutorials.

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.

I've updated my Mootools Tutorial for the upcoming version 1.0 of the library. It (the library) is still in development, so my tutorial is likely to always be a little behind the svn, but if you're digging into Mootools for the first time, or you want to see what's different in version 1.0, here's the place to start.

I've also installed a copy of docuwiki for all my example and tutorial work. The old stuff is still there but I'll be moving it all over to the wiki. Expect to see more examples of code I've written in the coming weeks.

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:

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:

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 »