I have some elements with UNIX timestamps inside, which is not useful for clients. So i transform them into
less then one minute ago = "just now"
less then one hour ago = "X minutes ago"
less then a day ago = "X hours ago"
else: "timestamp->real date".
First of all my code works, BUT not on mobile devices such as iPhone5s. The result with these devices will be: NaN NaN NaN NaN. I'd love to know how to fix this.
The other thing is, my javascript looks pretty stupid, I think. But I could not figure out how to loop through these different time-conditions. Suggestions here are not necessary but grateful appreciated.
NOTE: I cannot change the structure of my paragraphs before the page is loaded. It is set that my paragraphs will contain UNIX timestamps. Thats my starting position.
here comes my full html with loads of < p > examples, copy & paste ready:
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var dates = document.getElementsByClassName('date');
for (var i = 0; i < dates.length; i++) {
var currentdate = Date.now();
if (dates[i].innerHTML !== '') {
var date = new Date(dates[i].innerHTML*1000);
if (currentdate - 60000 <= date) {dates[i].innerHTML = "just now"}
else if (currentdate - 120000 <= date) {dates[i].innerHTML = "1 min ago"}
else if (currentdate - 180000 <= date) {dates[i].innerHTML = "2 mins ago"}
else if (currentdate - 240000 <= date) {dates[i].innerHTML = "3 mins ago"}
else if (currentdate - 300000 <= date) {dates[i].innerHTML = "4 mins ago"}
else if (currentdate - 360000 <= date) {dates[i].innerHTML = "5 mins ago"}
else if (currentdate - 420000 <= date) {dates[i].innerHTML = "6 mins ago"}
else if (currentdate - 480000 <= date) {dates[i].innerHTML = "7 mins ago"}
else if (currentdate - 540000 <= date) {dates[i].innerHTML = "8 mins ago"}
else if (currentdate - 600000 <= date) {dates[i].innerHTML = "9 mins ago"}
else if (currentdate - 660000 <= date) {dates[i].innerHTML = "10 mins ago"}
else if (currentdate - 720000 <= date) {dates[i].innerHTML = "11 mins ago"}
else if (currentdate - 780000 <= date) {dates[i].innerHTML = "12 mins ago"}
else if (currentdate - 840000 <= date) {dates[i].innerHTML = "13 mins ago"}
else if (currentdate - 900000 <= date) {dates[i].innerHTML = "14 mins ago"}
else if (currentdate - 960000 <= date) {dates[i].innerHTML = "15 mins ago"}
else if (currentdate - 1020000 <= date) {dates[i].innerHTML = "16 mins ago"}
else if (currentdate - 1080000 <= date) {dates[i].innerHTML = "17 mins ago"}
else if (currentdate - 1140000 <= date) {dates[i].innerHTML = "18 mins ago"}
else if (currentdate - 1200000 <= date) {dates[i].innerHTML = "19 mins ago"}
else if (currentdate - 1260000 <= date) {dates[i].innerHTML = "20 mins ago"}
else if (currentdate - 1320000 <= date) {dates[i].innerHTML = "21 mins ago"}
else if (currentdate - 1380000 <= date) {dates[i].innerHTML = "22 mins ago"}
else if (currentdate - 1440000 <= date) {dates[i].innerHTML = "23 mins ago"}
else if (currentdate - 1500000 <= date) {dates[i].innerHTML = "24 mins ago"}
else if (currentdate - 1560000 <= date) {dates[i].innerHTML = "25 mins ago"}
else if (currentdate - 1620000 <= date) {dates[i].innerHTML = "26 mins ago"}
else if (currentdate - 1680000 <= date) {dates[i].innerHTML = "27 mins ago"}
else if (currentdate - 1740000 <= date) {dates[i].innerHTML = "28 mins ago"}
else if (currentdate - 1800000 <= date) {dates[i].innerHTML = "29 mins ago"}
else if (currentdate - 1860000 <= date) {dates[i].innerHTML = "30 mins ago"}
else if (currentdate - 1920000 <= date) {dates[i].innerHTML = "31 mins ago"}
else if (currentdate - 1980000 <= date) {dates[i].innerHTML = "32 mins ago"}
else if (currentdate - 2040000 <= date) {dates[i].innerHTML = "33 mins ago"}
else if (currentdate - 2100000 <= date) {dates[i].innerHTML = "34 mins ago"}
else if (currentdate - 2160000 <= date) {dates[i].innerHTML = "35 mins ago"}
else if (currentdate - 2220000 <= date) {dates[i].innerHTML = "36 mins ago"}
else if (currentdate - 2280000 <= date) {dates[i].innerHTML = "37 mins ago"}
else if (currentdate - 2340000 <= date) {dates[i].innerHTML = "38 mins ago"}
else if (currentdate - 2400000 <= date) {dates[i].innerHTML = "39 mins ago"}
else if (currentdate - 2460000 <= date) {dates[i].innerHTML = "40 mins ago"}
else if (currentdate - 2520000 <= date) {dates[i].innerHTML = "41 mins ago"}
else if (currentdate - 2580000 <= date) {dates[i].innerHTML = "42 mins ago"}
else if (currentdate - 2640000 <= date) {dates[i].innerHTML = "43 mins ago"}
else if (currentdate - 2700000 <= date) {dates[i].innerHTML = "44 mins ago"}
else if (currentdate - 2760000 <= date) {dates[i].innerHTML = "45 mins ago"}
else if (currentdate - 2820000 <= date) {dates[i].innerHTML = "46 mins ago"}
else if (currentdate - 2880000 <= date) {dates[i].innerHTML = "47 mins ago"}
else if (currentdate - 2940000 <= date) {dates[i].innerHTML = "48 mins ago"}
else if (currentdate - 3000000 <= date) {dates[i].innerHTML = "49 mins ago"}
else if (currentdate - 3060000 <= date) {dates[i].innerHTML = "50 mins ago"}
else if (currentdate - 3120000 <= date) {dates[i].innerHTML = "51 mins ago"}
else if (currentdate - 3180000 <= date) {dates[i].innerHTML = "52 mins ago"}
else if (currentdate - 3240000 <= date) {dates[i].innerHTML = "53 mins ago"}
else if (currentdate - 3300000 <= date) {dates[i].innerHTML = "54 mins ago"}
else if (currentdate - 3360000 <= date) {dates[i].innerHTML = "55 mins ago"}
else if (currentdate - 3420000 <= date) {dates[i].innerHTML = "56 mins ago"}
else if (currentdate - 3480000 <= date) {dates[i].innerHTML = "57 mins ago"}
else if (currentdate - 3540000 <= date) {dates[i].innerHTML = "58 mins ago"}
else if (currentdate - 3600000 <= date) {dates[i].innerHTML = "59 mins ago"}
else if (currentdate - 7320000 <= date) {dates[i].innerHTML = "1 hr ago"}
else if (currentdate - 10980000 <= date) {dates[i].innerHTML = "2 hrs ago"}
else if (currentdate - 14640000 <= date) {dates[i].innerHTML = "3 hrs ago"}
else if (currentdate - 18300000 <= date) {dates[i].innerHTML = "4 hrs ago"}
else if (currentdate - 21960000 <= date) {dates[i].innerHTML = "5 hrs ago"}
else if (currentdate - 25620000 <= date) {dates[i].innerHTML = "6 hrs ago"}
else if (currentdate - 29280000 <= date) {dates[i].innerHTML = "7 hrs ago"}
else if (currentdate - 32940000 <= date) {dates[i].innerHTML = "8 hrs ago"}
else if (currentdate - 36600000 <= date) {dates[i].innerHTML = "9 hrs ago"}
else if (currentdate - 40260000 <= date) {dates[i].innerHTML = "10 hrs ago"}
else if (currentdate - 43920000 <= date) {dates[i].innerHTML = "11 hrs ago"}
else if (currentdate - 47580000 <= date) {dates[i].innerHTML = "12 hrs ago"}
else if (currentdate - 51240000 <= date) {dates[i].innerHTML = "13 hrs ago"}
else if (currentdate - 54900000 <= date) {dates[i].innerHTML = "14 hrs ago"}
else if (currentdate - 58560000 <= date) {dates[i].innerHTML = "15 hrs ago"}
else if (currentdate - 62220000 <= date) {dates[i].innerHTML = "16 hrs ago"}
else if (currentdate - 65880000 <= date) {dates[i].innerHTML = "17 hrs ago"}
else if (currentdate - 69540000 <= date) {dates[i].innerHTML = "18 hrs ago"}
else if (currentdate - 73200000 <= date) {dates[i].innerHTML = "19 hrs ago"}
else if (currentdate - 76860000 <= date) {dates[i].innerHTML = "20 hrs ago"}
else if (currentdate - 80520000 <= date) {dates[i].innerHTML = "21 hrs ago"}
else if (currentdate - 84180000 <= date) {dates[i].innerHTML = "22 hrs ago"}
else if (currentdate - 87840000 <= date) {dates[i].innerHTML = "23 hrs ago"}
else {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var formattedTime = day + "." + month + "." + year;
dates[i].innerHTML = formattedTime;
}
}
}
}
</script>
</head>
<body onload="startTime();">
<p class="date">1483015785</p>
<p class="date">1483015786</p>
<p class="date">1483015794</p>
<p class="date">1483015984</p>
<p class="date">1483019784</p>
<p class="date">1483095784</p>
<p class="date">1489915784</p>
<p class="date">1483015927</p>
<p class="date">1483015918</p>
<p class="date">1483015917</p>
<p class="date">1483015728</p>
<p class="date">1483013928</p>
<p class="date">1483012928</p>
<p class="date">1483011928</p>
<p class="date">1483010928</p>
<p class="date">1483011428</p>
<p class="date">1483031228</p>
<p class="date">712619600</p>
<p class="date">716165789</p>
<p class="date">451616960</p>
<p class="date">567845845</p>
<p class="date">767856785</p>
<p class="date">867985764</p>
</body>
</html>
I did a little bit more research, as it turns out the problem occurs because mobile Safari automatically turns certain numbers into links!
example:
<p>1484234234234</p>
automatically becomes
<p><a href="tel:1484234234234">1484234234234</a></p>
Thats at least why my code isn't working. Strange is, that not all numbers will be converted, as you can find out with this code:
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var dates = document.getElementsByClassName('date');
for (var i = 0; i < dates.length; i++) {
if (dates[i].innerHTML !== '') {
var date = dates[i].innerHTML;
alert(date);
}}}
</script>
</head>
<body onload="startTime();">
<!--first two will be converted-->
<p class="date">1483015785</p>
<p class="date">1483015786</p>
<!--these two won't-->
<p class="date">712619600</p>
<p class="date">716165789</p>
</body>
</html>
for now I couldn't find a solution for this problem. changing the < p > to something else ( < date > f.e.) doesn't help.
By adding this line to the head of my html the transformation will be prevented:
<meta name="format-detection" content="telephone=no" />
possible problem: that line addresses all numbers in my document
That means if I want to make numbers callable on click for phones I need to highlight them myself.
Also i don't know what else this line effects.