JavaScript script.aculo.us Fade & Appear + IE Internet Explorer FIX

new Effect.Fade(‘left_block3’, { duration: 0.5 });
new Effect.Appear(‘left_block4′, { duration: 0.5, queue:’end’ });

FULL CODE:

Blocks that fade and appear look like this:

<div id=”block1″ style=”display:none;”>
<div id=”header3″>
<div style=”position:absolute;top:0px;”><img border=”0″ align=”left” alt=”blah” src=”images/blah.gif”></div>
<div style=”position:absolute;top:110px;right:0px;”><img border=”0″ align=”right” alt=”blah” src=”images/blah.gif”/></div>
<div style=”position:absolute;top:25px;left:50px;margin-right:30px;width:290px;color:#2A5041;”>
<em>copy<div style=”text-align:right;”>&mdash;P.R.</div>
</em>
</div>
</div>
</div>

CSS for blocks:

#block1, #block2, #block3, #block4, #block5, #block6, #block7, #block8, #block9 {
float: left;
position: absolute;
left: 635px;
top: 225px;
height: 375px;
width: 375px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
padding-left: 0px;
display: inline;
line-height:1.5em;
text-align:left;
}

.smooth_it {
width: 68px;
height: 50px;
}

Full Javascript function:

/* ROTATING BLOCK */
var spot = 0;
var how_many = 7;
var current_rotator = ‘block1’;

function swap_block()
{
new Effect.Fade(current_rotator, { duration: 0.5, queue: ‘end’ });
spot++;
if(spot == 8){ spot = 1; }
current_rotator = ‘block’ + spot;
new Effect.Appear(current_rotator, { delay: 1.0, duration: 0.5, queue: ‘end’ });
rotatorer = setTimeout(“swap_block()”, 10000);
}

The keys, things to remember:

CSS defines the outermost block div, NOT the inner div, but DO note that it has an inner wrapping div (header3) that is NOT CSS defined.

The Internet Explorer IE fix is that if these things aren’t all perfectly done as described, IE simply won’t fade but will show/hide without transition, and furthermore, if the block’s background isn’t defined it may also granulate text rather than treat it as “has layout”.

Comments are closed.