please help, theres 2 things i want to asking about:
with that script, the count down just show an number, iwant the countdown shown
as time format --:--:--
i cant auto submit after the countdown finish, and the count down wont stop after zero.
<script>
function timeOut(){
alert("timeout");
document.getElementById('myFormId').submit();
}
(function () {
var timeLeft = <?php echo ($data_test['TIME'] * 60) - $tb ?>,
cinterval;
var timeDec = function (){
timeLeft--;
document.getElementById('timer').innerHTML = timeLeft;
if(timeLeft === 0){
timeOut();
clearInterval(cinterval);
}
};
cinterval = setInterval(timeDec, 1000);
})();
</script>
var interval = 11; // Whatever.
function myTimer(interval){
document.getElementById('timer').innerHTML = --interval;
if (interval > 0) setTimeout(function(){myTimer(interval);}, 1000);
else document.forms['myFormId'].submit();
}
myTimer(interval);
Something along these lines. Could be a lot better, but it's really just to give you an example right here. Shouldn't be much of a hazle.
Edit:
Also see JavaScript seconds to time string with format hh:mm:ss for the formatting.
Related
We are using the following countdown function on our bidding site.
setInterval(function(){
$(".countdown").each(function(){
var seconds = $(this).data('seconds');
if(seconds > 0) {
second = seconds - 1;
$(this).data('seconds', second)
var date = new Date(null);
date.setSeconds(second);
$(this).html(date.toISOString().substr(11, 8))
}
else
{
$(this).html("Finished");
alert('finished');
}
});
}, 1000);
we pass the number of seconds where we want the counter to appear (sometimes more than once on our page:
echo "<div id=\"".$auctionid."\" class=\"countdown\" data-seconds=\"".$diff."\"></div>";
So far it should be clear an it works. Now we have a situation where when someone bids somewhere on the site - the time left for auction is prolonged for 15 seconds, which is written to mysql.
$diff variable is calculated from mysql end time, and it's passed to jQuery on page load.
The question is how to check the mysql time for that auction and sync it in jQuery counter? We had the idea to maybe check every 5 seconds and after it reaches zero to make sure it's over? Any suggestions?
It should look nice to the user.
EDIT:
This is what we have so far:
$(".countdown").each(function() {
var countdown = $(this);
var auctionid = $(this).attr('id');
var interval = setInterval(function() {
var seconds = countdown.data("seconds");
if( seconds > 0 ) {
var second = --seconds;
var date = new Date(null);
date.setSeconds(second);
countdown.data("seconds", second).html(date.toISOString().substr(11, 8))
} else {
// countdown.html("Finished <img src=\"loading.gif\" class=\"tempload\">");
startUpdateingTimeFromDatabase(auctionid);
countdown.html("Finished");
clearInterval(interval);
}
}, 1000);
});
function startUpdateingTimeFromDatabase(auctionid) {
$.getJSON("timer.php?auctionid="+auctionid, function(response) {
// console.log(response.seconds);
$(".countdown#"+auctionid).data("seconds", response.seconds);
if( response.seconds > 0 ) {
// setTimeout(startUpdateingTimeFromDatabase(auctionid), 1000);
} else {
}
});
}
This simply isn't doing what we need it to do. We need to update the seconds (query startUpdateingTimeFromDatabase) every time it reaches zero. Now I think there are two approaches. First is simply return seconds via startUpdateingTimeFromDatabase function and then do everything in the main function, second is update the div via startUpdateingTimeFromDatabase. I think first will be better but I simply can't find a way to do it properly.
Any help is appreciated. Thanks.
You store the seconds left in the elements data. So why not fetch the remaining time maybe via ajax and just pass the new seconds to the elements? Within the next interval run all times will be updated.
Something like this:
$.get("yourGetRemainingTimeScript.php", {auctionId: 1}, function(response) {
$(".countdown").data("seconds", response.seconds);
});
How you check and get the remaining time is up to you. You can set the time for all everywhere again.
$(".countdown").data("seconds", 1337);
Another hint from my side: don't loop all elements with each in the setInterval. Create the intervals inside the loop once. Then your script doesn't need to search every second again over and over for the elements.
And clear the interval when it's finished.
$(".countdown").each(function() {
var countdown = $(this);
var interval = setInterval(function() {
// do your stuff ...
// when finished stop the interval
if( finished ) {
clearInterval(interval);
}
}, 1000);
});
Full working example.
My question has part solutions on this site but not a complete answer.
On my wordpress homepage I display a counter of the number of questions answered within our webapp. This is displayed using jQuery and AJAX to retrieve the question count from a php file and works fine with this code.
jQuery(document).ready(function() {
function load() {
jQuery.get('/question_count.php', function(data) {jQuery('#p1').html( data ); });
}
load();
setInterval(load,10000);
});
Is there a way to display counting up to the new number retrieved rather than just immediately displaying it?
Something like this?
function countTo(n) {
var p = $("#p1"),
c = parseInt(p.html(), 10) || 0,
dir = (c > n ? -1 : 1); // count up or down?
if (c != n) {
p.html((c + dir) + "");
setTimeout(function() {
countTo(n);
}, 500);
}
}
Call it in your success handler
jQuery.get('/question_count.php', function(data) {
var n = parseInt(data, 10);
countTo(n);
});
Example
You will need to do a setInterval event so that the count up is visable to human eyes.
This may be a problem if you eventually reach enough questions where the count takes a long time to reach the end.
Code will look like this:
function load(){
jQuery.get('/question_count.php', function(data){
var curr = 0;
var max = parseInt(data);
var interval = setInterval(function(){
if(curr==max){
clearInterval(interval);
}
jQuery('#p1').html( curr );
curr+=1; //<-- if the number of questions gets very large, increase this number
},
10 //<-- modify this to change how fast it updates
});
}
}
When i do not use keyboard and mouse for a particular time limit (Like 10 min or 20 min) at that time it should log out User automatically from the current session. Please give me any suggestion or code in PHP.
You need javascript to detect browser events.
With jQuery, something like (untested)
var timeSinceLastMove = 0;
$(document).mousemove(function() {
timeSinceLastMove = 0;
});
$(document).keyup(function() {
timeSinceLastMove = 0;
});
checkTime();
function checkTime() {
timeSinceLastMove++;
if (timeSinceLastMove > 10 * 60) {
window.location = "path/to/logout.php";
}
setTimeout(checkTime, 1000);
}
you must set the session timeout in your code
session_set_cookie_params(3600); // sessions last 1 hour
session_start(); // do this after setting the params
I'm trying to update my database with some information. One of the key pieces of information is how much time has passed since the page first loaded and when the user click a button. My code looks like this:
<script>
function pauseVideo() {
$.get("video_pause.php?pause=" + timePassed + "&videoid=<?php echo $_GET['sessionid']; ?>&sessionid=<?php echo $_GET['videoid']; ?>");
}
</script>
and
<html>
<div id="pause" onclick="pauseVideo()">PAUSE</div>
</html>
My PHP is fine so ignore that. The part I'm having trouble with is the 'timePassed'. I need this to be the amount of time in seconds since the page was first loaded and the person clicks the PAUSE div.
I think I need to run a function on click to find the passed time and then use that time variable in the $.get() somehow?
When the document loads, just save the current time in a variable:
$(document).ready(function() {
var timeWhenLoaded = (new Date).getTime() / 1000;
});
Then, when the pause button is clicked, calculate the time that has passed:
function pauseVideo() {
var currTime = (new Date).getTime() / 1000;
// time in seconds
var timePassed = Math.floor(currTime - timeWhenLoaded);
$.get("video_pause.php?pause=" + timePassed + "&videoid=<?php echo $_GET['sessionid']; ?>&sessionid=<?php echo $_GET['videoid']; ?>");
}
Get rid of the onclick in your HTML, and remove your existing function, then put this in the head section of your page:
(function(){
var loadTime = (new Date).getTime(); // Page started loading
$(function(){
// DOM fully loaded, so move the assignment here if that is what
// you want to consider as the load time
$('#pause').click(function(){
$.get("video_pause.php?pause=" + Math.floor(((new Date).getTime() - loadTime)/1000) + "&videoid=<?php echo $_GET['sessionid']; ?>&sessionid=<?php echo $_GET['videoid']; ?>");
});
});
})();
Also note that you can never trust that variable on the server side. Anyone could input a negative number or even the word 'pizza' for the value if they really want to.
Something like:
var startTime = (new Date).getTime() / 1000;
function pauseVideo() {
var curTime = (new Date).getTime() / 1000;
var timePassed = Math.floor(curTime - startTime);
$.get("video_pause.php?pause=" + timePassed + "&videoid=<?php echo $_GET['sessionid']; ?>&sessionid=<?php echo $_GET['videoid']; ?>");
}
if the page with the following code is generated server-side, you can either just pass the current time to the script, as in:
<html>
<div id="pause" onclick="pauseVideo('" + curTime +"')">PAUSE</div>
</html>
(needs echo syntax)
or put it in a hidden field and pass it back to the server. (and do your calculations in php)
this way, you get the time passed since the page was requested...
I have divs that I want to display at specific times throughout the day. I have it working in PHP, but it requires refreshing the browser manually. I would like my script to automatically load the right div when the time is right.
Am I on the right track? Perhaps there is a jquery plugin for this sort of thing that would handle the refreshing?
Any help is greatly appreciated... Thanks!
<?php
$time = date("H\:i");
if (($time > "16:59") && ($time < "18:59")) {
echo "<div>1</div>";
}
elseif (($time > "18:59") && ($time < "20:59")) {
echo "<div>2</div>";
}
elseif (($time > "20:59") && ($time < "22:59")) {
echo "<div>3</div>";
}
else {
echo "<div id='out'><p>Outside the specified point in time.</p></div>";
}
?>
You won't need a jquery plugin to handle refreshing, you can just create a timer which checks every few minutes/seconds
#jasie was right to mention timers. He mentioned jquery timer, but you can just as well use regular javascript timers, like this (you tagged jquery, so I'll use jquery):
var timer = setInterval(function(){
var hour = (new Date()).getHours();
if (hour >= 17 && hour < 19) {
var $div = $('<div>1</div>');
} else if (hour >= 19 && hour < 21) {
var $div = $('<div>2</div>');
} else if (hour >= 21 && hour < 23) {
var $div = $('<div>3</div>');
} else {
var $div = $("<div id='out'><p>Outside the specified point in time.</p></div>");
}
$div.appendTo('body');
}, 2000); // checking every 2 seconds.
That should do the trick
I would use JQuery timer to poll every so often; when the time is right, use a $.load() to load in new information into the div on the page. You should do the time checks in Javascript, as you've done, so that you're not constantly transferring needless data between client and server.
Your backend should return a specific bit of html you want to display.
Your front-end should just be polling one specific url on the backend that returns this information.
(There are other ways to do it but this is my opinion)
As a start, using jQuery's AJAX call and a simple js timer. If page has one div with ID of "showithere", this willre-load your PHP page every 10 minutes:
<head>
<script>
function fn () {
alert ('now');
$("#showithere").load ("http://jsbin.com/help/");
}
</script>
</head>
<body onLoad="setTimeout (fn, 600000);" >