Ask a Question related to ASP.NET Building Controls, Design and Development.
-
steve_barker333@hotmail.com #1
Wrapping mouse over help icon up Web User 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='Li t.gif';"
onmouseout="hidelayer('spanHelp');imgHelp.src='Nor mal.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>
steve_barker333@hotmail.com Guest
-
user control problem access value from user control to a page
Thanks a lot for paying attention to my problem , i tell u the problem i have a main form in which i gave a login label that points to a... -
Wrapping the link control
I have a link control with the label as following: "Tired of frustrating delays in implementation? Try touchpoint center". The problem is ,... -
Dynamically Adding User Control with Child User Control
I have a user control that has a child user control. If I drag this onto the page, it appears and functions normally. If I attempt to add the... -
Know in user control page_load if an user control event is going to be fired
Hi all, i have built a user control that shows a map and let the user zoom in, out, usual stuff. Putting this object in a webform the user can... -
Busy mouse icon after member import script runs
I am working on a multimedia diary and am working on the user importing media. After this handler to add a cast member runs, the cursor shows the... -
Michael Hamrah #2 Re: Wrapping mouse over help icon up Web User Control
Why a web user control? THis would be much better as a template based
server control!
[email]steve_barker333@hotmail.com[/email] wrote:> 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='Li t.gif';"
> onmouseout="hidelayer('spanHelp');imgHelp.src='Nor mal.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>Michael Hamrah Guest
-
steve_barker333@hotmail.com #3 Re: Wrapping mouse over help icon up Web User Control
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 Hamrah wrote:> Why a web user control? THis would be much better as a template based
> server control!
>
> [email]steve_barker333@hotmail.com[/email] wrote:> > 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='Li t.gif';"
> > onmouseout="hidelayer('spanHelp');imgHelp.src='Nor mal.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>steve_barker333@hotmail.com Guest
-
steve_barker333@hotmail.com #4 Re: Wrapping mouse over help icon up Web User Control
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 Hamrah wrote:> Why a web user control? THis would be much better as a template based
> server control!
>
> [email]steve_barker333@hotmail.com[/email] wrote:> > 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='Li t.gif';"
> > onmouseout="hidelayer('spanHelp');imgHelp.src='Nor mal.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>steve_barker333@hotmail.com Guest
-
steve_barker333@hotmail.com #5 Re: Wrapping mouse over help icon up Web User Control
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 Hamrah wrote:> Why a web user control? THis would be much better as a template based
> server control!
>
> [email]steve_barker333@hotmail.com[/email] wrote:> > 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='Li t.gif';"
> > onmouseout="hidelayer('spanHelp');imgHelp.src='Nor mal.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>steve_barker333@hotmail.com Guest
-
steve_barker333@hotmail.com #6 Re: Wrapping mouse over help icon up Web User Control
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 Hamrah wrote:> Why a web user control? THis would be much better as a template based
> server control!
>
> [email]steve_barker333@hotmail.com[/email] wrote:> > 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='Li t.gif';"
> > onmouseout="hidelayer('spanHelp');imgHelp.src='Nor mal.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>steve_barker333@hotmail.com Guest
-
steve_barker333@hotmail.com #7 Re: Wrapping mouse over help icon up Web User Control
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 Hamrah wrote:> Why a web user control? THis would be much better as a template based
> server control!
>
> [email]steve_barker333@hotmail.com[/email] wrote:> > 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='Li t.gif';"
> > onmouseout="hidelayer('spanHelp');imgHelp.src='Nor mal.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>steve_barker333@hotmail.com Guest
-
Michael Hamrah #8 Re: Wrapping mouse over help icon up Web User Control
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(str ing),
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());
}
}
Michael Hamrah Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
