Blog Series RSS FeedFollow gutgames on TwitterTwitter Feed



Other Posts in AJAX Controls

  1. ASP.Net AJAX Extender - List Search Box
  2. ASP.Net AJAX Controls - Text Box Extender
  3. ASP.Net AJAX List Extender
  4. ASP.Net AJAX - Submit Extender
  5. Adding Animations to Your ASP.Net AJAX Extenders
  6. Fish Eye Extender
  7. Preventing inadvertent loss of information in ASP.Net
  8. Resolution based CSS Selector for ASP.Net
  9. Fader Extender for ASP.Net
  10. Search Highlighter Extender for ASP.Net
  11. Form Clear Extender
  12. CheckBoxList Select All Extender and Spore
  13. Progress Bar AJAX Extender for ASP.Net
  14. Character Counting Extension
  15. Submit Once Extension
  16. Adding Images to a List Box using Server Controls
  17. Text Scrolling with ASP.Net and AJAX
  18. TextArea Resizing Extender for ASP.Net and .Net is a Failure
  19. Web Page Screen Shot for ASP.Net
  20. Fixed Header Extender for GridView in ASP.Net

Fader Extender for ASP.Net

7/11/2008

Once again, my terrible naming skills will most likely confuse you more than anything. The reason I say that is that, once again I've created an extender. Once again, I created it for a purpose (in this case fading div items in and out), however I made it rather generic so it can be used for multiple instances. And once again, I have no idea what to call it... You would think that with being married to someone who has a BA in English, I'd get better at using, like, words and stuff... Meh.

Anyway, the extender is rather simple to use. All it needs is a next button's ID (or image or what have you), a previous button's ID, a div that contains the various divs that you wish to be able to go through, and two animations (OnClick and OnUnClick). However, you can just look at the code itself if you have questions as to what is required:

FaderExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.Fader.FaderBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.Fader
  11: {
  12:     [Designer(typeof(FaderDesigner))]
  13:     [RequiredScript(typeof(AnimationExtender))]
  14:     [ClientScriptResource("AJAXControls.Fader.FaderBehavior", "AJAXControls.Fader.FaderBehavior.js")]
  15:     [TargetControlType(typeof(Control))]
  16:     public class FaderExtender : AnimationExtenderControlBase
  17:     {
  18:  
  19:         private Animation _OnClick;
  20:         private Animation _OnUnClick;
  21:  
  22:         /// <summary>
  23:         /// Does an animation on click
  24:         /// </summary>
  25:         [ExtenderControlProperty]
  26:         [ClientPropertyName("OnClickJson")]
  27:         [Browsable(false)]
  28:         public Animation OnClick
  29:         {
  30:             get
  31:             {
  32:                 return GetAnimation(ref _OnClick, "OnClick");
  33:             }
  34:             set
  35:             {
  36:                 SetAnimation(ref _OnClick, "OnClick", value);
  37:             }
  38:         }
  39:  
  40:         /// <summary>
  41:         /// Does an animation on click
  42:         /// </summary>
  43:         [ExtenderControlProperty]
  44:         [ClientPropertyName("OnUnClickJson")]
  45:         [Browsable(false)]
  46:         public Animation OnUnClick
  47:         {
  48:             get
  49:             {
  50:                 return GetAnimation(ref _OnUnClick, "OnUnClick");
  51:             }
  52:             set
  53:             {
  54:                 SetAnimation(ref _OnUnClick, "OnUnClick", value);
  55:             }
  56:         }
  57:  
  58:         [ExtenderControlProperty]
  59:         [RequiredProperty()]
  60:         [IDReferenceProperty(typeof(WebControl))]
  61:         public string NextButtonID
  62:         {
  63:             get
  64:             {
  65:                 return GetPropertyValue("NextButtonID", "");
  66:             }
  67:             set
  68:             {
  69:                 SetPropertyValue("NextButtonID", value);
  70:             }
  71:         }
  72:  
  73:         [ExtenderControlProperty]
  74:         [RequiredProperty()]
  75:         [IDReferenceProperty(typeof(WebControl))]
  76:         public string PreviousButtonID
  77:         {
  78:             get
  79:             {
  80:                 return GetPropertyValue("PreviousButtonID", "");
  81:             }
  82:             set
  83:             {
  84:                 SetPropertyValue("PreviousButtonID", value);
  85:             }
  86:         }
  87:     }
  88: }

