Success comes after thinking and thinking comes after failure.

Wednesday, February 14, 2007

This is how you can implement Drag and Drop and also News Ticker with Database.

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">

                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Upcoming Events &nbsp; <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%">
                                                                                &nbsp;&nbsp;<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 = @"&nbsp;";

                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 = @"&nbsp;";
                        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>&nbsp;"

                                                        + dsTable.Rows[i][0].ToString().Trim() + "&nbsp;&nbsp;&nbsp;&nbsp;</font><Br>");

                                                jsEventsText.Append(@"<font color=""#000000"" face=""verdana"" size=""1""><i>"

                                                        +"<a>" + dsTable.Rows[i][1].ToString().Trim()+ "</a>&nbsp;&nbsp;&nbsp;&nbsp;</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


Test Blog

How to put HTML code in Blogs

Simple wrap your code with XMP tag your HTML Script

Regards,
Raghavendra Vikas.

How to create Verticle Scroll which can connect to Database.

Hi friends,
I was asked to create a news ticker which can interact with database in my .Net application. I was bit confused and started searching on net and found some exclent controls which are ready made. But due to some issues I was not ready to use them.
My search started again for the same. I got back to fundamentals of HTML controls. Hooked up with marquee. Yes, this guy solved all my problems. I just learned about this Tag in early development stage. Thought its very fancy. But there is lot of things in it.
This article shows just a simple HTML Code. I will update with Database.
Just follow the following code below in ur .aspx page
<br /><br /><table bordercolor="blue" height="100%" cellspacing="0" cellpadding="0" width="100%" border="0"><br /><tr><br /><td><br /><div id="ScrAnnounce" style="WIDTH: 70%; HEIGHT: 100%; TEXT-ALIGN: left; TEXT-DECORATION: none"> <br /><marquee id="maqAnnounce" onmouseover="maqAnnounce.stop()" onmouseout="maqAnnounce.start()" scrollamount="2" direction="up" width="100%" height="300"><br /><table bordercolor="blue" cellspacing="0" cellpadding="0" width="100%" border="0"><br /><tbody><tr><br /><td><a href="http://www.msn.com" target="_blank">Log on to MSN</a><br /><br /><a href="http://www.yahoo.com" target="_blank">Log on to Yahoo</a><br /><a href="http://www.Blogger.com" target="_blank">Create Blogs</a><br /><br /><a href="http://www.google.com" target="_blank">Go Google.</a><br /><a href="http://www.Rediff.com" target="_blank">Rediff.</a><br /></td><br /></tr><br /></tbody></table><br /></marquee><br /></div><br /></td><br /></tr><br /></table>

This all about it. Simpel Right?