title: reflection.js with images in a .net updatePanel
body: <p>I have an update panel which contains various placeholders with images. </p>
  
  <p>These images have a reflection added using <a href="http://cow.neondragon.net/stuff/reflection/" rel="nofollow">reflection.js</a>.</p>
  
  <p>The trouble is, when the update panel runs, the reflection script does not always run. There's no real pattern to when it does not work and on which panels it does not work with.</p>
  
  <p>Here's a sample of my code so you can see how it's working (I've cut it down to 2 panels for this example to keep the code short)... The most baffling thing is why is works some times and not others.</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type='text/javascript' src="/scripts/jquery-1.5.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/scripts/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="reflection.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form runat="server" id="loginform"&gt;
    &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;asp:LinkButton ID="Lnk1" OnClick="fnc1" runat="server" Text="Read more..." /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;asp:LinkButton ID="Lnk2" OnClick="fnc2" runat="server" Text="Read more..." /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
      &lt;Triggers&gt;
        &lt;asp:AsyncPostBackTrigger ControlID="Lnk1" EventName="Click" /&gt;
        &lt;asp:AsyncPostBackTrigger ControlID="Lnk2" EventName="Click" /&gt;
      &lt;/Triggers&gt;
      &lt;ContentTemplate&gt;
        &lt;asp:PlaceHolder runat="server" ID="PH1"&gt; &lt;img src="myimage1.jpg" title="myimage1" width="200" height="133" class="zoomImage reflect rheight36 ropacity25" /&gt; &lt;/asp:PlaceHolder&gt;
        &lt;asp:PlaceHolder runat="server" ID="PH2"&gt; &lt;img src="myimage2.jpg" title="myimage2" width="200" height="93" class="zoomImage reflect rheight51 ropacity25" /&gt; &lt;/asp:PlaceHolder&gt;
      &lt;/ContentTemplate&gt;
    &lt;/asp:UpdatePanel&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And here's the vb code...</p>
  
  <pre><code>Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
          PH1.Visible = False
          PH2.Visible = False
      If Not Page.IsPostBack Then
                 PH1.Visible = True
      End If
  End Sub
  
  Sub fnc1(ByVal sender As Object, ByVal e As EventArgs)
      PH1.Visible = True
  End Sub
  
  Sub fnc2(ByVal sender As Object, ByVal e As EventArgs)
      PH2.Visible = True
  End Sub
  </code></pre>
  
  <p>I've slightly adapted the reflection.js file to make it work at all in the updatepanel as follows...</p>
  
  <pre><code>function load() {
      addReflections();
      // Line below added for updatepanel...
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addReflections);
  }
  
  window.onload = function () { load(); }
  </code></pre>