Can anyone help me out from this issue. I have added a JS to my WordPress site externally. It doesn't produce the output and throws an error in the following code.
Please help me out and get over it.
var clock;
jquery(document).ready(function() {
var currentDate = new Date();
// Set some date in the past. In this case, it's always been since Jan 1
var pastDate = new Date(currentDate.getFullYear(), - 3, 4, 3);
// Calculate the difference in seconds between the future and current date
var diff = currentDate.getTime() / 1000 - pastDate.getTime() / 1000;
clock = jquery('.clock').FlipClock(diff, {
clockFace: 'MinuteCounter'
});
});
JavaScript is case sensitive. Use jQuery instead of jquery:
jQuery(document).ready(function() {
.
.
.
clock = jQuery('.clock').FlipClock(diff, {
clockFace: 'MinuteCounter'
});
});
Related
I would like to block specific dates and week days dynamically from MySQL database records. I have done to some extent and not able to proceed further.
json_encode(array("days"=>$days_off,"dates"=>$resultarr))
The above will output the following:
{"days":["0","1","1","1","1","1","0"],"dates":["2015-06-01","2015-06-02","2015-06-03","2015-06-04","2015-06-05"
,"2015-06-06","2015-07-09","2015-07-10","2015-07-28","2015-07-29","2015-07-30","2015-07-31"]}
And in the front end, the jquery written in this way:
success: function(data){
var dateToday = new Date();
var ndata = $.parseJSON(data);
if ($('#datepicker').length) $("#datepicker").datepicker({
minDate: dateToday, firstDay: 1, //endDate: '+0m',
dateFormat: "DD d MM yy", showOtherMonths:false,
beforeShowDay: function(date){
var day = date.getDay();
var selected = $("#datepicker").datepicker('getDate');
return [ndata[day] !=0, ""];
}
});
}
The above will block only the days(monday-sunday) but not able to block specific dates which I get from above json data.
You will need to check if the date is the same as any of the ones passed in your JSON. It could be done like this:
beforeShowDay: function(date) {
//Check if it's a forbidden day of the week.
var day = date.getDay();
var okDay = (ndata.days[day] != 0);
//Check if it's a forbidden date.
var formatted_date = $.datepicker.formatDate('yy-mm-dd', date)
var okDate = ($.inArray(formatted_date, ndata.dates) == -1);
//Only return true if both day of week and date are allowed.
return [okDay && okDate]
}
Please note that I have not tested this code. Also, I changed from ndata[day] to ndata.days[day] since that seemed to be more inline with your JSON, but I might be wrong there. Here is the documentation on .inArray(), and here is the documentation on datepicker.formatDate().
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
});
}
}
I have a web application, where users need to get the week number in a text box. Since the users/client machines are in different time zone, they are getting the week number based on their machine datetime. How can I call the hosted server datetime in javascript. So that I can convert the date to week in common, irrespective of client machine datetime.
Hosted server is only connected in LAN, no internet access. Server Side language is PHP
Please help.
<html>
<head>
<script>
window.date = new Date(<?php echo time();?> * 1000);
window.now = new Date();
window.getTime = function() {
var n = new Date();
n = n.getTime() - window.now.getTime();
return new Date(window.date.getTime() + n);
}
</script>
And then you can access it anywhere using window.getTime(), which uses your server time + how long they have been on your page
here is an ajax-only way:
<script>
function sTime(callback) {
callback=callback||alert;
var XHRt = new XMLHttpRequest;
XHRt.onreadystatechange = function() {
if (XHRt.readyState == 4 && XHRt.status == 200) {
callback( new Date(XHRt.getResponseHeader("date")) , XHRt);
}
};
XHRt.open("HEAD", location.href, true);
XHRt.send();
return XHRt;
} /* end aHead() */
//demo to show remote and local times:
sTime(function(dt){ alert( [dt, new Date].join("\n"));});
</script>
when i ran from firebug here, seems im about 1 second behind SO...
I want to get day and month from a client's computer, and then pass it to PHP in two separate variables, which would result in something like this:
$day_num = 11;
$month_num = 12;
I need JavaScript function and PHP function to be separate files, and I need to pass the value
not in the URL.
I would be grateful for a bit of help from an expert!
Javascript:
If you are using jQuery gettting it back to the server is super easy (if you do it without, see: How to make an AJAX call without jQuery?):
<script language="javascript">
var date = new Date(),
month = date.getMonth(),
day = date.getDate();
$.post('path-to-php.php', { day: day, month: month});
</script>
PHP:
<?php
var_dump($_POST['day']);
var_dump($_POST['month']);
?>
Edit:
path-to-php.php is the filename of your php file. It can be absolute or relative, depending on your application. If you wanted to post it to the same file, you could use this instead of path-to-php.php: <?php echo $_SERVER['PHP_SELF'];?>
With javascript:
function executeAjax() {
var date = new Date(),
var month = date.getMonth(),
var day = date.getDate();
var url="daymonth.php?month="+month+"&day="+day;
var objX=new XMLHttpRequest();
objX.open("GET",url,false);
objX.send(null);
var response=objX.responseText;
}
daymonth.php
<?php
$day=$_GET['day'];
$month=$_GET['month'];
?>
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...