Wrapping mouse over help icon up Web User Control

S

steve_barker333

Hi guys!

I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.

I've included the code for this at the end of this post...

I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:

NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight

etc...

I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?

Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.

Many thanks,

Steve.

=====================================
Code:
=====================================

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

<!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>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">

//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");

</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">

hidelayer('spanHelp') ;

//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}

function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>
 
M

Michael Hamrah

Why a web user control? THis would be much better as a template based
server control!
 
S

steve_barker333

Thanks for your advice Michael.

Sure, if a template based server control would be better, I'll go with
that. Can you recommend any links on this subject?

Many thanks,

Steve.

Michael said:
Why a web user control? THis would be much better as a template based
server control!

Hi guys!

I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.

I've included the code for this at the end of this post...

I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:

NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight

etc...

I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?

Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.

Many thanks,

Steve.

=====================================
Code:
=====================================

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

<!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>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">

//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");

</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">

hidelayer('spanHelp') ;

//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}

function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>
Click to expand...
Click to expand...
 
S

steve_barker333

Thanks for your advice Michael.

Sure, if a template based server control would be better, I'll go with
that. Can you recommend any links on this subject?

Many thanks,

Steve.

Michael said:
Why a web user control? THis would be much better as a template based
server control!

Hi guys!

I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.

I've included the code for this at the end of this post...

I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:

NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight

etc...

I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?

Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.

Many thanks,

Steve.

=====================================
Code:
=====================================

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

<!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>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">

//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");

</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">

hidelayer('spanHelp') ;

//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}

function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>
Click to expand...
Click to expand...
 
S

steve_barker333

Thanks for your advice Michael.

Sure, if a template based server control would be better, I'll go with
that. Can you recommend any links on this subject?

Many thanks,

Steve.

Michael said:
Why a web user control? THis would be much better as a template based
server control!

Hi guys!

I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.

I've included the code for this at the end of this post...

I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:

NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight

etc...

I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?

Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.

Many thanks,

Steve.

=====================================
Code:
=====================================

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

<!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>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">

//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");

</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">

hidelayer('spanHelp') ;

//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}

function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>
Click to expand...
Click to expand...
 
S

steve_barker333

Thanks for your advice Michael.

Sure, if a template based server control would be better, I'll go with
that. Can you recommend any links on this subject?

Many thanks,

Steve.

Michael said:
Why a web user control? THis would be much better as a template based
server control!

Hi guys!

I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.

I've included the code for this at the end of this post...

I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:

NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight

etc...

I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?

Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.

Many thanks,

Steve.

=====================================
Code:
=====================================

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

<!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>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">

//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");

</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">

hidelayer('spanHelp') ;

//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}

function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>
Click to expand...
Click to expand...
 
S

steve_barker333

Thanks for your advice Michael.

Sure, if a templated based server control would be better, I'll go for
that. Do you have any links you can point me at that will help me to
get off the ground with this?

Michael said:
Why a web user control? THis would be much better as a template based
server control!

Hi guys!

I have some pretty neat code that shows a floating help box over the
top of an ASP.NET screen when an image is mouse-overed.

I've included the code for this at the end of this post...

I was wondering if there'd be any way to wrap this all up as an ASP.NET
Web User Control that can be placed on a Web Form. The control would
take care of making sure all the JavaScript is registered etc... I
envisage that it would have the following properties:

NormalImageUrl
MouseOverUrl
HelpText
HelpStyle
HelpClass
HelpWidth
HelpHeight

etc...

I can see how most of this code would be written, apart from where
changes are required to the Java Script section. If the user set
HelpWidth to be 200px say, how would I replace the 100px currently set
with 200px? Is it possible to do a find and replace on the text an
ASP.NET control renders just before it is written to the page?

Any help would be gratefully received, and if I get the control
working, I'll post it for others to use too.

Many thanks,

Steve.

=====================================
Code:
=====================================

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

<!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>
<span onmouseover="showlayer('spanHelp');imgHelp.src='Lit.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Normal.gif';"><img
src="Normal.gif" id="imgHelp" alt=""/></span>
<script type="text/javascript">

//Decision Objectives layer
document.write("<span style=\"position: absolute;width:100px\"
id=\"spanHelp\">Here is some useful help text!</span>");

</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">

hidelayer('spanHelp') ;

//hide the layers to start with
function hidelayer(layer)
{
document.all[layer].style.visibility = "hidden";
}

