Hi I had this page:
With this code behind event like this:
This works fine, the image fades in out and nice and smooth.
However, if I do this:
With a code behind event like so:
This effect is different. Instead of the image fading in, it flashes on the screen with no opacity, disappears and then fades in and out which spoils the whole effect.
Can anyone help me out here.
Thanks, Dave.
Code:
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="FadeTester.aspx.vb" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Fade Tester</title>
<script language="javascript" type="text/javascript">
<!--
//Hide image when page loads.
function hideImage()
{
var object = document.getElementById(imgInfo).style;
object.opacity = 0;
object.MozOpacity = 0;
object.KhtmlOpacity = 0;
object.filter = "alpha(opacity=0)";
}
function fadeImageIn(id, millisec)
{
//If an element is invisible, make it visible, else make it invisible
opacity(imgInfo, 0, 100, 1000);
setTimeout(fadeImageOut(), 3000)
}
function fadeImageOut()
{
opacity(imgInfo, 100, 0, 1000);
}
function opacity(id, opacStart, opacEnd, millisec)
{
//Speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//Determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd)
{
for(i = opacStart; i >= opacEnd; i--)
{
setTimeout("changeOpac(" + i + "," + id + ")",(timer * speed));
timer++;
}
}
else if(opacStart < opacEnd)
{
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + "," + id + ")",(timer * speed));
timer++;
}
}
}
//Change the opacity for different browsers
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//-->
</script>
</head>
<body onload="hideImage()">
<form id="frmFade" runat="server">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<table>
<tr style="padding-left:400px">
<td valign="middle">
<asp:Button ID="btnFade" runat="server" Text="Fade"/>
<img runat="server" id="imgInfo" src="Images/updateSuccessful.jpg" alt=""/>
</td>
</tr>
</table>
</form>
</body>
</html>With this code behind event like this:
Code:
Protected Sub btnFade_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnFade.Click
Set focus to the textbox related to this user error.
Dim sbJavascript As New StringBuilder()
sbJavascript.Append("<script language=""JavaScript"" type=""text/javascript"">")
sbJavascript.Append("fadeImageIn();")
sbJavascript.Append("// -->")
sbJavascript.Append("</script>")
ClientScript.RegisterStartupScript(Me.GetType(), "Fade", sbJavascript.ToString())
End SubThis works fine, the image fades in out and nice and smooth.
However, if I do this:
Code:
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="FadeTester.aspx.vb" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Fade Tester</title>
<script language="javascript" type="text/javascript">
<!--
//Hide image when page loads.
function hideImage()
{
var object = document.getElementById(imgInfo).style;
object.opacity = 0;
object.MozOpacity = 0;
object.KhtmlOpacity = 0;
object.filter = "alpha(opacity=0)";
}
function fadeImageIn(id, millisec)
{
//If an element is invisible, make it visible, else make it invisible
opacity(imgInfo, 0, 100, 1000);
setTimeout(fadeImageOut(), 3000)
}
function fadeImageOut()
{
opacity(imgInfo, 100, 0, 1000);
}
function opacity(id, opacStart, opacEnd, millisec)
{
//Speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//Determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd)
{
for(i = opacStart; i >= opacEnd; i--)
{
setTimeout("changeOpac(" + i + "," + id + ")",(timer * speed));
timer++;
}
}
else if(opacStart < opacEnd)
{
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + "," + id + ")",(timer * speed));
timer++;
}
}
}
//Change the opacity for different browsers
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//-->
</script>
</head>
<body onload="hideImage()">
<form id="frmFade" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Literal runat="server" ID="litInfo"></asp:Literal>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<table>
<tr style="padding-left:400px">
<td valign="middle">
<asp:Button ID="btnFade" runat="server" Text="Fade"/>
<img runat="server" id="imgInfo" src="Images/updateSuccessful.jpg" alt=""/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>With a code behind event like so:
Code:
Protected Sub btnFade_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnFade.Click
ScriptManager1.RegisterStartupScript(Me.Page, Me.GetType(), "click", "fadeImageIn();", True)
End SubThis effect is different. Instead of the image fading in, it flashes on the screen with no opacity, disappears and then fades in and out which spoils the whole effect.
Can anyone help me out here.
Thanks, Dave.