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

ASP.NET MVC 5 Recipes: A Practical Solution

Read by 9.3k people

Download Now!

Learn

View all