ASP.NET Content Scroller Control

• Download source code - 60.34 KB 

Introduction

Content scrolling is a very common task on the web. This ASP.NET server-side control enables you to embed any HTML or ASP controls as its template that it can scroll vertically or horizontally in any direction with configurable scroll speed.

Background

Basically, I was searching for the same functionality. I got a couple of good sample JavaScripts (that I studied, but the final code needed entire customization for ASP.NET). The problem is, they were not usable as is in server-side development. The developer would need to take care to embed it into a page. 

I also found a couple of such commercial products. The problem was, they required you to prepare the content through the product. It would generate HTML, CSS, etc. that you would need to copy into your page. I was looking at doing everything dynamically using the power of ASP.NET server side controls, and so decided to write-it up myself. 

The JavaScript Part

I initially thought of accomplishing this task in Silverlight in my case. Then, as an after-thought, it appeared that it would be silly to expect people to download & install SL for something as basic as Scrolling. So, decided to use JavaScript instead. The control uses the templated & Tokenized JS, in which Tokens are replaced dynamically. The major parts of the script relating to vertical & horizontal scrolling are reproduced below:

function populate() {
	if (iedom) {
		cross_scroller = document.getElementById ? document.getElementById
				("[$ieScroller$]") : document.all.[$ieScroller$]
		if (scrollDirection == 'Vertical')
		    cross_scroller.style.top = parseInt(scrollerHeight) + 8 + "px"
		else if (scrollDirection == 'Horizontal')
		    cross_scroller.style.left = parseInt(scrollerWidth)// + 8 + "px"
		
//      Incorrect way of finding content sizes.
//		actualheight = cross_scroller.offsetHeight
//		actualwidth = cross_scroller.offsetWidth

//      Correct way of finding Actual Content sizes.
		actualheight = getContentHeight(cross_scroller)
		actualwidth = getContentWidth(cross_scroller)
	}
	else if (document.layers) {
		ns_scroller = document.[$nsScroller0$].document.[$nsScroller1$]
		if (scrollDirection == 'Vertical')
		    ns_scroller.top = parseInt(scrollerHeight) + 8
		else if (scrollDirection == 'Horizontal')
		    ns_scroller.left = parseInt(scrollerWidth)// + 8

		ns_scroller.document.close()
		actualheight = ns_scroller.document.height
		actualwidth = ns_scroller.document.width
	}

    // Scrolling starts here, if not set to None.
    if (scrollDirection == 'Vertical')
	    lefttime = setInterval("scrollVertical()", 20)
	else if (scrollDirection == 'Horizontal')
	    lefttime = setInterval("scrollHorizontal()", 20)
}

window.onload = populate

function scrollVertical() {
	if (iedom) {
		if (parseInt(cross_scroller.style.top) > (actualheight * (-1) + 8))
			cross_scroller.style.top = 
			    parseInt(cross_scroller.style.top) - copyspeed + "px"
		else
			cross_scroller.style.top = 
				parseInt(scrollerHeight) + 8 + "px"
	}
	else
		if (document.layers) {
		if (ns_scroller.top > (actualheight * (-1) + 8))
			ns_scroller.top -= copyspeed
		else
			ns_scroller.top = parseInt(scrollerHeight) + 8
	}
}

function scrollHorizontal() {
	if (iedom) {
		if (parseInt(cross_scroller.style.left) > (actualwidth * (-1) + 8))
			cross_scroller.style.left = 
			    parseInt(cross_scroller.style.left) - copyspeed + "px"
		else
			cross_scroller.style.left = 
				parseInt(scrollerWidth) + 8 + "px"
	}
	else
		if (document.layers) {
		if (ns_scroller.left > (actualwidth * (-1) + 8))
			ns_scroller.left -= copyspeed
		else
			ns_scroller.left = parseInt(scrollerWidth) + 8
	}
}

function getContentWidth(el) {
     var tmp=el.style.overflow
     el.style.overflow='auto'
     var w=el.scrollWidth
     el.style.overflow=tmp
     return w
}

function getContentHeight(el) {
     var tmp=el.style.overflow
     el.style.overflow='auto'
     var w=el.scrollHeight
     el.style.overflow=tmp
     return w
}

The script is documented. So, it should be pretty clear. However, it contains tokens that are replaced dynamically by the control.

The control originally supported only RightToLeft & BottomToTop scrolling. However, it has been updated on request to now support TopToBottom &  LeftToRight  scrolling as well. Consequently, there have been changes in function names in the JavaScript if you download it now. They are not really breaking ones, scrollHorizontal has been renamed to scrollRightToLeft, and a new function scrollLeftToRight has been added. Corresponding changes are present for vertical scrolling.

ContentScroller

The control uses ASP.NET templated control technique to allow you to define the content to be scrolled. Hence, you can provide almost anything for scrolling.The major action happens in the control's PreRender event, where the Tokens are replaced. Mostly they (tokens) relate to providing the width, height & Ids of the divs that are dynamically generated. The ContentTemplate is then instantiated & added to these divs. The JS gets hold of these divs by their id, and moves them across screen (left=left-2) or vertically (top=top-2). Thus the control itself is pretty simple. 

Using the Code    

The code itself is pretty easy to use. Look at the following sample:

<%@ Register Namespace="Rahul" TagPrefix="cs" %>
	<cs:ContentScroller runat="server" Width="300" Height="200" 
		scrollDirection="BottomToTop" scrollSpeed="2">
		<ContentTemplate>
			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>

			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>

			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>

			<pre>Put any html or ASP.NET controls here. 
			No matter how long or high it gets, it works.</pre>
			<asp:Label runat="server" BorderStyle="Dashed" 
			BorderWidth="2px" Text="Sample"></asp:Label>
		</ContentTemplate>			
	</cs:ContentScroller>

Anything you put inside the ContentTemplate would be scrolled by the control. I have harnessed the power of ASP.NET control templates to allow embedding anything inside the ContentTemplate. This also required tweaking JavaScript (basically needed to generate some controls dynamically, and have JavaScript reference them for scrolling). 

Points of Interest   

• scrollDirection property is the catch. Set it to LeftToRight, RightToLeft, BottomToTop or TopToBottom for direction or else set it to None to switch off scrolling entirely if desired. The content would still appear stationary on the screen. 
• scrollSpeed is the other interesting part. Set it to a value between 1 & 10 to control the Scrolling speed, where higher is faster. The default value is 2.

Sample Scenario

Here's a sample scenario where I have been using this control to scroll dynamically generated content: 

<%@ Register Namespace="Rahul" TagPrefix="cs" %>
<cs:ContentScroller runat="server" ID="scrollerAlert" scrollDirection="RightToLeft" 
    Height="<%# Me.alertController.scrollHeight %>" 
    Width="<%# Me.alertController.scrollWidth %>">
    <ContentTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr valign="top">
	        <asp:Repeater runat="server" ID="rptAlert">
		   <ItemTemplate>
			<td valign="top" style="padding-right: 30px">
			    <a href="#" style="cursor: hand">
				<asp:Label runat="server" Text='<%# DataBinder.Eval
				(Container.DataItem, "lcNumber") %>' /><br />
				<asp:Label runat="server" Text='<%# 
				Me.formatDocuments(Container.DataItem) %>' /><br />
				</a>
						</td>
					</ItemTemplate>
				</asp:Repeater>
			</tr>
		</table>
	</ContentTemplate>
</cs:ContentScroller>	

History

• 15^th December, 2008: Initial post
• 2^nd March, 2009: Updated source code
• 22^nd May, 2009: Updated source code