This is a html page with countdown timer created using Javascript, I would like to convert this to a ascx page for a module. I want to add some more controls to the page as well.
First thing I do is to create a javascript file countdowntimer.js.
Then I need to create a ascx control for a DNN mdoule.
How can I reference asp.net control in the javascript file, such as document.timer.start.value?
How can I start a javascript function when a page is loaded. I tried to use body, but it does not seem to be correct.
Expert help is appreciated.
Thanks
<html>
<head>
<script>
<!-- Begin
var up,down;var min1,sec1;var cmin1,csec1,cmin2,csec2;
function Minutes(data) {
for(var i=0;i<data.length;i++)
if(data.substring(i,i+1)==":")
break;
return(data.substring(0,i));
}
function Seconds(data) {
for(var i=0;i<data.length;i++)
if(data.substring(i,i+1)==":")
break;
return(data.substring(i+1,data.length));
}
function Display(min,sec) {
var disp;
if(min<=9) disp=" 0";
else disp=" ";
disp+=min+":";
if(sec<=9) disp+="0"+sec;
else disp+=sec;
return(disp);
}
function CountDown() {
cmin2=1*Minutes(document.timer.start.value);
csec2=0+Seconds(document.timer.start.value);
DownRepeat();
}
function DownRepeat() {
csec2--;
if(csec2==-1) {
csec2=59; cmin2--;
}
document.getElementById('display').innerHTML=Display(cmin2,csec2);
I would suggest some reading up on the client api (there are some client api related documents in the documentation folder) ... The client api offers some function to communicate between client and server ...
I cannot make a javascript to run like onload="thisisjstorun.js" using ascx control in a mdoule.
I figured out how to make code behind code of asp.net talk to javascript function, but get stuck with <body onload="thisisjstorun.js"> when implementing DNN module.
Expert help is appreciated.
Kevin Sheng
Software Developer
email: shengjianqing@gmail.com
http://www.shengtech.com
You may want to take a look at T-minus (as in T-minus and counting...) on
http://www.tz3p9v.ca This is a count down timer that I wrote that allows you to display the time until an associated event.
I use a Javascript to perform the countdown display.. Several things to consider, such as allowing several countdown modules on the same page - this means loading the script once per page, and loading some sort of array that can be processed correctly for
each module on the page.
Paul.
Paul Scarlett - Ontario, Canada
www.tressleworks.ca
www.tz3p9v.ca
IlLoad a script once per page. The script defines defines an empty array and a set of function that processes any data found in that array. The script also executes "window.onload=start_countdown" when loaded. The start_countdown function causes the main
script to run. As a last step in the main script (countdown), a call is made to run the main script again in 1 second via "setTimeout("countdown()", 1000).
Now as each T-Minus module is loaded on the page, the module executes one of the javascript functions to add data into the array define above. On the next execution of the main script, data is found and processed. As more modules are present, more data
is added to the array and the main script processes all the data found in the script.
To load the script I using "Page.RegisterClientScriptBlock" and pass the code to load the script. <script ... >
The trick is getting a function to execute every so often looking for work to do.... then supply the work. This will be as if the user pressed a button.
If you download T-minus you can see the script.... I removed the spaces and new line to speed up loading (60% reduction in size) so you will need to dig a little... if you want the uncompressed version let me know via E-mail link below.
Paul.
Paul Scarlett - Ontario, Canada
www.tressleworks.ca
www.tz3p9v.ca
None
0 Points
58 Posts
Convert countdown Timer Html to ASCX
Apr 16, 2005 09:44 PM|kevin.sheng|LINK
This is a html page with countdown timer created using Javascript, I would like to convert this to a ascx page for a module. I want to add some more controls to the page as well.
First thing I do is to create a javascript file countdowntimer.js.
Then I need to create a ascx control for a DNN mdoule.
How can I reference asp.net control in the javascript file, such as document.timer.start.value?
How can I start a javascript function when a page is loaded. I tried to use body, but it does not seem to be correct.
Expert help is appreciated.
Thanks
<html>
<head>
<script>
<!-- Begin
var up,down;var min1,sec1;var cmin1,csec1,cmin2,csec2;
function Minutes(data) {
for(var i=0;i<data.length;i++)
if(data.substring(i,i+1)==":")
break;
return(data.substring(0,i));
}
function Seconds(data) {
for(var i=0;i<data.length;i++)
if(data.substring(i,i+1)==":")
break;
return(data.substring(i+1,data.length));
}
function Display(min,sec) {
var disp;
if(min<=9) disp=" 0";
else disp=" ";
disp+=min+":";
if(sec<=9) disp+="0"+sec;
else disp+=sec;
return(disp);
}
function CountDown() {
cmin2=1*Minutes(document.timer.start.value);
csec2=0+Seconds(document.timer.start.value);
DownRepeat();
}
function DownRepeat() {
csec2--;
if(csec2==-1) {
csec2=59; cmin2--;
}
document.getElementById('display').innerHTML=Display(cmin2,csec2);
if((cmin2==0)&&(csec2==0)) {
window.close();
}
else down=setTimeout("DownRepeat()",1000);
}
function remote(url) {
window.opener.location=url
window.close();
}
DownRepeat();
// End -->
</script>
</head>
<body onLoad="CountDown()">
<form name="timer" align="center">
<input type="hidden" name="start" value="7:00"><p><span id="display"></span>
</form>
</body>
</html>
Software Developer
email: shengjianqing@gmail.com
http://www.shengtech.com
Member
50 Points
1420 Posts
Re: Convert countdown Timer Html to ASCX
Apr 17, 2005 06:42 AM|ErikVB|LINK
I would suggest some reading up on the client api (there are some client api related documents in the documentation folder) ... The client api offers some function to communicate between client and server ...
[C]cheers,
erik
None
0 Points
43 Posts
Re: Convert countdown Timer Html to ASCX
Apr 17, 2005 01:16 PM|amoywolf|LINK
1. for 2nd question, you can use a script at the end of .ascx file as following:
<script language="javascript" for="window" event="onload">
CountDown();
</script>
2. for 1st question, I think your script should work, or you can use a parameter in CountDown, as following:
var timerstart="7:00";
CountDown(timerstart);
None
0 Points
58 Posts
Re: Convert countdown Timer Html to ASCX
Apr 17, 2005 01:58 PM|kevin.sheng|LINK
I cannot make a javascript to run like onload="thisisjstorun.js" using ascx control in a mdoule.
I figured out how to make code behind code of asp.net talk to javascript function, but get stuck with <body onload="thisisjstorun.js"> when implementing DNN module.
Expert help is appreciated.
Software Developer
email: shengjianqing@gmail.com
http://www.shengtech.com
None
0 Points
58 Posts
Re: Convert countdown Timer Html to ASCX
Apr 17, 2005 06:36 PM|kevin.sheng|LINK
Thanks for the help. i appreciate the following idea.
<script language="javascript" for="window" event="onload">
CountDown();
</script>
How can I pass a parameters to the CountDown(); function if I put it at the end of ASCX file? Thanks/Kevin
Software Developer
email: shengjianqing@gmail.com
http://www.shengtech.com
Member
10 Points
323 Posts
Re: Convert countdown Timer Html to ASCX
Apr 17, 2005 09:39 PM|PScarlett|LINK
You may want to take a look at T-minus (as in T-minus and counting...) on http://www.tz3p9v.ca This is a count down timer that I wrote that allows you to display the time until an associated event.
I use a Javascript to perform the countdown display.. Several things to consider, such as allowing several countdown modules on the same page - this means loading the script once per page, and loading some sort of array that can be processed correctly for each module on the page.
Paul.
www.tressleworks.ca
www.tz3p9v.ca
None
0 Points
43 Posts
Re: Convert countdown Timer Html to ASCX
Apr 17, 2005 10:46 PM|amoywolf|LINK
in the function definition in .js file, add parameter as following:
function CountDown(p1) {
cmin2=1*Minutes(p1);
csec2=0+Seconds(p1);
DownRepeat();
}
in the caller, as following:
<script language="javascript" for="window" event="onload">
CountDown("7:00");
</script>
tommy
Member
50 Points
1420 Posts
Re: Convert countdown Timer Html to ASCX
Apr 18, 2005 12:52 AM|ErikVB|LINK
Like i said .... take a look at the dnn client api documentation... the client api includes a function to add calls to the body.onload event:
ClientAPI.AddBodyOnloadEventHandler(Page, "yourJSFunction();")
cheers,
erik
None
0 Points
58 Posts
Re: Convert countdown Timer Html to ASCX
Apr 18, 2005 10:18 PM|kevin.sheng|LINK
DotNetNuke.UI.Utilities.DNNClientAPI.AddBodyOnloadEventHandler(
Me.Page, "CountDown('" & txtTime.ClientID & "','" & txtRemaining.ClientID & "');")This does not start the CountDown function, but if I click a button, which is defined as
cmdStartCourse.Attributes.Add("OnClick", "CountDown('" & txtTime.ClientID & "','" & txtRemaining.ClientID & "'); return false;")
this works fine.
and I do no t want to click the button, how can I make AddBodyOnloadEventHandler work?
Thanks for help.
Software Developer
email: shengjianqing@gmail.com
http://www.shengtech.com
Member
10 Points
323 Posts
Re: Convert countdown Timer Html to ASCX
Apr 19, 2005 04:51 PM|PScarlett|LINK
Kevin,
Here is what I do for T-minus.
IlLoad a script once per page. The script defines defines an empty array and a set of function that processes any data found in that array. The script also executes "window.onload=start_countdown" when loaded. The start_countdown function causes the main script to run. As a last step in the main script (countdown), a call is made to run the main script again in 1 second via "setTimeout("countdown()", 1000).
Now as each T-Minus module is loaded on the page, the module executes one of the javascript functions to add data into the array define above. On the next execution of the main script, data is found and processed. As more modules are present, more data is added to the array and the main script processes all the data found in the script.
To load the script I using "Page.RegisterClientScriptBlock" and pass the code to load the script. <script ... >
The trick is getting a function to execute every so often looking for work to do.... then supply the work. This will be as if the user pressed a button.
If you download T-minus you can see the script.... I removed the spaces and new line to speed up loading (60% reduction in size) so you will need to dig a little... if you want the uncompressed version let me know via E-mail link below.
Paul.
www.tressleworks.ca
www.tz3p9v.ca
None
0 Points
58 Posts
Re: Convert countdown Timer Html to ASCX
Apr 30, 2005 09:08 PM|kevin.sheng|LINK
Software Developer
email: shengjianqing@gmail.com
http://www.shengtech.com