Hi Friends,
Here you can look into the code how a drag and drop can be used with in your web page and also New Ticker content coming from Database.
I used DIV here and some images, style and JavaScript.
Your aspx page code:
*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*
<HEAD>
<script language="javascript">
var ie = document.all
var ns = document.getElementById && !ie
function ShowDiv(divEvents)
{
var ele = document.getElementById("divEvents");
if (ele != null)
{
if (ele.style.display == "block")
{
ele.style.display = 'none';
}
else
{
divEvents.style.left='72%';
divEvents.style.top='33%';
ele.style.display ='block';
// var win = window.open("Events.aspx","win", "top=334,left=950,height=300,width=200,scrollbars=no,directories=no,status=no,menubar=0,resizable=no,titlebar=no,location=no");
}
return false;
}
}
function Close(divEvents)
{
var ele = document.getElementById("divEvents");
ele.style.display = 'none';
}
function dragbyclass(e)
{
var fobj = ns ? e.target : event.srcElement
if ((fobj.tagName=="DIV" || fobj.tagName=="TABLE" || fobj.tagName=="MARQUEE") && fobj.className=="drag")
{
var ev=e||event
var offsetx=ev.clientX-fobj.offsetLeft
var offsety=ev.clientY-fobj.offsetTop
document.onmousemove=function()
{
fobj.style.left=ev.clientX-offsetx
fobj.style.top=ev.clientY-offsety
return false
}
fobj.onmouseup=function()
{
document.onmousemove=null
}
}
}
document.onmousedown=dragbyclass
//--------------------------------------------------
function ShowDiv1(divEvents)
{
var ele = document.getElementById("divEvents");
if (ele != null)
{
if (ele.style.display == "block")
{
//ele.style.display = 'none';
}
else
{
divEvents.style.left='72%';
divEvents.style.top='33%';
ele.style.display ='block';
// var win = window.open("Events.aspx","win", "top=334,left=950,height=300,width=200,scrollbars=no,directories=no,status=no,menubar=0,resizable=no,titlebar=no,location=no");
}
return false;
}
}
function changeclass(obj)
{
//document.getElementById("eventslink").className = "mousedown";
obj.className = "mousedown";
}
function change(obj)
{
//eventslink.className = "mouseover";
obj.className = "mouseover";
}
</script>
<style>
.drag { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; FONT-WEIGHT: bolder; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(/ContactsImport/Images/bkgnd_vertical_grad.gif); BORDER-LEFT: black 0px solid; WIDTH: 200px; COLOR: navy; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: Verdana; POSITION: absolute; HEIGHT: 200px }
.mousedown
{
color: Navy;
font-size: 14px;
text-decoration: none;
cursor: hand;
}
.mouseover
{
color: Red;
font-size: 16px;
text-decoration: None;
cursor: hand;
}
</style>
</HEAD>
This can be in the body or head.
But take care of the JavaScripts before the object is created.
<div id="divEvents" class="drag" style="Z-INDEX: 100; BORDER-LEFT-COLOR: gray; BORDER-BOTTOM-COLOR: gray; VERTICAL-ALIGN: baseline; WIDTH: 196px; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: gray; LINE-HEIGHT: 15pt; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; HEIGHT: 30%; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center; BORDER-RIGHT-COLOR: gray; BORDER-BOTTOM-STYLE: ridge">
Upcoming Events <img style="LEFT: 175px; POSITION: absolute; TOP: 3px" src="/ContactsImport/Images/CLOSE.gif"
alt="Close Events" border="0" onclick="Close(divEvents)">
<br>
<br>
<TABLE id="tabM" borderColor="green" height="100%" cellSpacing="0" cellPadding="0" border="0"
width="100%" align="center" background="/ContactsImport/Images/menumide.gif" style="LEFT: 0px; POSITION: absolute; TOP: 27px; BACKGROUND-COLOR: transparent">
<tr>
<td height="2"><IMG height="11" src="/ContactsImport/Images/menutope.gif" width="100%"></td>
</tr>
<tr>
<TD vAlign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" bordercolor="red" width="100%" height="100%"
id="tab1" style="LEFT: 0px; POSITION: absolute; TOP: 27px; BACKGROUND-COLOR: transparent">
<tr>
<td align="right" height="90%">
<marquee id="maqEvents" onmouseover="maqEvents.stop()" onmouseout="maqEvents.start()" scrollAmount="2"
hspace="0" direction="up" behavior="scroll" loop="true" width="196" height="150">
<%=strHtmlEventsText%> <!-- Coming from the code behind -->
<!--<table borderColor="blue" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td><a href="http://www.msn.com" target="_blank">Log on to MSN</a>
<br>
<br>
<br>
<a href="http://www.yahoo.com" target="_blank">Log on to Yahoo</a>
<br>
<br>
<br>
<a href="http://www.Blogger.com" target="_blank">Create Blogs</a>
<br>
<br>
<br>
<a href="http://www.google.com" target="_blank">Go Google.</a>
<br>
<br>
<br>
<a href="http://www.Rediff.com" target="_blank">Rediff.</a>
</td>
</tr>
</table>-->
</marquee>
</td>
</tr>
<tr>
<td align="right" height="10%">
</td>
</tr>
</table>
<tr>
<td height="2"><IMG height="11" src="/ContactsImport/Images/menubotte.gif" width="100%"></td>
</tr>
</TABLE>
</div>
*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*
Code Begind page to fuls the data:
I am publishing only the Scriptlets.
Declare:
//For Drag and Drop Marquee
protected string strHtmlEventsText = @" ";
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
string Month,Year = string.Empty;
getCurrentEvents(Month,Year);
}
private void getCurrentEvents(string Month,string Year)
{
try
{
BusinessClass objCurrentEvents = new BusinessClass ();
DataSet dsGetCurrentEvents = new DataSet();
dsGetCurrentEvents = objHomeCurrentEvents.GetCurrentEvents(Month, Year);
DataTable dsTable = new DataTable();
dsTable = dsGetCurrentEvents.Tables[0];
strHtmlEventsText = getEventsData(dsTable);
}
catch(Exception ex)
{
throw ex;
}
}
private string getEventsData(DataTable dsTable)
{
string strTempHtmlEventsText = @" ";
try
{
if (dsTable.Rows.Count > 0)
{
StringBuilder jsEventsText = new StringBuilder();
jsEventsText.Append(@"<table id='Events' width='100%' cellSpacing='0' cellPadding='0' border='0' align='center'>");
for(int i=0; i<dsTable.Rows.Count; i++)
{
jsEventsText.Append(@"<tr><td width=""100%""><font color=""#000000"" face=""verdana"" size=""1""><B> "
+ dsTable.Rows[i][0].ToString().Trim() + " </font><Br>");
jsEventsText.Append(@"<font color=""#000000"" face=""verdana"" size=""1""><i>"
+"<a>" + dsTable.Rows[i][1].ToString().Trim()+ "</a> </font><br><br><tr><td>");
}
jsEventsText.Append(@"</table>");
strTempHtmlEventsText = jsEventsText.ToString();
}
}
catch(Exception ex)
{
throw;
}
return strTempHtmlEventsText;
}
Thatz it guys you can see drag and drop and on fly news ticker on your web page.
You can customize as per the requirement.
Regards,
Raghavendra Vikas
No comments:
Post a Comment