[RESOLVED]AJAX Update Progress AND Animation (Maybe CSS question)

This is more likely a CSS question, but I am trying to get an update progress to display in the middle of the page when you update a form.

I am using animation to fade in and out when you update the panel, the panel fades to near white, but I would like to display the update progress animation gif I have, currently it displays at the top of the form, but I have created a div with the image
in it, and need to know:

1. If it is possible to display a dynamic div in the updateprogress

2. how to display it always in the middle of the viewport.

Thanks

Figured it out

Here is my code for those who want to do the same thing

<asp:UpdateProgress ID="MyUpdateProgress" runat="server" AssociatedUpdatePanelID="MyUpdatePanel" DisplayAfter="1">
        <ProgressTemplate>
            
            <div class="update_progress2">
            <h4>Updating</h4>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/ui/images/animated/updating.gif" />
                <h4>Please Wait...</h4>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
<ajx:UpdatePanelAnimationExtender ID="MyUpdatePanelAnimationExtender" runat="server" TargetControlID="MyUpdatePanel">
		<Animations>
        <OnUpdating>
		<Sequence>
		<EnableAction AnimationTarget="BtnCreateAccount" Enabled="false" />
			<Parallel duration=".30" Fps="30">
				<FadeOut AnimationTarget="MyUpdatePanel" minimumOpacity=".1" />
			</Parallel>
		</Sequence>
	   </OnUpdating>
        <OnUpdated>
	   <Sequence>
			<EnableAction AnimationTarget="BtnCreateAccount" Enabled="true" />
			<Parallel duration=".30" Fps="30">
				<FadeIn AnimationTarget="MyUpdatePanel" minimumOpacity=".1" />
			</Parallel>
		</Sequence>
		</OnUpdated>
		</Animations>
	</ajx:UpdatePanelAnimationExtender>

CSS

div.update_progress2									{display:table;border:1px solid silver; border-radius:5px; background:#FFFFFF; width:228px !important; height:75px !important; position:fixed; left:44%; top:45%; margin:0px auto; border:none !important}
div.update_progress2 img									{width:208px; height:13px; margin:0px 10px; position:relative !important}
div.update_progress2 h4									{text-align:center; position:relative !important; color:#6C8CC7}

Leave a Reply