Word Detail for the Web

Shakeel Iqbal

Rate me:

3.62/5 (6 votes)

21 Jan 2007CPOL2 min read

29.9K

330

This article shows how to create your own JavaScript based custom control in C# for the Web.

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)

Written By

Shakeel Iqbal

Chief Technology Officer

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

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