×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

i recently wanted to add some more visual cues to my application when a search was happening.  i already had the "searching, please wait..." note on there, but since my app was an 'in your face' application experience, i thought i could make that message more in your face as well.  so i added a fade effect to the entire map control as seen in this image:

AZSO

as you can see when the search button is clicked, the entire virtual earth map control fades out until the results come back.  so my only problem (as i wanted to use the microsoft ajax library) was that it wasn't a server control or wasn't an update panel.  so i had to use an animation extender, but also had to do it only on the client (as the virtual earth control is a client-only control right now as well).

here's what i did (thanks to some guidance from a colleague as well).  i basically added an element on my page that was a fake element -- a div with no visibility...think of it as an ajax placeholder:

   1:  <div id="FakeTarget" runat="server" style="display:none"></div>


then i added animation extenders on there (one for fade in and one for fade out) and attached them to the fake target element as the extenders require a target element to attach to at runtime.

   1:  <ajax:AnimationExtender ID="mapfadeout" runat="server" Enabled="true" TargetControlID="FakeTarget">
   2:      <Animations>
   3:          <OnClick>
   4:              <Sequence>
   5:                  <OpacityAction AnimationTarget="map" Opacity=".4" />
   6:              </Sequence>
   7:          </OnClick>
   8:      </Animations>
   9:  </ajax:AnimationExtender>
  10:  <ajax:AnimationExtender ID="mapfadein" runat="server" Enabled="true" TargetControlID="FakeTarget">
  11:      <Animations>
  12:          <OnClick>
  13:              <Sequence>
  14:                  <OpacityAction AnimationTarget="map" Opacity="1" />
  15:              </Sequence>
  16:          </OnClick>
  17:      </Animations>
  18:  </ajax:AnimationExtender>


my next step was in my javascript function to instantiate these behaviors when i wanted...so in my client script i got a handle to the extenders and manually called their play function...and did the same in my callback function getting the net effect you see in the above image...here's the script:

   1:  var onclick = $find("mapfadeout").get_OnClickBehavior().get_animation();
   2:  onclick.set_target("map");
   3:  onclick.play();


you may think that it is lame to have two extenders, but if you look at how i would have accomplished this using the updatepanelanimationextender if i was able to use a server control, then it is still similar -- that extender has OnUpdating/OnUpdated event handlers...so same thing, just in one extender...net effect is the same.

i hope this helps guide anyone doing something similar!



DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.