Text Scrolling with ASP.Net and AJAX

9/19/2008

I've been working on a desktop app for internal marketing purposes... It was an interesting blend of web and desktop  development as the client had to open up a website and display it. Rather simple really, however they wanted some animation. However, what they asked for was rather generic, so I built it into an extender (on my own time) and I'm putting it out here for the world to use.

This extender is rather basic, as always (as always, you're going to need the AJAX Toolkit to compile it). Anyway, in this instance I needed something that scrolled a bit of text inside of a div from the bottom of the div to the top, hiding any overflow. That was it really. I could always use the marquee tag, but I'm not big on using anything nonstandard...  So what I came up with was this:

TickerExtender.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.Ticker.TickerBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.Ticker
  11: {
  12:     [Designer(typeof(TickerDesigner))]
  13:     [RequiredScript(typeof(CommonToolkitScripts))]
  14:     [RequiredScript(typeof(AnimationScripts))]
  15:     [ClientScriptResource("AJAXControls.Ticker.TickerBehavior", "AJAXControls.Ticker.TickerBehavior.js")]
  16:     [TargetControlType(typeof(Control))]
  17:     public class TickerExtender : ExtenderControlBase
  18:     {
  19:         // TODO: Add your property accessors here.
  20:         //
  21:         [ExtenderControlProperty]
  22:         [DefaultValue(100)]
  23:         public int Delay
  24:         {
  25:             get
  26:             {
  27:                 return GetPropertyValue("Delay", 100);
  28:             }
  29:             set
  30:             {
  31:                 SetPropertyValue("Delay", value);
  32:             }
  33:         }
  34:     }
  35: }

TickerBehavior.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.Ticker');
  17:  
  18: AJAXControls.Ticker.TickerBehavior = function(element) {
  19:     AJAXControls.Ticker.TickerBehavior.initializeBase(this, [element]);
  20:  
  21:     // TODO : (Step 1) Add your property variables here
  22:     this._DelayValue = null;
  23:     this._Animation = null;
  24:     this._Width = 0;
  25:     this._Height = 0;
  26:     this._XPosition = 0;
  27:     this._YPosition = 0;
  28:     this._ScollText = null;
  29: }
  30: AJAXControls.Ticker.TickerBehavior.prototype = {
  31:     initialize: function() {
  32:         AJAXControls.Ticker.TickerBehavior.callBaseMethod(this, 'initialize');
  33:  
  34:         // TODO: Add your initalization code here
  35:         var CurrentElement = this.get_element();
  36:         this._Width = CurrentElement.offsetWidth;
  37:         this._Height = CurrentElement.offsetHeight;
  38:         this._XPosition = this.cumulativeOffset(CurrentElement)[0];
  39:         this._YPosition = this.cumulativeOffset(CurrentElement)[1];
  40:  
  41:         CurrentElement.style.overflow = "hidden";
  42:         CurrentElement.style.overflowX = "hidden";
  43:         CurrentElement.style.overflowY = "hidden";
  44:         CurrentElement.style.position = "absolute";
  45:  
  46:         this._ScrollText = document.createElement('div');
  47:         this._ScrollText.setAttribute('id', 'ScrollingText');
  48:         this._ScrollText.style.width = this._Width + "px";
  49:         this._ScrollText.style.height = this._Height + "px";
  50:         this._ScrollText.innerHTML = CurrentElement.innerHTML;
  51:         CurrentElement.innerHTML = "";
  52:         CurrentElement.appendChild(this._ScrollText);
  53:         this._ScrollText.style.position = "relative";
  54:         this._ScrollText.style.left = "0px";
  55:         this._ScrollText.style.top = this._Height + "px";
  56:  
  57:         this._Animation = new $AA.MoveAnimation(this._ScrollText, this._DelayValue, 50, 0, -2 * this._Height, true, 'px');
  58:         this._Animation.add_ended(Function.createDelegate(this, this.AnimationEnd));
  59:         this._Animation.initialize();
  60:         this._Animation.play();
  61:     },
  62:  
  63:     cumulativeOffset: function(Element) {
  64:         var Left = 0;
  65:         var Top = 0;
  66:         do {
  67:             Top += Element.offsetTop || 0;
  68:             Left += Element.offsetLeft || 0;
  69:             Element = Element.offsetParent;
  70:         } while (Element);
  71:         var ReturnValues = [Left, Top];
  72:         return ReturnValues;
  73:     },
  74:  
  75:     AnimationEnd: function() {
  76:         this._ScrollText.style.top = this._Height + "px";
  77:         this._Animation.play();
  78:     },
  79:  
  80:     dispose: function() {
  81:         // TODO: Add your cleanup code here
  82:  
  83:         AJAXControls.Ticker.TickerBehavior.callBaseMethod(this, 'dispose');
  84:     },
  85:  
  86:     // TODO: (Step 2) Add your property accessors here
  87:     get_Delay: function() {
  88:         return this._DelayValue;
  89:     },
  90:  
  91:     set_Delay: function(value) {
  92:         this._DelayValue = value;
  93:     }
  94: }
  95: AJAXControls.Ticker.TickerBehavior.registerClass('AJAXControls.Ticker.TickerBehavior', Sys.UI.Behavior);

In order to use it, all you need to do is set the TargetID to the div that holds the text you want to scroll and the amount of time (in seconds) that you want it to take (Delay field).  Also, it changes three things of the div you specify:

  1. It creates a div inside of it to hold the information and scrolls this inner div.
  2. It makes the div you specify absolutely positioned.
  3. It sets the overflow of the div to hidden.

That's it in terms of unexpected consequences. Other than that, it'll just constantly scroll that text. You may wish to change the code and add some features (scrolling in any direction, maybe some fading effects, etc.), but if not just download the code, give it a try, and happy coding.



Comments

James Craig
May 13, 2010 9:15 AM

Apparently with one of the newer updates to the AJAX Control Toolkit they removed AjaxControlToolkit.BehaviorBase (or at least it's not being loaded properly). It should be fixed now.

iena
May 13, 2010 6:46 AM

But it doesn't works ...