Fading A cfwindow Into View With The Magic Of Spry
Posted By : todd sharp Posted At : August 10, 2007 10:17 AM Posted In: Ajax, ColdFusion
5
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:<!--- import the SpryEffects.js from CFIDE --->
<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:
<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>
<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:
<p>Hi, I'm a window!</p>
</cfwindow>
<a href="javascript:showWin();">show window</a>
That's it - a super fade-a-rific window.
Online Demo
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});"
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?
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'))
http://cfsilence.com/blog/client/index.cfm/2007/9/...