FaderBehavior.js

   1: // README
   2: //
   3: // There are two steps to adding a property:
   4: //
   5: // 1. Create a member variable to store your property
   6: // 2. Add the get_ and set_ accessors for your property
   7: //
   8: // Remember that both are case sensitive!
   9:  
  10:  
  11: /// <reference name="MicrosoftAjaxTimer.debug.js" />
  12: /// <reference name="MicrosoftAjaxWebForms.debug.js" />
  13: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
  14:  
  15:  
  16: Type.registerNamespace('AJAXControls.Fader');
  17:  
  18: AJAXControls.Fader.FaderBehavior = function(element) {
  19:     AJAXControls.Fader.FaderBehavior.initializeBase(this, [element]);
  20:  
  21:     // TODO : (Step 1) Add your property variables here
  22:     this._OnClickJson = null;
  23:     this._OnClickAnim = null;
  24:     this._OnUnClickJson = null;
  25:     this._OnUnClickAnim = null;
  26:     this._CurrentDivUsing = 0;
  27:     this._NextButtonIDValue = null;
  28:     this._PreviousButtonIDValue = null;
  29: }
  30: AJAXControls.Fader.FaderBehavior.prototype = {
  31:     initialize: function() {
  32:         AJAXControls.Fader.FaderBehavior.callBaseMethod(this, 'initialize');
  33:  
  34:         // TODO: Add your initalization code here
  35:         var Elements = this.get_element().getElementsByTagName("div");
  36:  
  37:         this._OnClickAnim = new Array(Elements.length);
  38:         this._OnUnClickAnim = new Array(Elements.length);
  39:         for (var x = 0; x < Elements.length; ++x) {
  40:             if (x != 0) {
  41:                 Elements[x].style.position = "absolute";
  42:                 Elements[x].style.zIndex = Elements[0].style.zIndex - 1;
  43:                 Elements[x].style.left = Sys.UI.DomElement.getLocation(Elements[0]).x;
  44:                 Elements[x].style.top = Sys.UI.DomElement.getLocation(Elements[0]).y;
  45:             }
  46:             if (this._OnClickJson) {
  47:                 this._OnClickAnim[x] = $AA.buildAnimation(this._OnClickJson, Elements[x]);
  48:             }
  49:             if (this._OnUnClickJson) {
  50:                 this._OnUnClickAnim[x] = $AA.buildAnimation(this._OnUnClickJson, Elements[x]);
  51:             }
  52:         }
  53:         Sys.UI.DomEvent.addHandler($get(this._NextButtonIDValue), 'click',
  54:                 Function.createDelegate(this, this._onclickNext));
  55:         Sys.UI.DomEvent.addHandler($get(this._PreviousButtonIDValue), 'click',
  56:                 Function.createDelegate(this, this._onclickPrevious));
  57:     },
  58:  
  59:     _onclickNext: function(EventElement) {
  60:         var Elements = this.get_element().getElementsByTagName("div");
  61:  
  62:         if (this._OnClickAnim[this._CurrentDivUsing]) {
  63:             this._OnClickAnim[this._CurrentDivUsing].stop();
  64:         }
  65:  
  66:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
  67:             this._OnUnClickAnim[this._CurrentDivUsing].play();
  68:         }
  69:  
  70:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) - 1;
  71:  
  72:         this._CurrentDivUsing++;
  73:         if (this._CurrentDivUsing >= Elements.length)
  74:             this._CurrentDivUsing = 0;
  75:  
  76:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) + 1;
  77:  
  78:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
  79:             this._OnUnClickAnim[this._CurrentDivUsing].stop();
  80:         }
  81:  
  82:         if (this._OnClickAnim[this._CurrentDivUsing]) {
  83:             this._OnClickAnim[this._CurrentDivUsing].play();
  84:         }
  85:  
  86:     },
  87:     _onclickPrevious: function(EventElement) {
  88:         var Elements = this.get_element().getElementsByTagName("div");
  89:  
  90:         if (this._OnClickAnim[this._CurrentDivUsing]) {
  91:             this._OnClickAnim[this._CurrentDivUsing].stop();
  92:         }
  93:  
  94:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
  95:             this._OnUnClickAnim[this._CurrentDivUsing].play();
  96:         }
  97:  
  98:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) - 1;
  99:  
 100:         this._CurrentDivUsing--;
 101:         if (this._CurrentDivUsing < 0)
 102:             this._CurrentDivUsing = Elements.length - 1;
 103:  
 104:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) + 1;
 105:  
 106:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
 107:             this._OnUnClickAnim[this._CurrentDivUsing].stop();
 108:         }
 109:  
 110:         if (this._OnClickAnim[this._CurrentDivUsing]) {
 111:             this._OnClickAnim[this._CurrentDivUsing].play();
 112:         }
 113:  
 114:     },
 115:  
 116:     dispose: function() {
 117:         // TODO: Add your cleanup code here
 118:  
 119:         AJAXControls.Fader.FaderBehavior.callBaseMethod(this, 'dispose');
 120:     },
 121:  
 122:     get_OnClickJson: function() {
 123:         return this._OnClickJson;
 124:     },
 125:  
 126:     set_OnClickJson: function(value) {
 127:         this._OnClickJson = value;
 128:     },
 129:     get_OnUnClickJson: function() {
 130:         return this._OnUnClickJson;
 131:     },
 132:  
 133:     set_OnUnClickJson: function(value) {
 134:         this._OnUnClickJson = value;
 135:     },
 136:     get_NextButtonID: function() {
 137:         return this._NextButtonIDValue;
 138:     },
 139:  
 140:     set_NextButtonID: function(value) {
 141:         this._NextButtonIDValue = value;
 142:     },
 143:     get_PreviousButtonID: function() {
 144:         return this._PreviousButtonIDValue;
 145:     },
 146:  
 147:     set_PreviousButtonID: function(value) {
 148:         this._PreviousButtonIDValue = value;
 149:     }
 150: }
 151: AJAXControls.Fader.FaderBehavior.registerClass('AJAXControls.Fader.FaderBehavior', AjaxControlToolkit.BehaviorBase);

