{"id":51390,"date":"2021-01-11T03:01:05","date_gmt":"2021-01-10T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51390"},"modified":"2021-01-11T07:59:12","modified_gmt":"2021-01-10T21:59:12","slug":"multipurpose-buttons-content-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-content-tutorial\/","title":{"rendered":"Multipurpose Buttons Content Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multipurpose Buttons Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons_your_content.jpg\" title=\"Multipurpose Buttons Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multipurpose Buttons Content Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s proof of concept &#8220;Multipurpose Buttons&#8221; web application of <a title='Multipurpose Buttons Primer Tutorial' href='#mbpt'>Multipurpose Buttons Primer Tutorial<\/a> was pretty typical of many &#8220;proof of concept&#8221;s out there, not rocking the boat with the messy woooooorrrrllllllddd of what a user might enter as the &#8220;content&#8221; of those buttons.  But that &#8220;proof of concept&#8221; idea is important to establish &#8230;<\/p>\n<ul>\n<li>what is crucial &#8230; as well as &#8230;<\/li>\n<li>what is important<\/li>\n<li>what needs attention when genericizing (which is today&#8217;s work) &#8230; and up above all this &#8230;<\/li>\n<li>whether the whole concept is feasible for controlled data content<\/li>\n<li>whether the whole concept is feasible for user entered data content<\/li>\n<\/ul>\n<p> &#8230; and happily, though there are some cross-browser tweaks <font size=1>(always a bit of a genericization &#8220;sour puss&#8221; for us)<\/font>, we think that last option above is indeed possible.  The whole exercise has certainly borne out how much more powerful is the HTML &#8220;button&#8221; element for this multipurpose thinking, than is the &#8220;input type=button&#8221; (older) HTML element type, that &#8220;button&#8221; element now truly a &#8220;container&#8221; type of element <font size=1>(for us, the HTML elements where the property <i>innerHTML<\/i> has a proper meaning)<\/font>.<\/p>\n<p>Proof of this is that this genericization drive today hardly concerned itself with any HTML &#8220;button&#8221; element concerns, rather it was a constant battle to make the HTML &#8220;input type=button&#8221; &#8220;hang in there&#8221;.<\/p>\n<p>Okay then, if we are allowing a &#8220;vertical dimension&#8221; to our contents and we offer you the choice of &#8230;<\/p>\n<ul>\n<li>textarea &#8230; versus &#8230;<\/li>\n<li>div contenteditable=true<\/li>\n<\/ul>\n<p> &#8230; as your user interaction HTML element of choice, which do you think is better?  Well, our choice was a no brainer, as we had decided the reasoning would be &#8230;<\/p>\n<ul>\n<li>encase &#8230;<\/li>\n<li>whatever element above is used &#8230;<\/li>\n<li>within an HTML form action=[here&#8217;sLookingAtYouKid] method=GET navigational arrangement<\/li>\n<\/ul>\n<p> &#8230; as our means of passing through user interaction findings.  Well, this rules out &#8220;div contenteditable=true&#8221; as the &#8220;name&#8221; property of HTML &#8220;form&#8221; elements map from that element&#8217;s &#8220;value&#8221; property, something a &#8220;div contenteditable=true&#8221; lacks but a &#8220;textarea&#8221; element excels at <font size=1>(as well as its &#8220;innerHTML&#8221; initializing of data (ie. value) talents, as well)<\/font>.<\/p>\n<p>This genericization drive also taught us that even if a monospaced font such as Courier New is enforced for the HTML &#8220;input type=button&#8221; there can be different &#8220;display looks&#8221; between data containing &#8230;<\/p>\n<ul>\n<li>space (&#8221; &#8220;) character (as whitespace) &#8230; versus &#8230;<\/li>\n<li>non-breaking space (&#8220;&amp;nbsp;&#8221;) character<\/li>\n<\/ul>\n<p> &#8230; the latter crucial for us to even up record lengths of the underlying &#8220;display data&#8221; used to make the &#8220;input type=button&#8221; elements &#8220;look&#8221; as the user would have intended, meaning that the non-breaking whitespace character (as one character) above is used for &#8220;display data&#8221; that is a &#8220;square block of text&#8221; so that &#8220;display:block&#8221; can work with CSS &#8220;font-size&#8221; and &#8220;width&#8221; and &#8220;height&#8221; to facilitate this HTML &#8220;input type=button&#8221; display look.<\/p>\n<p>As you&#8217;d expect, coming back (ie. callback) via &#8220;action=[here&#8217;sLookingAtYouKid]&#8221; form navigation above means we need a document.body &#8220;onload&#8221; event function as way below to set up display settings and the creation of that &#8220;onclick&#8221; logic eval<font size=1>ed<\/font> &#8220;if logic&#8221; setting the global var<\/font size=1>iable<\/font> &#8220;gval&#8221; &#8230;<\/p>\n<p><code><br \/>\n       if (cnum != (\"1 2 3 \" + String.fromCharCode(10) + \"4 5 6 \" + String.fromCharCode(10) + \"7 8 9 \")) {  \/\/ true user interaction data here<br \/>\n         gval='';<br \/>\n         eval(ifstr);   \/\/ for Horizontal and Vertical input type=button ... just Horizontal uses \"ifstrone\" variable instead<br \/>\n         if (gval != '') { setTimeout(agval, 1000); }<br \/>\n       }<br \/>\n<\/code><\/p>\n<p> &#8230; is set up at global initializations followed by the &#8220;function onl&#8221; document.body &#8220;onload&#8221; event logic below &#8230;<\/p>\n<p><code><br \/>\n var gval='';<br \/>\n var cnum=location.search.split('content=')[1] ? decodeURIComponent(location.search.split('content=')[1].split('&')[0]).replace(\/\\+\/g,' ') : \"1 2 3 \" + String.fromCharCode(10) + \"4 5 6 \" + String.fromCharCode(10) + \"7 8 9 \";<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(13) + String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(13) + String.fromCharCode(10), ' [13][10]');<br \/>\n }<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(10) + String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(10) + String.fromCharCode(13), ' [10][13]');<br \/>\n }<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(10), ' [10]');<br \/>\n }<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(13), ' [13]');<br \/>\n }<br \/>\n<br \/> <br \/>\n while (cnum.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(13) + String.fromCharCode(10), ' [13][10]');<br \/>\n }<br \/>\n while (cnum.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(10) + String.fromCharCode(13), ' [10][13]');<br \/>\n }<br \/>\n while (cnum.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(10), ' [10]');<br \/>\n }<br \/>\n while (cnum.indexOf(String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(13), ' [13]');<br \/>\n }<br \/>\n cnum=cnum.replace(\/\\[13\\]\\[10\\]\/g, String.fromCharCode(13) + String.fromCharCode(10));<br \/>\n cnum=cnum.replace(\/\\[10\\]\\[13\\]\/g, String.fromCharCode(10) + String.fromCharCode(13));<br \/>\n cnum=cnum.replace(\/\\[13\\]\/g, String.fromCharCode(13));<br \/>\n cnum=cnum.replace(\/\\[10\\]\/g, String.fromCharCode(10));<br \/>\n<br \/>\n var origcnumx=cnum; \/\/.trim();<br \/>\n var cnumx=cnum; \/\/.trim();<br \/>\n<br \/>\n function onl() {<br \/>\n       var ih='', jh=0, kh=0, lh=0, onelh=0, zero=0, eight=0;<br \/>\n       maxlh=0;<br \/>\n       if (cnum != (\"1 2 3 \" + String.fromCharCode(10) + \"4 5 6 \" + String.fromCharCode(10) + \"7 8 9 \")) {  \/\/ true user interaction data here<br \/>\n         var ccnums=[];<br \/>\n         if (origcnumx.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(13) + String.fromCharCode(10));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         } else if (origcnumx.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(10) + String.fromCharCode(13));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         } else if (origcnumx.indexOf(String.fromCharCode(13)) != -1) {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(13));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         } else {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(10));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         }<br \/>\n         \/\/alert(ccnums.length);<br \/>\n         for (jh=1; jh&lt;=ccnums.length;  jh++) {<br \/>\n           if (eval('' + ccnums[eval(-1 + jh)].length) &gt; eval('' + maxlh)) { maxlh=ccnums[eval(-1 + jh)].length; }<br \/>\n         }<br \/>\n         for (jh=1; jh&lt;=cnumx.length;  jh++) {<br \/>\n           ih+=\"&lt;span class=bxandy onclick='gval=this.innerHTML;'&gt;\" + cnumx.substring(eval(-1 + jh)).substring(0,1) + \"&lt;\/span&gt;\";<br \/>\n           \/\/if (lh == 0) { alert(cnumx.substring(eval(-1 + jh)).substring(0,1));  }<br \/>\n              if ((cnumx + ' ').substring(eval(0 + jh)).substring(0,1)) {<br \/>\n                zero=eight;<br \/>\n                if (eight &gt; 0) { eight--; }<br \/>\n              } else {<br \/>\n                zero=0;<br \/>\n              }<br \/>\n              if (ifstrone.indexOf('if ') == -1) {<br \/>\n               ifstrone+=\" if (eval(propx) &lt;= eval(\" + eval(1 + onelh) + \".\" + zero + \" \/ \" + cnumx.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             } else {<br \/>\n               ifstrone+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + onelh) + \".\" + zero + \" \/ \" + cnumx.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             }<br \/>\n          if (ccnums.length == 1) {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             }<br \/>\n           } else {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             }<br \/>\n           }<br \/>\n           lh++;<br \/>\n           onelh++;<br \/>\n           if (lh == ccnums[kh].length && kh &lt; ccnums.length) {<br \/>\n             if (lh &lt; maxlh) {<br \/>\n               while (lh &lt; maxlh) {<br \/>\n                ih+=\"&lt;span class=bxandy onclick='gval=this.innerHTML;'&gt; &lt;\/span&gt;\";<br \/>\n           if (ccnums.length == 1) {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \")) { gval=' '; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \")) { gval=' '; } \";<br \/>\n             }<br \/>\n           } else {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval=' '; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval=' '; } \";<br \/>\n             }<br \/>\n           }<br \/>\n                lh++;<br \/>\n               }<br \/>\n             }<br \/>\n             ih+=\"&lt;br&gt;\";<br \/>\n             kh++;<br \/>\n             lh=0;<br \/>\n           }<br \/>\n         }<br \/>\n         if (maxlh == 0) { maxlh=lh; }<br \/>\n         \/\/alert(ifstrone);<br \/>\n         document.getElementById('ix').style.marginLeft='1px';<br \/>\n         document.getElementById('ix').style.marginRight='3px';<br \/>\n         if (\/chrome\/i.test( navigator.userAgent )) {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 8.0) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + maxlh) * 7.5) + 'px';<br \/>\n         } else {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 6.75) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + maxlh) * 8.0) + 'px';<br \/>\n         }<br \/>\n         document.getElementById('ixandy').style.height='' + Math.floor(eval(eval('' + ccnums.length) * 14) + 4) + 'px';<br \/>\n         document.getElementById('bxandy').innerHTML=ih.replace(\/\\&gt;\\ \\&lt;\\\/span\\&gt;\/g, '&gt;&amp;nbsp;&lt;\/span&gt;');<br \/>\n         document.getElementById('bx').innerHTML=ih.replace(\/\\&lt;br\\&gt;\/g,'');<br \/>\n         document.getElementById('ix').title='Please click a character.';<br \/>\n         document.getElementById('ixandy').title='Please click a character.';<br \/>\n      } else {<br \/>\n         document.getElementById('ix').style.marginLeft='1px';<br \/>\n         document.getElementById('ix').style.marginRight='3px';<br \/>\n         if (\/chrome\/i.test( navigator.userAgent )) {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 8.0) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + 6) * 7.5) + 'px';<br \/>\n         } else {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 6.75) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + 6) * 8.0) + 'px';<br \/>\n         }<br \/>\n         document.getElementById('ixandy').style.height='' + Math.floor(eval(eval('' + '3') * 14) + 4) + 'px';<br \/>\n      }<br \/>\n }<br \/>\n<\/code><\/p>\n<p>So, feel free to &#8220;use&#8221; the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html--GETME\" title=\"multipurpose_buttons.html\">second draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html--GETME\" title=\"multipurpose_buttons.html\">multipurpose_buttons.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\" title=\"Click picture\">live run<\/a> link to see what we mean.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-content-tutorial\/'>Multipurpose Buttons Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mbpt'>Previous relevant <a target=_blank title='Multipurpose Buttons Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-primer-tutorial\/'>Multipurpose Buttons 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\/multipurpose_buttons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multipurpose Buttons Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.jpg\" title=\"Multipurpose Buttons Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multipurpose Buttons Primer Tutorial<\/p><\/div>\n<p>At this blog we go <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=hard+quiz&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=hard+quiz&#038;aqs=chrome..69i57j69i60j69i65l3j69i61j69i60l2.1883j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>hard<\/a> at spruiking the qualities of HTML dropdown (ie. select) elements to do with &#8230;<\/p>\n<ul>\n<li>the display brevity &#8230; as well as &#8230;<\/li>\n<li>richness of content possibilities<\/li>\n<\/ul>\n<p> &#8230; they can infer upon a webpage.  At the expense of &#8220;the display brevity&#8221; we are keen to use a dropdown attribute &#8220;size&#8221; set so as to display all the content on the screen where &#8230;<\/p>\n<ul>\n<li>it can sensibly fit on the screen &#8230; and &#8230;<\/li>\n<li>it does not matter that mobile platforms do not recognize the &#8220;size&#8221; attribute &#8220;vertical expansion&#8221; of a dropdown that takes place on non-mobile platforms<\/li>\n<\/ul>\n<p>Today, though, we&#8217;re here to show you that, with a bit of Javascript event logic, a &#8230;<\/p>\n<ul>\n<li>button element &#8230; even better than an &#8230;<\/li>\n<li>input type=button element<\/li>\n<\/ul>\n<p> &#8230; can go some of the way to mimicking those qualities we like so much above, doing even better than the x (ie. horizontal) dimension limit of one that a dropdown has, to be able to fit more data content in horizontally, as a display mechanism you might say has &#8220;the display brevity&#8221; combined with content complexity you are after.<\/p>\n<p>We wrote a proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html-GETME\" title=\"multipurpose_buttons.html\">multipurpose_buttons.html<\/a>, featuring the one Javascript &#8220;onclick&#8221; logic function as per &#8230;<\/p>\n<p><code><br \/>\n var x=0, y=0, lastx=0,lasty=0;<br \/>\n var propx=0.0, propy=0.0;<br \/>\n<br \/>\n function iclicked(event) {<br \/>\n   var rectis=null, isok=true;;<br \/>\n   if (('' + event.target.id) == 'bxandy') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.className) == 'bxandy') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.id) == 'bx') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.className) == 'bx') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.id) == 'ixandy') {<br \/>\n       rectis=event.target.getBoundingClientRect();<br \/>\n       if (event.touches) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24567441\/how-do-i-detect-two-fingers-at-touchstart-in-javascript<br \/>\n         if (event.touches.length &gt; 1) {  isok=false; }<br \/>\n       }<br \/>\n       if (isok) {<br \/>\n       if (event.touches) {<br \/>\n         var touches1 = event.changedTouches;<br \/>\n         var first1 = touches1[0];<br \/>\n         x = first1.clientX;<br \/>\n         y = first1.clientY;<br \/>\n       } else if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX; \/\/ - elemLeft;<br \/>\n       y = event.clientY; \/\/ - elemTop;<br \/>\n       } else {<br \/>\n       x = event.pageX; \/\/ - elemLeft;<br \/>\n       y = event.pageY; \/\/ - elemTop;<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       propx=eval(eval(x - rectis.x) \/ rectis.width);<br \/>\n       propy=eval(eval(y - rectis.y) \/ rectis.height);<br \/>\n       if (eval(propx) &lt;= 0.333 && eval(propy) &lt;= 0.333) {<br \/>\n         gval='1';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &gt;= 0.666 && eval(propy) &lt;= 0.333) {<br \/>\n         gval='3';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propy) &lt;= 0.333) {<br \/>\n         gval='2';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.333 && eval(propy) &lt;= 0.666) {<br \/>\n         gval='4';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &gt;= 0.666 && eval(propy) &lt;= 0.666) {<br \/>\n         gval='6';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propy) &lt;= 0.666) {<br \/>\n         gval='5';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.333) {<br \/>\n         gval='7';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &gt;= 0.666) {<br \/>\n         gval='9';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else {<br \/>\n         gval='8';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       }<br \/>\n       }<br \/>\n   } else if (('' + event.target.id) == 'ix') {<br \/>\n       rectis=event.target.<a target=_blank title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect()<\/a>;<br \/>\n       if (event.touches) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24567441\/how-do-i-detect-two-fingers-at-touchstart-in-javascript<br \/>\n         if (event.touches.length &gt; 1) {  isok=false; }<br \/>\n       }<br \/>\n       if (isok) {<br \/>\n       if (event.touches) {<br \/>\n         var touches1 = event.changedTouches;<br \/>\n         var first1 = touches1[0];<br \/>\n         x = first1.clientX;<br \/>\n         y = first1.clientY;<br \/>\n       } else if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX; \/\/ - elemLeft;<br \/>\n       y = event.clientY; \/\/ - elemTop;<br \/>\n       } else {<br \/>\n       x = event.pageX; \/\/ - elemLeft;<br \/>\n       y = event.pageY; \/\/ - elemTop;<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       propx=eval(eval(x - rectis.x) \/ rectis.width);<br \/>\n       propy=eval(eval(y - rectis.y) \/ rectis.height);<br \/>\n       if (eval(propx) &lt;= 0.111) {<br \/>\n         gval='1';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.222) {<br \/>\n         gval='2';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.333) {<br \/>\n         gval='3';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.444) {<br \/>\n         gval='4';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.555) {<br \/>\n         gval='5';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.666) {<br \/>\n         gval='6';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.777) {<br \/>\n         gval='7';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.888) {<br \/>\n         gval='8';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else {<br \/>\n         gval='9';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       }<br \/>\n       }<br \/>\n   }<br \/>\n }<br \/>\n<br \/>\n function agval() {<br \/>\n   if (gval != '') {<br \/>\n      alert('You clicked ' + gval);<br \/>\n      gval='';<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\" title=\"Click picture\">live run<\/a> linked web application you can try for yourself regarding this, or see, in action, below &#8230;<\/p>\n<p><iframe style='width:90%;height:670px;' title='Proof of concept' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html'><\/iframe><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Regarding the input type=button &#8220;Horizontal and Vertical Dimensions&#8221; element &#8220;look&#8221; above we needed help from the internet, thanks, to stop some web browsers such as Firefox, Chrome and Opera not &#8220;fattening out&#8221; the element height so as to show three lines of numbers, as per the CSS (thanks to <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/10743763\/word-wrap-break-word-does-not-work-in-this-example'>html &#8211; word-wrap break-word does not work in this example &#8211; Stack Overflow<\/a> and <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/13048499\/wrapping-an-html-input-buttons-text-value-over-multiple-lines'>Wrapping an HTML input button&#39;s text value over multiple lines &#8211; Stack Overflow<\/a> and <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/5419086\/button-height-on-chrome'>html &#8211; Button height on Chrome &#8211; Stack Overflow<\/a>) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n #ixandy {<br \/>\n   font-size: 12px;<br \/>\n   width: 36px;<br \/>\n   height: 44px;<br \/>\n<br \/>\noverflow-wrap: break-word;<br \/>\nword-wrap: break-word;<br \/>\n<br \/>\n-ms-word-break: break-all;<br \/>\n\/* This is the dangerous one in WebKit, as it breaks things wherever *\/<br \/>\nword-break: break-all;<br \/>\n\/* Instead use this non-standard one: *\/<br \/>\nword-break: break-word;<br \/>\n<br \/>\n\/* Adds a hyphen where the word breaks, if supported (No Blink) *\/<br \/>\n-ms-hyphens: auto;<br \/>\n-moz-hyphens: auto;<br \/>\n-webkit-hyphens: auto;<br \/>\nhyphens: auto;<br \/>\n<br \/>\n  white-space: normal;<br \/>\n<br \/>\n  box-sizing: content-box;<br \/>\n  -moz-box-sizing: content-box;<br \/>\n  -ms-box-sizing: content-box;<br \/>\n  -webkit-box-sizing: content-box;<br \/>\n }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/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='#d51369' onclick='var dv=document.getElementById(\"d51369\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51369' 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='#d51390' onclick='var dv=document.getElementById(\"d51390\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51390' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s proof of concept &#8220;Multipurpose Buttons&#8221; web application of Multipurpose Buttons Primer Tutorial was pretty typical of many &#8220;proof of concept&#8221;s out there, not rocking the boat with the messy woooooorrrrllllllddd of what a user might enter as the &#8220;content&#8221; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-content-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":[174,257,275,281,290,327,367,400,2208,576,609,652,861,870,997,1986,1209,1262,1319,1891,3214],"class_list":["post-51390","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-button","tag-content","tag-cross-browser","tag-css","tag-data","tag-did-you-know","tag-dropdown","tag-event","tag-getboundingclientrect","tag-html","tag-input","tag-javascript","tag-onclick","tag-onload","tag-programming","tag-proof-of-concept","tag-style","tag-textarea","tag-tutorial","tag-user","tag-user-interaction"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51390"}],"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=51390"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51390\/revisions"}],"predecessor-version":[{"id":51396,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51390\/revisions\/51396"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}