Click here to Skip to main content
13,248,107 members (36,089 online)
Click here to Skip to main content
Add your own
alternative version


29 bookmarked
Posted 15 Dec 2008

ASP.NET Content Scroller Control

, 24 May 2009
Rate this:
Please Sign up or sign in to vote.
Scroll any ASP.NET server side or HTML controls vertically or horizontally in any direction


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.


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') = parseInt(scrollerHeight) + 8 + "px"
		else if (scrollDirection == 'Horizontal') = 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') = parseInt(scrollerHeight) + 8
		else if (scrollDirection == 'Horizontal')
		    ns_scroller.left = parseInt(scrollerWidth)// + 8

		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( > (actualheight * (-1) + 8)) = 
			    parseInt( - copyspeed + "px"
		else = 
				parseInt(scrollerHeight) + 8 + "px"
		if (document.layers) {
		if ( > (actualheight * (-1) + 8)) -= copyspeed
		else = parseInt(scrollerHeight) + 8

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

function getContentWidth(el) {
     var w=el.scrollWidth
     return w

function getContentHeight(el) {
     var w=el.scrollHeight
     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.


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">
			<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>

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 %>">
        <table cellpadding="0" cellspacing="0">
            <tr valign="top">
	        <asp:Repeater runat="server" ID="rptAlert">
			<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 />


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rahul Singla
India India
No Biography provided

You may also be interested in...


Comments and Discussions

Question.Net 4 problem Pin
PEi090618-Feb-13 9:20
memberPEi090618-Feb-13 9:20 
AnswerRe: .Net 4 problem Pin
Rahul Singla19-Feb-13 1:21
memberRahul Singla19-Feb-13 1:21 
GeneralRe: .Net 4 problem Pin
PEi090619-Feb-13 2:19
memberPEi090619-Feb-13 2:19 
GeneralRe: .Net 4 problem Pin
Rahul Singla20-Feb-13 8:03
memberRahul Singla20-Feb-13 8:03 
General"A duh" moment! Pin
Member 11725479-Aug-09 6:58
memberMember 11725479-Aug-09 6:58 
General'ContentScroller' is ambiguous in the namespace 'Rahul'. Pin
Member 11725479-Aug-09 6:26
memberMember 11725479-Aug-09 6:26 
I am new to I am working with visual studio 2008. I thought I followed your directions, but I get this message:
'ContentScroller' is ambiguous in the namespace 'Rahul'.
GeneralRe: 'ContentScroller' is ambiguous in the namespace 'Rahul'. Pin
Rahul Singla9-Aug-09 7:02
memberRahul Singla9-Aug-09 7:02 
QuestionCan it use with other CMS Pin
ThaiPig26-May-09 0:42
memberThaiPig26-May-09 0:42 
AnswerRe: Can it use with other CMS Pin
Rahul Singla26-May-09 2:56
memberRahul Singla26-May-09 2:56 
GeneralRe: Can it use with other CMS Pin
ThaiPig27-May-09 21:05
memberThaiPig27-May-09 21:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 24 May 2009
Article Copyright 2008 by Rahul Singla
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid