Creating a dynamic time stamp

[Boy_Wonder]

No I'm using the plugin interface because that's what I'm FAMILIAR with.

It needs to be built in into the intel plugin and I just give up and will keep doing date time method because its just getting overly complex.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jul 23, 2014 23:42:25 GMT -8 Boy_Wonder said:

No I'm using the plugin interface because that's what I'm FAMILIAR with.

It needs to be built in into the intel plugin and I just give up and will keep doing date time method because its just getting overly complex.

You want something like this correct?
Where you can add as many dates as you want?

[Boy_Wonder]

No. I've built a plugin called Intel.

deviltearsrpg.com/ < its used solely on there.

To give a feeling of the intel being 'updated' there's two fields. One displays date. One displays time.

Date input is 22/07/2014 (for example) the time input is input off my computer clock manually in format of hh:mm:ss into the field.

Now what I'm trying to do is code in the javascript part a way of translating the field (intel_date and intel_time ) into a dynamic time however with my timezone being GMT time I also need a way to translate it into the other persons timezone.

EG say I posted something with a date of: 24/07/2014 and a time of: 08:57:15 it would display for me posted 5 seconds ago. It would display for someone else say in Australia ALSO 5 seconds ago because it translated the time into their timezone before displaying it dynamically into 5 seconds ago, 10 seconds ago.

Once it gets to 24 hours have past (Eg one day) it would then switch to displaying date and the time appropriate to their timezone as well

Editing to add: THe whole intel field output comes from one autoform which is displayed through use of a 'for' loop

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jul 23, 2014 23:58:42 GMT -8 Boy_Wonder said:

No. I've built a plugin called Intel.

deviltearsrpg.com/ < its used solely on there.

To give a feeling of the intel being 'updated' there's two fields. One displays date. One displays time.

Date input is 22/07/2014 (for example) the time input is input off my computer clock manually in format of hh:mm:ss into the field.

Now what I'm trying to do is code in the javascript part a way of translating the field (intel_date and intel_time ) into a dynamic time however with my timezone being GMT time I also need a way to translate it into the other persons timezone.

EG say I posted something with a date of: 24/07/2014 and a time of: 08:57:15 it would display for me posted 5 seconds ago. It would display for someone else say in Australia ALSO 5 seconds ago because it translated the time into their timezone before displaying it dynamically into 5 seconds ago, 10 seconds ago.

Once it gets to 24 hours have past (Eg one day) it would then switch to displaying date and the time appropriate to their timezone as well

var year = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[0]
var month = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[1]
var day = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[0]
var hours = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[2].split(':')[0]
var minutes = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[2].split(':')[1]
var seconds = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[2].split(':')[2]
$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +new Date(year,month,day,hours,minutes,seconds, 0).getTime()+'"></abbr></div><div style="clear: both;"></div>'+intelOutput.settings.intel[index].input+'</div> ');
You mean like that?

[Boy_Wonder]

That just gave me this error

An error occurred during a document.ready call:  TypeError: Cannot read property 'split' of undefined
While executing:  function () {
var intelOutput = pb.plugin.get('intel');
   for (index = 0, len = intelOutput.settings.intel.length; index < len; index = index +1) {
    var year = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[0]
var month = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[1]
var day = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[0]
var hours = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[2].split(':')[0]
var minutes = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[2].split(':')[1]
var seconds = pb.plugin.get('intel').settings.intel[index].date_and_time_posted.split('/')[2].split(' ')[2].split(':')[2]
$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +new Date(year,month,day,hours,minutes,seconds, 0).getTime()+'"></abbr></div><div style="clear: both;"></div>'+intelOutput.settings.intel[index].input+'</div> ');
   }
}


[Boy_Wonder]

Edit I worked out why - I just changed to using the new classes properly and I don't get how to alter that code to max that yes I am using one field for intel date (called intel_date in code) and one field for intel time (called intel_time)

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jul 24, 2014 0:52:19 GMT -8 Boy_Wonder said:

Edit I worked out why - I just changed to using the new classes properly and I don't get how to alter that code to max that yes I am using one field for intel date (called intel_date in code) and one field for intel time (called intel_time)

So you got it working?
And you need to alter the code?
Basically I manipulated the one text string to split it into the various parts I needed to put into the date object.

[Boy_Wonder]

