{"id":53969,"date":"2021-11-18T03:01:05","date_gmt":"2021-11-17T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53969"},"modified":"2024-09-08T16:59:12","modified_gmt":"2024-09-08T06:59:12","slug":"html-editor-html-tag-list-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editor-html-tag-list-tutorial\/","title":{"rendered":"HTML Editor HTML Tag List Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Editor HTML Tag List Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/html_editor_bigtaglist.jpg\" title=\"HTML Editor HTML Tag List Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Editor HTML Tag List Tutorial<\/p><\/div>\n<p>We&#8217;re revisiting our inhouse HTML Editor last talked about with <a title='HTML Editor Inline HTML Email Tutorial' href='#htmleihtmlet'>HTML Editor Inline HTML Email Tutorial<\/a> looking for &#8230;<\/p>\n<ul>\n<li>extensions to functionality &#8230; that &#8230;<\/li>\n<li>improve the user experience<\/li>\n<\/ul>\n<p> &#8230; and the first we thought of was to add to our HTML Tag dropdown&#8217;s contents with a more fully fleshed out list and &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-----------GETME' rel=\"noopener\">the changed<\/a> HTML parent <a target=\"_blank\" title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-----------GETME' rel=\"noopener\">do_away_with_the_boring_bits.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\" title=\"Click picture\" rel=\"noopener\">web application<\/a> utilizes that midair feeling <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a>\/<a target=\"_blank\" title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData' rel=\"noopener\">FormData<\/a> methodology &#8230;<br \/>\n<code><br \/>\nfunction showStuff() {<br \/>\n  if (zhr != null) {<br \/>\n  if (zhr.readyState == 4) {<br \/>\n    if (zhr.status == 200) {<br \/>\n   <font color=blue>if (emailee == '') {<br \/>\n    var tagsare=zhr.responseText.split('&lt;td&gt;&amp;lt;');<br \/>\n    var oselnis=document.getElementById('seln0');<br \/>\n    var oselnisih=oselnis.innerHTML;<br \/>\n    var thistagis='';<br \/>\n    oselnis.innerHTML+='&lt;option title=\"h5_0\" value=\"' + ('&lt;h5&gt;&lt;\/h5&gt;') + '\"&gt;' + ('&lt;h5&gt;&lt;\/h5&gt;').replace(\/\\&lt;\/g,'&amp;lt;').replace(\/\\&gt;\/g,'&amp;gt;') + '&lt;\/option&gt;';<br \/>\n    oselnis.innerHTML+='&lt;option title=\"h6_0\" value=\"' + ('&lt;h6&gt;&lt;\/h6&gt;') + '\"&gt;' + ('&lt;h6&gt;&lt;\/h6&gt;').replace(\/\\&lt;\/g,'&amp;lt;').replace(\/\\&gt;\/g,'&amp;gt;') + '&lt;\/option&gt;';<br \/>\n    for (var itags=2; itags&lt;tagsare.length; itags++) {<br \/>\n      thistagis='&lt;' + tagsare[itags].split('&amp;gt;')[0] + '&gt;';<br \/>\n      if (oselnisih.toLowerCase().indexOf(tagsare[itags].split('&amp;gt;')[0].toLowerCase() + '_0') == -1) {<br \/>\n        oselnis.innerHTML+='&lt;option title=\"' + tagsare[itags].split('&amp;gt;')[0].toLowerCase() + '_0\" value=\"' + thistagis + '&lt;\/' + thistagis.substring(1) + '\"&gt;' + (thistagis + '&lt;\/' + thistagis.substring(1)).replace(\/\\&lt;\/g,'&amp;lt;').replace(\/\\&gt;\/g,'&amp;gt;') + '&lt;\/option&gt;';<br \/>\n      }<br \/>\n    }<br \/>\n    }<\/font> else if ((emailee + '  ').substring(0,1).toUpperCase() == (emailee + '  ').substring(0,1) && (emailee + '  ').substring(1).substring(0,1).toLowerCase() == (emailee + '  ').substring(1).substring(0,1)) {<br \/>\n    alert('Email sent to ' + emailee);<br \/>\n   } else {<br \/>\n    alert('Email sent to ' + emailee + ' ... ' + zhr.responseText);<br \/>\n   }<br \/>\n    zhr=null;<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction ajaxit() {<br \/>\n   var urlis='HTTP:\/\/dev.to\/flippedcoding\/the-ultimate-html5-tag-list-4i2a';<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zform=new FormData();<br \/>\n   zform.append('tags', urlis);<br \/>\n   zhr.open('post', document.URL.replace('.html','.php').replace('.htm','.php'), true);<br \/>\n   zhr.onreadystatechange = showStuff;<br \/>\n   zhr.send(zform);<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; <font color=blue>to glean a more fully fleshed out HTML Tag list<\/font> calling on &#8230;<\/li>\n<li><a target=\"_blank\" title='do_away_with_the_boring_bits.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.php---GETME' rel=\"noopener\">the changed<\/a> PHP helper <a target=\"_blank\" title='do_away_with_the_boring_bits.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.php---GETME' rel=\"noopener\">do_away_with_the_boring_bits.php<\/a> <a target=\"_blank\" href='http:\/\/www.w3schools.com\/php\/func_filesystem_file_exists.asp' title='PHP file_exists' rel=\"noopener\">file_exists<\/a><\/i> and <a target=\"_blank\" href='http:\/\/www.w3schools.com\/php\/func_filesystem_file_get_contents.asp' title='PHP file_get_contents' rel=\"noopener\">file_get_contents<\/a> called &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['tags'])) {<br \/>\n    echo file_get_contents(str_replace('+', ' ', urldecode($_POST['tags'])));<br \/>\n    exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; <a target=\"_blank\" href='\/\/dev.to\/flippedcoding\/the-ultimate-html5-tag-list-4i2a' rel=\"noopener\">The Ultimate HTML5 Tag List<\/a> &#8220;font of all knowledge&#8221; link, thanks, resource\n<\/li>\n<\/ul>\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\/html-editor-html-tag-list-tutorial\/' rel=\"noopener\">HTML Editor HTML Tag List Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmleihtmlet'>Previous relevant <a target=\"_blank\" title='HTML Editor Inline HTML Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-editor-inline-html-email-tutorial\/' rel=\"noopener\">HTML Editor Inline HTML Email 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\/do_away_with_the_boring_bits.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Editor Inline HTML Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/inline_email_html_via_textarea.jpg\" title=\"HTML Editor Inline HTML Email Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Editor Inline HTML Email Tutorial<\/p><\/div>\n<p>We&#8217;re revisiting <a title='CSS 3D Transformation Matrix Making Of Interactive Javascript Tutorial' href='#css3dtmmoijt'>CSS 3D Transformation Matrix Making Of Interactive Javascript Tutorial<\/a> because we wanted to add &#8230;<\/p>\n<ul>\n<li>Inline HTML Email (or (HTML Email Attachment) &#8230; and &#8230;<\/li>\n<li>Iframe Srcdoc attribute HTML content<\/li>\n<\/ul>\n<p> &#8230; additional functionality streams to this attempt by us encouraging the &#8220;try out&#8221; of HTML, to see a result, by you, the user.<\/p>\n<p>You may know that we have talked quite a bit about the variety of email client acceptance of various parts of the huge HTML(5) range of element styling possibilities out there for the web browsers.   This got us to convert &#8220;absolute image URLs&#8221; to &#8220;data URI&#8221; in order to allow our Apple Mail (but not Gmail Webmail) email client show an image that an emailee sees as they open the email (ie. Inline HTML Email).  But this new functionality is another tool you can use to see what can work, or not, with Inline HTML Emails.  Should something not work in the HTML you write into the HTML textarea element that is your &#8220;HTML Editor&#8221;, then you can possibly get more success sending an HTML Attachment by defining your email address as a mixed case string (first uppercase).<\/p>\n<p>At first, we thought we&#8217;d send the data URIs from our HTML parent to the PHP email creator child process, but this arrangement had two weaknesses &#8230;<\/p>\n<ul>\n<li>data size &#8230; even for method=POST use of Ajax\/FormData methodologies &#8230;<\/li>\n<li>the dreaded &#8220;+&#8221; crucial to survive as &#8220;+&#8221; in data URIs<\/li>\n<\/ul>\n<p> &#8230; so we ended up, in <a target=\"_blank\" title='emailhtml.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php---------GETME' rel=\"noopener\">the changed<\/a> PHP email creator (<a target=\"_blank\" title='emailhtml.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php---------GETME' rel=\"noopener\">emailhtml.php<\/a>) child process, flagging a list of &#8230;<\/p>\n<table style='width:95%;' border=20>\n<tr>\n<th>Image URL<\/th>\n<th> &#8230; gets converted to &#8230;<\/th>\n<th>Data URI<\/th>\n<th> &#8230; before sending data off in the email via $_POST[&#8216;inline&#8217;] &#8230;<\/th>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'> &#8230; preparing arrays &#8230;<\/td>\n<td colspan=3><code><br \/>\n$fromu=[\"\"];<br \/>\n$tou=[\"\"];<br \/>\n<br \/>\nforeach( $_POST as  $name=&gt;$val ) {<br \/>\n  if ($name == \"inline\") {<br \/>\n    if (strpos((\"~\" . strtolower(str_replace(\"+\",\" \",urldecode($val)))), \"~http\") !== false) {<br \/>\n     $fromu=explode(\",\", str_replace(\"+\",\" \",urldecode($val)));<br \/>\n     $ifromto=sizeof($fromu);<br \/>\n     for ($ijkh=0; $ijkh&lt;$ifromto; $ijkh++) {<br \/>\n      $tou[$ijkh]='data:image\/' . str_replace('jpg','jpeg',strtolower(explode('.',$fromu[$ijkh])[-1 + sizeof(explode('.',$fromu[$ijkh]))])) . ';base64,' . base64_encode(file_get_contents(str_replace(\"https:\",\"http:\",str_replace(\"HTTPS:\",\"http:\",str_replace(\"Https:\",\"http:\",$fromu[$ijkh])))));<br \/>\n     }<br \/>\n     $val=\"\";<br \/>\n    }<br \/>\n    \/\/ more $_POST['inline'] code goes here<br \/>\n  }<br \/>\n  \/\/ more $_POST[] code here<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<tr>\n<td style='vertical-align:top;'> &#8230; later helping amend absolute URLs (in) to data URIs (out) in the HTML of $phpcont &#8230; <\/td>\n<td colspan=3>\n<code><br \/>\n    if ($fromu[0] != \"\") {<br \/>\n     for ($ijkh=0; $ijkh&lt;$ifromto; $ijkh++) {<br \/>\n      $phpcont=str_replace($fromu[$ijkh], $tou[$ijkh], $phpcont);<br \/>\n     }<br \/>\n    }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; that may fall into context if we show you <a target=\"_blank\" title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-------GETME' rel=\"noopener\">the changed<\/a> new parent HTML (<a target=\"_blank\" title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-------GETME' rel=\"noopener\">do_away_with_the_boring_bits.html<\/a>) <font color=blue>buttons<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;h1&gt;Try Your Own HTML<font color=blue> ... as &lt;input onclick=emailit(); type=button value='Inline Email'&gt;&lt;\/input&gt; ... as &lt;input onclick=srcdocit(); type=button value='Iframe Srcdoc'&gt;&lt;\/input&gt;<\/font>&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; Javascript functions needed for this new work, as per &#8230;<\/p>\n<p><code><br \/>\nvar emailee=\"\";<br \/>\nvar zhr=null, zform=null, img1=null, imgw=0, imgh=0, subthis=[];<br \/>\nvar dvalue='', dvaluesmall='', inlineis='';<br \/>\n<br \/>\nfunction convertoBase64Image(img) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24972617\/using-localstorage-base64-image-in-chrome-content-script<br \/>\n<br \/>\n  \/\/ Create an empty canvas element<br \/>\n  var canvas = document.createElement(\"canvas\");<br \/>\n  var ctx = canvas.getContext('2d');<br \/>\n  canvas.width = img.width;<br \/>\n  canvas.height = img.height;<br \/>\n<br \/>\n  \/\/ Copy the image contents to the canvas<br \/>\n  var ctx = canvas.getContext(\"2d\");<br \/>\n  ctx.drawImage(img, 0, 0);<br \/>\n<br \/>\n  \/\/ Get the data-URL formatted image<br \/>\n  \/\/ Firefox supports PNG and JPEG. You could check img.src to guess the<br \/>\n  \/\/ original format, but be aware the using \"image\/jpg\" will re-encode the image.<br \/>\n  var dataURL = canvas.toDataURL(\"image\/png\");<br \/>\n  return dataURL; \/\/.replace(\/^data:image\\\/(png|jpg);base64,\/, \"\");<br \/>\n}<br \/>\n<br \/>\nfunction emailit() {<br \/>\n  var avalues=[],ivalues=0, imagenameidea='', prei='', pidea='URL(';<br \/>\n   dvalue='';<br \/>\n   dvaluesmall='';<br \/>\n   inlineis='';<br \/>\n   dvaluesmall=document.getElementById('htmlcontent').value.replace(\/\\'\\\/\\\/\/g, \"'http:\/\/\").replace(\/\\\"\\\/\\\/\/g, '\"http:\/\/');<br \/>\n   dvalue=dvaluesmall;<br \/>\n   if (document.getElementById('htmlcontent').value.toLowerCase().replace(\/\\'\/g,'').replace(\/\\\"\/g,'').replace(\/http\\:\/g,'').replace(\/https\\:\/g,'').replace(\/www\\.\/g,'').replace(\/\\\/\\\/\/g,'').indexOf('url(rjmprogramming.com.au\/') != -1) {<br \/>\n    avalues=document.getElementById('htmlcontent').value.split('rjmprogramming.com.au\/');<br \/>\n    for (ivalues=1; ivalues&lt;avalues.length; ivalues++) {<br \/>\n      imagenameidea=avalues[ivalues].split(')')[0];<br \/>\n      pidea='URL(';<br \/>\n      if (avalues[eval(-1 + ivalues)].indexOf(pidea) == -1 && avalues[eval(-1 + ivalues)].indexOf('url(') != -1) {  pidea='url(';   }<br \/>\n      if (avalues[eval(-1 + ivalues)].indexOf(pidea) == -1 && avalues[eval(-1 + ivalues)].indexOf('Url(') != -1) {  pidea='Url(';   }<br \/>\n      if (avalues[eval(-1 + ivalues)].indexOf(pidea) != -1) {<br \/>\n        prei=avalues[eval(-1 + ivalues)].split(pidea)[eval(-1 + avalues[eval(-1 + ivalues)].split(pidea).length)];<br \/>\n        \/\/alert(prei);<br \/>\n        if (prei != '') {<br \/>\n          if (prei.substring(0,1) == \"'\" || prei.substring(0,1) == '\"') {<br \/>\n            imagenameidea=prei.substring(1) + 'rjmprogramming.com.au\/' + avalues[ivalues].split(prei.substring(0,1))[0];<br \/>\n            if (inlineis == '') {<br \/>\n              inlineis=imagenameidea; \/\/'..\/' + avalues[ivalues].split(prei.substring(0,1))[0];<br \/>\n            } else {<br \/>\n              inlineis+=',' + imagenameidea; \/\/'..\/' + avalues[ivalues].split(prei.substring(0,1))[0];<br \/>\n            }<br \/>\n            img1 = document.createElement('img');<br \/>\n            img1.title=subthis.length;<br \/>\n            subthis.push(imagenameidea);<br \/>\n            img1.onload = function() {  imgw=img1.width; imgh=img1.height;  dvalue=dvalue.replace(subthis[eval('' + img1.title)], convertoBase64Image(img1).replace(\/\\+\/g,'%20'));  };<br \/>\n            img1.src = imagenameidea;<br \/>\n          } else {<br \/>\n            if (inlineis == '') {<br \/>\n              inlineis=imagenameidea; \/\/'..\/' + imagenameidea.split('rjmprogramming.com.au\/')[1];<br \/>\n            } else {<br \/>\n              inlineis+=',' + imagenameidea; \/\/'..\/' + imagenameidea.split('rjmprogramming.com.au\/')[1];<br \/>\n            }<br \/>\n            img1 = document.createElement('img');<br \/>\n            img1.title=subthis.length;<br \/>\n            subthis.push(imagenameidea);<br \/>\n            img1.onload = function() {  imgw=img1.width; imgh=img1.height;  dvalue=dvalue.replace(subthis[eval('' + img1.title)], \"'\" + convertoBase64Image(img1).replace(\/\\+\/g,'%20') + \"'\");  };<br \/>\n            img1.src = imagenameidea;<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n   }<br \/>\n   emailee=prompt(\"Enter email address to try to receive the HTML you have below (noting that Inline HTML Emails only work for very simple HTML, so to force email attachment start with an uppercase character then lowercase), that will get a subject 'Inline HTML Test'\", emailee);<br \/>\n   if (emailee == null) { emailee=''; }<br \/>\n   if (emailee.indexOf('@') != -1) {<br \/>\n    if ((emailee + '  ').substring(0,1).toUpperCase() == (emailee + '  ').substring(0,1) && (emailee + '  ').substring(1).substring(0,1).toLowerCase() == (emailee + '  ').substring(1).substring(0,1)) {<br \/>\n     emailee=emailee; \/\/ ie. HTML attachment<br \/>\n    }<br \/>\n    setTimeout(andthen, 2000);<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction andthen() {<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zform=new FormData();<br \/>\n   zform.append('to', emailee);<br \/>\n   if ((emailee + '  ').substring(0,1).toUpperCase() == (emailee + '  ').substring(0,1) && (emailee + '  ').substring(1).substring(0,1).toLowerCase() == (emailee + '  ').substring(1).substring(0,1)) {<br \/>\n   zform.append('subject', 'HTML Attachment Test');<br \/>\n   zform.append('htmlis', dvaluesmall);<br \/>\n   } else {<br \/>\n   zform.append('subject', 'Inline HTML Test');<br \/>\n   zform.append('inline', inlineis);<br \/>\n   zform.append('htmlis', dvaluesmall); \/\/dvalue);<br \/>\n   }<br \/>\n   zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n   zhr.onreadystatechange = showStuff;<br \/>\n   zhr.send(zform);<br \/>\n   inlineis='';<br \/>\n   subthis=[];<br \/>\n}<br \/>\n<br \/>\nfunction srcdocit() {<br \/>\n  document.getElementById('isrcdoc').style.display='block';<br \/>\n  document.getElementById('isrcdoc').srcdoc=document.getElementById('htmlcontent').value;<br \/>\n  location.href='#isrcdoc';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; that you can try for yourself at this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link, or supervise the parent via <a target=\"_blank\" title='making_of.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/\/making_of.htm' rel=\"noopener\">our &#8220;making of&#8221; use of it<\/a>.<\/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\/html-editor-inline-html-email-tutorial\/' rel=\"noopener\">HTML Editor Inline HTML Email Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3dtmmoijt'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Making Of Interactive Javascript Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-interactive-javascript-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Making Of Interactive Javascript 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\/making_of.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Making Of Interactive Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/making_of_interactive_js.jpg\" title=\"CSS 3D Transformation Matrix Making Of Interactive Javascript Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Making Of Interactive Javascript Tutorial<\/p><\/div>\n<p>We&#8217;re moving on today from yesterday&#8217;s <a title='CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial' href='#css3dtmmoiit'>CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial<\/a> with &#8230;<\/p>\n<ul>\n<li>catering for some larger HTML data lengths<\/li>\n<li>catering for Javascript, but only Javascript placed after the &lt;body&gt; tag by placing this sort of HTML into a <a target=\"_blank\" href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools' rel=\"noopener\">window.open<\/a> popup window, meaning those other two &#8220;Display&#8221; table cells are the &#8220;static&#8221; display of the HTML frozen in time at the &#8220;onload&#8221; event with no Javascript in play (and it is only these popup windows that can add in that after &lt;body&gt; tag Javascript functionality)<\/li>\n<li>catering for &#8220;starting from scratch&#8221; HTML<\/li>\n<\/ul>\n<p><i>Catering for some larger HTML data lengths<\/i> was an issue we at first thought might involve navigation via an HTML form with method=POST (which we shaped to do) but a bit like a couple of days ago with <a target=\"_blank\" title='HTML Input Element Types Randomized History Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-history-tutorial\/' rel=\"noopener\">HTML Input Element Types Randomized History Tutorial<\/a> we found a better solution trying not to navigate at all.  This &#8220;try not to navigate at all&#8221; is becoming increasingly popular, especially since the increased use of the mobile platforms.   And so, what <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a> lost in &#8220;mobile land&#8221; for the lack of an <i>onmouseover<\/i> event it gained in ways of being an alternative thought to HTML form navigation (ie. sometimes, no visible navigation <font size>&#8230; apart from those busy ducks<\/font>).  We don&#8217;t involve Ajax, though, and we fell over ourselves forgetting we had HTML iframe elements involved, and with these you have &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings' rel=\"noopener\">Client Pre-emptive Iframe<\/a> technique <i>onload<\/i> event logics &#8230; which can benefit from &#8230;<\/li>\n<li>Javascript global var<font size=1>iables<\/font> collecting information along the way so that we can populate the <a target=\"_blank\" title='Do It Yourself HTML Editor Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-editor-integration-tutorial\/' rel=\"noopener\">Do It Yourself HTML Editor Integration Tutorial<\/a> HTML Editor iframe element&#8217;s &#8230;\n<ol>\n<li>left HTML textarea <i>HTML<\/i> &#8230; and &#8230;<\/li>\n<li>right HTML iframe <i>Display<\/i><\/li>\n<\/ol>\n<p> &#8230; with appropriate Javascript global var<font size=1>iable<\/font> data, directly, when its length would break the length limits on a URL\n<\/li>\n<\/ul>\n<p><i>Catering for &#8220;starting from scratch&#8221; HTML<\/i> was just the case of allowing an <i>onclick<\/i> event of the right hand table cell take you to logic where you fill in a Javascript prompt window with the entire HTML of interest to you.  Hence our interest, also, in the possibility for large data sets, and they could occur with the <a target=\"_blank\" title='Do It Yourself HTML Editor Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-editor-integration-tutorial\/' rel=\"noopener\">Do It Yourself HTML Editor Integration Tutorial<\/a> HTML Editor textarea user interactions as well.<\/p>\n<p>In summary, here is the HTML and Javascript and CSS you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.html--GETME\" title=\"making_of.htm\" rel=\"noopener\">making_of.htm<\/a> and which changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.html--GETME\" title=\"making_of.htm\" rel=\"noopener\">this way<\/a> to allow this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.htm\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link to work with those bigger data sets, and for you to fully define your incoming HTML and to allow for some limited Javascript functionalities.<\/p>\n<hr>\n<p id='css3dtmmoiit'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-interactive-integration-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Making Of Interactive Integration 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\/making_of.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/making_of_interactive_more.jpg\" title=\"CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial<\/p><\/div>\n<p>Do you remember our HTML textarea (like CMSs use) based <a target=\"_blank\" title='Do It Yourself HTML Editor Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-editor-integration-tutorial\/' rel=\"noopener\">Do It Yourself HTML Editor Integration Tutorial<\/a> HTML Editor series of blog postings?  Yes, yesterday&#8217;s <a title='CSS 3D Transformation Matrix Making Of Interactive Tutorial' href='#css3dtmmoit'>CSS 3D Transformation Matrix Making Of Interactive Tutorial<\/a> intimated we might integrate these two (that and today&#8217;s), and today we do.  We think they work well together, and together this way, are good candidates to bear out the message of <a target=\"_blank\" title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/' rel=\"noopener\">HTML Textarea and Div Talents Primer Tutorial<\/a> that both have their &#8220;talents&#8221; as per the table &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>\n<p>But their strengths and weaknesses go like this, at least to us, in the limited HTML text view of things &#8230;<\/p>\n<p><\/p>\n<table border=100>\n<tr>\n<th>Text Functionality Issue<\/th>\n<th>HTML Element Type<\/th>\n<th>Strength<\/th>\n<th>Weakness (where a &#8220;Yes&#8221; is like &#8230; &#8220;Oh No!&#8221;)<\/th<\/tr>\n<tr>\n<td rowspan=2>Display Monocolour Text<\/td>\n<td>Textarea<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td rowspan=2>Display Editable Text<\/td>\n<td>Textarea<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div<\/th>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<tr>\n<td rowspan=2>Display Multicolour Text<\/td>\n<td>Textarea<\/th>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Div<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<\/table>\n<\/blockquote>\n<p> &#8230; the extension of that lesson above, today, being that there are other stand-in HTML elements like the HTML div element with these discussions.  Today&#8217;s example is the HTML td (table cell) element, that can, like the HTML div element, allow multicoloured and highlighted text, whereas the HTML textarea editing &#8220;talents&#8221; extend to that way an HTML textarea element, &#8220;under the hood&#8221; allows the use of the caret characters (&#8220;&lt;&#8221; and &#8220;&gt;&#8221;) in its very makeup, while with those highlighting HTML div and td type elements that look of &#8220;&lt;&#8221; and &#8220;&gt;&#8221; is achieved, as a display, by mapping these characters to the HTML entities &#8220;&amp;lt;&#8221; and &#8220;&amp;gt;&#8221; respectively.<\/p>\n<p>And so far we&#8217;ve integrated the <a target=\"_blank\" title='Do It Yourself HTML Editor Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-editor-integration-tutorial\/' rel=\"noopener\">Do It Yourself HTML Editor Integration Tutorial<\/a> HTML Editor into this &#8220;CSS 3D Transformation Matrix Making Of Interactive&#8221; web application via an HTML iframe element hosting of it &#8230;<\/p>\n<p><code><br \/>\nfunction anotherview() {   \/\/ the parent HTML <i>a<\/i> link onclient event logic<br \/>\n   var hprefix='&lt;html&gt;&lt;body&gt;', hsuffix='&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n   var ih=document.getElementById('isdisplay').innerHTML;<br \/>\n   wis='' + eval(eval(window.<a target=\"_blank\" title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle' rel=\"noopener\">getComputedStyle<\/a>(document.getElementById('isdisplay'), null).getPropertyValue(\"width\").replace('px','')) - 0) + 'px'; \/\/ parent table cell (td) width<br \/>\n   his='' + eval(eval(window.getComputedStyle(document.getElementById('isdisplay'), null).getPropertyValue(\"height\").replace('px','')) - 0) + 'px'; \/\/ parent table cell (td) height<br \/>\n   document.getElementById('anotherapproach').style.display='block';<br \/>\n   if (ih.toLowerCase().indexOf('&lt;html') != -1 &#038;& ih.toLowerCase().indexOf('&lt;body') != -1) {<br \/>\n     hprefix='';<br \/>\n   } else if (ih.toLowerCase().indexOf('&lt;body') != -1) {<br \/>\n     hprefix=ih.substring(0,ih.toLowerCase().indexOf('&lt;body'));<br \/>\n     ih=ih.substring(ih.toLowerCase().indexOf('&lt;body'));<br \/>\n   }<br \/>\n   if (ih.toLowerCase().indexOf('&lt;\/html&gt;') != -1 &#038;& ih.toLowerCase().indexOf('&lt;\/body&gt;') != -1) {<br \/>\n     hsuffix='';<br \/>\n   } else if (ih.toLowerCase().indexOf('&lt;\/body&gt;') != -1) {<br \/>\n     hsuffix='&lt;\/html&gt;';<br \/>\n   }<br \/>\n   if (document.URL.indexOf('localhost:8888') == -1) {<br \/>\n   document.getElementById('anotherapproach').src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html?htmlcontent=\" + encodeURIComponent(hprefix + ih + hsuffix) + \"&#038;urlprefix=\";<br \/>\n   } else {<br \/>\n   document.getElementById('anotherapproach').src=\"http:\/\/localhost:8888\/do_away_with_the_boring_bits.html?htmlcontent=\" + encodeURIComponent(hprefix + ih + hsuffix) + \"&#038;urlprefix=\";<br \/>\n   }<br \/>\n   location.hash='#anotherapproach';<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction checki(iois) {  \/\/ using <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings' rel=\"noopener\">Client Pre-emptive Iframe<\/a> techniques to adjust iframe's iframe's width and height via parent table cell (td) width and height as calculated above<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n     if (aconto.body != null) {<br \/>\n       if (wis != '') aconto.getElementById('ihtmlcontent').style.width=wis;<br \/>\n       if (his != '') aconto.getElementById('ihtmlcontent').style.height=his;<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; so that the HTML and Javascript and CSS has become downloadable <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.html-GETME\" title=\"making_of.htm\" rel=\"noopener\">making_of.htm<\/a> which changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.html-GETME\" title=\"making_of.htm\" rel=\"noopener\">this way<\/a> to allow this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.htm\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link to work.  You will notice that the &#8220;one-way&#8221; code functions above change a lot to make it the &#8220;two-way&#8221; integration it is now, and rather than confuse you here, will let you see the changes for yourself.  &#8220;Two-way&#8221; means that once you involve the other HTML (textarea) Editor and change you make to the HTML here will go the full circle back to our &#8220;CSS 3D Transformation Matrix Making Of Interactive&#8221; editor for that other mode of changing it, and around and around it can go from there.<\/p>\n<p>The other new CSS you will see in code above (and for which this <a target=\"_blank\" title='CSS onhover ideas useful link, thanks' href='http:\/\/www.developerdrive.com\/2015\/01\/8-simple-css-hover-effects\/' rel=\"noopener\">useful link<\/a> inspired us, thanks) is about some <i>onhover<\/i> or <i>onmouseover<\/i> non-mobile platform functionality we&#8217;ve introduced to that parent table cell (td) element&#8217;s contents, which get internally broken into clickable HTML span elements with some attention grabbing &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n#sanother:hover, span:hover {<br \/>\n        border: 3px solid red; \/\/dashed #3a7999;<br \/>\n        display: block;<br \/>\n\tbackground: rgba(0,0,0,0);<br \/>\n\tpadding: 4px 4px 4px 4px;<br \/>\n\tborder-radius: 15px;<br \/>\n\tbox-shadow: inset 0 0 0 2px #3a7999;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that is also applied to the new HTML <i>a<\/i> link that gets the user to the integrated <a target=\"_blank\" title='Do It Yourself HTML Editor Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-editor-integration-tutorial\/' rel=\"noopener\">Do It Yourself HTML Editor Integration Tutorial<\/a> HTML (textarea) Editor.<\/p>\n<p>Along the way, this project change, during unit testing, showed to us a weakness with the <a target=\"_blank\" title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp' rel=\"noopener\"><i>HTTP Cookie<\/i><\/a> management system we set up, first, with <a target=\"_blank\" title='Job Search Grid Game Cookie Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/job-search-grid-game-cookie-tutorial\/' rel=\"noopener\">Job Search Grid Game Cookie Tutorial<\/a>&#8216;s Javascript <a target=\"_blank\" title='cookie_get.js-GETME' href='http:\/\/www.rjmprogramming.com.au\/cookie_get.js-GETME' rel=\"noopener\">cookie_get.js<\/a> specifically if removal of HTTP Cookies logic, where we found out it can be <b>important to specify<\/b>, in our case, for a cookie called &#8220;bugalugs&#8221; &#8230;<\/p>\n<p><code><br \/>\ndocument.cookie = \"bugalugs=;<b>path=\/;<\/b>expires=0\";<br \/>\n<\/code><\/p>\n<p> &#8230; the &#8220;scope&#8221; (ie. path) to your HTTP Cookie, and which you can see from our <a target=\"_blank\" title='cookie_get.js-GETME' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/cookie_get.js-GETME' rel=\"noopener\">changed code<\/a>.<\/p>\n<hr>\n<p id='css3dtmmoit'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Making Of Interactive Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-interactive-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Making Of Interactive 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\/making_of.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Making Of Interactive Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/making_of_interactive.jpg\" title=\"CSS 3D Transformation Matrix Making Of Interactive Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Making Of Interactive Tutorial<\/p><\/div>\n<p>The recent <a title='CSS 3D Transformation Matrix Making Of Tutorial' href='#css3dtmmot'>CSS 3D Transformation Matrix Making Of Tutorial<\/a> got us to thinking more about linking &#8230;<\/p>\n<ul>\n<li>what you see on a webpage &#8230; to &#8230;<\/li>\n<li>what you see as raw HTML (even inline Javascript and CSS) &#8230; which, to all intents and purposes is what you &#8220;arrange&#8221; when you work in <a target=\"_blank\" title='Content Management System information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system' rel=\"noopener\">CMS<\/a> (Content Management Systems) &#8230;<\/li>\n<\/ul>\n<p> &#8230; which, surely, is the core of &#8220;content editing&#8221;.  The dual purpose is to create a generic tool to teach some HTML via inline CSS, primarily, but also a bit with inline Javascript, so that you can break up a slightly complex scenario into HTML bits and pieces that make it display the way it does, and you (<font size=1>wake up!<\/font>) the user can change the HTML to see what happens on the display and go &#8230; <font size=1>wake up!<\/font> &#8230; <font size=2>ooh! aah!<\/font> &#8230; and perhaps realize it&#8217;s a lovely day to get out and about!<\/p>\n<p>We&#8217;ve tried this HTML editing before with <a target=\"_blank\" title='Do It Yourself HTML Editor Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-editor-integration-tutorial\/' rel=\"noopener\">Do It Yourself HTML Editor Integration Tutorial<\/a> and which we may think about integrating with, but today&#8217;s idea is a change in tack where the &#8220;stream of HTML consciousness&#8221; can be broken up more, and think that most of us get more understanding when something textual can be linked with something graphical, as in a real HTML output display, a step like WordPress (or many other CMS product) (HTML) <i>textarea<\/i> element editor&#8217;s <i>Visual<\/i> tab giving you a WYSIWYG (what you see is what you get) view of what the <i>HTML<\/i> tab shows you (as the duck swimming for all its worth) workings underneath.  But as tempting as that WordPress <i>Visual<\/i> tab is, especially if you are scared of HTML, just editing in that <i>Visual<\/i> tab can have its pitfalls, which you can read a bit about <a target=\"_blank\" title='Useful link, thanks' href='https:\/\/au.godaddy.com\/community\/WordPress-Websites\/WordPress-Editor-How-To-Visual-and-Text-Tabs\/ta-p\/47108' rel=\"noopener\">here<\/a>.  And so, rather than trying to scare you out of CMS, heaven forbid, we&#8217;d rather direct you to improve your <i>HTML<\/i> &#8230; yay!<\/p>\n<p>In this line of thinking, when you talk CMS you should read <a target=\"_blank\" title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/' rel=\"noopener\">HTML Textarea and Div Talents Primer Tutorial<\/a> as related material.<\/p>\n<p>You can try this &#8220;pilot&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> that has the generic event logic but, so far, &#8220;un-&#8220;generic content <i>primer<\/i>, that if to you looks familiar, is because it came from the blog posting thread we last left off with at <a title='CSS 3D Transformation Matrix Making Of Tutorial' href='#css3dtmmot'>CSS 3D Transformation Matrix Making Of Tutorial<\/a> as shown below.  And the HTML and Javascript and CSS basis to that &#8220;live run&#8221; is via the source code <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/making_of.html_GETME\" title=\"making_of.html\" rel=\"noopener\">making_of.html<\/a> for your perusal.  It works by you being able to click on snippets of HTML that go and change a WYSIWYG display to the left of it &#8230; <font size=2>left chosen because &#8230; <\/font><font size=1>wake up!<\/font><\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/new-css-3d-transformation-matrix-making-of-interactive-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Making Of Interactive Tutorial<\/a>.<\/p>\n<hr>\n<p id='css3dtmmot'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Making Of Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix Making Of 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\/making_of.jpg\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Making Of Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/making_of.jpg\" title=\"CSS 3D Transformation Matrix Making Of Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Making Of Tutorial<\/p><\/div>\n<p>It was &#8220;line ball&#8221; as to whether the &#8220;making of&#8221; our <a title='CSS 3D Transformation Matrix Primer Tutorial' href='#css3dtmpt'>CSS 3D Transformation Matrix Primer Tutorial<\/a> some time back was harder than the programming involved in its &#8220;cut to the chase&#8221; web application&#8217;s code.  This, we find, embarrassing, though we find CSS styling a lot harder than Javascript DOM as far as the client side of web applications &#8220;production&#8221; goes.<\/p>\n<p>The thing about that tutorial&#8217;s &#8230;<\/p>\n<blockquote onclick=\"window.open('http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php','_blank');\" style='cursor:pointer;background-color:transparent;'>\n<div style=\"vertical-align:top;color:red;width:100%;text-align:right; background: -webkit-linear-gradient(#BBB, white) bottom repeat; background: linear-gradient(#BBB, white) bottom repeat; \"><b><i>&#8220;Nala! Put down that<br \/> matrix3d(0.7751,1.854,0,0,<br \/> 0,1.3861,0,0, 0,0,1,0,<br \/> -0.0004308,0.003552,0,1)<br \/> &#8216;deformed&#8217; soft toy, we think<br \/> you&#8217;ll find belongs to Luna &#8230; <br \/>Naaaalllllaaaa!&#8221;<\/i><\/b><\/p>\n<div style=\"margin-top:-165px;margin-right:290px;text-align:right;height:195px;color:transparent;background:URL('http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoBooth_flickr.jpg');background-position:-140px -400px;background-repeat:no-repeat;  -webkit-filter: brightness(220%);filter: brightness(220%);\"><i>Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,<br \/> -0.000430821,0.00355248,0,1)<br \/> &#8220;deformed&#8221; soft toy, that<br \/> we think you&#8217;ll find belongs to Luna &#8230; Naaaalllllaaaa!<\/i>\n<\/div>\n<\/div>\n<div style=\"margin-top:30px;\"> &#8230; and don&#8217;t think that&#8217;s going to cut the mustard at the next World Symposium of Transformation Matr<strike>esses<\/strike>ices 2017 &#8230; &#8220;The Future Is Ahead of One<font size=1>sies<\/font>&#8220;.<\/div>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<p> &#8230; &#8220;making of&#8221; picture (we are going to refer to as &#8220;production&#8221; in blurb below) is that it took a long while to get it looking this way, as basically the <i>blockquote<\/i> element we wanted it to end up as, so that a little of a <i>blockquote<\/i>&#8216;s shadowing could be hinted at with this work.  But let&#8217;s show you its HTML (with inline CSS) innards and explain more &#8230;<\/p>\n<p>&lt;<i>blockquote<\/i> <b>onclick=&#8221;window.open(&#8216;http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php&#8217;,&#8217;_blank&#8217;);&#8221;<\/b> style=&#8217;<font color=green>cursor:pointer;<\/font><font color=brown>background-color:transparent;<\/font>&#8216;&gt;&lt;div style=&#8221;<font color=magenta>vertical-align:top;<\/font>color:red;<font color=magenta>width:100%;text-align:right;<\/font> <font color=brown>background: -webkit-linear-gradient(#BBB, white) bottom repeat; background: linear-gradient(#BBB, white) bottom repeat;<\/font> <font color=orange>&#8220;&gt;&lt;b&gt;&lt;i&gt;&#8221;Nala! Put down that&lt;br&gt; matrix3d(0.7751,1.854,0,0,&lt;br&gt; 0,1.3861,0,0, 0,0,1,0,&lt;br&gt; -0.0004308,0.003552,0,1)&lt;br&gt; &#8216;deformed&#8217; soft toy, we think&lt;br&gt; you&#8217;ll find belongs to Luna &#8230; &lt;br&gt;Naaaalllllaaaa!&#8221;&lt;\/i&gt;&lt;\/b&gt;<\/font>&lt;div style=&#8221;<font color=purple>margin-top:-165px;margin-right:290px;<\/font>text-align:right;<font color=purple>height:195px;<\/font><font color=brown>color:transparent;<\/font><font color=red>background:URL(&#8216;http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoBooth_flickr.jpg&#8217;);<\/font><font color=purple>background-position:-140px -400px;<\/font><font color=blue>background-repeat:no-repeat;  -webkit-filter: brightness(220%);filter: brightness(220%);<\/font><font color=orange>&#8220;&gt;&lt;i&gt;Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,&lt;br&gt; -0.000430821,0.00355248,0,1)&lt;br&gt; &#8220;deformed&#8221; soft toy, that&lt;br&gt; we think you&#8217;ll find belongs to Luna &#8230; Naaaalllllaaaa!&lt;\/i&gt;<\/font><br \/>\n&lt;\/div&gt;&lt;\/div&gt;&lt;div style=&#8221;<font color=purple>margin-top:30px;<\/font>&#8220;&gt;<font color=orange> &#8230; and don&#8217;t think that&#8217;s going to cut the mustard at the next World Symposium of Transformation Matr&lt;strike&gt;esses&lt;\/strike&gt;ices 2017 &#8230; &#8220;The Future Is Ahead of One&lt;font size=1&gt;sies&lt;\/font&gt;&#8221;.<\/font>&lt;\/div&gt;&lt;\/blockquote&gt;<font color=cyan>&lt;br&gt;&lt;br&gt;<\/font><br \/>\n<br \/>\n<font color=cyan>&lt;p&gt;&nbsp;&lt;\/p&gt;<\/font><\/p>\n<ul>\n<li><font color=red>The photograph is shown as a background image to an HTML div element<\/font><\/li>\n<li><font color=brown>Background and colour is based on a linear gradient overriding other background transparencies<\/font><\/li>\n<li><font color=purple>The ideal positioning (and cropping) of the background image may be a &#8220;suck it and see&#8221; operation<\/font><\/li>\n<li><font color=blue>A brightness filter is used to add more light to the &#8220;production&#8221;&#8216;s background photograph<\/font><\/li>\n<li><font color=green>Add a &#8220;link&#8221; feel to the &#8220;production&#8221; by using the normal &#8220;link&#8221; cursor<\/font><\/li>\n<li><font color=orange>The &#8220;production&#8221;&#8216;s wording<\/font><\/li>\n<li><font color=magenta>Top and right div element vertical and horizontal alignment is crucial to make sense of the <font color=purple>positioning<\/font><\/font><\/li>\n<li><font color=cyan>Spacing<\/font><\/li>\n<li><b>When clicking on any part of the &#8220;production&#8221; you get played a Nala video<\/b><\/li>\n<\/ul>\n<p>Looking back, the insistence on the use of <i>blockquote<\/i> may have added to the complexity, and the need for two div elements to become involved.<\/p>\n<p>Here are some links, we give thanks for, related to this &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='CSS3 overflow-y property' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_overflow-y.asp' rel=\"noopener\">CSS3 overflow-y property<\/a><\/li>\n<li><a target=\"_blank\" title='overflow-y Google search' href='https:\/\/www.google.com.au\/search?q=overflow-y&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=RLuwWaDcIeXDXvD2g8gF' rel=\"noopener\">overflow-y Google search<\/a><\/li>\n<li><a target=\"_blank\" title='Using CSS, can you apply a gradient mask to fade to the background over text? - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/9525215\/using-css-can-you-apply-a-gradient-mask-to-fade-to-the-background-over-text' rel=\"noopener\">Using CSS, can you apply a gradient mask to fade to the background over text? &#8211; Stack Overflow<\/a><\/li>\n<li><a target=\"_blank\" title='background image mask out bits on the right - Google search' href='https:\/\/www.google.com.au\/search?q=background+image+mask+out+bits+on+the+right&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=rqCwWc3LMqjM8gfAk7ywDA' rel=\"noopener\">background image mask out bits on the right &#8211; Google search<\/a><\/li>\n<li><a target=\"_blank\" title='matrix3d() - CSS | MDN' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-function\/matrix3d' rel=\"noopener\">matrix3d() &#8211; CSS | MDN<\/a><\/li>\n<li><a target=\"_blank\" title='webkit-brightness - Google search' href='https:\/\/www.google.com.au\/search?q=webkit-brightness&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=5qywWeCoM63M8geQmbLIDw' rel=\"noopener\">webkit-brightness &#8211; Google search<\/a><\/li>\n<li><a target=\"_blank\" title='Offset a background image from the right using CSS - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/5142405\/offset-a-background-image-from-the-right-using-css' rel=\"noopener\"><\/a><\/li>\n<li><a target=\"_blank\" title='Positioning Offset Background Images | CSS-Tricks' href='https:\/\/css-tricks.com\/positioning-offset-background-images\/' rel=\"noopener\">Offset a background image from the right using CSS &#8211; Stack Overflow<\/a><\/li>\n<li><a target=\"_blank\" title='background-offset - Google search' href='https:\/\/www.google.com.au\/search?q=background-offset&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=cqKwWfitCovp8weXiYngBg' rel=\"noopener\">background-offset &#8211; Google search<\/a><\/li>\n<li><a target=\"_blank\" title='\"background image mask out bits on the right\" - Google search' href='https:\/\/www.google.com.au\/search?client=firefox-b-ab&#038;dcr=0&#038;q=%22background+image+mask+out+bits+on+the+right%22&#038;oq=%22background+image+mask+out+bits+on+the+right%22&#038;gs_l=psy-ab.3...7322.9565.0.9744.2.2.0.0.0.0.196.196.0j1.1.0....0...1.1.64.psy-ab..1.0.0.NVse71R4wHA' rel=\"noopener\">&#8220;background image mask out bits on the right&#8221; &#8211; Google search<\/a><\/li>\n<li><a target=\"_blank\" title='CSS Clipping and Masking: Examples and Observations - Vanseo Design' href='http:\/\/vanseodesign.com\/css\/clipping-and-masking-examples\/' rel=\"noopener\">CSS Clipping and Masking: Examples and Observations &#8211; Vanseo Design<\/a><\/li>\n<li><a target=\"_blank\" title='CSS Clipping and Masking \u2014 Show and Hide Parts of Images and Elements' href='http:\/\/vanseodesign.com\/css\/clipping-and-masking\/' rel=\"noopener\">CSS Clipping and Masking \u2014 Show and Hide Parts of Images and Elements<\/a><\/li>\n<li><a target=\"_blank\" title='css - \"Inline\" border of a div - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/29404093\/css-outline-left-and-right' rel=\"noopener\">css &#8211; &#8220;Inline&#8221; border of a div &#8211; Stack Overflow<\/a><\/li>\n<li><a target=\"_blank\" title='outline-right - Google search' href='https:\/\/www.google.com.au\/search?q=outline-right&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=8Z6wWZfIN6vM8gezkLPABQ' rel=\"noopener\">outline-right &#8211; Google search<\/a><\/li>\n<li><a target=\"_blank\" title='css - \"Inline\" border of a div - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/41449861\/inline-border-of-a-div' rel=\"noopener\">css &#8211; &#8220;Inline&#8221; border of a div &#8211; Stack Overflow<\/a><\/li>\n<li><a target=\"_blank\" title='border inline - Google search' href='https:\/\/www.google.com.au\/search?q=border+inline&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=rZ6wWZzIK7PM8geD3LvIBw' rel=\"noopener\">border inline &#8211; Google search<\/a><\/li>\n<\/ul>\n<hr>\n<p id='css3dtmpt'>Previous relevant <a target=\"_blank\" title='CSS 3D Transformation Matrix Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-primer-tutorial\/' rel=\"noopener\">CSS 3D Transformation Matrix 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\/more_transform.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS 3D Transformation Matrix Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/transform_matrix.jpg\" title=\"CSS 3D Transformation Matrix Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS 3D Transformation Matrix Primer Tutorial<\/p><\/div>\n<p>The tutorial <a title='CSS3 3D Rotation and Transformation Primer Tutorial' href='#css33drtpt'>CSS3 3D Rotation and Transformation Primer Tutorial<\/a> discussed CSS styling regarding element transformations, and referred to the wonderful content of <a target=\"_blank\" title='' href='http:\/\/franklinta.com\/2014\/09\/08\/computing-css-matrix3d-transforms\/' rel=\"noopener\">Computing CSS matrix3d transforms | Franklin Ta<\/a>, involving matrix mathematics to transform HTML elements and the <a target=\"_blank\" title='CSS matrix3d() function information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-function\/matrix3d' rel=\"noopener\">matrix3d()<\/a> CSS function &#8230; great stuff, thanks.  Also, coming at this topic of transformations from another angle, the previous <a target=\"_blank\" title='ImageMagick and Three Ps Charcoal Implode Quality Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/imagemagick-and-three-ps-charcoal-implode-quality-tutorial\/' rel=\"noopener\">ImageMagick and Three Ps Charcoal Implode Quality Tutorial<\/a> touches on this aspect of transformations, in its case &#8220;affine&#8221; transformations, whereby an actual image element is transformed and presented in a downloadable way.<\/p>\n<p>Today we recreate that work with the CSS matrix3d() function of Frank Ta to turn this into a web application where you can drag the edges of an HTML div element to derive the underlying CSS matrix3d() function parameter set would be used to recreate this HTML div display, perhaps elsewhere.  We also allow for the user to enter in an image URL that if they click a button will apply that image as the background image to the HTML div element, as you can see play out with today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/transform_matrix.jpg\" title=\"Tutorial picture\" rel=\"noopener\">tutorial picture<\/a>.  The <a target=\"_blank\" href='http:\/\/jquery.org' title='jQuery Javascript library home page' rel=\"noopener\">jQuery<\/a> Javascript here helps the day enormously, though Frank used the <a target=\"_blank\" title='CoffeeScript' href='http:\/\/coffeescript.org\/' rel=\"noopener\">CoffeeScript<\/a> (compiled into Javascript) within the <a target=\"_blank\" title='CodePen' href='https:\/\/codepen.io\/' rel=\"noopener\">CodePen<\/a> &#8220;Front End Developer Playground and Code Editor&#8221; environment <font size=1>&#8230; worth taking a skeg &#8230;<\/font> when doing a cuter looking web application at that aforesaid mentioned link.<\/p>\n<p>Is the power of the modern device going to mean these types of transformations will &#8220;power&#8221; our online world, rather than trying to make the original media &#8220;fit the bill&#8221;, always?  We&#8217;d say, probably, but we&#8217;d also say &#8230; <\/p>\n<blockquote onclick=\"window.open('http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php','_blank');\" style='cursor:pointer;background-color:transparent;'>\n<div style=\"vertical-align:top;color:red;width:100%;text-align:right; background: -webkit-linear-gradient(#BBB, white) bottom repeat; background: linear-gradient(#BBB, white) bottom repeat; \"><b><i>&#8220;Nala! Put down that<br \/> matrix3d(0.7751,1.854,0,0,<br \/> 0,1.3861,0,0, 0,0,1,0,<br \/> -0.0004308,0.003552,0,1)<br \/> &#8216;deformed&#8217; soft toy, we think<br \/> you&#8217;ll find belongs to Luna &#8230; <br \/>Naaaalllllaaaa!&#8221;<\/i><\/b><\/p>\n<div style=\"margin-top:-165px;margin-right:290px;text-align:right;height:195px;color:transparent;background:URL('http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoBooth_flickr.jpg');background-position:-140px -400px;background-repeat:no-repeat;  -webkit-filter: brightness(220%);filter: brightness(220%);\"><i>Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,<br \/> -0.000430821,0.00355248,0,1)<br \/> &#8220;deformed&#8221; soft toy, that<br \/> we think you&#8217;ll find belongs to Luna &#8230; Naaaalllllaaaa!<\/i>\n<\/div>\n<\/div>\n<div style=\"margin-top:30px;\"> &#8230; and don&#8217;t think that&#8217;s going to cut the mustard at the next World Symposium of Transformation Matr<strike>esses<\/strike>ices 2017 &#8230; &#8220;The Future Is Ahead of One<font size=1>sies<\/font>&#8220;.<\/div>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<p>Why don&#8217;t you try this HTML and Javascript (mostly jQuery) and CSS web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html_GETME\" title=\"more_transform.html\" rel=\"noopener\">more_transform.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_transform.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> to see what we mean?  It can be weird, and wonderful!<\/p>\n<hr>\n<p id='css33drtpt'>Previous relevant <a target=\"_blank\" title='CSS3 3D Rotation and Transformation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-3d-rotation-and-transformation-primer-tutorial\/' rel=\"noopener\">CSS3 3D Rotation and Transformation 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\/rotate3d.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 3D Rotation and Transformation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.png\" title=\"CSS3 3D Rotation and Transformation Primer Tutorial\" id='zxcv' onmouseover=' this.src=this.src.replace(\".jpg\",\".PNG\").replace(\".png\",\".jpg\").replace(\".PNG\",\".png\"); '  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 3D Rotation and Transformation Primer Tutorial<\/p><\/div>\n<blockquote><p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.<\/p><\/blockquote>\n<p><a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html' rel=\"noopener\">Tutorial<\/a> &#8230;<\/p>\n<p>Cascading Style Sheet methodology is a good technique in order to separate document content from document presentation.  For the same content, two different CSS approaches can produce vastly different browser outputs.<\/p>\n<p>With today&#8217;s tutorial we concentrate on CSS within HTML and specifically the CSS3 3D Rotation and Transformation functionality you can read about <a target=\"_blank\" title='CSS3 3D Transforms' href='http:\/\/www.w3schools.com\/css\/css3_3dtransforms.asp' rel=\"noopener\">CSS3 3D Transforms<\/a> at w3schools.<\/p>\n<p>With the transformations section there are 16 elements in a 4&#215;4 matrix to define, and so there is a fair degree of mathematical geometry that would be good to know here.  This mathematics is explained well at <a target=\"_blank\" title='' href='http:\/\/franklinta.com\/2014\/09\/08\/computing-css-matrix3d-transforms\/' rel=\"noopener\">Computing CSS matrix3d transforms | Franklin Ta<\/a> &#8230; thanks a lot.<\/p>\n<p>You can download source code and rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html_GETME' title=\"rotate3d.html\" rel=\"noopener\">rotate3d.html<\/a> or you can use the <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rotate3d.html' title=\"rotate3d.html\" rel=\"noopener\">live run<\/a> to wake up all those ants on the footpath that have been thinking their life is just grand and dandy.<\/p>\n<p>Thanks to <a target=\"_blank\" title='CSS information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets' rel=\"noopener\">Wikipedia<\/a> for the quote above.<\/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='#d10553' onclick='var dv=document.getElementById(\"d10553\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=rotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10553' 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='#d32616' onclick='var dv=document.getElementById(\"d32616\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/matrix\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32616' 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='#d33178' onclick='var dv=document.getElementById(\"d33178\"); 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='d33178' 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='#d33455' onclick='var dv=document.getElementById(\"d33455\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33455' 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='#d33510' onclick='var dv=document.getElementById(\"d33510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33510' 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='#d33560' onclick='var dv=document.getElementById(\"d33560\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33560' 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='#d48856' onclick='var dv=document.getElementById(\"d48856\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html-email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48856' 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='#d53969' onclick='var dv=document.getElementById(\"d53969\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/formdata\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53969' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re revisiting our inhouse HTML Editor last talked about with HTML Editor Inline HTML Email Tutorial looking for &#8230; extensions to functionality &#8230; that &#8230; improve the user experience &#8230; and the first we thought of was to add to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editor-html-tag-list-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":[2,12,14,37],"tags":[69,1822,3858,429,2730,576,3857,652,932,1238,1240],"class_list":["post-53969","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-editor","tag-endtag","tag-file_get_contents","tag-formdata","tag-html","tag-html-editor","tag-javascript","tag-php","tag-table","tag-tag"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53969"}],"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=53969"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53969\/revisions"}],"predecessor-version":[{"id":64619,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53969\/revisions\/64619"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}