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:

It creates a div inside of it to hold the information and scrolls this inner div.
It makes the div you specify absolutely positioned.
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 ...

Name *

Email (used to grab Gravatar image)

Website

Comment *

Other Posts in AJAX Controls

Text Scrolling with ASP.Net and AJAX

TickerExtender.cs

TickerBehavior.js

Comments

Recent Posts

Recent Comments