{"id":36886,"date":"2018-03-19T03:01:30","date_gmt":"2018-03-18T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36886"},"modified":"2020-11-04T12:04:51","modified_gmt":"2020-11-04T02:04:51","slug":"html-table-cell-contenteditable-onload-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-contenteditable-onload-tutorial\/","title":{"rendered":"HTML Table Cell Contenteditable Onload Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Table Cell Contenteditable Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.gif\" title=\"HTML Table Cell Contenteditable Onload Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Contenteditable Onload Tutorial<\/p><\/div>\n<p>If you are a regular at this blog you&#8217;ll no doubt have tweaked that we are very keen to use Javascript&#8217;s document.body&#8217;s <i>onload<\/i> event to add flexibility to proceedings.<\/p>\n<p>Today, though, it is an awareness of a web application&#8217;s data control, controllable even before the document.body&#8217;s <i>onload<\/i> event that we want to remind you about.  There are a few pre<i>onload<\/i> ideas below, the first of which we make huge use of extending yesterday&#8217;s <a title='HTML Table Cell Contenteditable Tutorial' href='#htmltcct'>HTML Table Cell Contenteditable Tutorial<\/a>&#8216;s web application&#8217;s functionality, to add a whole lot more flexibility &#8230;<\/p>\n<ul>\n<li>you can process URL ($_GET[]) &#8220;get&#8221; arguments (those of the ?Name1=Value1 and &amp;NameNot1=ValueNot1 ilk) ahead of the <i>onload<\/i> event (via document.URL) &#8230; but we choose to do it with the <i>onload<\/i> event today<\/li>\n<li><a target=_blank title='Referring webpage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_doc_referrer.asp'>document.referrer<\/a> referring webpage is available to you<\/li>\n<li><a target=_blank title='Window object information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/obj_window.asp'>window<\/a> object information can be available<\/li>\n<li><a target=_blank title='Navigator object information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/obj_navigator.asp'>navigator<\/a> object information can be available<\/li>\n<li><a target=_blank title='LocalStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> data information and HTTP <a target=_blank title='HTTP Cookies information from W3scholls' href='https:\/\/www.w3schools.com\/js\/js_cookies.asp'>cookies<\/a> can be available<\/li>\n<li>jQuery has the &#8230;<br \/>\n<code><br \/>\n<a target=_blank title='jQuery ready information' href='https:\/\/learn.jquery.com\/using-jquery-core\/document-ready\/'>$( document ).ready<\/a>(function() {<br \/>\n    console.log( \"ready!\" );<br \/>\n});<br \/>\n<\/code><br \/>\n&#8230; syntax to use as soon as the document is ready to use (and consequently could involve <a target=_blank title='jQuery Ajax information' href='https:\/\/learn.jquery.com\/ajax\/jquery-ajax-methods\/'>jQuery Ajax <i>$.ajax<\/i><\/a> involvement, even)<\/li>\n<li>just after the &lt;body&gt; tag you can place &lt;script type=&#8217;text\/javascript&#8217;&gt; &#8230; the timing of which is a bit indeterminate &#8230; but can include one of our favourite  &#8230;<br \/>\n<code><br \/>\n<a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>(<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>([wording],[default]));<br \/>\n<\/code><br \/>\n (prompting for content, off the user, and onto the webpage, on the fly) &#8230; &lt;\/script&gt;<\/li>\n<li>you can involve a serverside language like PHP as a whole layer on top not only working before document.body&#8217;s <i>onload<\/i> event but at a different part of the client\/server messaging cycle &#8230; but perhaps we should just concentrate on the clientside options above for this discussion today, as a lot of us do not involve serverside thoughts in our thinking<\/li>\n<\/ul>\n<p>As much as we like to use <i><a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>(<a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a>([wording],[default]))<\/i> shaping to do it for today&#8217;s changes fell a bit short for our enthusiasm levels, so will just have to harp on about it today, or you can consult <a target=_blank title='HTML\/Javascript Clairvoyance Tester Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-clairvoyance-tester-mobile-tutorial\/'>HTML\/Javascript Clairvoyance Tester Mobile Tutorial<\/a> for an example if you like.<\/p>\n<p>None the less, by the timing of the the document.body&#8217;s <i>onload<\/i> event, perhaps you have Javascript arrays defined between &lt;head&gt; and &lt;\/head&gt; but that doesn&#8217;t mean you necessarily have to settle on that (array) content, if you have been indicated to otherwise by a ($_GET[]) &#8220;get&#8221; arguments call to the contrary (and if you want to involve serverside then ($_POST[]) &#8220;post&#8221; data could have a say also, but not today).  In our default case, that array content defines a deck of cards but there are now at least three ways to change from that default input data (array content) arrangement now &#8230;<\/p>\n<ul>\n<li>click on the (newly introduced) &#8220;Card&#8221; word in the <i>h1<\/i> header element and answer a Javascript <a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> window ask for the user&#8217;s own comma separated list of (image) URLs to use instead of that deck of card (image set)<\/li>\n<li>change the HTML <i>th<\/i> table header cell contenteditable=true with a comma separated list of (image) URLs<\/li>\n<li>append that comma separated list of (image) URLs to <i>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html?ask=<\/i> in the web browser&#8217;s address bar (URL) &#8230; like what happens when you click <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html?ask=http:\/\/2.bp.blogspot.com\/-Rkswhq-NQao\/UPJPHPqSmGI\/AAAAAAAAAPg\/4JK6DHvtWKc\/s1600\/Munch.jpg,http:\/\/news.bbcimg.co.uk\/media\/images\/53641000\/jpg\/_53641112_etty.jpg,http:\/\/www.fodors.com\/wire\/Lady-in-Gold-Gustav-Klimt.jpg,https:\/\/encrypted-tbn1.gstatic.com\/images?q=tbn:ANd9GcTZ35Hp3PdTwkANuTC9YVcR0nj6TdDm3_NtGgeqZVgu7j0Q8FkEZQ' title='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html?ask=http:\/\/2.bp.blogspot.com\/-Rkswhq-NQao\/UPJPHPqSmGI\/AAAAAAAAAPg\/4JK6DHvtWKc\/s1600\/Munch.jpg,http:\/\/news.bbcimg.co.uk\/media\/images\/53641000\/jpg\/_53641112_etty.jpg,http:\/\/www.fodors.com\/wire\/Lady-in-Gold-Gustav-Klimt.jpg,https:\/\/encrypted-tbn1.gstatic.com\/images?q=tbn:ANd9GcTZ35Hp3PdTwkANuTC9YVcR0nj6TdDm3_NtGgeqZVgu7j0Q8FkEZQ'>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html?ask=http:\/\/2.bp.blogspot.com\/-Rkswhq-NQao\/UPJPHPqSmGI\/AAAAAAAAAPg\/4JK6DHvtWKc\/s1600\/Munch.jpg,http:\/\/news.bbcimg.co.uk\/media\/images\/53641000\/jpg\/_53641112_etty.jpg,http:\/\/www.fodors.com\/wire\/Lady-in-Gold-Gustav-Klimt.jpg,https:\/\/encrypted-tbn1.gstatic.com\/images?q=tbn:ANd9GcTZ35Hp3PdTwkANuTC9YVcR0nj6TdDm3_NtGgeqZVgu7j0Q8FkEZQ<\/a> to show some paintings regulars at this blog may remember featuring in <a target=_blank title='HTML\/Javascript Reveal Image Behind Image Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/reveal-image-behind-image-primer-tutorial\/'>HTML\/Javascript Reveal Image Behind Image Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>Today&#8217;s HTML and Javascript and CSS looks like <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html-GETME\" title=\"table_ce.html\">table_ce.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html-GETME\" title=\"table_ce.html\">changed code<\/a> and now has a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html\" title=\"Click picture\">live run<\/a> with considerably more flexibility as far as data content is concerned.<\/p>\n<hr>\n<p id='htmltcct'>Previous relevant <a target=_blank title='HTML Table Cell Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-contenteditable-tutorial\/'>HTML Table Cell Contenteditable 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\/table_ce.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Table Cell Contenteditable Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.jpg\" title=\"HTML Table Cell Contenteditable Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Contenteditable Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML div Contenteditable Form Tutorial' href='#htmlcft'>HTML div Contenteditable Form Tutorial<\/a> was all about  the global attribute <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'><i>contenteditable<\/i><\/a>=true rather than about HTML <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> elements per se, hence the challenge we gave you &#8230;<\/p>\n<blockquote><p>\n &#8230; (but perhaps you should broaden my horizons with feedback on other element types?!) &#8230;\n<\/p><\/blockquote>\n<p>Well, with all those <a target=_blank title='?' href='http:\/\/www.funtrivia.com\/askft\/Question2836.html'>cards and letters rolling in<\/a> (tee, hee) we&#8217;ve decided to see how it works with the &#8220;Table Cell&#8221; elements <a target=_blank title='HTML td element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_td.asp'>td<\/a> and specifically <a target=_blank title='HTML th element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_th.asp'>th<\/a> (for header table cell) today.<\/p>\n<p>Lo and behold, it works, and we show you today a deck of cards shuffled, then set on a timer that takes the card on top and puts in down the bottom of the deck to expose the next card, but you can show any card of your choosing, bucking this trend, by either &#8230;<\/p>\n<ul>\n<li>click\/touch a card of interest down in the deck &#8230; or &#8230;<\/li>\n<li>define the image URL yourself via the HTML <i>th<\/i> contenteditable=true header table cell<\/li>\n<\/ul>\n<p> &#8230; to, similar to yesterday&#8217;s HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> content change, is you, potentially, changing content again, this time for an HTML <a target=_blank title='HTML img tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> element&#8217;s <a target=_blank title='Image img element src property information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_img_src.asp'>src<\/a> property.<\/p>\n<p>Guess we&#8217;ll have to open those windows, and remember today&#8217;s HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html_GETME\" title=\"table_ce.html\">table_ce.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/table_ce.html\" title=\"Click picture\">live run<\/a> lesson.<\/p>\n<hr>\n<p id='htmlcft'>Previous relevant <a target=_blank title='HTML div Contenteditable Form Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-contenteditable-form-tutorial\/'>HTML div Contenteditable Form 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\/dcinform.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML div Contenteditable Form Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dcinform.jpg\" title=\"HTML div Contenteditable Form Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML div Contenteditable Form Tutorial<\/p><\/div>\n<p>Are you like me, and think that the global attribute <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'><i>contenteditable<\/i><\/a>=true can be incredibly useful, so far we&#8217;ve been thinking, with HTML <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> elements, in particular (but perhaps you should broaden my horizons with feedback on other element types?!).  You could read more on some background to this at <a title='HTML div Versus hr Contenteditable Tutorial' href='#htmlvct'>HTML div Versus hr Contenteditable Tutorial<\/a>.<\/p>\n<p>But this HTML div contenteditable=true scenario would be useful in an HTML <a target=_blank href='http:\/\/www.w3schools.com\/html\/html_forms.asp' title='HTML form element information from w3schools'><i>form<\/i><\/a>, don&#8217;t you think?  Can&#8217;t you imagine its multiple line characteristics as being a &#8220;flex&#8221; type replacement for the hardcoded col=? row=? of an HTML <a target=_blank title='HTML textarea tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'><i>textarea<\/i><\/a> element (the one chosen for multiple line textual data in most HTML form element scenarios)?<\/p>\n<p>So we, rather than ruining the fun of looking up whether this is possible via advice on the &#8220;net&#8221; wrote a small web application to try this out, and even bucking our &#8220;denial of service&#8221; thoughts couldn&#8217;t sway the reality that an HTML element  <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'><i>innerHTML<\/i><\/a> cannot, a form friend, be.  You&#8217;ll notice with the HTML textarea element, though we do use the innerHTML property a lot, at least hereabouts, it also has a <a target=_blank title='Value property info from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_attr_value.asp'><i>value<\/i><\/a> property in keeping, apparently, with HTML form element requirements to involve the <a target=_blank title='Name property info from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_attr_name.asp'><i>name<\/i><\/a> property of form elements as &#8230;<\/p>\n<p><code><br \/>\nName=Value<br \/>\n<\/code><\/p>\n<p> &#8230; URL ? and &amp; argument data pairings for method=GET and also accessible with serverside (PHP, for instance) as post data pairings, once the HTML form is <a target=_blank title='HTML input type=submit button information from W3schools' href='https:\/\/www.w3schools.com\/html\/html_form_input_types.asp'>submit<\/a>ted.<\/p>\n<p>So there&#8217;s the intervention point, we figured, on the HTML form&#8217;s <a target=_blank title='Event onsubmit information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'><i>onsubmit<\/i><\/a> event, to try to do something about this, and combine &#8230;<\/p>\n<ul>\n<li>the user experience benefits, sometimes, to using HTML div contenteditable=true name=[Name] (with its innerHTML as Value) &#8230; rather than those HTML textarea elements &#8230;<\/li>\n<li>the navigational benefits of HTML form element<\/li>\n<\/ul>\n<p>Then it tweaked with us that HTML (within a form) like &#8230;<\/p>\n<p><code><br \/>\nFavourite Iframe: &lt;div <a target=_blank title='Event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'>onblur<\/a>=\" <i>if (typeof issrcchange === 'function') {<\/i> issrcchange(this); <i>}<\/i>\" style='width:80%;height:60vh;display:inline-block;border:1px solid red;padding: 5px 5px 5px 5px;' id=\"diframe\" name=\"diframe\" contenteditable='true'&gt;&lt;iframe style=\"width:100%;height:60vh;\" src=\"knockout_dice_game.html\"&gt;&lt;\/iframe&gt; ... is knockout_dice_game.html&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; not only involved a better user experience (you might boil all this down to, &#8220;look&#8221;) with the HTML div contenteditable=true but by the nature of an HTML div element we could work that &#8230;<\/p>\n<p><code><br \/>\n<i>if (typeof issrcchange === 'function') {<\/i> issrcchange(this); <i>}<\/i><br \/>\n<\/code><\/p>\n<p> &#8230; Javascript call allow for the user to change the HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element content (that even contenteditable=true doesn&#8217;t allow you to do) by arranging the HTML div element innerHTML&#8217;s last word point at that HTML iframe&#8217;s <a target=_blank title='HTML iframe src property information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_frame_src.asp'><i>src<\/i><\/a> property, effectively controlling what you can see as that HTML iframe&#8217;s content, and you can edit this bit of the HTML div element content outside the HTML iframe definition (ie. its <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> property).   Cute, huh?<\/p>\n<p>But back to what we do during the <i>onsubmit<\/i> event, we map HTML div contenteditable name=[Name] (innerHTML acts as Value) to &#8230;<\/p>\n<ul>\n<li>textarea name=[Name] innerHTML=[innerHTML of div contenteditable name=[Name]]=value for the scenarios that the div element starts with &lt; &#8230; otherwise we map to <\/p>\n<li>input type=hidden name=[Name] value=[innerHTML of div contenteditable name=[Name]]\n<\/ul>\n<p> &#8230; just before returning a <i>true<\/i> (return) value to signify &#8220;yes, navigate away&#8221;.<\/p>\n<p>Above, did you wonder over the awkwardness of &#8220;<i>if (typeof issrcchange === &#8216;function&#8217;) {<\/i> issrcchange(this); <i>}<\/i>&#8221; &#8230; well, this is all to do with us seeing this as a potential Javascript tool, and as such we hived off all of the called Javascript code like &#8230;<\/p>\n<p><code><br \/>\nvar inval='';<br \/>\nvar definval='A name maybe';<br \/>\nvar asrc='';<br \/>\n<br \/>\nfunction checkform(oform) {<br \/>\n  var i, aname='', divs=document.getElementsByTagName('div');<br \/>\n  for (i=0; i&lt;divs.length; i++) {<br \/>\n    if (divs[i].getAttribute('contenteditable')) {<br \/>\n      if (divs[i].outerHTML.indexOf(' name=\"') != -1) {<br \/>\n        aname=divs[i].outerHTML.split(' name=\"')[1].split('\"')[0];<br \/>\n        if ((divs[i].innerHTML + ' ').substring(0,1) == '&lt;') {<br \/>\n        oform.innerHTML+='&lt;textarea name=\"' + aname + '\"&gt;' + divs[i].innerHTML + '&lt;\/textarea&gt;';<br \/>\n        } else {<br \/>\n        oform.innerHTML+='&lt;input type=\"hidden\" name=\"' + aname + '\" value=\"' + divs[i].innerHTML + '\"&gt;&lt;\/input&gt;';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return true;<br \/>\n}<br \/>\n<br \/>\nfunction olcheck() {<br \/>\n var ib,bits=document.body.innerHTML.split(' name=\"'),sbits;<br \/>\n for (ib=1; ib&lt;bits.length; ib++) {<br \/>\n  definval=bits[ib].split('\"')[0];<br \/>\n  inval=location.search.split(definval + '=')[1] ? decodeURIComponent(location.search.split(definval + '=')[1].split('&')[0]).replace(\/\\+\/g,' ') : definval;<br \/>\n  if (inval != definval || document.URL.indexOf(definval + '=') != -1) {<br \/>\n   document.getElementById(definval).innerHTML=inval;<br \/>\n  }<br \/>\n }<br \/>\n sbits=document.body.innerHTML.split(' src=\"');<br \/>\n if (sbits.length &gt; 1) {<br \/>\n  asrc=sbits[1].split('\"')[0];<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction issrcchange(difthis) {<br \/>\n var lastword=difthis.innerHTML.split(' ')[eval(-1 + difthis.innerHTML.split(' ').length)];<br \/>\n if (lastword != asrc) {<br \/>\n  difthis.innerHTML=difthis.innerHTML.replace(asrc,lastword);<br \/>\n  asrc=lastword;<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; into the one external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dcinform.js_GETME\" title=\"dcinform.js\">dcinform.js<\/a> that can be called (or perhaps not (and it should be noted the web application still works in a reduced functionality mode of use), hence the <i>if (typeof issrcchange === &#8216;function&#8217;) {<\/i> issrcchange(this); <i>}<\/i> flexibility) via &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript' src='dcinform.js'&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; up near the top of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dcinform.html_GETME\" title=\"dcinform.html\">dcinform.html<\/a> HTML and Javascript for today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dcinform.html\" title=\"Click picture\">live run<\/a> web application &#8220;tool&#8221; (we are hoping).<\/p>\n<hr>\n<p id='htmlvct'>Previous relevant <a target=_blank title='HTML div Versus hr Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-contenteditable-tutorial\/'>HTML div Versus hr Contenteditable 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\/nocontent_bordered_div_vs_hr.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML div Versus hr Contenteditable Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr_contenteditable.jpg\" title=\"HTML div Versus hr Contenteditable Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML div Versus hr Contenteditable Tutorial<\/p><\/div>\n<p>Sometimes, just because the look of a web application changes very little, doesn&#8217;t mean there aren&#8217;t quite big rearrangements underneath to allow for a new piece of functionality.  Sometimes, with web applications, we like &#8220;seamlessness&#8221;, or the more cruel might say &#8220;nga nga, nga nga, nga &#8230; you forgot that detail didn&#8217;t you&#8221;?!   Well, both have credence today, but, anyway, we like the end result better, and that is the main thing.<\/p>\n<p>Remember, recently (with blog postings in post thread of <a target=_blank title='HTML Editing via Textarea and Div Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editing-via-textarea-and-div-primer-tutorial\/'>HTML Editing via Textarea and Div Primer Tutorial<\/a>), we talked for the first time about the great <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221; global HTML attribute that can turn an HTML div element, that was &#8220;just there for reporting&#8221; into an HTML div element <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=E3rB_qx0wRM'>that is so much more<\/a>.  Might be hard to imagine if you&#8217;ve never tried that in action, but &#8230;<\/p>\n<ul>\n<li>a &#8220;flat&#8221; display only HTML element (that when you click on, allows for copy\/paste of textual data) &#8230; dynamically can still be capable of that, but can also &#8230;<\/li>\n<li>be an HTML textual element that shows a cursor when you click in it (like a textarea or input type=text element) and that you can change the contents of, and so becomes an element where the <a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'><i>onfocus<\/i><\/a> and <a target=_blank title='Event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'><i>onblur<\/i><\/a> and <a target=_blank title='Event onchange information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onchange.asp'><i>onchange<\/i><\/a> events can dynamically become relevant &#8230; all under the auspices of the use of <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221; global HTML attribute &#8230; set via Javascript code such as &#8230;<br \/>\n<code><br \/>\ndocument.getElementById('eId').<a target=_blank title='Javascript setAttribute method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_setattribute.asp'>setAttribute<\/a>('contenteditable','true');<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; so that yesterday&#8217;s <a title='HTML div Versus hr Primer Tutorial' href='#htmlvpt'>HTML div Versus hr Primer Tutorial<\/a> look is very much still the go, barring some cosmetic &#8220;flagging&#8221; nuances, with the look of our changed &#8220;No Content Bordered DIV versus HR CSS Border Tool&#8221; web application.  Underneath, though, there are heaps more possibilities for those more adventurous users to change the (now editable) <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> property in those two (now clickable) &lt;-HTML-&gt; (becomes &lt;=HTML=&gt;) &#8220;flagged&#8221; table cells.  You could even add your own dynamic event logic (eg. <i> onclick=&#8221;alert(&#8216;Act now!&#8217;);&#8221; <\/i> types of changes) to those two &lt;-Visual-&gt; HTML div and hr elements.<\/p>\n<p>Why not retry this tool yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html\" title=\"Click picture\">live run<\/a> link with underlying HTML and Javascript and bits of CSS as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html-GETME\">nocontent_bordered_div_vs_hr.html<\/a> that got changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html-GETME\">this way<\/a> for &#8220;contenteditable&#8221; functionality?<\/p>\n<hr>\n<p id='htmlvpt'>Previous relevant <a target=_blank title='HTML div Versus hr Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-primer-tutorial\/'>HTML div Versus hr 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\/nocontent_bordered_div_vs_hr.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML div Versus hr Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.jpg\" title=\"HTML div Versus hr Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML div Versus hr Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s new web application is a CSS styling &#8220;tool&#8221; (at least we&#8217;d like to think) but written predominantly via HTML and Javascript &#8230; go figure &#8230; but yes, it makes sense a bit, that to show CSS &#8220;in action&#8221; so to speak, you&#8217;d want an &#8220;actor&#8221; like Javascript, DOM in particular, is.<\/p>\n<p>As a matter of fact (and you may want to pre-read <a target=_blank title='Weather API via Iframe jQuery Ajax Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-map-tutorial\/'>Weather API via Iframe jQuery Ajax Map Tutorial<\/a>, for the &#8220;-&#8221; sign goes to &#8220;capital letter&#8221; (ditty) thinking that gets used around here, if all this interests you), there are only a few things to do with &#8230;<\/p>\n<ul>\n<li>CSS styling &#8230; that &#8230;<\/li>\n<li>Javascript DOM &#8230; can&#8217;t simulate<\/li>\n<\/ul>\n<p> &#8230; and the &#8220;venn diagram&#8221; look of that non-intersecting part is eaten into further if you include jQuery syntaxes like &#8230;<\/p>\n<ul>\n<li>$(&#8220;#[html-element-id]&#8221;).<a target=_blank title='jQuery css method information from w3schools' href='https:\/\/www.w3schools.com\/jquery\/jquery_css.asp'>css<\/a>(&#8220;[attribute]&#8221;, &#8220;[value]&#8221;); \/\/ as talked about at <a target=_blank title='Javascript Zoom and Translate Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-zoom-and-translate-primer-tutorial'>Javascript Zoom and Translate Primer Tutorial<\/a><\/li>\n<li>$(&#8216;#messages li:nth-child(odd)&#8217;).css(&#8216;background-color&#8217;, $(&#8216;#imyc&#8217;).val()); \/\/ as talked about at <a target=_blank title='Socket.IO Node.js Chat Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/socket-io-node-js-chat-application-primer-tutorial\/'>Socket.IO Node.js Chat Application Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>The reason we are here now discussing this is that yesterday&#8217;s <a target=_blank title='PHP Sun Information Software Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-sun-information-software-integration-tutorial\/'>PHP Sun Information Software Integration Tutorial<\/a> &#8220;shenanigans&#8221; (making the sun diagram get a white background rather than a pink one <font size=1>&#8230; as you would now, possums &#8230;<\/font>) got me stumbling (<font size=1>though &#8220;stumbelling&#8221; sounds better<\/font>) onto an accident (<font size=1>just waiting to happen<\/font>) &#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/> &#8230; with me changing a &#8220;pink&#8221; background colour for a pink border colour (<font size=1>&#8230; as you would now, <strike>possums<\/strike>squirrels &#8230;<\/font>) in a &#8230;. (<font size=1>da da da da<\/font>) &#8230; HTML div element, and it came out looking like a pink line, and there &#8230;. (<font size=1>in the &#8230; but we digress<\/font>) &#8230; it occurred to us that &#8230; (<font size=1>do be do be do<\/font>) &#8230;<\/p>\n<ul>\n<li>HTML div elements with a border and no content &#8230; can be a lot like &#8230;<\/li>\n<li>HTML hr (horizontal rule) element<\/li>\n<\/ul>\n<p>So we wrote an HTML and Javascript (and bits of CSS) &#8220;tool&#8221; to show that, and we realized that &#8230;<\/p>\n<ul>\n<li>presenting the Javascript DOM HTML element property <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> property of those &#8220;div&#8221; and &#8220;hr&#8221; elements could be quite constructive &#8230; as the &lt;-HTML-&gt; &#8220;partner&#8221; to &#8230;<\/li>\n<li>presenting the &#8220;div&#8221; and &#8220;hr&#8221; elements themselves, the look of which is controlled by you, the user <font size=1>&#8230; yes, you &#8230;<\/font> &#8230; as the &lt;-Visual-&gt; &#8220;partner&#8221;<\/li>\n<\/ul>\n<p> &#8230; those two &#8220;partners&#8221; being a very familiar sight to bloggers and users of many a <a target=_blank title='Content Management System' href='http:\/\/en.wikipedia.org\/wiki\/Content_management_system'>CMS<\/a> (Content Management System).<\/p>\n<p>Some of the CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_border-style.asp' title='CSS border-style property information from w3schools'>border-style<\/a> properties are really snazzy, and somehow being able to compare the &#8230;<\/p>\n<ul>\n<li>HTML div elements with a border and no content initially, but you <font size=1>&#8230; yes, you &#8230;<\/font> can add content dynamically (via an HTML textarea element) &#8230; compared to (or perhaps matching the look of via the &#8220;generic&#8221; user controls further up the HTML element editing &#8220;table&#8221; of this web application) &#8230; to the &#8230;<\/li>\n<li>HTML hr (horizontal rule) element<\/li>\n<\/ul>\n<p> &#8230; got our styling creative juices going <font size=1>&#8230; damn! &#8230; orange juice again!<\/font><\/p>\n<p>Why not try this tool yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html\" title=\"Click picture\">live run<\/a> link with underlying HTML and Javascript and bits of CSS as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html_GETME\">nocontent_bordered_div_vs_hr.html<\/a> that is downloadable as usual?<\/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='#d35700' onclick='var dv=document.getElementById(\"d35700\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35700' 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='#d35727' onclick='var dv=document.getElementById(\"d35727\"); 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='d35727' 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='#d36837' onclick='var dv=document.getElementById(\"d36837\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36837' 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='#d36876' onclick='var dv=document.getElementById(\"d36876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36876' 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='#d36886' onclick='var dv=document.getElementById(\"d36886\"); 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='d36886' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are a regular at this blog you&#8217;ll no doubt have tweaked that we are very keen to use Javascript&#8217;s document.body&#8217;s onload event to add flexibility to proceedings. Today, though, it is an awareness of a web application&#8217;s data &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-contenteditable-onload-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":[103,187,1580,2442,342,409,452,1533,576,587,590,599,1525,609,652,2505,830,860,870,1712,1861,997,1761,2506,2334,1238,1581,1262,2005,1319,1360],"class_list":["post-36886","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-cards","tag-cell","tag-contenteditable","tag-div","tag-external-javascript","tag-form","tag-get","tag-html","tag-iframe","tag-image","tag-img","tag-innerhtml","tag-input","tag-javascript","tag-name","tag-navigation","tag-onblur","tag-onload","tag-onsubmit","tag-outerhtml","tag-programming","tag-prompt","tag-src","tag-submit","tag-table","tag-table-cell","tag-textarea","tag-tool","tag-tutorial","tag-value"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36886"}],"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=36886"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36886\/revisions"}],"predecessor-version":[{"id":50784,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36886\/revisions\/50784"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}