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 a specified area for that maximum developers use the login like using Ajax update panel, timer, and in this case every time we need the partial postback to the server. But the 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 a marquee. So let's see how to display a marquee from the basic level to advanced 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 a simple marquee with text. One more thing about a marquee is that they move in a given area, which 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 the default marquee direction.

 

To provide direction to our marquee we can use the direction attribute in the marquee. See the following lines which will move our marquee in the 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 downward direction.

 

Up to here, we have seen a basic marquee with text and user 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 on a marquee. In the first example, we will see the marquee which will move in the up direction, and the second one will move in the 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 the 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 the database. I hope this article will be helpful to you.