<cfsilence>

Fading A cfwindow Into View With The Magic Of Spry

Posted At : August 10, 2007 11:17 AM | Posted By : todd sharp
Related Categories: ColdFusion, Ajax

This demo is quite simple even though it took me a bit of hacking to realize that. I guess I assumed it would have been more difficult, but it's really not. This will add a simple fade effect to a cfwindow as it's shown. There is a tad bit of Javascript, but don't let the sample code fool you below. It's only 4 lines - just a lot of comments.

Before I get to the code let me mention that of course IE decides to not behave with this demo. Being that I'm not a CSS guru I really have no idea why. I'm sure one of my readers will have an idea what's going on and will post a comment :)

So on to the magical code:


<script src="/CFIDE/scripts/ajax/spry/includes/SpryEffects.js"></script>

<script type="text/javascript">
showWin = function(){
   //get the underlying window object
   //this lets us manipulate the entire window
   //instead of just the header/body individually
   //becuase we'll get the id of the whole div
   //that acts as the wrapper next
   var winOb = ColdFusion.Window.getWindowObject('foo');
   //get the id of the wrapper div
   var win = document.getElementById(winOb.id);
   //set up the Spry fade effect
   //1000ms fade from 0 to 100% opacity
   var winFade = new Spry.Effect.Fade(win, {duration: 1000, from: 0, to: 100, toggle:true});
   //set the current window to zero opacity
   win.style.opacity = 0.0;
   //show the now 'invisible' div
   ColdFusion.Window.show('foo');
   //start the fade
   winFade.start();
}
</script>

Then the simple cfwindow tag:

<cfwindow name="foo" initShow="false" title="windowz" draggable="true" closable="true" modal="true">
<p>Hi, I'm a window!</p>
</cfwindow>

And finally a call to the JavaScript function:

<a href="javascript:showWin();">show window</a>

That's it - a super fade-a-rific window. Online Demo

Comments (5) |

Print |

Send |

Code |

del.icio.us |

Linking Blogs | 3185 Views

Comments

[Add Comment]

Todd,

I think setting the opacity and showining the window with "ColdFusion.Window.show('foo');" on top of the fade effect messes with IE. Try this one line instead of the code in your showWin function: "new Spry.Effect.DoFade(ColdFusion.Window.getWindowObject('foo'), {duration: 1000, from: 0, to: 100, toggle:true});"

# Posted By Boyan | 8/10/07 4:02 PM

Can't get that to work. Here's what I tried:

var s = new Spry.Effect.Fade(ColdFusion.Window.getWindowObject('foo').id, {duration: 1000, from: 0, to: 100, toggle:true});

s.start();

Unfortunately since the window is initally hidden the visibility is set to hidden in css. CF.Window.show() sets it to visible - but if you do that initially then the window will bling visible then fade 0 to 100.

Any other ideas?

# Posted By todd sharp | 8/10/07 4:19 PM

Ops, I had a typo there, it should have been:
Spry.Effect.DoFade(document.getElementById(ColdFusion.Window.getWindowObject('foo')), {duration: 1000, from: 0, to: 100, toggle:true});"

To hide/show page elements JS libs usually use "display:none". So just to be sure I tried a div element with both "display:none" and "visibilty:hidden":
<div style="display:none;visibility:hidden;" id="fade1">Some Text</div>

To fade it in, this worked fine:
Spry.Effect.DoFade('fade1', {duration:1000,from:0,to:100,toggle:true});

Try replacing 'fade1' with document.getElementById(ColdFusion.Window.getWindowObject('foo'))

# Posted By Boyan | 8/10/07 4:42 PM

This is great! Exactly what I was looking for. Thanks Todd!! Just one question.. What about a closing effect? How to you get to the graphical X and add a say, fade out effect?

# Posted By Chris | 8/17/07 1:06 PM

Chris: Sorry, been busy - but finally got an example for you:

http://cfsilence.com/blog/client/index.cfm/2007/9/...

# Posted By todd sharp | 9/2/07 12:25 PM

[Add Comment]