{"id":51186,"date":"2020-12-16T03:01:19","date_gmt":"2020-12-15T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51186"},"modified":"2020-12-15T20:05:13","modified_gmt":"2020-12-15T10:05:13","slug":"combometer-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/combometer-primer-tutorial\/","title":{"rendered":"ComboMeter Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combometer.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"ComboMeter Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combometer_primer.jpg\" title=\"ComboMeter Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">ComboMeter Primer Tutorial<\/p><\/div>\n<p>We wanted to build on the methodologies of the recent <a title='ComboBox Primer Tutorial' href='#cbpt'>ComboBox Primer Tutorial<\/a> as a basis for an HTML inhouse &#8220;combo&#8221; element combining &#8230;<\/p>\n<ul>\n<li>div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true &#8230; nesting a &#8230;<\/li>\n<li><a target=_blank title='HTML meter element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'>meter<\/a> element<\/li>\n<\/ul>\n<p> &#8230; because we think adding keyboard functionality to a <a target=_blank title='HTML meter element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'>meter<\/a> element <font size=1>(which, as we showed with yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-outline-and-border-via-javascript-jquery-tutorial\/' title='CSS Outline and Border via Javascript jQuery Tutorial'>CSS Outline and Border via Javascript jQuery Tutorial<\/a> can be an interactive clickable tool just within its own onclick event logic)<\/font> might be quite useful as a &#8220;numerical readout&#8221; tool.  We have a few ideas for it, but as of today &#8230; well &#8230; it&#8217;s a first draft and needs more work.   But this does not mean it is not worth trying as you can do below for HTML supervisor <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combometer.html_GETME\">combometer.htm<\/a> of external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combometer.js_GETME\">combometer.js<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combometer.htm\" title=\"Click picture\">live run<\/a> below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combometer.htm\" style=\"width:100%;height:400px;\"><\/iframe><\/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\/combometer-primer-tutorial\/'>ComboMeter Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cbpt'>Previous relevant <a target=_blank title='ComboBox Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/combobox-primer-tutorial\/'>ComboBox 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\/combobox.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"ComboBox Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combobox.gif\" title=\"ComboBox Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">ComboBox Primer Tutorial<\/p><\/div>\n<p>Do you remember a blog posting a couple of days ago called <a target=_blank title='Favourites Poll Email Moderation Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/favourites-poll-email-moderation-contenteditable-tutorial\/'>Favourites Poll Email Moderation Contenteditable Tutorial<\/a> featuring &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/favourites-poll-email-moderation-contenteditable-tutorial\/'><p>\n<a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a> global attribute <font color=red>magic<\/font>\n<\/p><\/blockquote>\n<p>?  Well, that started me rethinking on a very long-running personal desire with our web application work.  In the Windows early GUI desktop applications going back to VB.Net and C++ in the latter 1900 years there was a GUI control called <a target=_blank title='ComboBox' href='https:\/\/docs.microsoft.com\/en-us\/dotnet\/api\/system.windows.forms.combobox?view=net-5.0'>&#8220;ComboBox&#8221; (class)<\/a> that never failed to impress me.  It matches a lot of needs to be presented with a static list of choices in mind, but then want to extend that list as time and situation changes over time.  A &#8220;ComboBox&#8221; can handle it, it being that combination of &#8230;<\/p>\n<ul>\n<li>dropdown (static) list &#8230; and &#8230;<\/li>\n<li>textbox &#8220;extender&#8221;<\/li>\n<\/ul>\n<p> &#8230; all manageable sounding in today&#8217;s web application wooooorrrrrlllllld, especially, in our minds, having <a target=_blank title='HTML defer script attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_script_defer.asp'>defer<\/a><br \/>\n and <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a> as useful concepts for the latter item above.  And so a &#8230;<\/p>\n<ul>\n<li>dropdown (select) element &#8230; nested within a &#8230;<\/li>\n<li>div contenteditable=true<\/li>\n<\/ul>\n<p> &#8230; paradigm is the basis for our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combobox.js_GETME\">combobox.js<\/a> external Javascript to feature an Object Oriented looking Javascript Class &#8230;<\/p>\n<p><code><br \/>\n\/\/ combobox.js<br \/>\n\/\/ External Javascript to extend some HTML like combobox.html allowing for a dynamically created HTML div element \"combobox\" (ie. dropdown + div contenteditable=true)<br \/>\n\/\/ November, 2020<br \/>\n\/\/ Called via ...<br \/>\n\/\/      &lt;script type='text\/javascript' src='combobox.js' defer&gt;&lt;\/script&gt;<br \/>\n\/\/   ... or dropdown populated example as per ...<br \/>\n\/\/      &lt;script type='text\/javascript' src='combobox.js?ddlist=Asia,Africa,Europe,North%20America,South%20America,Australia,Antarctica' defer&gt;&lt;\/script&gt;<br \/>\n<br \/>\nclass Droptext {<br \/>\n  constructor(combobox) {<br \/>\n    this.ele = document.createElement('div');<br \/>\n    this.ele.id = ('' + combobox).split(';')[0];<br \/>\n    if (('' + combobox).indexOf(';') != -1) {<br \/>\n      this.ele.setAttribute('data-dropinnards',  ('' + combobox).split(';')[1]);<br \/>\n      this.ele.setAttribute('data-optionval',  \"&lt;option value=''&gt;&lt;\/option&gt;\");<br \/>\n      this.ele.setAttribute('data-focusaway',  \"&lt;input style=position:absolute;top:-200px;left:-200px; type=text value=&gt;&lt;\/input&gt;\");<br \/>\n      this.ele.setAttribute('contenteditable', true);<br \/>\n      this.ele.innerHTML = ('' + combobox).split(';')[1]; \/\/ + \"&lt;input style=position:absolute;top:-200px;left:-200px; type=text value=&gt;&lt;\/input&gt;\";<br \/>\n    }<br \/>\n  }<br \/>\n  present() {<br \/>\n    return this.ele.outerHTML.replace('&gt;&lt;select', ' onblur=\" var odiv=event.target;  var optval=event.target.getAttribute(' + \"'\" + 'data-optionval' + \"'\" + ');  var fway=event.target.getAttribute(' + \"'\" + 'data-focusaway' + \"'\" + ');  var umytype=event.target.innerHTML;  var alltogether=event.target.getAttribute(' + \"'\" + 'data-dropinnards' + \"'\" + ').split(String.fromCharCode(60) + ' + \"'\" + '\/select' + \"'\" + ')[0]; if (umytype.trim().length == 0) {   odiv.innerHTML = event.target.getAttribute(' + \"'\" + 'data-dropinnards' + \"'\" + '); } else if (alltogether.indexOf(String.fromCharCode(62) + umytype + String.fromCharCode(60)) != -1) {   odiv.innerHTML = alltogether.replace(String.fromCharCode(62) + umytype + String.fromCharCode(60), ' + \"' selected'\" + ' + String.fromCharCode(62) + umytype + String.fromCharCode(60)) + event.target.getAttribute(' + \"'\" + 'data-focusaway' + \"'\" + ');   } else {  alltogether+=optval.replace(String.fromCharCode(39),  String.fromCharCode(39) + umytype).replace(String.fromCharCode(62), String.fromCharCode(62) + umytype);  alltogether+=String.fromCharCode(60) + ' + \"'\" + '\/select' + \"'\" + ' + String.fromCharCode(62); odiv.innerHTML = fway; odiv.innerHTML = alltogether.replace(String.fromCharCode(62) + umytype + String.fromCharCode(60), ' + \"' selected'\" + ' + String.fromCharCode(62) + umytype + String.fromCharCode(60)) + event.target.getAttribute(' + \"'\" + 'data-focusaway' + \"'\" + '); odiv.setAttribute(' + \"'\" + 'data-dropinnards' + \"'\" + ',alltogether); }  \" onkeypress=\" event.target.setAttribute(' + \"'\" + 'data-sofar' + \"'\" + ', event.target.innerHTML); \" onkeydown=\"  if (event.target.innerHTML.indexOf(String.fromCharCode(60)) != -1) { event.target.innerHTML=' + \"''\" + ';  } \"&gt;&lt;select');<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nclass Contents extends Droptext {<br \/>\n  constructor(combobox, mod) {<br \/>\n    if (('' + combobox) == '') {<br \/>\n      var iinn=0;<br \/>\n      while (document.getElementById('combobox' + iinn)) {<br \/>\n        iinn++;<br \/>\n      }<br \/>\n      combobox = 'combobox' + iinn;<br \/>\n    }<br \/>\n    super((combobox + ';' + mod));<br \/>\n    this.dropinnards = mod;<br \/>\n  }<br \/>\n  show() {<br \/>\n    return this.present() + \"&lt;input style=position:absolute;top:-200px;left:-200px; type=text value=&gt;&lt;\/input&gt;\"; \/\/ + ', it is a ' + this.dropinnards;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and middle<strike>man<\/strike>person external Javascript &#8230;<\/p>\n<p><code><br \/>\nvar ihs = \"\";<br \/>\nvar selconts = location.search.split('ddlist=')[1] ? (ihs + decodeURIComponent(location.search.split('ddlist=')[1].split('&')[0])).split(',') : (ihs + \"&lt;select&gt;&lt;option value=''&gt;&lt;\/option&gt;&lt;option value='Red'&gt;Red&lt;\/option&gt;&lt;option value='Blue'&gt;Blue&lt;\/option&gt;&lt;option value='Yellow'&gt;Yellow&lt;\/option&gt;&lt;\/select&gt;\").split(',');<br \/>\nif (document.head.innerHTML.replace('&ddlist=','?ddlist=').indexOf('?ddlist=') != -1) {<br \/>\n  ihs = decodeURIComponent(document.head.replace('&ddlist=','?ddlist=').innerHTML.split('?ddlist=')[1].split('&')[0].split('\"')[0].split(\"'\")[0]); \/\/ + ',';<br \/>\n  if (ihs.trim() != '') { selconts = ihs.split(','); }<br \/>\n}<br \/>\nif (selconts[0].indexOf('&lt;select') != 0) {<br \/>\n var selcont = \"&lt;select&gt;\";<br \/>\n for (var jiip=0; jiip&lt;selconts.length; jiip++) {<br \/>\n  if (selconts[jiip].indexOf('&lt;select') != 0) {<br \/>\n    selcont += '&lt;option value=\"' + selconts[jiip] + '\"&gt;' + selconts[jiip] + '&lt;\/option&gt;';<br \/>\n  }<br \/>\n }<br \/>\n selcont += \"&lt;\/select&gt;\";<br \/>\n mycombobox = new Contents(\"\", selcont);<br \/>\n} else {<br \/>\n mycombobox = new Contents(\"\", selconts[0]);<br \/>\n}<br \/>\nvar obody = document.body;<br \/>\nif (document.getElementById('demo')) {<br \/>\n  obody = document.getElementById('demo');<br \/>\n} else {<br \/>\n  var ofound = false;<br \/>\n  var obs = document.getElementsByTagName('div');<br \/>\n  for (var iip=0; iip&lt;obs.length; iip++) {<br \/>\n    if (obs[iip].innerHTML == '') {<br \/>\n     obody = obs[iip];<br \/>\n     ofound = true;<br \/>\n    }<br \/>\n  }<br \/>\n  if (!ofound) {<br \/>\n    obody.innerHTML += '&lt;div id=demo&gt;&lt;\/div&gt;';<br \/>\n    obody = document.getElementById('demo');<br \/>\n  }<br \/>\n}<br \/>\nobody.innerHTML += mycombobox.show();<br \/>\n<\/code><\/p>\n<p> &#8230; that suits the need of our proof of concept calling HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combobox.html_GETME\" title=\"combobox.html\">combobox.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/combobox.html\" title=\"Click picture\">live run<\/a> code &#8230;<\/p>\n<p><code><br \/>\n&lt;!doctype html&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript' src='combobox.js' defer&gt;&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;div id='demo'&gt;&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p>Intervening at the &#8220;onkeydown&#8221; event of the hosting HTML div contenteditable=true is the essence of why the &#8220;ComboBox&#8221; can be <font size=1>(quite a bit, but not totally)<\/font> like that forerunner &#8220;ComboBox&#8221; VB.Net GUI control.<\/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='#d50881' onclick='var dv=document.getElementById(\"d50881\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/combobox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50881' 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='#d51186' onclick='var dv=document.getElementById(\"d51186\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51186' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We wanted to build on the methodologies of the recent ComboBox Primer Tutorial as a basis for an HTML inhouse &#8220;combo&#8221; element combining &#8230; div contenteditable=true &#8230; nesting a &#8230; meter element &#8230; because we think adding keyboard functionality to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/combometer-primer-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":[2442,3523,409,576,652,673,1517,2394,861,997,3522,1319],"class_list":["post-51186","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-contenteditable","tag-dic","tag-external-javascript","tag-html","tag-javascript","tag-keyboard","tag-meter","tag-number","tag-onclick","tag-programming","tag-readout","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51186"}],"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=51186"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51186\/revisions"}],"predecessor-version":[{"id":51191,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51186\/revisions\/51191"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}