Introduction
In this article we will
see how to display various marquees on an ASP.Net webpage. This article will
explain the following things.
-
Simple Marquee with text.
-
Simple Marquee with controls in it.
-
Dynamic Marquee Populated from database values.
Background
To make our
ASP.Net web page very design effective we need to display some animation on the
page. One of the animations can be done using a marquee in ASP.Net. We can
scroll the text within specified area for that maximum developers use the login
like using Ajax update panel, timer and in this cases every time we need the
partial post back to server. But use of a marquee will not do any partial post
back to the server and in a very simple manner we can show the scrolling text or
images using marquee. So let's see how to display a marquee from basic level to
advance level one-by-one.
Simple Marquee with Text
To display marquee HTML
provide the <marquee></marquee> tag in which we can show any simple text or
controls like hyperlinks, images etc. See the following piece of code used to
show only simple marquee with text. One more thing about marquee is that they
move in a given area, that means the controls (parent) they move.
<marquee><strong>
Simple Marquee Text</strong></marquee>
Using this single line of code we are able to show the scrollable text on
our ASP.Net web-page. Further we will see how to provide the direction to our
marquee while the previous example will create the marquee moving to the left direction
which is default marquee direction.
To provide direction to our marquee we can use direction attribute in marquee.
See the following lines which will move our marquee with left and right
direction.
<div
style="width:
927px; background-color:
#FFFF00;">
<marquee
direction="left"><strong>
Simple Marquee Text(Left Direction)</strong></marquee>
</div>
<div
style="width:
927px; background-color:
#CCFFCC;">
<marquee
direction="right"><strong>
Simple Marquee Text(Right Direction)</strong></marquee>
</div>
Simple Marquee with Controls
I think so up to now you understand how to
show simple marquee with text. So let's move to show the marquee
containing an ASP.Net control in it. See the following lines which contain
hyperlink control and Image Control.
<div
style="background-color:
#FFCCFF">
<marquee
direction="Up"><strong>
<a
href="#">Simple
Marquee With Hyperlink In Up Direction</a></strong></marquee>
</div>
<div
style="background-color:
#CCCCFF">
<marquee
direction="down"><strong>
<asp:Image
ID="img"
runat="server"
ImageUrl="~/wait.gif"
/></strong></marquee>
</div>
In the previous two marquees we showed one hyperlink control with an up direction and one
image control with a down direction.
Up to here we have seen a basic marquee with text
and using controls. Now we will see some advanced marquees which populated
from a database and when we take our mouse pointer over them they will stop and we
move out of it, then again it will start working.
Dynamic Marquee with Database
In so many cases we need to show some news
for our application provided by the site administrator. The news can be dynamic
every time new news occurs. That kind of news can be shown in a marquee.
In the first example we will see the marquee which will move in up direction and
second one which will move in down direction. For providing mouseover stop and
start we have an attribute like:
onmouseover="this.stop()"
onmouseout="this.start()"
In the
above line "this" refers to the marquee on which we have given the attribute.
See the full code below to populate the marquee from database and display it on the
page.
<table>
<tr>
<td>
<asp:Panel
ID="Panel1"
runat="server"
BackColor="#FFFFCC"
BorderStyle="Inset"
BorderWidth="3"
Width="454px"
GroupingText="Dynamic
Marquee From Database(Up Direction)">
<marquee
direction="up"
onmouseover="this.stop()"
onmouseout="this.start()"
scrolldelay="100"
style="height:
127px; width:
457px;">
<asp:Literal
ID="lt1"
runat="server"></asp:Literal></marquee>
</asp:Panel>
</td>
<td>
<asp:Panel
ID="Panel2"
runat="server"
BackColor="#CCFFCC"
BorderStyle="Inset"
BorderWidth="3"
Width="454px"
GroupingText="Dynamic
Marquee From Database(Down Direction)">
<marquee
direction="down"
onmouseover="this.stop()"
onmouseout="this.start()"
scrolldelay="100"
style="height:
127px; width:
457px;">
<asp:Literal
ID="lt2"
runat="server"></asp:Literal></marquee>
</asp:Panel>
</td>
</tr>
</table>
In the line of code shown above you can see we are using two panel controls and in which we are using a marquee with direction,
onmouseover, onmousout, scrolldelay for some the speed of marquee if you want
show that marquee must move slowly then increase the scrolldelay attribute from
100 to 200 or what it may be. In the same marquee you have seen that we are using a
Literal control; this control we are using for displaying the text which we are
binding to it from database. To bind the text to literal control use the
following code in the page load event.
protected
void Page_Load(object
sender, EventArgs e)
{
DataSet
ds1=obj.GetRecord();/*this obj is referring to some class in which GetRecord
method is present which return the record from database. You can write your
//own class and method.*/
string s1;
s1 = "<table><tr><td>";
for
(int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
s1 += "<a href=Somepage.aspx
style=font-family: fantasy; font-size: large; font-weight:bold; font-style:
normal; color: #660066>"+ds1.Tables[0].Rows[i][1].ToString()+"</a></td>";
s1 += "<br/>";
}
s1 += "</tr></table>";
lt1.Text = s1.ToString();
lt2.Text = s1.ToString();
}
In the code shown above you see that we are using
one string s1 in which we first give a table row and then we are looping
through the dataset object for every record and including it in s1 string with
the hyperlink control and finally we bind that s1 to our literal control.
Conclusion
From the explanation above I hope you understand
the basic marquee creation and dynamic marquee populated from database. I hope
this article will be helpful to you.