Click here to Skip to main content
11,578,524 members (60,726 online)
Click here to Skip to main content

ASP.NET Content Scroller Control

, 24 May 2009 CPOL 54.9K 1.1K 28
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

You may also be interested in...

Comments and Discussions

 
Question.Net 4 problem Pin
PEi090618-Feb-13 8:20
memberPEi090618-Feb-13 8:20 
AnswerRe: .Net 4 problem Pin
Rahul Singla19-Feb-13 0:21
memberRahul Singla19-Feb-13 0:21 
GeneralRe: .Net 4 problem Pin
PEi090619-Feb-13 1:19
memberPEi090619-Feb-13 1:19 
GeneralRe: .Net 4 problem Pin
Rahul Singla20-Feb-13 7:03
memberRahul Singla20-Feb-13 7:03 
General"A duh" moment! Pin
Member 11725479-Aug-09 5:58
memberMember 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'. Pin
Member 11725479-Aug-09 5:26
memberMember 11725479-Aug-09 5:26 
GeneralRe: 'ContentScroller' is ambiguous in the namespace 'Rahul'. Pin
Rahul Singla9-Aug-09 6:02
memberRahul Singla9-Aug-09 6:02 
QuestionCan it use with other CMS Pin
ThaiPig25-May-09 23:42
memberThaiPig25-May-09 23:42 
AnswerRe: Can it use with other CMS Pin
Rahul Singla26-May-09 1:56
memberRahul Singla26-May-09 1:56 
GeneralRe: Can it use with other CMS Pin
ThaiPig27-May-09 20:05
memberThaiPig27-May-09 20:05 
RantTo be honest I think it's poor Pin
martiendejong24-May-09 12:50
membermartiendejong24-May-09 12:50 
GeneralRe: To be honest I think it's poor Pin
Rahul Singla24-May-09 19:02
memberRahul Singla24-May-09 19:02 
GeneralMy vote of 1 Pin
martiendejong24-May-09 12:46
membermartiendejong24-May-09 12:46 
Questionmore than one control on page Pin
strebor7-Apr-09 16:21
memberstrebor7-Apr-09 16:21 
AnswerRe: more than one control on page Pin
Rahul Singla7-Apr-09 19:48
memberRahul Singla7-Apr-09 19:48 
GeneralRe: more than one control on page Pin
strebor8-Apr-09 18:55
memberstrebor8-Apr-09 18:55 
GeneralNot work in Firefox Pin
piyush74198201-Mar-09 22:21
memberpiyush74198201-Mar-09 22:21 
GeneralRe: Not work in Firefox Pin
Rahul Singla1-Mar-09 23:10
memberRahul Singla1-Mar-09 23:10 
GeneralRe: Not work in Firefox Pin
piyush74198202-Mar-09 1:24
memberpiyush74198202-Mar-09 1:24 
GeneralNice control... Pin
Tarabanko Yury16-Dec-08 11:57
memberTarabanko Yury16-Dec-08 11:57 
GeneralRe: Nice control... Pin
Rahul Singla16-Dec-08 18:12
memberRahul Singla16-Dec-08 18:12 
GeneralRe: Nice control... Pin
Rahul Singla16-Dec-08 20:21
memberRahul Singla16-Dec-08 20:21 
GeneralRe: Nice control... Pin
Tarabanko Yury17-Dec-08 1:16
memberTarabanko Yury17-Dec-08 1:16 
GeneralWow, can't believe these comments Pin
Speednet_16-Dec-08 8:25
memberSpeednet_16-Dec-08 8:25 
GeneralRe: Wow, can't believe these comments Pin
Grand Poobah 7716-Dec-08 8:45
memberGrand Poobah 7716-Dec-08 8:45 
GeneralMy vote of 1 Pin
Pstry15-Dec-08 23:09
memberPstry15-Dec-08 23:09 
GeneralRe: My vote of 1 Pin
GriffinPeter15-Dec-08 23:15
memberGriffinPeter15-Dec-08 23:15 
GeneralRe: My vote of 1 Pin
Rahul Singla16-Dec-08 1:26
memberRahul Singla16-Dec-08 1:26 
Generalnice one, except it's in vb... Pin
Seishin#15-Dec-08 23:08
memberSeishin#15-Dec-08 23:08 
GeneralRe: nice one, except it's in vb... Pin
Rahul Singla16-Dec-08 1:07
memberRahul Singla16-Dec-08 1:07 
GeneralArticle Usability Pin
Rahul Singla15-Dec-08 18:12
memberRahul Singla15-Dec-08 18:12 
GeneralRe: Article Usability Pin
Paul Selormey16-Dec-08 3:56
memberPaul Selormey16-Dec-08 3:56 
GeneralMy Vote of -1!! Pin
GriffinPeter15-Dec-08 11:08
memberGriffinPeter15-Dec-08 11:08 
GeneralRe: My Vote of -1!! Pin
spoodygoon15-Dec-08 13:47
memberspoodygoon15-Dec-08 13:47 
GeneralRe: My Vote of -1!! Pin
Member 213432815-Dec-08 15:37
memberMember 213432815-Dec-08 15:37 
GeneralRe: My Vote of -1!! Pin
GriffinPeter15-Dec-08 23:14
memberGriffinPeter15-Dec-08 23:14 
GeneralRe: My Vote of -1!! Pin
ChiliBeanie13-Mar-09 12:26
memberChiliBeanie13-Mar-09 12:26 
GeneralRe: My Vote of -1!! Pin
Member 213432815-Dec-08 15:38
memberMember 213432815-Dec-08 15:38 
GeneralRe: My Vote of -1!! Pin
GriffinPeter15-Dec-08 23:16
memberGriffinPeter15-Dec-08 23:16 

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 | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 24 May 2009
Article Copyright 2008 by Rahul Singla
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid