Examples: Posts

So I was asked yesterday the following:

Why does Browser use merge but Element use implement?

And after composing a lengthy reply, I thought it might be useful to post it for others: | Read the rest »

About a year or so I went to see Bill Scott give this talk down at a gathering hosted by Google (he worked for Yahoo at the time though). The talk was great but I felt I was the wrong audience for it (though I found it very informative). Really, the people who needed to see it, were designers, product managers, and engineers. The talk is awesome as it goes through all the challenges to designing and building user interaction with tons of examples and patterns. On top of that, Bill was a fun speaker.

So I emailed him and asked if he'd be interested in bringing the talk to CNET and, to my astonishment, he did. Maybe 75 of our staff crowded into our largest conference room and watched his presentation. Afterwards I got a lot of thoughtful comments and questions; he had a real impact.

There were, however a lot of people who didn't get to see this lecture and I'm glad to see that Yahoo got footage of him giving it and have posted it for anyone who missed it. It's great stuff.

Blog post on the YUI blog>

Video on YUI Theater>

I got a little bored last night and banged this out. A little 2K effect for resorting elements with an effect. More info in the wiki, download in the svn. | Read the rest »

Here's a step-by-step and line-by-line example of how to write a Mootools Class. I wrote this example for a javascript class I taught here at CNET for our developers and figured I'd share with everyone else.

Jonathan Snook has a nice write-up about using private methods in javascript.

With JavaScript, you can create private methods and properties using what Yahoo describes as the module pattern. Here's the basic construct, including a private method:

PLAIN TEXT

JavaScript:

MyObject = function(){

  var privateMethod = function(){ /* do stuff */ };
 
  var obj = {
    publicProperty:5,
    publicMethod:function(){ /* do stuff */ };
  };
 
  return obj;
}(); // run it right away

If you're not familiar with this pattern, it's really quite cool. It takes advantage of closures, allowing the public methods to access the private methods. I've been using this approach in my recent work and it feels nice and works well.

I released a lot of code today including a bug fix that was probably pestering any of you with r87.

• product.picker.js now has no picklets; these are in the implementations/picklets directory
• ProductPicker now detects if there is no doctyp and, if not, sets the position of the picker to be fixed (no IE6 support)
• small docs update in element.cnet.js
• added new picklet: CNETProductPicker_PricePath
• added new picklet: NewsStoryPicker_Path
• new file: clipboard.js (allows you to insert text into the OS clipboard)
• new file: html.table.js (automates building html tables)
• new file: element.forms.js (for managing text inputs - get selected text information, insert content around selection, etc.)
• fixed an error in stickyWinHTML (ie reserves "class" for member names)
• converted window.onDomReady references to window.addEvent('domready'..
• updated css for stickyWin.js to avoid namespace conflicts with the css class "clearfix"

| Read the rest »

Bas Wenneker has a nice little article over at solutoire.com on sorting javascript arrays. The docs over at Mozilla on Array.sort demonstrate the same stuff, but Bas's article is a quick read that's worth it if you ever see yourself working with data this way.

Here's a little Mootools extension that you might find useful. I'm using it my StickyWin classes to allow the user to "pin" it in place so it won't move if they scroll.

PLAIN TEXT

JavaScript:

$('fxTarget').pin()

$('fxTarget').pin()

Execute the example, then scroll. That's it. You can unpin it if you like:

PLAIN TEXT

JavaScript:

$('fxTarget').unpin()

$('fxTarget').unpin()

(note, in this example because of the way my little fxTarget helper works, unpin will break the drag behavior, but that won't happen in other instances).

I've added .pin and .unpin to StickyWin, too.

UPDATE: This code is now in the plugins directory of the mootools library as Hash.Cookie.

Over on Ajaxian there was a recent post about a little Prototype.js dependent class called CookieJar.

Lalit Patel has created a JavaScript Library to use JSON to store data in cookies. JSON Cookies is built on top of Prototype and gives you a simple API to put and get JSON values into cookies

I liked the idea, so I wrote a version for Mootools. The Mootools version is a little different and adds some functionality (for merging data) and it stores its info a little differently, but it's basically the same concept. | Read the rest »

I've refactored stickyWinHTML (see this previous post) a bit more to allow for as many buttons as you like.

Here's a quick code example:

PLAIN TEXT

JavaScript:

var simpleLayoutExample = stickyWinHTML('the caption', 'this is the body', {
  width: '400px',
  buttons: [
    {
      text: 'close',
      onClick: function(){alert('closed!')}
    },
    {
      text: 'okey-dokey',
      onClick: function(){alert('ok!')}
    }
  ]
});
$('layoutExample').adopt(simpleLayoutExample);

var simpleLayoutExample = stickyWinHTML('the caption', 'this is the body', {
width: '400px',
buttons: [
{
text: 'close',
onClick: function(){alert('closed!')}
},
{
text: 'okey-dokey',
onClick: function(){alert('ok!')}
}
]
});
$('layoutExample').adopt(simpleLayoutExample);

The buttons array allows for as many buttons as you like. You can see more detail in the wikitorial on this topic.

Note: the old options (closeTxt, onClose, confirmTxt, and onConfirm) are still supported, though deprecated.