 | Fading an HTML Form A favorite futuristic effect has always been fading. Fading objects, controls, screens, and pages. While fading a portion of a web page was always possible with Flash and other applet technology, accessing the DOM elements of a page with javascript has been out of reach. However, with Silverlight, we can achieve some interesting visual effects and still have the power to read the inner-most workings of the DOM. |
Fading an HTML Form with Silverlight Demo If you have not yet installed the Silverlight web browser plug-in, you will be prompted to do so after clicking the submit button in the demo. View Fade Demo The Scene.xaml File Making this effect is fairly easy. You begin by creating a very simple XAML file using a text editor or Microsoft Expressions. The below code was created with Expressions and tweaked with Notepad. [Scene.xaml] <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="1" Height="1"
>
<Canvas.Resources>
<Storyboard x:Name="Timeline1" Completed="Timeline1_Completed">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:01" Value="#ffffffff"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Rectangle OpacityMask="#ff000000" Fill="#00ffffff" x:Name="rectangle" Width="300" Height="300" Canvas.Left="0" Canvas.Top="0" Canvas.ZIndex="0"/>
</Canvas>
In general, this XAML defines a basic white rectangle that is made invisible with opacity. It also defines a simple animation that slowly alters the opacity of the rectangle until it is fully visible. The rectangle will be placed over an HTML form element to provide the fade effect.
A few important notes about the above XAML. A trigger is implemented on the animation "Timeline1" so that we can catch the "Completed" event, which signals the end of playing an animation.
Creating our HTML Form The HTML form is created in a basic Default.html file. We will create 3 div objects. The first will hold the form itself. The second will hold a result message. The final one will hold the Silverlight control. We use absolute positioning on the div objects so that we can layer them on top of each other. The result message and the Silverlight control are initially hidden. When the user clicks the submit button, we will invoke a javascript function called HideForm() which will start the fading effect. [Default.html] <html>
<head>
<title>FormFade</title> <script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Default.html.js"></script>
<script type="text/javascript" src="Scene.xaml.js"></script>
<style type="text/css">
.silverlightHost {
height: 200px;
width: 300px;
}
</style>
</head> <body> <div id="Myformdiv" style="position:absolute; left:25px; top:100px;">
<form id="MyForm" name="MyForm">
<table>
<tr><td>Name:</td><td><input type="text" id="m_Name" name="m_Name" value="" /></td></tr>
<tr><td> </td><td><input type="button" id="m_Submit" name="m_Submit" value="Click Here" onclick="HideForm();" /></td></tr>
</table>
</form>
</div> <div id="ResultDiv" style="position:absolute; left:25px; top:100px;"></div> <div id="SilverlightControlHost" class="silverlightHost" style="position:absolute; left:25px; top:30px;">
<script type="text/javascript">
createSilverlight();
</script>
</div>
<script language="javascript">
// Hide the Silverlight control initially.
document.getElementById('SilverlightControlHost').style.display='none';
</script> </body>
</html> Wiring in the Events Now we need to create a function to handle the animation "Completed" event. Event handlers with Silverlight are defined with 2 parameters to take the sender and arguments. This javascript will be defined in the Default.html.js file, which is created by default with Microsoft Expressions when you save your project. Your custom code goes after the definition of the createSilverlight() function. An important note is that we have modified the createSilverlight() function to create the Silverlight control with two special properties to create a transparent canvas: isWindowless: "true",
background: "#00000000" These two properties are required for transparency and to allow the HTML form controls to show through during the fade effect. Another important note is the use of getElementById() to obtain a pointer to the Silverlight control. In the example below, our Silverlight control is named "SilverlightControl". After obtaining a pointer to it in the DOM, we can access inner Silverlight elements by using MySilverlightControl.content.findName("ObjectToGet"). [Default.html.js] function createSilverlight()
{
var scene = new FormFade.Scene();
Sys.Silverlight.createObjectEx({
source: "Scene.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "0.9",
isWindowless: "true",
background: "#00000000"
},
events: {
onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
}
});
} if (!window.Sys)
window.Sys = {};
if (!window.Silverlight)
window.Silverlight = {}; Sys.Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
} function HideForm()
{
document.getElementById('SilverlightControlHost').style.display=''; var sl8 = document.getElementById("SilverlightControl");
if (sl8)
{
var tt = sl8.content.findName("Timeline1");
if (tt)
{
var MyRect = sl8.content.findName("rectangle"); MyRect["Canvas.Top"] = 60;
MyRect["Canvas.Left"] = 0;
MyRect.Width = 300;
MyRect.Height = 70; tt.begin();
}
}
} function Timeline1_Completed(sender, args)
{
//
// Stop the animation.
//
var sl8 = document.getElementById("SilverlightControl");
if (sl8)
{
var tt = sl8.content.findName("Timeline1");
tt.stop();
} //
// Is this our initial form submit?
//
if (document.getElementById('ResultDiv').innerHTML == "")
{
//
// Hide the form and animation. Show a "Thank You" message.
//
var m_Name = document.getElementById('m_Name'); document.getElementById('Myformdiv').style.display = 'none'; document.getElementById('SilverlightControlHost').style.display='none'; document.getElementById('ResultDiv').innerHTML = "<B><font face=verdana size=2>Got your info! Thanks " + m_Name.value + "!</font></B><BR> <input type='button' id='m_Again' value='Again' onclick='HideForm();' />";
}
else
{
//
// User clicked "Again" and finished fading out. Hide the animation. Show the form and start over.
//
document.getElementById('SilverlightControlHost').style.display='none';
document.getElementById('ResultDiv').innerHTML = "";
document.getElementById('Myformdiv').style.display = '';
document.getElementById('m_Name').value = '';
}
} |