Click here to Skip to main content
15,123,819 members
Articles / Web Development / ASP.NET
Article
Posted 21 Jan 2007

Stats

28.7K views
330 downloads
21 bookmarked

Word Detail for the Web

Rate me:
Please Sign up or sign in to vote.
3.62/5 (6 votes)
21 Jan 2007CPOL2 min read
This article shows how to create your own JavaScript based custom control in C# for the Web.
Sample Image - WordDetail.gif

Introduction

This article shows how to create your own JavaScript based custom control in C# for the Web. JavaScript based controls are very popular on the Web these days. On many Websites, there are several words having different colors. When the user does a mouse over on these words, one popup window opens and it shows some details/explanation of that word. WordDetail works like that.

WordDetail is a JavaScript based custom control for ASP.NET. It behaves like a tooltip text.

Using the Code

This control uses JavaScript for showing and hiding a popup window. There is a separate file WordDetail.js for JavaScript. When a user does a mouseover on a word, ShowDialog(dialog,e) function will be called. This method sets x, y position of the mouse in X and Y variables. then we call the show() function for showing the dialog after the half second using t = setTimeout("Show()",500) statement.

For hiding this popup dialog when there is a mouseout from a specific word, HideDialog(dialog) function is called for hiding the dialog.

JavaScript
//
// JavaScript methods
//

var X;
var Y;

var t;
var Dlg2;

function ShowDialog(dialog,e)
{
   Dlg2=dialog;
   getPosition(e);
   t = setTimeout("Show()",500);

}

function HideDialog(dialog)
{
   clearTimeout(t);
   document.getElementById(dialog).style.display='none';
}

function Show(e)
{
   var dlg = document.getElementById(Dlg2);

   dlg.style.position = 'absolute';
   dlg.style.left = X + "px";
   dlg.style.top = Y + "px";
   dlg.style.display='block';
}

WordDetail control is inherited from the Label class. So its functionality is the same as the Label control except that there are some extra features which I added in this control. In the Render method, I add onMouseOver and onMouseOut events on the Label and I make a <div> dialog that will popup against that specific Label using the GenerateDescriptionDialog(writer) method. In this method, I create HTML DIV controls and apply styles on them.

JavaScript
//
// Word Detail Class
//

[DefaultProperty("Text")]
[ToolboxData("<{0}:WordDetail runat="server">")]
public class WordDetail : Label
{

   protected override void Render(HtmlTextWriter writer)
   {
       if (this._UseCssClass && this.CssClass.Trim() == "")
       {
           this.CssClass = "Word";
       }

       this.Attributes.Add("onMouseOver", "ShowDialog('Div_" + this.ID + "',event)");
       this.Attributes.Add("onMouseOut", "HideDialog('Div_" + this.ID + "')");

       base.Render(writer);

       GenerateDescriptionDialog(writer);
   }

   protected override void RenderContents(HtmlTextWriter output)
   {
       output.Write(Text);
   }

   protected void GenerateDescriptionDialog(HtmlTextWriter output)
   {
       string mainClass = "";
       string titleClass = "";
       string ContClass = "";

       if (_UseCssClass)
       {
           mainClass = "class='WordDetail'";
           titleClass = "class='Title'";
           ContClass = "class='Content'";
       }

       string dialog = "<div id='Div_" + this.ID + "' " + GetDialogStyle() +
                       " "+mainClass+">" + "<div " + GetTitleStyle() +
                       " "+titleClass+" >" + _Title + "</div>" +
                       "<div style='padding:2px 2px 2px 2px;' "+ContClass+" >" +
                       _Description + "</div>" + "</div>";

       output.Write(dialog);
   }
}

How to Use the Code

For using the WordDetail custom control, you have to add its DLL in your Web project. After adding the DLL, you have to register it on your page. Its assembly name is WordDetail and its namespace is Shakeel.WebControls.

Include the JavaScript file WordDetail.js for showing and hiding the popup dialog, and also include the stylesheet WordDetail.css in your Web page.

ASP.NET
//
// Use DLL in Web page
//

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
   Inherits="_Default" %>

<%@ Register Assembly="WordDetail" Namespace="Shakeel.WebControls" TagPrefix="wd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
   <title>Word Detail Demo</title>

   <script type="text/javascript" src="WordDetail.js"></script>
   <link href="WordDetail.css" rel="stylesheet" type="text/css" />

</head>
<body>
 <form id="form1" runat="server">
   Do you know what is
   <wd:WordDetail ID="wdUserDefine1" runat="server"
           Title="User Define Setting for Black Box."
       Description="Yours Word description here......"
       DialogBgColor="white" DialogBorderColor="Black"
       DialogBorderStyle="Solid" TitleBgColor="black"
       TitleForeColor="white" DialogBorderWidth="2px"
       Font-Bold="True" ForeColor="blue" Width="250px">BlackBox</wd:WordDetail>.

  Please Mouse over on Word Black Box.
  </form>
</body>
</html>

Points of Interest

JavaScript based controls are very useful in Web programming.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shakeel Iqbal
Chief Technology Officer
Pakistan Pakistan
Passion and positive dedication is essential part of success. I believe on hardworking and sharing knowledge with others. I always try to be a better than I am and think positive for positive result.

My Blogs

My Linked-In Profile

Comments and Discussions

 
NewsExcellent Work Pin
Sagwan19-Feb-07 2:38
MemberSagwan19-Feb-07 2:38 
General@Sagwan Pin
Shakeel Iqbal19-Feb-07 4:05
MemberShakeel Iqbal19-Feb-07 4:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.