function showlayer(layer)
{
document.all[layer].style.visibility = "visible";
}
</script>
Click to expand...
Click to expand...
 
M

Michael Hamrah

Hey Steve, check out the following code. I didn't use a template
control, but a CompositeControl instead. You can lookup the ITemplate
interface and the InstantiateIn method to figure out how to use it. It
would be cool to make the helptext layer a template to provide more
than just text for help.

Anyway, you can copy the following code into a new windows class
project and compile it into a dll. You can then use the following tag
to embedd the control in the page.

<cc1:Overlay runat="server" id="ov1" width="100px" Image="Lit.gif"
HelpImage="Normal.gif" HelpText="My Help Text" />

Here's the code:

/// <summary>
/// Michael Hamrah from Steve Barker
/// Sorry, it's not too pretty!
/// The following code shows
/// 1) Overriding the AddAttributesToRender method for doing
mouseovers
/// 2) Overriding the Render method to place controls next to
eachother
/// 3) Overriding the CreateChildControls method to add controls
during runtime
/// 4) Using the Page.ClientScript property to render Javascript
/// </summary>
public class Overlay : CompositeControl
{
private string _img = string.Empty;
private string _helpText = string.Empty;
private string _helpImg = string.Empty;

public Overlay()
{

}
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Span;
}
}
public string HelpImage
{
get { return _helpImg; }
set { _helpImg = value; }
}
public string Image
{
get { return _img; }
set { _img = value; }
}
public string HelpText
{
get { return _helpText; }
set { _helpText = value; }
}
//add image to control
protected override void CreateChildControls()
{
Image img = new Image();
img.ID = "litImg";
img.ImageUrl = this.Image;
this.Controls.Add(img);

StringBuilder sb = new StringBuilder();
sb.Append("<script type=\"text/javascript\"> function
hideLayer(layer) { document.all[layer].style.visibility = \"hidden\"; }
function showLayer(layer) { document.all[layer].style.visibility =
\"visible\"; } </script>");


if(Page.ClientScript.IsClientScriptBlockRegistered("helpJS") == false)

Page.ClientScript.RegisterClientScriptBlock(typeof(string), "helpJS",
sb.ToString());

if
(Page.ClientScript.IsStartupScriptRegistered(this.ClientID) == false)
Page.ClientScript.RegisterStartupScript(typeof(string),
this.ClientID, "<script type=\"text/javascript\">hideLayer('" +
this.ClientID + "x');</script>");

base.CreateChildControls();
}
//add attributes to span tag
protected override void AddAttributesToRender(HtmlTextWriter
writer)
{

StringBuilder sb = new StringBuilder();

sb.Append("showLayer('" + this.ClientID + "x')");
if (this.Image != string.Empty)
sb.Append(";" + this.ID + "_litImg.src='" + this.Image
+ "'");

sb.Append(";");
this.Attributes.Add("onmouseover", sb.ToString());

sb = new StringBuilder();
sb.Append("hideLayer('" + this.ClientID + "x')");
if(this.HelpImage != string.Empty)
sb.Append(";" + this.ID + "_litImg.src='" +
this.HelpImage + "'");

sb.Append(";");
this.Attributes.Add("onmouseout", sb.ToString());

base.AddAttributesToRender(writer);
}
//Need to add layer span tag after real span tag so override
this function.
protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);

StringBuilder sb = new StringBuilder();
sb.Append("<script
type=\"text/javascript\">document.write(\"<span ");
sb.Append(" style=\\\"position:absolute;");
if (this.Width != 0)
sb.Append("width:" + this.Width + "\\\"");
sb.Append(" id=\\\"" + this.ClientID + "x\\\">");
sb.Append(this.HelpText);
sb.Append("</span>\");</script>");
writer.Write(sb.ToString());

}
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
Help with my responsive home page 2
I need help making a zooming function 11
Checking dynamically populated data using ajax with user entered value 5
Why is this WordPress comments form not submitting? 1
Tooltip box 14
Working on mobile css menu with plenty of frustration! 2
RadioButtonList, Web User Control, Firefox, IE 5

Members online

Total: 36 (members: 1, guests: 35)
Robots: 169

Forum statistics

Threads
473,756
Messages
2,569,533
Members
45,007
Latest member
OrderFitnessKetoCapsules

Latest Threads

Top