Ok so I am creating a radio player and basically I need the Title, Content div, Next show Div to refresh at certain times for example 9am then 12pm. I have the JQuery code to refresh the page at a certain time but that isn't quite what I'm after. Any ideas?
Code:
function refreshAt(hours, minutes, seconds) {
var now = new Date();
var then = new Date();
if(now.getHours() > hours ||
(now.getHours() == hours && now.getMinutes() > minutes) ||
now.getHours() == hours && now.getMinutes() == minutes && now.getSeconds() >= seconds) {
then.setDate(now.getDate() + 1);
}
then.setHours(hours);
then.setMinutes(minutes);
then.setSeconds(seconds);
var timeout = (then.getTime() - now.getTime());
setTimeout(function() { window.location.reload(true); }, timeout);
}
Then I just call the refreshAt function by inserting the following on my page
<script type="text/javascript">refreshAt(04,30,0);</script> //page refreshes at 4:30am.
So this refreshes the Whole page. I just need to refresh the Title, and 2 divs.
What do I need to add/change in the code.
This will call your current URL after interval elapse and reset your title and your div content.
You have to write something like this:
function refreshAt(hours, minutes, seconds) {
var now = new Date();
var then = new Date();
if(now.getHours() > hours || (now.getHours() == hours && now.getMinutes() > minutes) || now.getHours() == hours && now.getMinutes() == minutes && now.getSeconds() >= seconds) {
then.setDate(now.getDate() + 1);
}
then.setHours(hours);
then.setMinutes(minutes);
then.setSeconds(seconds);
var timeout = (then.getTime() - now.getTime());
setTimeout(function() {
$.get( window.location.pathname, function( data ) {
$('title') = $(data).filter('title').text();
$('.DIV_CLASS') = $(data).filter('.DIV_CLASS').html();
alert( "Load was performed." );
});
}, timeout);
}
NOTE: This script use jQuery, so please include latest jQuery library.
You can try this:
setTimeout(function() {
document.title = "new title";
$(".divname").text("new div text");
}, timeout);
Please try below code :
setTimeout(function(){
$('#divid').load("pageurl #divid" >*",function(){
});
}, 6000);
Your div reload after 6 second.
You can take a look at jQuery's load method.
By using is you can load the content of you div.
setTimeout(function() {
$("#youfirstdivid").load("url1");
$("#youseconddivid").load("url2");
$('title').text("new title");
}, timeout);
Don't forgot to wrap your code inside
$(function(){
//you code goes here
});
and if you want to refresh it at some fixed interval then you can use setInterval rather than setTimeout
Related
Please am trying to redirect a page in Laravel7 once a time is clocked e.g once the time is 04:05 the page should redirect.
I tried this below but it didn't work.
public function countdown(){
$currentdate = date("d-m-Y h:i:s");
$futuredate = "02-05-2020 18:4:25";
if($currentdate == $futuredate){
return redirect()->route('welcome');
}
}
Can anyone help on how I can achieve this?
You need to do this on the client side, this can't be done on the server side.
You can use setInterval to execute a piece of code that will check if the time is 04:05 and then redirect the page using window.location.href = "/yourroute";
Something like this:
setInterval(function () {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
if (hour === 4 && minute === 5) {
location.href = "/welcome"
}
}, 60000);
60000 is 1 minute in millieseconds.
can someone please help me with js/ajax countdown i want a countdown timer to 10 sec then update the database and refresh the page once it hits to 0.
i'm not really good with javascript/ajax, here is what i got so far:
var ss = 10;
function countdown() {
ss = ss-1;
if (ss<0) {
var url='update.php?countdown='+countdown;
}
else {
document.getElementById("countdown").innerHTML=ss;
window.setTimeout("countdown()", 1000);
}
}
<span id="countdown" style="color:green;">10</span>
and update.php file, witch works fine:
if (isset($_REQUEST['countdown'])) {
mysql_query("INSERT INTO num (id, ad, active)
VALUES ('1', 'Test',1)") or die(mysql_error());
}
and also this is what i found http://pastebin.com/Qwz3Zqtt , works fine but i don't know how to put them together.
any helps would be appreciated.
Thanks
You're going to want to learn basic ajax to process the database request. jQuery has a very easy to use implementation.
The basic code could be something like:
<script>
function updateTimer(seconds){
var countdown = document.getElementById('countdown');
countdown.innerHTML = "Please wait " + seconds + " seconds.";
}
var timer = function() {
var seconds = 10;
var interval = setInterval(function(){
if (seconds <= 0){
countdown.innerHTML = "Finished.. Updating Database";
// AJAX request here
clearInterval(interval);
}else{
updateTimer(seconds);
--seconds;
}
}, 1000);
updateTimer(seconds);
--seconds;
}
document.getElementById('start').addEventListener('click', timer);
</script>
<div id="countdown"></div>
<button id="start">Click Me</button>
Here's a fiddle
Use jQuery ajax
Simplest example:
if (ss<0) {
$.ajax('update.php?countdown='+countdown);
}
javascript too fast when i set setInterval(function() down (or up i guess, speed wise) to 100 or 500 and wont load mypage.php as it doesn't have time i think? don't want to slow counter down either. so is there a php equivalent that can? (with the little number display like this, see jsfiddle) or is there a better javascript counter ? would prefer php, any ideas?
Thanks heaps, any help would be great.
Changed the page link to # as it will freeze things otherwise
http://jsfiddle.net/aEXgB/2/ Also added exit;but didn't help.
<html>
<head>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)>=3000) {
location.href = 'mypage.php';
exit;
}
i.innerHTML = parseInt(i.innerHTML)+1;
}
setInterval(function(){ countdown(); },.75);
</script>
</head>
<body>
<div style="margin-left:20px; float:left;"><p>Countdown:<font color="#33CC00"> <span id="counter">10 </span></font></p></div>
</body>
</html>
replace
setInterval(function(){ countdown(); },.75);
with
var t = setInterval(function(){ countdown(); },.75);
then just before the exit in the function, add;
clearInterval(t);
First, I don't understand why it's called a countdown when you count UP.
Second, I think it's better to update the counter and THEN check the value. That way you don't have an extra call to the coundown function.
Third, clear the interval before changing location because the interval is probably getting fired again too quickly.
Fourth, this won't actually work in jsfiddle because of how jsfiddle uses iframes :)
var interval = setInterval(function(){ countdown(); },.75);
function countdown() {
var i = document.getElementById('counter');
i.innerHTML = parseInt(i.innerHTML)+1;
if (parseInt(i.innerHTML)>=3000) {
clearInterval(interval);
window.location.href = "mypage.php";
}
}
JS:
var sec = 0;
var interval = 750; // milliseconds
var stop = 5; // seconds
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
if(document.getElementById("seconds").innerHTML < stop) {
document.getElementById("seconds").innerHTML=pad(++sec%60);
} else {
location.href = 'http://google.nl'
}
}, interval);
Html:
<div id="seconds></div>
Fiddle:
http://jsfiddle.net/5tM3A/5/
Ive got an problem. I have an button that sends an command to an perl script. For 60 seconds the page will just load and load. So i need an countdown to tell the user how much time until the perl script is finished. So i got his javascript from the web that automaticly counts down when the page loads. Is it possible to reverse this?
http://goo.gl/cYdKg
You see what happens, when you don't state your requirements correctly? Two people doing the same wrong thing (bad for us, we did not clarified before, tho).
$.fn.timedDisable = function(time, callback) {
if (time == null) {
time = 5000;
}
var seconds = Math.ceil(time / 1000);
return $(this).each(function() {
$(this).attr('disabled', 'disabled');
var disabledElem = $(this);
var originalText = this.innerHTML;
disabledElem.text( originalText + ' (' + seconds + ')');
var interval = setInterval(function() {
disabledElem.text( originalText + ' (' + --seconds + ')');
if (seconds === 0) {
disabledElem.removeAttr('disabled')
.text(originalText);
clearInterval(interval);
if (typeof callback !== 'undefined')
callback();
}
}, 1000);
});
};
$(function() {
$('#btnContinue').click(function() {
$(this).timedDisable(5000, function() {
window.alert('done');
});
});
});
I am trying to put this into ajax so everytime a person clicks a button in jquery, it creates a php session. Is it possible just using this?
var milisec=00;
var seconds=60;
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else {
milisec-=1
document.getElementById('counter').innerHTML= seconds+":"+"0"+milisec+"s";
setTimeout(display,100)
}
if (seconds < 10) {
document.getElementById('counter').innerHTML= "0"+seconds+":"+"0"+milisec+"s";
}
}
display()
I need to post the time it took for them to get to the next page using Php sessions, using ajax.
var seconds = 60;
var milisec = 0;
var stop_counter = false;
function display(){
if(milisec == 0)
seconds = seconds - 1;
milisec = milisec - 1;
if(milisec == -1)
milisec = 10;
$('#counter').html((seconds < 10 ? "0" : "") + seconds + ":0" +milisec+ "s");
if( (seconds == 0 && milisec == 0 && stop_counter == true) == false )
setTimeout(function(){ display(); }, 100);
}
$(document).ready(function(){
display();
$('#button').click(function(){
$.post('myphpfile.php', {time : $('#counter').text()}, function(data){
alert('Data from myphpfile.php: ' + data);
stop_counter = true; //stop counter now
});
});
});
myphpfile.php
echo 'you clicked button when counter was ' . $_POST['time'];
//you can do any php stuff here
this code should do what you want but I did not test it.
function $.post() from jQuery library will pass your data to php script and also can retrieve some data which you can display on your site or something.
btw, one second has 1000 miliseconds, not 100
sorry for my english
Yes you can do it by passing the value of "seconds" and "milisec" in the ajax call by
$(document).ready(function(){
$('#button').click(function(){
$.post('session_file.php', {secs : seconds,millisecs:milisec}, function(data){
});
});
});
So in the session_file.php you can write the values of the variables of secs and millisecs in a session