I didn't get it obviously working as I'm not sure HOW to edit to make it so it references the date from one field and the time from the other

I just made an attempt to edit it and its still going no ¬¬
Including console log error output


An error occurred during a document.ready call:  TypeError: Cannot read property 'split' of undefined

While executing:  function () {

var intelOutput = pb.plugin.get('intel');

   for (index = 0, len = intelOutput.settings.intel.length; index < len; index = index +1) {

    var year = intelOutput.settings.intel[index].intel_date.split('/')[2].split(' ')[0]

var month = intelOutput.settings.intel[index].intel_date.split('/')[1]

var day = intelOutput.settings.intel[index].intel_date.split('/')[0]

var hours = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[0]

var minutes = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[1]

var seconds = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[2]

$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +new Date(year,month,day,hours,minutes,seconds, 0).getTime()+'"></abbr></div><div style="clear: both;"></div>'+intelOutput.settings.intel[index].input+'</div> ');

   }

} forum_161.js:1555

(anonymous function) forum_161.js:1555

o jquery.min.js:2

p.fireWith jquery.min.js:2

e.extend.ready jquery.min.js:2

c.addEventListener.B jquery.min.js:2


[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jul 24, 2014 1:08:46 GMT -8 Boy_Wonder said:

I didn't get it obviously working as I'm not sure HOW to edit to make it so it references the date from one field and the time from the other

I just made an attempt to edit it and its still going no ¬¬
Including console log error output


An error occurred during a document.ready call:  TypeError: Cannot read property 'split' of undefined

While executing:  function () {

var intelOutput = pb.plugin.get('intel');

   for (index = 0, len = intelOutput.settings.intel.length; index < len; index = index +1) {

    var year = intelOutput.settings.intel[index].intel_date.split('/')[2].split(' ')[0]

var month = intelOutput.settings.intel[index].intel_date.split('/')[1]

var day = intelOutput.settings.intel[index].intel_date.split('/')[0]

var hours = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[0]

var minutes = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[1]

var seconds = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[2]

$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +new Date(year,month,day,hours,minutes,seconds, 0).getTime()+'"></abbr></div><div style="clear: both;"></div>'+intelOutput.settings.intel[index].input+'</div> ');

   }

} forum_161.js:1555

(anonymous function) forum_161.js:1555

o jquery.min.js:2

p.fireWith jquery.min.js:2

e.extend.ready jquery.min.js:2

c.addEventListener.B jquery.min.js:2


The problem is that now the code you have is split and not combined. Where you were storing it as date_and_time_posted, is now stored as intel_time and intel_date

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

The SPLIT method splits the string into an array based on the letter provided.
Then you reference the Part of the string you want, (now split), with the array option [0] or [1] etc.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jul 24, 2014 1:08:46 GMT -8 Boy_Wonder said:

I didn't get it obviously working as I'm not sure HOW to edit to make it so it references the date from one field and the time from the other

I just made an attempt to edit it and its still going no ¬¬
Including console log error output


An error occurred during a document.ready call:  TypeError: Cannot read property 'split' of undefined

While executing:  function () {

var intelOutput = pb.plugin.get('intel');

   for (index = 0, len = intelOutput.settings.intel.length; index < len; index = index +1) {

    var year = intelOutput.settings.intel[index].intel_date.split('/')[2].split(' ')[0]

var month = intelOutput.settings.intel[index].intel_date.split('/')[1]

var day = intelOutput.settings.intel[index].intel_date.split('/')[0]

var hours = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[0]

var minutes = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[1]

var seconds = intelOutput.settings.intel[index].intel_time.split('/')[2].split(' ')[2].split(':')[2]

$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +new Date(year,month,day,hours,minutes,seconds, 0).getTime()+'"></abbr></div><div style="clear: both;"></div>'+intelOutput.settings.intel[index].input+'</div> ');

   }

} forum_161.js:1555

(anonymous function) forum_161.js:1555

o jquery.min.js:2

p.fireWith jquery.min.js:2

e.extend.ready jquery.min.js:2

c.addEventListener.B jquery.min.js:2


