?
Solved

AJAX Animation doesn't float on top.

Posted on 2009-04-17
3
Medium Priority
?
718 Views
Last Modified: 2012-05-06
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.
<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>

Open in new window

0
Comment
Question by:amb1313
3 Comments
 
LVL 4

Expert Comment

by:blaaze
ID: 24168024
visit ted.com and check and compare the source of it
0
 

Accepted Solution

by:
amb1313 earned 0 total points
ID: 24168155
Turned out it was as simple as adding a position attribute in the style.
0
 
LVL 12

Expert Comment

by:Gibu George
ID: 24168195
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> 

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month14 days, 17 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question