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)
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)
ns_scroller.document.close()
actualheight = ns_scroller.document.height
actualwidth = ns_scroller.document.width
}
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 div
s that are dynamically generated. The ContentTemplate
is then instantiated & added to these div
s. The JS gets hold of these div
s 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