Scriptaculous Effect.Morph IE6

×

This post was originally published in 2010
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

Ran into a weird bug the other day in IE6. Some elements, h1’s, weren’t animating with their parent when the parent was being Effect.Morphed. Every other element was moving, but the h1’s just sat there, looking really stupid. I think the use of Twin Helix’s IE PNG Fix was a contributing factor here, since writing this article I’ve noticed ( and fixed, using the solution below ) this issue on other position:relative, PNG fixed elements.

The h1’s were the parents referred to in the post Float:Right Nuke for IE6, and thus had position:relative set. Removing this caused the h1’s to animate nicely, but unfortunately I couldn’t do that because removing the position:relative had the side-effect of causing the content that I wanted to simulate float:right with to shoot up to the top-right of the screen. D’oh.

To solve it, and have everything animate acceptable in IE6 I had to do this:

/* the first morph: */
new Effect.Morph('h1_parent', { style: 'padding-top:50px', delay: 0.5 });
 
/* the fix: */
$$('.h1_className').each( function(element){ 
	new Effect.Morph(element, { 
		style: 'top:1px', duration: 0.5 
	});
});
 
/* the second morph, taking place after some user action: */
new Effect.Morph('h1_parent', { style: 'padding-top:10px', delay: 0.5 });
 
/* the fix: */
$$('.h1_className').each( function(element){ 
	new Effect.Morph(element, { 
		style: 'top:0px', duration: 0.5 
	});
});

Yeah, looks stupid I know. Works though. A bunch of h1’s moving 1px isn’t noticeable, but h1’s that didn’t animate sure would have been!

One more time, combined into a more usable function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * Wiggles elements with the given classes to make sure they animate 
 * with their parent, their parent's parents, and their parent's parent's 
 * parents ( ad infinitum ) in IE6, when the elements of the given
 *  classes have the Twin Helix PNG fix + position:relative applied
 *
 * @param classes an array of css class names, prefixed with a '.'
 */
wiggle = function( classes ){
classes.each( function( className ){
     $$( className ).each( function( ele ){
          new Effect.Morph( ele, {
               style: 'top:1px', 
               duration: 0.25,
               afterFinish: function(){
                    new Effect.Morph( ele, {
                         style: 'top:0px',
                         duration: 0.25
                    });
               }
     });
}
 
/* the first morph: */
new Effect.Morph('h1_parent', { style: 'padding-top:50px', delay: 0.5 });
wiggle( [ '.classOne', '.classTwo' ] );
 
/* the second morph, taking place after some user action: */
new Effect.Morph('h1_parent', { style: 'padding-top:10px', delay: 0.5 });
wiggle( [ '.classOne', '.classTwo' ] );
No comments | Trackback