abbr[title] | Facebook, Display the tool-tip {timestamp} always?

Question

<abbr title="Sunday, January 01, 2017 at 12:12am" 
data-utime="0000000000" data-shorten="1" 
class="_5ptz timestamp livetimestamp">
<span class="timestampContent" id="js_d">1 hr</span></abbr>

I found a script, but it no longer works. So, anyone here willing to share how this could be done?

document.addEventListener("load", DisplayTimestamp());

function DisplayTimestamp() {
    var i;

    if (document.getElementsByTagName && document.getElementsByTagName("abbr").length > 0) {
        for (i = 0; i < document.getElementsByTagName("abbr").length; i++) {
            document.getElementsByTagName("abbr")[i].innerHTML += " 
    (" + new Date(document.getElementsByTagName("abbr")[i].title).toLocaleString() + ")";
        }
    }
}

So far, I have made progress despite not knowing javascript.

I've found that,

document.getElementsByTagName("abbr").title;
document.getElementsByTagName("abbr")[i].innerHTML;       
document.getElementsByTagName("abbr")[i].title;

Actually retrieves the title and outputs it in the console. Not sure what to do from here on out though.

Further progress and I've managed to get it to make a change on the actual page, from the console.

var i = 0;
var d = new Date(); 
var n = d.toLocaleString();
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML;       
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML = n;

I don't know what I would need to do to get to work in a script and always display the timestamp, I could probably make a button at this point though that when clicked shows the time stamp, and just build it in to a browser extension.

If I want it to display the actual day and month in word format,

var i = 0;
var n = document.getElementsByTagName("abbr")[i].title.toLocaleString();
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML;
document.getElementsByTagName("abbr")[i].title;
document.getElementsByTagName("abbr")[i].innerHTML = n;

Further Progress:

(function DisplayTimestamp() {
    var i;
    var abbrs = document.getElementsByTagName("abbr")
    if (document.getElementsByTagName && abbrs.length > 0) {
        for (i = 0; i < abbrs.length; i++) {
            abbrs[i].innerHTML += "(" + abbrs[i].title.toLocaleString() + ")";
            //console.log(document.getElementsByTagName("abbr")[i].title.toLocaleString())
        }
    }
})()

@JZersche You seem to be taking the comments the wrong way. **Answers do not belong in the body of the question.** It's quite simple. If you want to provide additional information that answers your question, it belongs in an answer below like the other one. Your question is reserved for the question only. If you want to mark your question solved, use the check mark next to an answer. Do not add "solved" to the title - that is inappropriate. — animuson, Jan 26 '17 at 01:39
When people are searching google, it's helpful. My apologies for looking out for the less knowledgeable community. I'll be sure to keep all knowledge to myself in the future, and not include it in the main body. — J Zersche, Jan 26 '17 at 20:19
No one is asking you to keep it to yourself, so please stop being so sour about this. We're asking you to put the knowledge in the *correct place*. There's a big button below that says "Answer Your Question" - please click it and type your answer into the box that appears. If you'd like to continue arguing about site policies, please go to [Meta](http://meta.stackoverflow.com). — animuson, Jan 26 '17 at 20:31

wOxxOm · Answer 1 · 2017-01-15T17:48:09.380

0

Use data-utime attribute to construct the date, so assuming abbr is the element reference:

new Date(abbr.dataset.utime * 1000).toLocaleString()

However, since Facebook loads content dynamically it's better to use MutationObserver to process the posts added after the page has been loaded (also when scrolling). This will also help us make the timestamps appear without any delay by adding @run-at document-start:

// ==UserScript==
// @name     FB: full timestamps
// @match    *://www.facebook.com/*
// @run-at   document-start
// @grant    GM_addStyle
// @require  https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

GM_addStyle(
    '.full-timestamp { opacity: 0.5; }' +
    '.full-timestamp:hover { opacity: 1.0; }' +
    '.full-timestamp:before { content: " ("; }' +
    '.full-timestamp:after  { content: ")"; }'
);

// process the already loaded portion of the page if any
expandDates(document.querySelectorAll('abbr[data-utime]'));

// process the stuff added from now on
setMutationHandler(document, 'abbr[data-utime]', expandDates);

function expandDates(nodes) {
    for (var i = 0, abbr; (abbr = nodes[i++]); ) {
        if (abbr.querySelector('.full-timestamp')) {
            // already processed
            continue;
        }
        abbr.insertAdjacentHTML('beforeend', '<span class="full-timestamp">' +
            new Date(abbr.dataset.utime * 1000).toLocaleString() + '</span>');
    }
}

The code is using simple MutationObserver wrapper setMutationHandler.

edited Jan 15 '17 at 17:48

answered Jan 15 '17 at 17:42

wOxxOm

65,848
11
132
136

Use [toLocaleDateString](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) with options, you can find many examples. – wOxxOm Jan 15 '17 at 22:35
http://stackoverflow.com/questions/41767088/i-have-a-script-that-shows-fb-timestamps-at-exact-time-using-moment-js-but-one For some reason, older posts show as being 3 hours behind. Any idea why? – J Zersche Jan 20 '17 at 20:23
Sounds like timezone shift. Try `new Date(abbr.dataset.utime * 1000 + (new Date()).getTimezoneOffset()*60*1000)` – wOxxOm Jan 20 '17 at 20:40
As you can see the difference is that part after `+` so go ahead. As for 12-hour format, I'd use toLocaleDateString that has a corresponding option (see the docs). I haven't used moment.js. – wOxxOm Jan 20 '17 at 22:16
I have no idea. It's a topic for a new question anyway. Most likely already answered somewhere. – wOxxOm Jan 20 '17 at 23:00
Or you can simply display the `title` attribute as is: `'' + abbr.title + ''` – wOxxOm Jan 20 '17 at 23:06
Hahaha, Holy crap. Here is my solution. abbr.insertAdjacentHTML('beforeend', '' + (moment(new Date(abbr.dataset.utime * 1000)).format('dddd, M/DD/YYYY, []')) + '' + abbr.title.substr(27, abbr.title.substr.length+3).replace('at','') + ':' + (moment(new Date(abbr.dataset.utime * 1000)).format('ssA · [UTC]Z')) + '') ; – J Zersche Jan 21 '17 at 00:59
Hey so today the script stopped working, wOxxOm, any idea why? https://greasyfork.org/scripts/26738-fb-full-timestamps/code/FB:%20full%20timestamps.user.js Here's the URL. Thanks – J Zersche Feb 06 '18 at 14:10

abbr[title] | Facebook, Display the tool-tip {timestamp} always?

1 Answers1