AJAX Animation doesn't float on top.

Posted on 2009-04-17
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 style="padding:20px;">


                                                    <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>Illinois</td><td></td><td>New Mexico</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></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>






                                        <cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="lnkStates">




                                                        <%-- 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" />



                                                        <%-- 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" />






                                        <cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">



                                                    <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 />



                                                        <%--  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" />




                                                    <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />



                                                    <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />






Open in new window

Question by:amb1313
    LVL 4

    Expert Comment

    visit and check and compare the source of it

    Accepted Solution

    Turned out it was as simple as adding a position attribute in the style.
    LVL 12

    Expert Comment

    by:Gibu George
    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=" = 'none';">
    		   <div id="contentWindow" >
    						<td align="center">Presentation Templates</td>
    					<tr id="presentationTemplates">
    					<tr id="presentationSubTemplates">
    						<td id="preview" colspan="4"></td>
    					<tr >

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    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.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now