{"id":42153,"date":"2018-12-05T03:01:49","date_gmt":"2018-12-04T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=42153"},"modified":"2018-12-05T05:00:05","modified_gmt":"2018-12-04T19:00:05","slug":"html5-meter-and-progress-element-onclick-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-meter-and-progress-element-onclick-tutorial\/","title":{"rendered":"HTML5 Meter and Progress Element Onclick Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML5 Meter and Progress Element Onclick Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter_progress.jpg\" title=\"HTML5 Meter and Progress Element Onclick Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Meter and Progress Element Onclick Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='YouTube Embedded Iframe API Playlist Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-playlist-tutorial\/'>YouTube Embedded Iframe API Playlist Tutorial<\/a> got us hankering for either\/both of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML meter element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'>meter<\/a><\/li>\n<li><a target=_blank title='HTML progress element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_progress.asp'>progress<\/a><\/li>\n<\/ul>\n<p> &#8230; be more proactive by nature, in terms of the fact that neither, in &#8220;native thinking terms&#8221; are changed in look (and value) via a click or touch event.  But after a mull, we wanted to use one of our favourite Javascript functions, the &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; and start with a proof of concept integration into the previous <a title='HTML5 Meter Element Primer Tutorial' href='#html5mept'>HTML5 Meter Element Primer Tutorial<\/a>&#8216;s web application, to respond to either or both of the meter and progress elements representing a fraction, in broad brush terms &#8230;<\/p>\n<p><code><br \/>\nNumerator (of fraction in lowest common denominator form) = ([click\/touch_X] - [getBoundingClientRect_Left])<br \/>\n----------------------------------------------------------------<br \/>\nDenominator (of fraction in lowest common denominator form) = [getBoundingClientRect_Width]<br \/>\n<\/code><\/p>\n<p>To do this &#8230;<\/p>\n<ol>\n<li><b>Changed<\/b> HTML &#8230;<br \/>\n<code><br \/>\n&lt;input type=\"button\" value=\"Show Fraction\" id=\"show\" onclick=\"<strike>document.getElementById('myfraction').value=eval(document.getElementById('numerator').value \/ document.getElementById('denominator').value);<\/strike> <b>valchange();<\/b>\"&gt;&lt;\/input&gt;&nbsp;&nbsp;<b>&lt;div id='mp' style='display:inline-block;'&gt;<\/b>&lt;meter <b>title=\" ... or you can click here\" onclick=\"myownfraction(event);\"<\/b> id='myfraction' value=\"0\"&gt;&lt;\/meter&gt;<b>&lt;\/div&gt;<\/b><br \/>\n<\/code>\n<\/li>\n<li>Added Javascript &#8230;<br \/>\n<code><br \/>\n var mpis='progress';<br \/>\n<br \/>\nfunction myownfraction(event) {<br \/>\n    var x=0, y=0;<br \/>\n    if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX;<br \/>\n       y = event.clientY;<br \/>\n    } else {<br \/>\n       x = event.pageX;<br \/>\n       y = event.pageY;<br \/>\n    }<br \/>\n    var rect = event.target.getBoundingClientRect(), varn=0, vard=0, iv=0;<br \/>\n    \/\/alert('x=' + x + ' and left=' +  Math.round(rect.left));<br \/>\n    if (eval('' + x) &gt;= eval('' + rect.left) && eval('' + x) &lt;= eval('' + eval('' + Math.round(rect.left)) + eval('' +  Math.round(rect.width)))) {<br \/>\n    varn = eval('' + eval('' + x) - eval('' +  Math.round(rect.left)));<br \/>\n    vard = eval('' +  Math.round(rect.width));<br \/>\n    for (iv=Math.min(Math.abs(varn),Math.abs(vard)); iv&gt;=2; iv--) {<br \/>\n      if (eval(Math.abs(varn) % iv) == 0 && eval(Math.abs(vard) % iv) == 0) {<br \/>\n        varn \/= iv;<br \/>\n        vard \/= iv;<br \/>\n      }<br \/>\n    }<br \/>\n    document.getElementById('numerator').value = '' + varn;<br \/>\n    document.getElementById('denominator').value = '' + vard;<br \/>\n    valchange();<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\n function valchange() {<br \/>\n  document.getElementById('myfraction').value=eval(document.getElementById('numerator').value \/ document.getElementById('denominator').value);<br \/>\n  if (document.getElementById('my_fraction')) {<br \/>\n   document.getElementById('my_fraction').value=eval(document.getElementById('numerator').value \/ document.getElementById('denominator').value);<br \/>\n  }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>So, again, take a look at the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter.html-GETME\" title=\"meter.html\">changed HTML<\/a> code in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter.html-GETME\" title=\"meter.html\">meter.html<\/a>, or a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter.html\" title=\"live run\">live run<\/a>, for your perusal.  Again, we hope it helps with an HTML project you are on now, or mulling about now.<\/p>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>Applying similar thinking to <a target=_blank title='YouTube Embedded Iframe API Playlist Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-playlist-tutorial\/'>YouTube Embedded Iframe API Playlist Tutorial<\/a> we came up with the new Javascript code (to suit <b>the changed Javascript DOM<\/b>          document.getElementById(&#8216;tdright&#8217;).innerHTML+='&lt;details id=dtls&#8217; + ij + &#8216;&gt;&lt;summary id=sums&#8217; + ij + &#8216;&gt;Start at (seconds): &lt;span id=star&#8217; + ij + &#8216;&gt;0&lt;\/span&gt; &lt;progress <b>onclick=myownfraction(event);<\/b> title=&#8221;&#8221; id=prog&#8217; + ij + &#8216; value=0 min=0 max=0&gt;&lt;\/progress&gt;&lt;\/summary&gt;&lt;iframe width=&#8221;640&#8243; height=&#8221;560&#8243; id=ifra&#8217; + ij + &#8216; src=&#8221;&#8216; + document.URL.split(&#8216;#&#8217;)[0].split(&#8216;?&#8217;)[0] + &#8216;?ij=&#8217; + ij + &#8216;&#038;eurl=&#8217; + pla[ij] + &#8216;&#8221; title=&#8221;&#8221;&gt;&lt;\/iframe&gt;&lt;\/details&gt;&lt;hr&gt;&#8217;;) as per  &#8230;<\/p>\n<p><code><br \/>\nfunction myownfraction(event) {<br \/>\n    var x=0, y=0;<br \/>\n    if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX;<br \/>\n       y = event.clientY;<br \/>\n    } else {<br \/>\n       x = event.pageX;<br \/>\n       y = event.pageY;<br \/>\n    }<br \/>\n    var rect = event.target.getBoundingClientRect(), varn=0, vard=0, iv=0;<br \/>\n    if (eval('' + x) &gt;= eval('' + rect.left) && eval('' + x) &lt;= eval('' + eval('' + Math.round(rect.left)) + eval('' +  Math.round(rect.width)))) {<br \/>\n    varn = eval('' + eval('' + x) - eval('' +  Math.round(rect.left)));<br \/>\n    vard = eval('' +  Math.round(rect.width));<br \/>\n    if (eval('' + vard) &gt; 0) {<br \/>\n    for (iv=Math.min(Math.abs(varn),Math.abs(vard)); iv&gt;=2; iv--) {<br \/>\n      if (eval(Math.abs(varn) % iv) == 0 && eval(Math.abs(vard) % iv) == 0) {<br \/>\n        varn \/= iv;<br \/>\n        vard \/= iv;<br \/>\n      }<br \/>\n    }<br \/>\n    document.getElementById(event.target.id.replace('prog','sele')).value='' + Math.round(eval('' + event.target.max) * (eval('' + varn) \/ eval('' + vard)));<br \/>\n    event.target.value='' + Math.round(eval('' + event.target.max) * (eval('' + varn) \/ eval('' + vard)));<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and we decided to fix up the ol&#8217; &#8220;no ondblclick mobile platform event, so write code for two slow clicks&#8221; trick &#8230; <a target=_blank title='?' href='HTTP:\/\/www.wouldyoubelieve.com\/phrases.html'>second time I&#8217;ve fallen for it this month<\/a> &#8230; as per Javascript (to suit <b>the changed HTML<\/b> &lt;input type=text title=&#8217;Double click for suggestion&#8217; <b>onclick=&#8217;onclicktwo(this);&#8217;<\/b> ondblclick=&#8217;<b>clicktwo=0;<\/b> this.value=this.placeholder;&#8217; style=width:30%; onblur=goplay(this.value); id=isuffix placeholder=&#8217;M7lc1UVf-VE&#8217;&gt;&lt;\/input&gt;) &#8230;<\/p>\n<p><code><br \/>\nvar clicktwo=0;<br \/>\nfunction poisout() {<br \/>\n  clicktwo=0;<br \/>\n}<br \/>\n<br \/>\nfunction onclicktwo(pois) {<br \/>\n  clicktwo++;<br \/>\n  if (clicktwo &gt;= 2) {<br \/>\n    clicktwo=0;<br \/>\n    pois.value=pois.placeholder;<br \/>\n  } else {<br \/>\n    setTimeout(poisout, 2000);<br \/>\n  }<br \/>\n}<br \/>\n<\/code> <\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.html---GETME\" title=\"youtube_list.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.html---GETME\" title=\"youtube_list.htm\">youtube_list.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.htm\" title=\"Click list\">live run<\/a>.<\/p>\n<hr>\n<p id='html5mept'>Previous relevant <a target=_blank title='HTML5 Meter Element Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html5-meter-element-primer-tutorial\/'>HTML5 Meter Element 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\/meter.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML5 Meter Element Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter.jpg\" title=\"HTML5 Meter Element Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Meter Element Primer Tutorial<\/p><\/div>\n<p>HTML5 brought with it many great features to front-end work on the internet in HTML, and today we talk about one of the newly introduced, and very useful, elements called <a target=_blank title='HTML5 meter tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'><i>&#8220;&lt;meter&gt;&#8221;<\/i><\/a>.<\/p>\n<p>At its core the <i>&#8220;&lt;meter&gt;&#8221;<\/i> element represents a &#8220;fraction of one&#8221; or perhaps you can think this as a &#8220;percentage of one hundred&#8221;, and, as you&#8217;d guess, a generic &#8220;x<sup>th<\/sup> of y for the fraction x\/y&#8221; idea &#8230; where &#8220;y&#8221; could be your &#8220;max&#8221; parameter, and perhaps your &#8220;min&#8221; parameter is zero.<\/p>\n<p>This element is useful to represent a numerical concept graphically (like a ratio), something we do today with &#8230;<\/p>\n<ul>\n<li>simulation of a stopwatch &#8230; with its seconds, minutes, hours, days, years elapsed<\/li>\n<li>a fraction as (numerator) x \/ y (denominator)<\/li>\n<\/ul>\n<p>Tomorrow we&#8217;ll show you a very commonplace usage for <i>&#8220;&lt;meter&gt;&#8221;<\/i> as a &#8220;progress bar&#8221; which you see so much of on the internet, when you are waiting for something.<\/p>\n<p>So take a look at the HTML code in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter.html_GETME\" title=\"meter.html\">meter.html<\/a>, or a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/meter.html\" title=\"live run\">live run<\/a>, for your perusal.  Hope it helps with an HTML project you are on now.<\/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='#14561' onclick='var dv=document.getElementById(\"d14561\"); 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='d14561' 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='#42153' onclick='var dv=document.getElementById(\"d42153\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/getBoundingClientRect\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42153' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s YouTube Embedded Iframe API Playlist Tutorial got us hankering for either\/both of &#8230; meter progress &#8230; be more proactive by nature, in terms of the fact that neither, in &#8220;native thinking terms&#8221; are changed in look (and value) via &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-meter-and-progress-element-onclick-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,14,37],"tags":[211,354,400,2208,576,578,652,1517,861,2753,997,1915,1200,1294,1319],"class_list":["post-42153","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-click","tag-dom","tag-event","tag-getboundingclientrect","tag-html","tag-html5","tag-javascript","tag-meter","tag-onclick","tag-proactive","tag-programming","tag-progress","tag-stop-press","tag-touch","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42153"}],"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=42153"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42153\/revisions"}],"predecessor-version":[{"id":42172,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42153\/revisions\/42172"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=42153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=42153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=42153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}