Update panel spoils my javascript

davearia · March 25, 2008

Hi I had this page:

<%@ 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:

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 Sub

This works fine, the image fades in out and nice and smooth.

However, if I do this:

<%@ 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:

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 Sub

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.

davearia · March 25, 2008

I wrote another little bit of javascript and called this at the start of the fadeImageIn [/code]function:

function hideImage()
{
    var object = document.getElementById('imgInfo').style; 
    object.opacity = 0; 
    object.MozOpacity = 0; 
    object.KhtmlOpacity = 0; 
    object.filter = "alpha(opacity=0)"; 
}

Works a treat!!!

Sign In

Update panel spoils my javascript

Recommended Posts

davearia

davearia

Join the conversation

Browse

Activity