?
Solved

Javascript counter reset

Posted on 2007-10-08
3
Medium Priority
?
1,426 Views
Last Modified: 2013-11-19
I have a script that counds back from X number of secounds, when the count reaches 0 a layer is displayed with a button. When the button in the layer is clicked the counter shoud startover and the layer should be hitten again, and only be displayed again when the counter again reaches 0. Can anybody help me, it should be easy, but everything i have tried haven't been working...

<input type="text" id="counter_advarsel">
<script>
function reset_counter() {
//here i need to reset the counter and hide the popup layer!!!???    
   
   
}
var countdownfrom=5;
var currentsecond=document.getElementById('counter_advarsel').value=countdownfrom+1;

function count_advarsel_function() {
if(currentsecond != 1) {
currentsecond -= 1;
document.getElementById('counter_advarsel').value=currentsecond;
} else {
document.getElementById('counter_div_advarsel').style.visibility = "visible";
document.getElementById('counter_div_advarsel').style.filter='progid:DXImageTransform.Microsoft.Shadow(color=#B5BDCB, direction=135, strength=6)';
document.getElementById('counter_div_advarsel').style.left = (winW/2)-(300/2);
document.getElementById('counter_div_advarsel').style.top = (winH/2)-(300/2);
}
setTimeout("count_advarsel_function()",1000);
}

document.onload = count_advarsel_function();
</script>
<?php
echo "<div style=\"z-index: 8000; position: absolute; visibility:hidden; top: -1000; left: -1000;\" id=\"counter_div_advarsel\">";
            echo "<table style=\"background-color: #ffffff; border: 1px solid #B5BDCB; width: 300px; height: 100px;\">";
            echo "<tr><td style=\"padding-left: 8px; padding-top: 4px; font-weight: bold; height: 24px;\" class=\"BorderBottom\">Automatisk log af advarsel</td></tr>";
            echo "<tr><td style=\"height: 60px; padding-left: 8px; padding-right: 8px; padding-bottom: 8px;\" class=\"BorderBottom\">";
            echo "<li>Du har nu været inaktiv i 18 minutter og vil, af sikkerhedsmæssige hensyn, defor automatisk blive logget af om 2 minutter.</li><br /><li>Gem alt igangværende arbejde eller genoptag brugen af systemet.</li>";
            echo "</td></tr>";
            echo "<tr><td style=\"text-align: center; height: 40px; vertical-align: middle;\">";
            echo "<input class=\"Knap\" type=\"button\" name=\"ok\" value=\"Ok\" style=\"width: 90px;\" onclick=\"javascript: reset_counter();\" ".$_SESSION["knap_opsaetning"]." />";                              
            echo "</td></tr>";
            echo "</table>";
echo "</div>";
?>
0
Comment
Question by:m_mlynek
  • 2
3 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20032795
<html>
<head>
<script>
var tId=""; // global var
var countdownfrom=5;
var currentsecond = countdownfrom;
var winW = screen.width;
var winH = screen.height;
function count_advarsel_function() {
  if(currentsecond <= 1) {
    clearInterval(tId)
    document.getElementById('counter_div_advarsel').style.visibility = "visible"
    document.getElementById('counter_div_advarsel').style.filter='progid:DXImageTransform.Microsoft.Shadow(color=#B5BDCB, direction=135, strength=6)';
    var left = ((winW/2)-(300/2))+"px";
    var top = ((winH/2)-(300/2))+"px";
    document.getElementById('counter_div_advarsel').style.left = left;
    document.getElementById('counter_div_advarsel').style.top = top;
    return;
  }
  currentsecond -= 1;
  document.getElementById('counter_advarsel').value=currentsecond;
}
function init() {
   currentsecond = countdownfrom;
   clearInterval(tId)
   document.getElementById('counter_div_advarsel').style.visibility = "hidden"
   tId= setInterval('count_advarsel_function()',1000);
}
window.onload = init;
</script>

</head>
<body>
<form>
<input type="text" id="counter_advarsel">
<div style="z-index: 8000; position: absolute; visibility:hidden; top: -1000; left: -1000;" id="counter_div_advarsel">
<table style="background-color: #ffffff; border: 1px solid #B5BDCB; width: 300px; height: 100px;">
<tr><td style="padding-left: 8px; padding-top: 4px; font-weight: bold; height: 24px;" class="BorderBottom">Automatisk log af advarsel</td></tr>
<tr><td style="height: 60px; padding-left: 8px; padding-right: 8px; padding-bottom: 8px;" class="BorderBottom">
<li>Du har nu været inaktiv i 18 minutter og vil, af sikkerhedsmæssige hensyn, defor automatisk blive logget af om 2 minutter.</li><br /><li>Gem alt igangværende arbejde eller genoptag brugen af systemet.</li>
</td></tr>
<tr><td style="text-align: center; height: 40px; vertical-align: middle;">
<input class="Knap" type="button" name="ok" value="Ok" style="width: 90px;" onclick="init()" />                              
</td></tr>
</table>
</div>
</form>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20032799
Fixede den for FF nu jeg var igang ;)
0
 
LVL 1

Author Comment

by:m_mlynek
ID: 20032915
Mange tak for den hurtige hjælp... Virker perfekt, min dag er reddet... ;o) har givet dig point.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question