Word Detail for the Web

• Download source files - 7.78 KB
• Download demo project - 13.3 KB

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

 //
 // 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.

 //
 // 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.