Talk:Display Morphing

From Ajax Patterns

Contents 1 What Sort of Morphing Should Be Used? 2 code examples 3 Using CSS to Trigger Animations

What Sort of Morphing Should Be Used?

No, no, no, no, NO!

JavaScript code should NOT be messing around with styles. It should be changing the elements' classes, which will allow styles to be modified in CSS files. For the same reason that we don't hard-code our styles in our HTML any more, we shouldn't hard-code our style in our JavaScript. For one thing, it allows your designer to maintain your styling in CSS, without having to mess around in your JavaScript. Even if your a single designer/developer, it's good to keep the 2 concerns separate, so you can make a clean context switch between dealing with behavior (code) and dealing with appearance.

As an example, here's how I change the active tab in my unbotrusive JavaScript tab code:

// Remove tab-active from all the LIs.
for ( var i = 0; i < ul.getElementsByTagName('LI').length ; i++)
{
	ul.getElementsByTagName('LI')[i].removeClass('tab-active'); // FIXME: Assumes A is first node of LI.
}

// Set tab-active on the LI containing this A that was clicked.
li.addClass('tab-active');

And here's the CSS:

 .tabbed ul.tabs li a { padding: 4px 10px; text-decoration: none; border:0px; }
 .tabbed ul.tabs li.tab-active a { background-color: #EEAAAA; }

I can think of some counter-examples where it makes sense to change styles directly, but they should be the exception, not the rule. One example would be gradual changes. For example, fading or flashing of some element.

code examples

I am working on some similar zoom & pan function to google maps. if I can get help finishing I will put up as example. morganrallen [--at--] sbcglobal [--d.t--] com

Using CSS to Trigger Animations

Absolutely agree with this, and would even suggest that you can go one step further and make this whole process generic *and* come up with some common states. We use XForms to manage all of this, as I'll explain...

XForms is a new W3C language that will be part of XHTML 2, but it's also designed in such a way that it can be added to other languages, such as SVG and VoiceXML...so we've gone ahead and added it to XHTML 1. ('We' is the people behind formsPlayer, a fully featured XForms processor.)

Anyway, one of the features of XForms that is relevant here is the ability to drive the styling of a control or section from the underlying state of the data that it is bound to. So, to give an example, to suppress all controls or panels that are bound to data that is not relevant, we simply do this:

 .disabled
 {
   display               : none;
 }

The state of the control--in this case enabled or disabled--is calculated for us automatically by formsPlayer, based on XPath expressions. For example, you might say that the date field for the return journey is only 'relevant' if the form user has indicated in another control that they want to buy a return ticket. (Other states are available, such as invalid, read-only, out-of-range, and so on.)

But it doesn't stop with simple CSS style based on these states--we can also get formsPlayer to fire off animation effects when the state changes. For example, to 'highlight-and-fade' on a control as it becomes active, all we have to do is this:

 .enabled
 {
   -event-xforms-enabled : fx-Effect-Highlight();
 }

Similarly, to 'slide in' the currently selected case in a switch/case block, we just do this:

 xf\:case
 {
   -event-xforms-select  : fx-Effect-SlideDown(duration:1);
 }

This whole architecture makes building rich web applications much easier, since (as the comment above is getting at) you are dealing with the *logic* of the form, and not the nitty-gritty of the script.

The mark-up I've given here is taken from two examples on the skimstone site (a site for people building web applications using a 'shallow stack', i.e., as little dependence on any particular server framework as possible); the first application submits links to del.icio.us, whilst the second searches Flickr. On the del.icio.us form, controls are hidden until they become relevant, and when they are, the yellow-fade is used. On the Flickr form a switch/case is used to make it easy to manage 'in progress' and 'complete' states, and an animation is used to slide in the images once the search is complete.

MarkBirbeck 15:50, 5 February 2006 (EST)