Past that, it sets up the divs such that the first div in the list is shown on top of the other divs. When the next button is clicked, it switches the top div to the next div in the list and runs the onclick animation for it (at the same time it runs the onunclick animation for the div that was on top). When the previous button is clicked, it switches the top div to the previous div in the list and runs the animations. So if you have a simple FadeIn animation for the onclick and an FadeOut animation for the onunclick, it makes a rather nice bleed through effect. However you can set it up to move items, resize them, etc. as it is simply using the AJAX Toolkit's animation features. So look at the code, leave feedback, and happy coding.

Comments

 





 


Recent Posts

Craig’s Utility Library 3.2 Released
Version 3.2 of Craig's Utility Library has been released.
Craig’s Framework
This post talks about Craig's Framework, a set of core classes that will be used in most of my MVC based projects going forward and how I plan to open source it.
Personal Data Management
Start of a project that I will be working on that will attempt to put the vast majority of my personal online life into one location.
Craig’s Utility Library 3.1 Released
New version of Craig's Utility Library has been released.
Small Changes, Big Speed Ups
This post talks about a basic change that I did to the bitmap extensions that gave me a large increase in speed.

Recent Comments

Adjusting Contrast of an Image in C#
Roey - It is better to use ColorMatri...
Enabling JSONP in WCF
BLop - Just to inform :"Cross doma...
Viewstate Compression When Using AJAX
Tahri Akram - I'm using compressing/decompre...
Creating a Zip File in C#
Nicholas Carey - Why not use DotNetZip from htt...
Major Rework Happening
mark foley - Hi!Your site is amazing. ...
DISCLAIMER

The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2010