{"id":34156,"date":"2017-11-06T03:01:16","date_gmt":"2017-11-05T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34156"},"modified":"2024-10-22T09:18:34","modified_gmt":"2024-10-21T23:18:34","slug":"html5-time-tag-timeline-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-time-tag-timeline-tutorial\/","title":{"rendered":"HTML5 Time Tag Timeline Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Time Tag Timeline Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/usetime.jpg\" title=\"HTML5 Time Tag Timeline Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML5 Time Tag Timeline Tutorial<\/p><\/div>\n<p>The recent <a title='HTML5 Time Tag Primer Tutorial' href='#html5ttpt'>HTML5 Time Tag Primer Tutorial<\/a> introduced the <a target=\"_blank\" title='HTML5 tag time information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_time.asp' rel=\"noopener\">time<\/a> tag, an HTML5 initiative, into our frame of reference here at this blog.  As soon as date and\/or time come into the picture the &#8220;when&#8221; of life comes into focus, and the use of the fourth dimension.  As such, this HTML <i>time<\/i> tag can be the launching pad for interfacing to other &#8220;when&#8221; based web applications we&#8217;ve developed here.<\/p>\n<p>With this in mind we &#8230;<\/p>\n<ul>\n<li>interface <a target=\"_blank\" title='use_time.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html-GETME\" rel=\"noopener\">use_time.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.htm\" title=\"Click picture\" rel=\"noopener\">live run<\/a> to the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/timeline' title='Google Timeline Charts' rel=\"noopener\">Timeline Chart<\/a> interfacing <a target=\"_blank\" title='timeline_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/TimelineChart\/timeline_chart.php------GETME' rel=\"noopener\">timeline_chart.php<\/a>&#8216;s <a target=\"_blank\" title='timeline_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/TimelineChart\/timeline_chart.php' rel=\"noopener\">live run<\/a><\/li>\n<li>take the opportunity, while the HTML is so separated from the Javascript (and CSS) in this project to move the Javascript to an external Javascript <a target=\"_blank\" title='use_time.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.js_GETME\" rel=\"noopener\">use_time.js<\/a> (causing the HTML and CSS to shrink in <a target=\"_blank\" title='use_time.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html-GETME\" rel=\"noopener\">this way<\/a>)<\/li>\n<\/ul>\n<p>With changes like this it can be important to leave the door open for people to not access this new Timeline (in an HTML iframe element), in terms of backward compatibility &#8220;friendliness&#8221;, and we allow for that via either\/both <b>bold<\/b> (part of) ways below &#8230;<\/p>\n<ul>\n<li>HTML and CSS parent <a target=\"_blank\" title='use_time.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html-GETME\" rel=\"noopener\">use_time.htm<\/a> calling supervised Javascript <a target=\"_blank\" title='use_time.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.js_GETME\" rel=\"noopener\">use_time.js<\/a> via &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript' src='use_time.js<b>?notimeline=y<\/b>'&gt;&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; and\/or &#8230;\n<\/li>\n<li>web browser address bar URL such as &#8230;<br \/>\n<code><br \/>\n<a target=\"_blank\" title='No timeline' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.htm?notimeline=y' rel=\"noopener\">HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.htm<b>?notimeline=y<\/b><\/a><br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>But we are of the view that interfacing to other web applications with synergies is generally a good thing to do, and can inspire other ideas to develop regarding improvements to functionality.<\/p>\n<hr>\n<p id='html5ttpt'>Previous relevant <a target=\"_blank\" title='HTML5 Time Tag Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-time-tag-primer-tutorial\/' rel=\"noopener\">HTML5 Time Tag Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Time Tag Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.jpg\" title=\"HTML5 Time Tag Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML5 Time Tag Primer Tutorial<\/p><\/div>\n<p>You might be forgiven reading this <a target=\"_blank\" title='HTML5 tag time information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_time.asp' rel=\"noopener\">webpage<\/a> about the <i>time<\/i> tag introduced with HTML5 that it is not of much use, because it doesn&#8217;t show any distinguishing feature yet, in any of the web browsers.<\/p>\n<p>But you can tailor the use of it yourself, and to show this we took the HTML lacking a &lt;head&gt;&lt;\/head&gt; section and not change this HTML at all, but add our own CSS and Javascript (DOM)  &lt;head&gt;&lt;\/head&gt; section to embellish its functionality considerably.<\/p>\n<p>We use a combination of &#8230;<\/p>\n<ul>\n<li>CSS ::after { content: &#8216;blah blah&#8217;; } <a target=\"_blank\" title='CSS pseudo elements' href='https:\/\/www.w3schools.com\/css\/css_pseudo_elements.asp' rel=\"noopener\">pseudo-element<\/a><\/li>\n<li>CSS :hover selector<\/li>\n<li>window.onload = init;   \/\/ Javascript onload functionality<\/li>\n<li>document.body.innerHTML+=styles; \/\/ Javascript where <i>styles<\/i> var<font size=1>iable<\/font> contains dynamically constructed &lt;body&gt;&lt;\/body&gt; section CSS &lt;style&gt;&lt;\/style&gt; (<b>an important thing to remember you can do<\/b> (at a document.body <i>onload<\/i> event Javascript function, for example)) &#8230; and for this we used &#8230;<\/li>\n<li>dynamically <i>class<\/i>ed HTML <i>time<\/i> elements and moving on the <i>onclick<\/i> event (for mobile device use) as per &#8230;<br \/>\n<code><br \/>\n      times[<a target=\"_blank\" title='iw findings' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html' rel=\"noopener\">iw<\/a>].onclick = function() { };<br \/>\n      times[iw].className+=' atime' + iw; \/\/ the <i>times<\/i> array which is derived via<br \/>\n<\/code>\n<\/li>\n<li>\n<code><br \/>\n    var times=document.getElementsByTagName('time');<br \/>\n<\/code>\n<\/li>\n<li>to be able to dynamically populate that <i>styles<\/i> var<font size=1>iable<\/font> as per codelines like &#8230;<br \/>\n<code><br \/>\n        styles=styles.replace(\"&lt;\/style&gt;\",\" .atime\" + <a target=\"_blank\" title='iw findings' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html' rel=\"noopener\">iw<\/a> + \":hover::after { content: ' is \" + sin(yyyy2,4) + \"\/\" + sin(mm2,2) + \"\/\" + sin(dd2,2) + \" \" + sin(hh2,2) + \":\" + sin(minm2,2) + \":\" + sin(ss2,2) + \"'; } &lt;\/style&gt;\");<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Here is a link to some downloadable HTML programming source code which you may want to rename to <a target=\"_blank\" title='use_time.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html_GETME\" rel=\"noopener\">use_time.html<\/a> for this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>If you were an &#8220;early bird&#8221; reading the early editions of this blog post, sorry, but you will have missed this, perhaps, and then again, maybe I am wasting my time pointing this out, but, since those early editions we&#8217;ve added a couple of <a target=\"_blank\" title='iw findings' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/find_and_highlight.html?find=iw&#038;in=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/use_time.html' rel=\"noopener\">iw<\/a> links that harness some new functionality we have in our &#8220;highlighting&#8221; armoury (shall we say) making use of the new HTML5 <i>mark<\/i> tag, which we&#8217;ll be detailing more about in tomorrow&#8217;s blog posting.  Clicking these links effectively does a web browser &#8220;View Page Source&#8221; type of functionality, but also highlights and positions (to first find), in situations like the &#8220;iw&#8221; one, where it is just a counter, but is unexplained, so we leave it up to curious users to find out something about its context.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34116' onclick='var dv=document.getElementById(\"d34116\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html5\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34116' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34156' onclick='var dv=document.getElementById(\"d34156\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34156' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent HTML5 Time Tag Primer Tutorial introduced the time tag, an HTML5 initiative, into our frame of reference here at this blog. As soon as date and\/or time come into the picture the &#8220;when&#8221; of life comes into focus, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-time-tag-timeline-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[155,210,281,354,409,513,518,2212,576,578,587,1577,652,2165,997,2128,1200,1209,1729,1319],"class_list":["post-34156","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-body","tag-class","tag-css","tag-dom","tag-external-javascript","tag-google","tag-google-chart","tag-head","tag-html","tag-html5","tag-iframe","tag-interface","tag-javascript","tag-mark","tag-programming","tag-pseudo-element","tag-stop-press","tag-style","tag-timeline","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34156"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=34156"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34156\/revisions"}],"predecessor-version":[{"id":65210,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34156\/revisions\/65210"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}