Display Marquees on ASP.Net Webpage

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

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.

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.

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.

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.