Dear friends,

My project has a datalist control. I want to give some extra information to the user using animationextender control instead of tooltip. For example; when mouse over to a control within datalist, the animationextender control, placed on a specific place out of datalist, will show some extra information related with mouseovered control.

Questions:

1- Is it possible to bind an animationaxtender control to a database?

2- Is it possible to place animationextender control to aspecific place out of the datalist? I think it is, but I could not manage to do it.

Best regards,

Dear friends,

I found a techniq to show the animated panel on a specific place out of the data list. But the problem is always the panel of the first record appears even if I cliked the second or third record button.

I think because of the javascript code. Maybe, the js code gets the first panel. You will find the whole code attached below. Please check the code.

<!-- Button used to launch the animation -->
   <asp:Button ID="btnInfo" runat="server"
               OnClientClick="return false;"
               Text="Click Here" Height="75px" Width="106px"/>
                        <input id="Button2" style="width: 182px; height: 74px" runat="server" type="button" value="button" /><!-- "Wire frame" div used to transition from the button to the info panel --><div id="flyout" class="wireFrame"></div>
        
   <!-- Info panel to be displayed as a flyout when the button is clicked -->
   <div id="info" style="display: none; width: 250px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
      <div id="btnCloseParent" style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">
         <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: 5px;" />
      </div>
       <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.IlanMetni") %>'></asp:Label>
    </div>
        
   
       <script type="text/javascript" language="javascript">
      // Move an element directly on top of another element (and optionally
      // make it the same size)
      function Cover(bottom, top, ignoreSize) {
         var location = Sys.UI.DomElement.getLocation(bottom);
         top.style.position = 'absolute';
         top.style.top = location.y + 'px';
         top.style.left = location.x + 'px';
         if (!ignoreSize) {
             top.style.height = bottom.offsetHeight + 'px';
             top.style.width = bottom.offsetWidth + 'px';
             }
         }
      </script>     

       <cc1:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="Button2">
       <Animations>
            <OnMouseOver>
               <Sequence>
               <%-- Disable the button so it can't be clicked again --%>
                            
               <%-- Move the  panel on top of the wire frame, fade it in, and hide the frame --%>    
             <ScriptAction Script="Cover($get('Button1'), $get('info'), true);" />
               <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
               <FadeIn AnimationTarget="info" Duration=".2"/>
              <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
                
               </Sequence>
            </OnMouseOver>            
            
         </Animations>
       </cc1:AnimationExtender>
      
       <cc1:AnimationExtender ID="CloseAnimation" runat="server" TargetControlID="Button2">
       <Animations>
            <OnMouseOut>
               <Sequence AnimationTarget="info">
               <%--  Shrink the 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 target --%>
               <StyleAction Attribute="display" Value="none"/>
               <StyleAction Attribute="width" Value="250px"/>
               <StyleAction Attribute="height" Value=""/>
               <StyleAction Attribute="fontSize" Value="12px"/>
               <%--  Enable the button --%>
               
               </Sequence>
            </OnMouseOut>
         </Animations>       
       </cc1:AnimationExtender>
      
      
   </div>
   
                </ItemTemplate>
            </asp:DataList>
            <div style="float: right; width: 130px; margin-right: 200px; height: 148px">
                <asp:Button ID="Button1" runat="server" Height="71px" Text="Button" Width="128px" /></div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            
        </div>

Thanks in advance....

Best regards,