for(index=0;index<pb.plugin.get('intel').settings.intel.length;index++){
var year = pb.plugin.get('intel').settings.intel[index].intel_date.split('/')[2]
var month = pb.plugin.get('intel').settings.intel[index].intel_date.split('/')[1]
var day = pb.plugin.get('intel').settings.intel[index].intel_date.split('/')[0]
var hours = pb.plugin.get('intel').settings.intel[index].intel_time.split(':')[0]
var minutes = pb.plugin.get('intel').settings.intel[index].intel_time.split(':')[1]
var seconds = pb.plugin.get('intel').settings.intel[index].intel_time.split(':')[2]
$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +new Date(year,month,day,hours,minutes,seconds, 0).getTime()+'"></abbr></div><div style="clear: both;"></div>'+pb.plugin.get('intel').settings.intel[index].input+'</div> '); }

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

The left side shows the code working. The right shows where I injected a recent timestamp.
The upper left corner shows that injected time stamp working as a preview.
Saying Six Minutes Ago

[Boy_Wonder]

Thank you! That appears to work, I only have one more question but I'm not sure how easy this is to work out - is there any way to display by sorting the time stamp so it defaults the newest at the top (aka most recent time and date at the top affair)

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Jul 24, 2014 9:52:52 GMT -8 Boy_Wonder said:

Thank you! That appears to work, I only have one more question but I'm not sure how easy this is to work out - is there any way to display by sorting the time stamp so it defaults the newest at the top (aka most recent time and date at the top affair)

I believe this should sort it by timestamp
First it loops through and assigns each timestamp
Second it Sorts it by Largest Number First
Third it loops through and appends the data
$( document ).ready(function() {
var intelOutput = pb.plugin.get('intel');
for(a=0;a<intelOutput.settings.intel.length;a++)
{
var year = intelOutput.settings.intel.intel_date.split('/')[2]
var month = intelOutput.settings.intel.intel_date.split('/')[1]
var day = intelOutput.settings.intel.intel_date.split('/')[0]
var hours = intelOutput.settings.intel.intel_time.split(':')[0]
var minutes = intelOutput.settings.intel.intel_time.split(':')[1]
var seconds = intelOutput.settings.intel.intel_time.split(':')[2]
intelOutput.settings.intel.timestamp=new Date(year,month,day,hours,minutes,seconds, 0).getTime()
}
intelOutput.settings.intel.sort(function(a, b){return parseFloat(b.timestamp)-parseFloat(a.timestamp)});
for(index=0;index<intelOutput.settings.intel.length;index++){
$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +intelOutput.settings.intel[index].timestamp+'"></abbr></div><div style="clear: both;"></div>'+intelOutput.settings.intel[index].input+'</div> '); }
});

[Boy_Wonder]

Jul 24, 2014 21:10:09 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Jul 24, 2014 9:52:52 GMT -8 Boy_Wonder said:

Thank you! That appears to work, I only have one more question but I'm not sure how easy this is to work out - is there any way to display by sorting the time stamp so it defaults the newest at the top (aka most recent time and date at the top affair)

I believe this should sort it by timestamp
First it loops through and assigns each timestamp
Second it Sorts it by Largest Number First
Third it loops through and appends the data
$( document ).ready(function() {
var intelOutput = pb.plugin.get('intel');
for(a=0;a<intelOutput.settings.intel.length;a++)
{
var year = intelOutput.settings.intel.intel_date.split('/')[2]
var month = intelOutput.settings.intel.intel_date.split('/')[1]
var day = intelOutput.settings.intel.intel_date.split('/')[0]
var hours = intelOutput.settings.intel.intel_time.split(':')[0]
var minutes = intelOutput.settings.intel.intel_time.split(':')[1]
var seconds = intelOutput.settings.intel.intel_time.split(':')[2]
intelOutput.settings.intel.timestamp=new Date(year,month,day,hours,minutes,seconds, 0).getTime()
}
intelOutput.settings.intel.sort(function(a, b){return parseFloat(b.timestamp)-parseFloat(a.timestamp)});
for(index=0;index<intelOutput.settings.intel.length;index++){
$('div#intel').append('<div style="width: 98%;padding: 3px; text-align: justify;border-bottom: 1px solid #84341E;"><div style="float: right; font-size: 8pt !important;"><abbr class="time" data-timestamp="' +intelOutput.settings.intel[index].timestamp+'"></abbr></div><div style="clear: both;"></div>'+intelOutput.settings.intel[index].input+'</div> '); }
});

Once again I'm getting a "cannot read property 'split' of undefined