inserting php value into javascript - php

I have a countdown script i wan to key in the targetdate as a value in a form to store in the database.i have tried targetdate = $date in the script but it doesn't seems to read the value.
<script language="JavaScript">
TargetDate ="1/31/2012 5:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

<script type="text/javascript">
var TargetDate = <?php echo json_encode($date); ?>;
</script>
Depending on the format of $date if it's a timestamp you could also try
<script type="text/javascript">
var TargetDate = <?php echo json_encode(date('j/n/Y g:i a', $date)); ?>;
</script>

obviously you can't use it dinamycally as the json_encode will be parsed only before the onload javascript event , so if you need to modify it dinamically from server you should update it with ajax or getJson call

Related

Issue with checking if current date is bigger than what's stored

So the issue currently is the code works fine, however the second the month resets id goes from May to June the code will no longer work because It's looking for if it's greater, and as 1st is not greater than 31st it has an issue, it's not looking at the month or year, just the day..
EXAMPLE: Database stores 31/05/2016 as $reward.
In this example $current would output at 03/06/2016
<?php
$reward1 = str_replace('/', '-', $reward);
$stored = date('d/m/Y', strtotime($reward1. ' + 1 days'));
$current = date('d/m/Y');
if ($reward < $current) { ?>
<script type="text/javascript">
$(window).load(function(){
$('#redeem1').modal('show');
});
</script>
<?php } } ?>
I think there is a few errors in your code as posted above in comments.
See if it works.
$reward1 = str_replace('/', '-', $reward);
$stored = strtotime(date('d-m-Y', strtotime($reward1. ' + 1 days')));
$current = strtotime(date('d-m-Y'));
// now both values are in integer
// using d/m/y is not a standard datetime, php assumes it is american m/d/y.
if ($stored < $current) { ?>
<script type="text/javascript">
$(window).load(function(){
$('#redeem1').modal('show');
});
</script>
<?php } } ?>
You are comparing strings. This is wrong.
Take a look at the excellent Carbon library for the best practice way to achieve this. https://github.com/briannesbitt/Carbon
$reward = Carbon::parse($reward);
$now = Carbon::now();
if ($reward->lt($now)) {
// Do something
}

Crossbrowser php date to javascript date?

I am building a JavaScript countdown, that needs to rely on the server time but I cant manage to transfers the php time to javascript in a crossbrowser manner. This workes well in all Mordern browsers, but brakes in older ones (Date not defined). If I go with date("Y-m-d H:i:s) instead of date("Y-m-d\TH:i:s\Z) it works better but not in IE10
<?php
switch ($day) {
case 'Sat':
$start = "10";
$stop = "16";
break;
case 'Sun':
$start = "11";
$stop = "16";
break;
default:
$start = "10";
$stop = "19";
break;
}
?>
<script>
jQuery(function(){
var open = new Date("<?php echo date("Y-m-d\TH:i:s\Z",strtotime("today {$start}:00:00")); ?>");
var end = new Date("<?php echo date("Y-m-d\TH:i:s\Z",strtotime("today {$stop}:00:00")); ?>");
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var start = new Date("<?php echo date("Y-m-d\TH:i:s\Z"); ?>") ;
});
</script>
The only format officially recognized by ECMAScript/JavaScript is ISO 8601 Extended:
The format is as follows: YYYY-MM-DDTHH:mm:ss.sssZ
But, this is new with ECMAScript 5. Prior versions left support up to each vendor to decide.
You could try using timestamps rather than strings.
var open = new Date(<?php echo strtotime("today {$start}:00:00") * 1000; ?>);
// ...
var start = new Date(<?php echo time() * 1000; ?>);
Both JavaScript and PHP use UTC-based timestamps, just with the difference of seconds (PHP) vs. milliseconds (JS).
Firstly, Javascript date() is accept the milliseconds, or dateString.
The milliseconds similar to php time().
The dateString should be used this format: October 13, 2012 11:13:00
By you case, I suggest using strtotime() or time() to return the timestamp, but you need * 1000 before pass to javascript.
Ref: W3schools - Date Object Reference

Javascript .getHours() returns strange result

