How to make web user control?

V

VB Programmer

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>
 
K

Ken Cox - Microsoft MVP

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>
 
G

Guest

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
 
V

VB Programmer

Perfect! Thanks y'all!


Elton W said:
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
Click to expand...
 

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

Style sheet question 2
Why is not the second control visible in design mode 9
HTML not generated on client 9
Where to put code to change scroll bar color 4
strange problem when using a html server control 1
Whats wrong with this code" 7
css and master page problem 4
Run code from ASPX page 6

Top