Display Marquees on ASP.Net Webpage

Introduction

In this article we will see how to display various marquees on an ASP.Net webpage. This article will explain the following things.

1. Simple Marquee with text.
2. Simple Marquee with controls in it.
3. 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.