I'm converting a PHP timestamp into a human readable form in javascript:
<script type="text/javascript">
var timeleft = new Date( <?php echo $lefttime; ?> * 1000 );
var hours = timeleft.getHours();
var minutes = timeleft.getMinutes();
var seconds = timeleft.getSeconds();
var countdown = function() {
console.log( "You have " + hours + ":" + minutes + ":" + seconds + " seconds left" );
</script>
The minutes and seconds work but I'm getting strange results for the hours. For example:
Timestamp: 1976
Function returns: 19:32:56
Any ideas why I'm getting "19" from .getHours() ?
I'm going to hazard a guess that you're in Eastern Time. What you are seeing is $lefttime seconds after the epoch, which in the case of EST is 7PM.
To fix it, just use basic math:
var timeleft = <?php echo $lefttime; ?>;
var hours = Math.floor(timeleft/3600);
var minutes = Math.floor(timeleft/60)%60;
var seconds = timeleft%60;

PHP/Javascript countdown script

Note * I want some one to fix it and tell me how they did it not tips on how to do it or coments about php nd java mixed in it *
I have a countdown script that is working, but when it hits the target date the timer keeps on going to a negative time. I want it to stop on that target date and just display a finishing message. It's live on my site. I just need help editing the countdown script.
I want to keep the same layout. I need some help adding the finishing message and stopping it from going into the negative date, or just make it not display the 0days, 0 hours, 0mins, 0sec until the site's officially released. When that finally happens, I want it to display a message.
countdown script
<?php date_default_timezone_set('EST'); ?>
<?php
// Define your target date here
$targetYear = 2011;
$targetMonth = 9;
$targetDay = 1;
$targetHour = 20;
$targetMinute= 00;
$targetSecond= 00;
// End target date definition
// Define date format
$dateFormat = "Y-m-d H:i:s";
$targetDate = mktime($targetHour,$targetMinute,$targetSecond,$targetMonth,$targetDay,$targetYear);
$actualDate = time();
$secondsDiff = $targetDate - $actualDate;
$remainingDay = floor($secondsDiff/60/60/24);
$remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));
$targetDateDisplay = date($dateFormat,$targetDate);
$actualDateDisplay = date($dateFormat,$actualDate);
?>
<script type="text/javascript">
var days = <?php echo $remainingDay; ?>
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>
</script>
<body onLoad="setCountDown();">
<center><?php echo "$remainingDay days, $remainingHour hours, $remainingMinutes minutes and $remainingSeconds seconds";?> untill official release</center>
how its added on the site
<script type="text/javascript">
$(function() {
/* Union War */
$("#Countdown2").load("http://imperialism.zxq.net/includes/process/uwcountdown.php");
setInterval(function(){
$("#Countdown2").load("http://imperialism.zxq.net/includes/process/uwcountdown.php");
}, 1000);
});
</script>
<div id="uwCD" class="uwCD">
<div id="Countdown2"></div>
</div>
I recommend this jQuery countdown plugin; just pass the PHP value to the jQuery plugin call.
if($targetDate != $actualDate && $targetDate > $actualDate) {
echo "$remainingDay days, $remainingHour hours, $remainingMinutes minutes and $remainingSeconds seconds";
} else {
echo "0 days, 0 hours, 0 minutes and 0 seconds";
}
try using this http://www.timeanddate.com/counters/customcount.html everything is done for you and its worked fine and if anything you can just edit the look of the skin to fit your website
if($targetDate != $actualDate && $targetDate > $actualDate) {
echo "$remainingDay days, $remainingHour hours, $remainingMinutes minutes and $remainingSeconds seconds";
} else {
echo "0 days, 0 hours, 0 minutes and 0 seconds";
}

Time count down like www.bidhere.com

Can anybody please suggest to me how I can create a time countdown like www.bidhere.com.
what are the techniques used on that. e.g jQuery or cronjob ?
Thanks.
You can use javascript to achieve that affect
Markup
<body>
<div id="countdown"></div>
</body>
Javascript
function countdown(remain) {
var countdown = document.getElementById("countdown"),
timer = setInterval( function () {
countdown.innerHTML = (remain%60 < 10 ? "0": "") + remain %60;
if (--remain < 0 ) { clearInterval(timer); }
},1000);
}
countdown(20);
<span class="countdown" rel="30">0:30</span><br/>
<span class="countdown" rel="60">1:00</span><br/>
<span class="countdown" rel="1800">30:00</span><br/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
// Initialization
$(document).ready(function(){
// Replace <span class="countdown"> rel content with the expiry epoch time
var date = new Date(); // This gives you an epoch date in milliseconds
$('span.countdown').each(function(){
// We do rel*1000 to convert to milliseconds, cause rel is in seconds
$(this).attr('rel', date.getTime()+parseInt($(this).attr('rel'))*1000);
});
// Set an interval so updateCountdown() is called every second
setInterval('updateCountdown()', 1000);
});
// Update, called every second
function updateCountdown() {
var date = new Date(); // This gives you an epoch date in milliseconds
// For each <span class="countdown">
$('span.countdown').each(function(){
// Get time left in milliseconds
var timeLeft = parseInt($(this).attr('rel')) - date.getTime();
// Convert from milliseconds to seconds
timeLeft = Math.round(timeLeft/1000);
// Set to 0 if negative
if (timeLeft < 0) timeLeft = 0;
// Extract minutes and seconds for display
var secs = timeLeft % 60;
var mins = (timeLeft-secs)/60;
// Change <span> content
$(this).text(mins+':'+(secs<10?'0':'')+secs);
});
}
</script>

Categories