Tuesday, December 23, 2008

Scrolling News on a Web page

On many of the web portals/sites it is observed that latest news start scrolling from down to top.

To do this need to write JavaScript in detail, there could be number of storing news format. I have written this web control to avoid extensive use of JavaScript by using Marquee at server side.

Requirement: Need To make following tables in SQL Server Database, and put corresponding records in the tables.

This is a very simple table structure in Master Detail format. In tbl_News all the titles and date created will be stored and corresponding newsDetail are stored in tbl_NewsDetail.

News Table

create table tbl_News
(
newsId int primary key identity(1,1) Not null,
newTitle varchar(50) Not null,
dateCreated datetime
)

News Detail Table

create table tbl_NewsDetail
(
dtlId int primary key identity(1,1) Not Null,
newsId int foreign key references tbl_news,
newsDetail varchar(8000)
)


Explanation in detail about the coding

In folder called as "userControll" I have web control as "Scrolling_News.ascx".

The code behind of this page i.e. on page load I have following code

private void Page_Load(object sender, System.EventArgs e)

{

// Put user code to initialize the page here

SqlConnection myCon = new SqlConnection(ConfigurationSettings.AppSettings["connectionString"]);

string strSql = "SELECT * FROM tbl_News order by dateCreated asc";

string strScrolling = "";

HtmlTableCell cellScrolling = new HtmlTableCell();

SqlCommand myComd = new SqlCommand(strSql,myCon);

SqlDataReader sqlRdr;

try

{

myCon.Open();

sqlRdr = myComd.ExecuteReader();

strScrolling = "?Marquee OnMouseOver='this.stop();' OnMouseOut='this.start();' direction='up' scrollamount='2' bgcolor='#000000' width='40%'?";

//replace ? with < >

while(sqlRdr.Read())

{

strScrolling = strScrolling + " ('newsDetail.aspx?NewsId="+sqlRdr.GetValue(0)
+"','NewsDetail','width=400,height=400;toolbar=no;');"+"> face='verdana' size='2' color='#ffffff'>"+ sqlRdr.GetValue(1)
+"
  "+sqlRdr.GetValue(2).ToString()+"

";

}

strScrolling = strScrolling +"?/Marquee>";

sqlRdr.Close();

cellScrolling.InnerHtml = strScrolling;

rowScrolling.Cells.Add(cellScrolling);

}

catch(Exception msg)

{

Response.Write(msg.Message);

}

finally

{

//close sql connection

myCon.Close();

}

}

Which just prepare a connection with the database and get the newsTitle and dateCreated to scroll in the marquee in direction='UP'. I have prepared a string which can be added dynamically in a table row to fit in appropriate table row, which generates scrolling news section with anchor (link) to open detail in the new window. Idea behind opening in new window to stick the user to same site. You can do following with the marquee and JavaScript functionality used in the same.

Change the direction of the scrolling [direction='up']
Can stop on mouseover of the link [OnMouseOver='this.stop();']
Can start on mouseout of the link [OnMouseOut='this.start();']
Can controll the speed of the scrolling [direction='up' scrollamount='2']
Microsoft also provide Add rotator component which can be used with XML, but it differs with respect that
by having above functionality.

In newsDetail.aspx page, I have again simple code to get the detail based on querystring of newsId.

Using this control in a page

Register this control as below in a file in which you want to use this

<%@ Register TagPrefix="Scrolling" TagName="News" src="userControll/Scrolling_News.ascx" %>

and use this in a table as below

?table width="100%" bgColor="#ccccff">
?tr>
?td width="60%">?STRONG>?FONT face="Tahoma">News Section ?/FONT? ?/STRONG? ? /td>
?tr>
?td> ?SCROLLING:NEWS id="scroller" runat="server"> ?/SCROLLING:NEWS> ?/td>
?/tr>
?/table>

Replace ? with < >
That' all enjoy...