Click here to Skip to main content
Click here to Skip to main content

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
Sample.gif

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

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

License

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

Share

About the Author

Rahul Singla

India India
No Biography provided

Comments and Discussions

 
Question.Net 4 problem PinmemberPEi090618-Feb-13 8:20 
AnswerRe: .Net 4 problem PinmemberRahul Singla19-Feb-13 0:21 
GeneralRe: .Net 4 problem PinmemberPEi090619-Feb-13 1:19 
GeneralRe: .Net 4 problem PinmemberRahul Singla20-Feb-13 7:03 
General"A duh" moment! PinmemberMember 11725479-Aug-09 5:58 
I figured the ambiguous thing and the marquee works great! Thank you. Greg
General'ContentScroller' is ambiguous in the namespace 'Rahul'. PinmemberMember 11725479-Aug-09 5:26 
GeneralRe: 'ContentScroller' is ambiguous in the namespace 'Rahul'. PinmemberRahul Singla9-Aug-09 6:02 
QuestionCan it use with other CMS PinmemberThaiPig25-May-09 23:42 
AnswerRe: Can it use with other CMS PinmemberRahul Singla26-May-09 1:56 
GeneralRe: Can it use with other CMS PinmemberThaiPig27-May-09 20:05 
RantTo be honest I think it's poor Pinmembermartiendejong24-May-09 12:50 
GeneralRe: To be honest I think it's poor PinmemberRahul Singla24-May-09 19:02 
GeneralMy vote of 1 Pinmembermartiendejong24-May-09 12:46 
Questionmore than one control on page Pinmemberstrebor7-Apr-09 16:21 
AnswerRe: more than one control on page PinmemberRahul Singla7-Apr-09 19:48 
GeneralRe: more than one control on page Pinmemberstrebor8-Apr-09 18:55 
GeneralNot work in Firefox Pinmemberpiyush74198201-Mar-09 22:21 
GeneralRe: Not work in Firefox PinmemberRahul Singla1-Mar-09 23:10 
GeneralRe: Not work in Firefox Pinmemberpiyush74198202-Mar-09 1:24 
GeneralNice control... PinmemberTarabanko Yury16-Dec-08 11:57 
GeneralRe: Nice control... PinmemberRahul Singla16-Dec-08 18:12 
GeneralRe: Nice control... PinmemberRahul Singla16-Dec-08 20:21 
GeneralRe: Nice control... PinmemberTarabanko Yury17-Dec-08 1:16 
GeneralWow, can't believe these comments PinmemberSpeednet_16-Dec-08 8:25 
GeneralRe: Wow, can't believe these comments PinmemberGrand Poobah 7716-Dec-08 8:45 

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

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

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