Area sensitive help

Gaurav Tomar
16y
6.5k
0
0

Article

Introduction

This article creates a helping window that provides the user with a brief explanation or description for a particular element or state in the application.

This will allow a user to simply move their mouse over a particular user interface element to learn about its purpose or functionality.

First we create a .net application (In this article say Helping Window)

Code for mouse.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

<script>
function showHelpFloatWindow(windowID, obj, horizPadding, vertPadding, goRight)
{
     var w = document.getElementById(windowID);
     if (w != null)
     {
           w.style.display = 'block';
           w.style.visibility = 'visible';
           w.style.top = getAscendingTops(obj) + vertPadding;
           (getAscendingTops(obj) + vertPadding < 0) w.style.top = 0;
           w.style.left = getAscendingLefts(obj) + obj.offsetWidth;
           else
           {
                w.style.left = getAscendingLefts(obj) - horizPadding;
                if ((getAscendingLefts(obj) - horizPadding) < 0) w.style.left =
                getAscendingLefts (obj) + obj.offsetWidth + horizPadding;
           }
      }
}

function hideHelpFloatWindow(windowID)
{
     var w = document.getElementById(windowID);
     if (w != null)
     {
          w.style.display = 'none';
          w.style.visibility = 'hidden';
          w.top = -999;
          w.left = -999;
     }
}

function getAscendingLefts(elem)
{
     if (elem==null)
     return 0;
     else
     return elem.offsetLeft+getAscendingLefts(elem.offsetParent);
}

function getAscendingTops(elem)
{
     if (elem==null)
     return 0;
     else
     return elem.offsetTop+getAscendingTops(elem.offsetParent);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Helping Window</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<span onmouseover ="showHelpFloatWindow('ASPX 1',this,10,20,true);"onmouseout = "hideHelpFloatWindow('ASPX 1');"
style="font-size: 15px; color: Green ; font-family: Verdana; text-decoration: underline;">
<code >HELP 1.aspx</code>
</span>
<span onmouseover="showHelpFloatWindow('ASPX 2',this,310,20,false);"onmouseout ="hideHelpFloatWindow('ASPX 2');"
style="font-size: 15px; color: fuchsia; font-family: Verdana; text-decoration: underline;">
<code>HELP 2.aspx</code>
</span>
</div>
<div id ="ASPX 1" class ="helpwindow">
<iframe frameborder ="0" height ="100%"
src="HELP 1.aspx" style="width: 940px" ></iframe>
</div>
<div id ="ASPX 2" class ="helpwindow">
<iframe frameborder ="0" height ="100%"
src="HELP 2.aspx" style="width: 941px" ></iframe>
</div>
</form>
</body>
</html>

Code for Help1.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HELP 1.aspx.cs" Inherits="help1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 style="color: purple; text-decoration: underline" >I am here to help you<br />
<asp:Image ID="Image1" runat="server" ImageUrl="~/image/bonsai.jpg" />
</h1>
</div>
</form>
</body>
</html>

Code for Help2.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HELP 2.aspx.cs" Inherits="help2" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; height: 100%; color: #000000; background-color: #000000;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/image/dog.gif" /><br />
<h1 style="color: #00ffff" >What you are looking for?</h1>
</div>
</form>
</body>
</html>

Now when you run the application and drag your mouse over the HELP 1.aspx icon, you got the following window:


When you move your mouse over the HELP 2.aspx icon, you got the window shown below

Up Next

Ebook Download

View all

Diving Into ASP.NET WebAPI

Read by 6.2k people

Download Now!

Learn

View all