amb1313
asked on
AJAX Animation doesn't float on top.
I am trying to display an animation when a user clicks on a link. When I click on the link, it pushes all contents on the screen to make the content show rather than floating the animation on top of the page.
Any idea on what I am doing wrong here? I thought it was just something with the z-index but I've been playing around with that with no luck.
Below is a snippet of code that shows the linkbutton and the animation code following it.
Any idea on what I am doing wrong here? I thought it was just something with the z-index but I've been playing around with that with no luck.
Below is a snippet of code that shows the linkbutton and the animation code following it.
<td align="left"><asp:LinkButton ID="lnkStates" OnClientClick="return false;" runat="server" ForeColor="#0000FF" Font-Underline="true">State</asp:LinkButton>:
<!-- "Wire frame" div used to transition from the button to the info panel -->
<div id="flyout" style="display: none; overflow: hidden; z-index: 3; background-color: #FFFFFF; border: solid 1px #D0D0D0;"></div>
<!-- Info panel to be displayed as a flyout when the button is clicked -->
<div id="info" style="display: none; width: 425px; z-index: 3; font-size: 13px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 3px;">
<div id="btnCloseParent" style="float: right;">
<asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close"
Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 3px;" />
</div>
<div style="padding:20px;">
<table>
<tr align="center" valign="top" style="font-size:15px; font-weight:bold; height:35px;"><td>Region #1/td><td style="width:100px;"></td><td>Region #2</td></tr>
<tr><td>Ohio</td><td></td><td>Vermont</td></tr>
<tr><td>Maryland</td><td></td><td>Oregon</td></tr>
<tr><td>Maine</td><td></td><td>Arizona</td></tr>
<tr><td>Illinois</td><td></td><td>New Mexico</td></tr>
<tr><td>Indiana</td><td></td><td>Arkansas</td></tr>
<tr><td>Florida</td><td></td><td>Texas</td></tr>
<tr><td>Georgia</td><td></td><td>Oklahoma</td></tr>
<tr><td>Alaska</td><td></td><td>Wisconsin</td></tr>
<tr><td>Hawaii</td><td></td><td>Michigan</td></tr>
<tr><td>New York</td><td></td><td>Idaho</td></tr>
<tr><td>North Dakota</td><td></td><td>Montana</td></tr>
<tr><td>South Dakota</td><td></td><td>Nevada</td></tr>
<tr><td>Delware</td><td></td><td>Utah</td></tr>
<tr><td>California</td><td></td><td>Washington</td></tr>
<tr><td></td><td></td><td>San Bernardino</td></tr>
<tr><td></td><td></td><td>San Diego</td></tr>
<tr><td></td><td></td><td>San Francisco</td></tr>
<tr><td></td><td></td><td>San Jose</td></tr>
<tr><td></td><td></td><td>Seattle</td></tr>
</table>
</div>
</div>
<cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="lnkStates">
<Animations>
<OnClick>
<Sequence>
<%-- Disable the button so it can't be clicked again --%>
<EnableAction Enabled="false" />
<%-- Position the wire frame on top of the button and show it --%>
<ScriptAction Script="Cover($get('ctl00_ContentPlaceHolder1_lnkStates'), $get('flyout'));" />
<StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Move Horizontal="250" Vertical="375" />
<Resize Width="425px" Height="435" />
<Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>
<%-- Move the info panel on top of the wire frame, fade it in, and hide the frame --%>
<ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
<StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
<FadeIn AnimationTarget="info" Duration=".2"/>
<StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
<%-- Show the "close" button --%>
<FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" Duration=".1" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="info">
<%-- Shrink the info panel out of view --%>
<StyleAction Attribute="overflow" Value="hidden"/>
<Parallel Duration=".3" Fps="15">
<Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
<FadeOut />
</Parallel>
<%-- Reset the sample so it can be played again --%>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="width" Value="425"/>
<StyleAction Attribute="height" Value="435"/>
<StyleAction Attribute="fontSize" Value="12px"/>
<OpacityAction AnimationTarget="btnCloseParent" Opacity="0" />
<%-- Enable the button so it can be played again --%>
<EnableAction AnimationTarget="lnkStates" Enabled="true" />
</Sequence>
</OnClick>
<OnMouseOver>
<Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
</OnMouseOut>
</Animations>
</cc1:AnimationExtender>
</td>
visit ted.com and check and compare the source of it
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Try the div like the one in the code snippet
<div id="window" style=" position:absolute; z-index:10; left:350px; top:160px; width:500px; height:500px; background-color:#dde3eb; border:1px solid #464f5a;">
<div style="padding-bottom:8px; width:500px;height:10px; background-color:#718191; border-bottom:1px solid #464f5a;" >
<div style="position:absolute; top:3px; left:450px; float:right;" onClick="this.parentNode.parentNode.style.display = 'none';">
Close[x]
</div>
</div>
<br/>
<div id="contentWindow" >
<table>
<tr>
<td align="center">Presentation Templates</td>
</tr>
<tr id="presentationTemplates">
</tr>
<tr id="presentationSubTemplates">
</tr>
<tr>
<td id="preview" colspan="4"></td>
</tr>
<tr >
</tr>
</table>
</div>
<br/>
</div>