Expanding a multiple instance timer to be timezone aware - javascript

I have a js timer that is used to show a countdown to the end times on items that are sold in an auction format. The js I use is below.
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%-Dday%!D %-Hhr%!H %Mmin%!M %Ssec'));
});
});
I want to make this timezone aware so I searched online and found MomentJS.
I've included the moment-with-locales.min.js and moment-timezone-with-data-2010-2020.min.js files and they are being correctly loaded.
I'm really struggling to get my head around how to integrate the js into my current script as the sample on the github is for a single instance timer only.
The code example they give is
var nextYear = moment.tz("2015-01-01 00:00", "America/Sao_Paulo");
$('#clock').countdown(nextYear.toDate(), function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
Now I assume I need to apply the
= moment.tz("2015-01-01 00:00", "America/Sao_Paulo");
type code to my date which are stored in data-countdown, but I just end up with a blank space where the countdown should be.
This is what I tried to do
var $this = $(this), finalDate = moment.tz($(this).data('countdown'), "America/Sao_Paulo");
Where have I gone wrong adding the moment.tz command?

I got it to work using
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = moment.tz($(this).data('countdown'), "Europe/London");
$this.countdown(finalDate.toDate(), function(event) {
$this.html(event.strftime('%-Dday%!D %-Hhr%!H %Mmin%!M %Ssec'));
});
});
Only issue I have is that the time is 1hr out. An end time of 15:00 in London should have one hour more on the countdown in Paris, but it has two hours more at the moment.

Related

Updating Full Calendar Day At Midnight

