By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,854 Members | 869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,854 IT Pros & Developers. It's quick & easy.

How to make web user control?

P: n/a
I have a SIMPL HTML form that displays a javascript clock.

I want to take this component and put it in a web user control so that I can
reuse it easily.

The problem is I don't know what to do with some of the elements, like...
- <BODY ONLOAD="jsClock()"> **** no BODY in web user control
- <FORM... > **** is the form tag allowed?
- document.clockForm.NewYork.value (reference needs to be changed?)
- etc...

Any ideas? Here's the HTML form...

<!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" >
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
document.clockForm.NewYork.value = temp
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>

<BODY ONLOAD="jsClock()">

<FORM NAME="clockForm"><strong>
<span style="color: blue">
New York</span> </strong>
<input id="NewYork" type="text" value="Loading..." style="font-weight: bold;
color: blue; width: 102px;" /><strong></strong>
</FORM>
</BODY>
</html>
Mar 25 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Here's how I'd do it in .NET 2.0. Just create a user control called
clockl.ascx and use this as the code.

The key changes are that this puts the time in a label rather than an input
control on the form. You use ASP.NET to output the JavaScript and then start
it running.

When the user control is ready, just drop it on the form.

Let us know if this helps?

Ken
<%@ Control Language="VB" ClassName="clockl" %>

<script runat="server">

Protected Sub Page_Load _
(ByVal sender As Object, _
ByVal e As System.EventArgs)
Dim sb As New StringBuilder
sb.Append("function jsClock(){")
sb.Append("var time=new Date();")
sb.Append("var hour=time.getHours();")
sb.Append("var minute=time.getMinutes();")
sb.Append("var second=time.getSeconds();")
sb.Append("var temp='' + ((hour > 12)?hour - 12:hour);")
sb.Append("if(hour==0) temp = '12';")
sb.Append("if(temp.length==1) temp=' '+temp;")
sb.Append("temp+=((minute<10)?':0':':')+minute;")
sb.Append("temp +=((second<10)?':0':':')+second;")
sb.Append("temp +=(hour>=12)?' PM':' AM';")
sb.Append("document.getElementById('" & _
lblNewYork.ClientID & "').innerText=temp;")
sb.Append("id=setTimeout('jsClock()',1000);")
sb.Append("}" & Environment.NewLine)
If Not Page.ClientScript.IsClientScriptBlockRegistered _
("clockjs") Then
Page.ClientScript.RegisterClientScriptBlock _
(Me.GetType, "clockjs", sb.ToString, True)
End If
If Not Page.ClientScript.IsStartupScriptRegistered _
("starter") Then
Page.ClientScript.RegisterStartupScript _
(Me.GetType, "starter", "jsClock();", True)
End If

End Sub
</script>
<asp:label id="lblNewYork" runat="server" text=""></asp:label>
"VB Programmer" <do**@emailme.com> wrote in message
news:uE**************@TK2MSFTNGP14.phx.gbl...
I have a SIMPL HTML form that displays a javascript clock.

I want to take this component and put it in a web user control so that I
can reuse it easily.

The problem is I don't know what to do with some of the elements, like...
- <BODY ONLOAD="jsClock()"> **** no BODY in web user control
- <FORM... > **** is the form tag allowed?
- document.clockForm.NewYork.value (reference needs to be changed?)
- etc...

Any ideas? Here's the HTML form...

<!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" >
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
document.clockForm.NewYork.value = temp
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>

<BODY ONLOAD="jsClock()">

<FORM NAME="clockForm"><strong>
<span style="color: blue">
New York</span> </strong>
<input id="NewYork" type="text" value="Loading..." style="font-weight:
bold; color: blue; width: 102px;" /><strong></strong>
</FORM>
</BODY>
</html>

Mar 26 '06 #2

P: n/a
Remove <html>,<body>, <form> tags from content. It likes

<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
//document.clockForm.NewYork.value = temp
document.getElementById('NewYork').value = temp;;
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>
<strong><span style="COLOR: blue">New York</span></strong><input
id="NewYork" type="text" value="Loading..."
style="FONT-WEIGHT: bold; WIDTH: 102px; COLOR: blue"><strong></strong>
<script>jsClock();</script>
HTH

Elton Wang
"VB Programmer" wrote:
I have a SIMPL HTML form that displays a javascript clock.

I want to take this component and put it in a web user control so that I can
reuse it easily.

The problem is I don't know what to do with some of the elements, like...
- <BODY ONLOAD="jsClock()"> **** no BODY in web user control
- <FORM... > **** is the form tag allowed?
- document.clockForm.NewYork.value (reference needs to be changed?)
- etc...

Any ideas? Here's the HTML form...

<!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" >
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
document.clockForm.NewYork.value = temp
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>

<BODY ONLOAD="jsClock()">

<FORM NAME="clockForm"><strong>
<span style="color: blue">
New York</span> </strong>
<input id="NewYork" type="text" value="Loading..." style="font-weight: bold;
color: blue; width: 102px;" /><strong></strong>
</FORM>
</BODY>
</html>

Mar 26 '06 #3

P: n/a
Perfect! Thanks y'all!
"Elton W" <El****@discussions.microsoft.com> wrote in message
news:0D**********************************@microsof t.com...
Remove <html>,<body>, <form> tags from content. It likes

<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
//document.clockForm.NewYork.value = temp
document.getElementById('NewYork').value = temp;;
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>
<strong><span style="COLOR: blue">New York</span></strong><input
id="NewYork" type="text" value="Loading..."
style="FONT-WEIGHT: bold; WIDTH: 102px; COLOR: blue"><strong></strong>
<script>jsClock();</script>
HTH

Elton Wang
"VB Programmer" wrote:
I have a SIMPL HTML form that displays a javascript clock.

I want to take this component and put it in a web user control so that I
can
reuse it easily.

The problem is I don't know what to do with some of the elements, like...
- <BODY ONLOAD="jsClock()"> **** no BODY in web user control
- <FORM... > **** is the form tag allowed?
- document.clockForm.NewYork.value (reference needs to be changed?)
- etc...

Any ideas? Here's the HTML form...

<!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" >
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
document.clockForm.NewYork.value = temp
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>

<BODY ONLOAD="jsClock()">

<FORM NAME="clockForm"><strong>
<span style="color: blue">
New York</span> </strong>
<input id="NewYork" type="text" value="Loading..." style="font-weight:
bold;
color: blue; width: 102px;" /><strong></strong>
</FORM>
</BODY>
</html>

Mar 27 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.