title: Update Panel animation extender with multi update panel
body: <p>Q:</p>
  
  <p>I use <strong>Update Panel animation extender</strong>
     ,, it works so good but unfortunately
     ,,when i have more than update panel
     on the same page and any partial post
     back for any update panel on the page
     the extender works (animate)..</p>
  
  <p>How to make the extender works with
     the intended one (the one i add the
     extender to Only)..please sample if possible</p>
  
  <p><em><strong>The Script:</em></strong></p>
  
  <pre><code>    &lt;script type="text/javascript" language="javascript"&gt;
      function onUpdating() {
          // get the update progress div
          var updateProgressDiv = $get('updateProgressDiv');
          // make it visible
          updateProgressDiv.style.display = '';
  
          //  get the gridview element
          var gridView = $get('&lt;%=this.pnl_courseImg.ClientID %&gt;');
  
          // get the bounds of both the gridview and the progress div
          var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
          var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
  
          //    do the math to figure out where to position the element (the center of the gridview)
          var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
          var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
  
          //    set the progress element to this position
          Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
      }
      function onUpdated() {
          // get the update progress div
          var updateProgressDiv = $get('updateProgressDiv');
          // make it invisible
          updateProgressDiv.style.display = 'none';
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><em><strong>My ASPX:</em></strong></p>
  
  <pre><code>&lt;asp:Panel ID="pnl_courseImg" runat="server" HorizontalAlign="Center"&gt;
          &lt;asp:UpdatePanel ID="UpdatePanel2" runat="server"&gt;
              &lt;contenttemplate&gt;
                                              &lt;br /&gt;
                                               &lt;asp:ListView ID="lv_showCourseImages" runat="server" ItemPlaceholderID="a" 
                                                      onitemcommand="lv_showCourseImages_ItemCommand"&gt;
                            &lt;LayoutTemplate&gt;
                                                  &lt;table ID="Table1" runat="server" cellpadding="2" cellspacing="2" 
                                                      &gt;
  
                                                      &lt;tr ID="a" runat="server"&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/table&gt;
                                              &lt;/LayoutTemplate&gt;
                                              &lt;ItemTemplate&gt;
                                                  &lt;tr ID="Tr1" runat="server"&gt;
                                                      &lt;td&gt;
                                                          &lt;asp:Image ID="img_news" runat="server" ImageUrl='&lt;%# "CourseImages" + "/" + Eval("FK_CourseCode") + "/"+  Eval("photoName")%&gt;'  BorderWidth="4px" Height="355px" 
                              Width="410px"/&gt;
                                                      &lt;/td&gt;
  
                                                  &lt;/tr&gt;
                                                  &lt;tr id = "tr2" runat ="server"&gt;
                                                  &lt;td&gt;
                                                      &lt;asp:HiddenField ID="hf_newsImage" runat="server" Value ='&lt;%#Eval("photoId")%&gt;'/&gt;
                                                      &lt;asp:Button ID="btn_deleteImg" runat="server" Text="Delete" CommandName ="deleteImage" /&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/ItemTemplate&gt;
  
                          &lt;/asp:ListView&gt;
                           &lt;asp:DataPager ID="dp_CourseImages" runat="server" 
                               PagedControlID="lv_showCourseImages" 
                              PageSize="1" onprerender="dp_CourseImages_PreRender"&gt;
                              &lt;Fields&gt;
  
                                  &lt;asp:NextPreviousPagerField ButtonType="Button" NextPageText="&amp;gt;&amp;gt;" 
                                      PreviousPageText="&amp;lt;&amp;lt;" ShowFirstPageButton="True" 
                                      ShowLastPageButton="True" /&gt;
                                       &lt;/Fields&gt;
                          &lt;/asp:DataPager&gt;
  
                          &lt;/contenttemplate&gt;
          &lt;/asp:UpdatePanel&gt;
          &lt;cc3:updatepanelanimationextender id="UpdatePanel2_UpdatePanelAnimationExtender"
              runat="server" enabled="True" behaviorid="animation" targetcontrolid="UpdatePanel2"&gt;
                                                       &lt;Animations&gt;
                                                       &lt;OnUpdating&gt;
                                                           &lt;Parallel duration="0"&gt;
                                                    &lt;%-- place the update progress div over the gridview control --%&gt;
                                                   &lt;ScriptAction Script="onUpdating();" /&gt;  
                                                    &lt;%-- disable the search button --%&gt;                       
                                                       &lt;EnableAction AnimationTarget="btn_deleteImg" Enabled="false" /&gt;
                                                       &lt;%-- fade-out the GridView --%&gt;
                                                       &lt;FadeOut minimumOpacity=".5" /&gt;
                                                       &lt;/Parallel&gt;
                                                       &lt;/OnUpdating&gt;
                                                       &lt;OnUpdated&gt;
                                                       &lt;Parallel duration="0"&gt;
                                                       &lt;%-- fade back in the GridView --%&gt;
                                                       &lt;FadeIn minimumOpacity=".5" /&gt;
                                                       &lt;%-- re-enable the search button --%&gt;  
                                                       &lt;EnableAction AnimationTarget="btn_deleteImg" Enabled="true" /&gt;
                                                       &lt;%--find the update progress div and place it over the gridview control--%&gt;
                                                      &lt;ScriptAction Script="onUpdated();" /&gt; 
                                                      &lt;/Parallel&gt; 
                                                      &lt;/OnUpdated&gt;
                                                      &lt;/Animations&gt;
  
                                                  &lt;/cc3:updatepanelanimationextender&gt;
      &lt;/asp:Panel&gt;
  </code></pre>
  
  <p><strong>i have one more update panel when click the button in it it fires the extender in this update panel how to fix this problem.</strong></p>
  
  <p>Thanks in advance..</p>