//Reset At Midnight
function resetAtMidnight() {
var now = new Date();
var night = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + 1, // the next day, ...
0, 0, 0 // ...at 00:00:00 hours
);
var msToMidnight = night.getTime() - now.getTime();
setTimeout(function() {
reset(); // <-- This is the function being called at midnight.
resetAtMidnight(); // Then, reset again next midnight.
}, msToMidnight);
}
function reset() {
$('#calendar').fullCalendar('today');
}
I am trying to have FullCalendar.js update the current day everyday at midnight. I pulled this reset snippet from another post on here - but the reset function does not seem to execute.
You have not provided full detail so I don't know what exactly you need but following code might help you to solve your issue.
You can check midnight quite easily using moment.js library.
Following code was taken from another post Best Way to detect midnight and reset data
$(document).ready(function() {
var midnight = "0:00:00";
var now = null;
setInterval(function() {
now = moment().format("H:mm:ss");
if (now === midnight) {
alert('reset() function here');
}
$("#time").text(now);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<code id="time"></code>
Fullcontrol:
You can either use rerenderEvents or refetchEvents as per your requirement. So it will be something like this
function reset(){
$('#calendar').fullCalendar('rerenderEvents');
OR
$('#calendar').fullCalendar('refetchEvents');
}
If you want to re-draw the fullcontrol then here is another informative post 're-draw fullcalendar'
As post suggested you can do
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');

How to set hour and minute using javascript for plugin

Hi i am trying to give fix hours and minutes to the html view trying to modify the plugin but having issue with changes
This is my plugin code
(function ($) {
$.extend($.ui, { timepicker: { version: "0.3.3"} });
var PROP_NAME = 'timepicker',
tpuuid = new Date().getTime();
And Now i am tring to set the default hour default to Zero(0) and the minute to the 30 How can i do that...?
this is what i have tried:
tpuuid = new Date().getTime();
tpuuid.setHours(0);
tpuuid.setMinutes(30);
but is is saying like tpuuid is not a funtion... how can resolve this isssue.. thanks for help.
THIS IS PLUGIN SOURCE : CLICK HERE TO SEE THE PLUGIN
Change your code From
tpuuid = new Date().getTime();
tpuuid.setHours(0);
tpuuid.setMinutes(30);
to
tpuuid = new Date();
tpuuid.setHours(0);
tpuuid.setMinutes(30);

Why does $(document).getElementbyId not work in this function while just document.getElementbyId works?

This is the function. I am including Jquery library from Google CDN and it is before this script.
{
$(document).ready( function() {
function displayTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// This gets a "handle" to the clock div in our HTML
//This does not work???
var clockDiv = $(document).getElementById('clock');
//This works though
var clockDiv = document.getElementById('clock');
// Then we set the text inside the clock div
// to the hours, minutes, and seconds of the current time
clockDiv.innerText = hours + ":" + minutes + ":" + seconds;
}
// This runs the displayTime function the first time
displayTime();
});
}
As others have mentioned, to achieve the same functionality as you would using just the Web API for Document with jQuery, you would use a selector instead. As Arun P states, you would do
var clockDiv = $('#clock'); // select the div with an ID of clock
clockDiv.text( /* your text */ ); // set the text of the selected element to the passed argument
jQuery is a library the abstracts the Web APIs to help with cross-browser compatibility issues and to generally make navigating and manipulating the DOM a bit easier.
to set text in a div
$('#clock').text('some text');
Because jQuery returns the document information differently. If I remember correctly it would have to be:
$(document)[0].getElementById('clock');

Using the same Javascript in different cells to count passed days

I am currently trying to fill a html table with several counters, one underneath the other, to show days past since an incident.
Thanks to the internet, i ended up with this script:
<script language="JavaScript1.2" type="text/javascript">function
setcountup(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday
}
//////////CONFIGURE THE countup SCRIPT HERE//////////////////
//STEP 1: Configure the date to count up from, in the format year, month, day:
//This date should be less than today
setcountup(2012,9,19)
//STEP 2: Configure text to be attached to count up
var displaymessage=""
//STEP 3: Configure the below 5 variables to set the width, height, background color,
and text style of the countup area
var countupwidth='90%'
var countupheight='40px' //applicable only in NS4
var countupbgcolor=''
var opentags='<font face="Verdana"><large>'
var closetags='</large></font>'
//////////DO NOT EDIT PASS THIS LINE//////////////////
var montharray=new
Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''
function start_countup(){
if (document.layers)
document.countupnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?
document.getElementById("countupie") : countupie
countup()
}
if (document.all||document.getElementById)
document.write('<span id="countupie" style="width:'+countupwidth+'; background-
color:'+countupbgcolor+'"></span>')
window.onload=start_countup
function countup(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+"
"+todayh+":"+todaymin+":"+todaysec
paststring=montharray[mo-1]+" "+da+", "+yr
paststring="10:00"+montharray[mo-1]+" "+da+", "+yr
dd=Date.parse(todaystring)-Date.parse(paststring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if (document.layers){
document.countupnsmain.document.countupnssub.document.write(opentags+dday+ " days
"+displaymessage+closetags)//to get more detail, enter one of the following in the
write line(also in the else): +dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds
"
document.countupnsmain.document.countupnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days "+displaymessage+closetags//+dhour+"
hours, "+dmin+" minutes, and "+dsec+" seconds "
setTimeout("countup()",1000)
}
</script>
Now, each cell row has a counter for a different event.
I seem to be incapable of just putting this code in each , as it creates a conflict (i think)
I am completely new at this, and i have to get this sorted out.
Can anybody help me out, or point me in the right direction please?
Thank you in advance
I spent a good amount of time trying to get the code you posted to work, and I have to say, that's some really bad code. There's a lot of unneeded code like:
paststring=montharray[mo-1]+" "+da+", "+yr
paststring="10:00"+montharray[mo-1]+" "+da+", "+yr
and a lot of just general formatting craziness. I believe I'd made it work and it's significantly easier to read than it was. This fiddle should help you make yours work.
http://jsfiddle.net/9DNaD/

Button selects webpage (from list) based on date

I am terrible with Javascript but learning from my bruises.
On the site I am working on - I currently have a page setup for everyday of the year (i.e. January 1st has its own page '01-jan-01.html' January 2nd is '01-jan-02.html') - I want to make a button that will look up the current date then send the user to the corresponding page (Think 'This day in history').
I already have a button that will pick one of these pages at random and the code works see below:
<script type="text/javascript">
var urls = [
'01-jan-01.html'
'01-jan-02.html'
....
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
Then on my button I simply call goSomewhere() on the onClick() and as i said earlier, this works fine. However I can't figure out how to select based on the CURRENT DATE. any help would be greatly appreciated. thank you!
EDIT: No answers but here is the progress so far:
<script>
var day = date.getDate();
var month = date.getMonth();
function goSomewhere() {
var url = month + "-" + day];
window.location = url; // redirect
}
</script>
This wouldn't even solve my problem entirely but its how I'm trying to wrap my head around the logic. In the above code I would still need to find a way to incorporate the 'jan' (month) varible in each webpage link since the formatting is 'MM-mmmmm-DD' - would it be easier if I change the naming mechanic to simply "MM-DD"? I'd prefer not to since it would involve a lot of manual work. Thanks
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
var yy = yyyy.toString().substr(2,2); //get two digit year
if(dd<10){ dd='0'+dd }
if(mm<10){ mm='0'+mm }
location.href = yy+'-'+mm+'-'+dd+'.html';

Categories