{"id":71792,"date":"2026-01-24T03:01:00","date_gmt":"2026-01-23T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=71792"},"modified":"2026-01-24T16:07:46","modified_gmt":"2026-01-24T06:07:46","slug":"journal-emoji-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/journal-emoji-tutorial\/","title":{"rendered":"Journal Emoji Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_emoji.jpg\" title=\"Journal Emoji Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Emoji Tutorial<\/p><\/div>\n<p>Today, it&#8217;s a mix of &#8230;<\/p>\n<ul>\n<li>styling &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n  * { border-radius: 8px; margin: 5 5 5 5;  }<br \/>\n<br \/>\n  button { color: blue; }<br \/>\n  input[type=\\\"submit\\\"] { color: blue; }<br \/>\n<br \/>\n  hr { background-color: red; height: 1px; border: 0; }<br \/>\n<br \/>\n  #ytimestamp {<br \/>\n     \/* background-image: url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#128197;&lt;\/text&gt;&lt;\/svg&gt;\\\"); *\/<br \/>\n     background-image: url(\\\"data:image\/svg+xml;base64,\" . base64_encode(\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#128197;&lt;\/text&gt;&lt;\/svg&gt;\") . \"\\\") !important;<br \/>\n     background-position: right;<br \/>\n     background-repeat: no-repeat;<br \/>\n     \/* background-size: contain; *\/<br \/>\n     height: 30px;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  #yname {<br \/>\n     \/* background-image: url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x1F4DB;&lt;\/text&gt;&lt;\/svg&gt;\\\"); *\/<br \/>\n     background-image: url(\\\"data:image\/svg+xml;base64,\" . base64_encode(\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x1F4DB;&lt;\/text&gt;&lt;\/svg&gt;\") . \"\\\") !important;<br \/>\n     background-position: right;<br \/>\n     background-repeat: no-repeat;<br \/>\n     \/* background-size: contain; *\/<br \/>\n     \/* height: 30px; *\/<br \/>\n  }<br \/>\n<br \/>\n  #ydob {<br \/>\n     \/* background-image: url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x1F382;&lt;\/text&gt;&lt;\/svg&gt;\\\"); *\/<br \/>\n     background-image: url(\\\"data:image\/svg+xml;base64,\" . base64_encode(\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x1F382;&lt;\/text&gt;&lt;\/svg&gt;\") . \"\\\") !important;<br \/>\n     background-position: right;<br \/>\n     background-repeat: no-repeat;<br \/>\n     \/* background-size: contain; *\/<br \/>\n     \/* height: 30px; *\/<br \/>\n  }<br \/>\n<br \/>\n  #ysecret {<br \/>\n     \/* background-image: url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x3299;&amp;#xFE0F;&lt;\/text&gt;&lt;\/svg&gt;\\\"); *\/<br \/>\n     background-image: url(\\\"data:image\/svg+xml;base64,\" . base64_encode(\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x3299;&amp;#xFE0F;&lt;\/text&gt;&lt;\/svg&gt;\") . \"\\\") !important;<br \/>\n     background-position: right;<br \/>\n     background-repeat: no-repeat;<br \/>\n     \/* background-size: contain; *\/<br \/>\n     \/* height: 30px; *\/<br \/>\n  }<br \/>\n<br \/>\n  #posting {<br \/>\n     \/* background-image: url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x270D;&amp;#x1F3FC;&lt;\/text&gt;&lt;\/svg&gt;\\\"); *\/<br \/>\n     background-image: url(\\\"data:image\/svg+xml;base64,\" . base64_encode(\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text y='80%'&gt;&amp;#x270D;&amp;#x1F3FC;&lt;\/text&gt;&lt;\/svg&gt;\") . \"\\\") !important;<br \/>\n     background-position: right top;<br \/>\n     background-repeat: no-repeat;<br \/>\n  }<br \/>\n<br \/>\n  .tdleft {<br \/>\n     \/* background-image: url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='300' height='300' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text x='20%' y='80%' fill='red' transform='rotate(45,200,200)'&gt;Journal &amp;#x1F4D3; goes here ?&lt;\/text&gt;&lt;\/svg&gt;\\\"); *\/<br \/>\n     background-image: url(\\\"data:image\/svg+xml;base64,\" . base64_encode(\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='300' height='300' viewport='0 0 100 100' style='font-family:Verdana;font-size:18px;'&gt;&lt;text x='20%' y='80%' fill='red' transform='rotate(45,200,200)'&gt;Journal &amp;#x1F4D3; goes here ?&lt;\/text&gt;&lt;\/svg&gt;\") . \"\\\") !important;<br \/>\n     background-position: center middle;<br \/>\n     background-repeat: repeat;<br \/>\n     background-size: contain;<br \/>\n     background-color:cyan;<br \/>\n     padding-right:5px;<br \/>\n  }<br \/>\n<br \/>\n  .tdnone {<br \/>\n     background-color:cyan;<br \/>\n     padding-right:5px;<br \/>\n  }<br \/>\n<br \/>\n  \/* Thanks to https:\/\/stackoverflow.com\/questions\/10813581\/can-i-replace-the-expand-icon-of-the-details-element *\/<br \/>\n  details &gt; summary {<br \/>\n    list-style-type: '\" . \"\\u{1F4D3}\" . \"';<br \/>\n  }<br \/>\n<br \/>\n  details[open] &gt; summary {<br \/>\n    list-style-type: '\" . \"\\u{1F50F}\" . \"';<br \/>\n  }<br \/>\n  <br \/>\n  details.editable[open] &gt; summary {<br \/>\n    list-style-type: '\" . \"\\u{1F3E4}\" . \"';<br \/>\n  }<br \/>\n<br \/>\n  details {<br \/>\n    border: 1px solid gray;<br \/>\n    border-radius: 0.2rem;<br \/>\n    padding: 0.5rem;<br \/>\n  }<br \/>\n<br \/>\n  details[open] &gt; summary {<br \/>\n    margin-bottom: 0.5rem;<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<li>aesthetics<\/li>\n<li>user experience<\/li>\n<li>emojis<\/li>\n<\/ul>\n<p> &#8230; today to try enhancing the work of yesterday&#8217;s <a title='Journal Hashtag Tutorial' href='#jht'>Journal Hashtag Tutorial<\/a> regarding our latest <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application.<\/p>\n<p>We&#8217;ve said it many&#8217;s a time, emojis can help with &#8230;<\/p>\n<ul>\n<li>Internationalization<\/li>\n<li>colour and movement<\/li>\n<li>graphical content <font size=1>(for those of us lacking in that department &#8230; cough, cough)<\/font><\/li>\n<li>SVG<sup>+XML<\/sup> base64 interplay regarding background image<sup>ry<\/sup><\/li>\n<\/ul>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php-----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php-----GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application, which, with content, may look something like &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p> &#8230; which <a href='#ifx'>you can also try way below.<\/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\/journal-emoji-tutorial\/' rel=\"noopener\">Journal Emoji Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jht'>Previous relevant <a target=\"_blank\" title='Journal Hashtag Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-hashtag-tutorial\/' rel=\"noopener\">Journal Hashtag Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Hashtag Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_hashtag.gif\" title=\"Journal Hashtag Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Hashtag Tutorial<\/p><\/div>\n<p>If you look at the data for the Journals created and maintained by our new inhouse web application talked about at yesterday&#8217;s <a title='Journal Associations Tutorial' href='#jat'>Journal Associations Tutorial<\/a> you can see &#8230;<\/p>\n<ul>\n<li>the user entered text data is stored in a web server flat file outside of view of public internet users &#8230;<\/li>\n<li>and the work of yesterday allowed for, within that user entered text data &#8230;<br \/>\n<table>\n<tr>\n<td>\nText words we can map as &#8230;\n<\/td>\n<td>\n<ul>\n<li>YouTube video<\/li>\n<li>YouTube playlist<\/li>\n<li>Spotify playlist<\/li>\n<li>Email &#8220;a&#8221; &#8220;mailto:&#8221;<\/li>\n<li>SMS &#8220;a&#8221; &#8220;sms:&#8221;<\/li>\n<li>Link to an ht<font color=black>tp:<\/font> or https: protocol web browser address bar URL<\/li>\n<\/ul>\n<p> &#8230; and add to that with today&#8217;s work &#8230;<\/p>\n<ul>\n<li>media data URI<\/li>\n<\/ul>\n<\/td>\n<td>\n &#8230; to link\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>while today we allow those <i>Text words<\/i> to be coded for so that the logic can add functionality understanding hashtag suffixing as per &#8230;<br \/>\n<blockquote><p>\nJournal text goes here where hashtags #qrcode and #play and #display and #listen and #embed and #show and #background are hashtag media effect options along with an understanding of data URI media entries\n<\/p><\/blockquote>\n<p> &#8230; as a whole new layer of data enhancement, potentially augmenting those original <i>Text words<\/i> hugely<\/li>\n<\/ul>\n<p> &#8230; via significantly changed &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function inline_linking(xname) {<br \/>\n   var oklast=['A','E','I','M','Q','U','Y','c','g','k','o','s','w','0','4','8'];<br \/>\n   var pword='', origxname=xname, thiss='', thiscp='', xsuffix='', durl='';<br \/>\n   xname=(xname + ' ').replace(\/\\#qrcode\\ \/g,' QrCoDe ').replace(\/\\#qrcode\/g,' QrCoDe').replace(\/\\#play\\ \/g,' PlAy ').replace(\/\\#display\\ \/g,' DiSpLaY ').replace(\/\\#listen\\ \/g,' LiStEn ').replace(\/\\#embed\\ \/g,' EmBeD ').replace(\/\\#show\\ \/g,' ShOw ').replace(\/\\#background\\ \/g,' BaCkGrOuNd ').replace(\/\\ $\/g,'');<br \/>\n   xname=(xname + ' ').replace(\/\\#qrcode\/g,' QrCoDe').replace(\/\\#play\/g,' PlAy').replace(\/\\#display\/g,' DiSpLaY').replace(\/\\#listen\/g,' LiStEn').replace(\/\\#embed\/g,' EmBeD').replace(\/\\#show\/g,' ShOw').replace(\/\\#background\/g,' BaCkGrOuNd').replace(\/\\ $\/g,'');<br \/>\n   var htes=xname.split('&#');<br \/>\n   for (ih=1; ih&lt;htes.length; ih++) {<br \/>\n     if (ih &lt; htes.length) {<br \/>\n      thiss='&#';<br \/>\n      thiscp=\\\"xname=xname.replace('&#',String.fromCodePoint()); htes=xname.split('&#'); \\\";<br \/>\n      thiscp=thiscp.replace(\\\"',\\\", (xname.substring(2 + xname.indexOf('&#')) + ' ').split('; ')[0] + \\\";',\\\");<br \/>\n      thiscp=thiscp.replace(\\\"()\\\", '('  + (xname.substring(2 + xname.indexOf('&#')) + ' ').split('; ')[0].replace(\/^x\/g,'0x').replace(\/\\;\\&\\#x\/g,',0x').replace(\/\\;\\&\\#\/g,',') + \\\")\\\");<br \/>\n      eval(thiscp); \/\/alert(thiscp);<br \/>\n     }<br \/>\n   }<br \/>\n   var xxname=xname;<br \/>\n   var delim=' ', pdelim=' ';<br \/>\n   while (xxname.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n     xxname=xxname.replace(String.fromCharCode(10), ' ');<br \/>\n   }<br \/>\n   while (xxname.indexOf('&lt;br&gt;') != -1) {<br \/>\n     xxname=xxname.replace('&lt;br&gt;', ' ');<br \/>\n   }<br \/>\n   var thewords=xxname.split(' ');<br \/>\n   thewords.push('');<br \/>\n   thewords.push('');<br \/>\n   for (var jw=0; jw&lt;thewords.length; jw++) {<br \/>\n    xsuffix='';<br \/>\n    pword=thewords[jw].replace(\/PlAy\/g,'').replace(\/DiSpLaY\/g,'').replace(\/LiStEn\/g,'').replace(\/EmBeD\/g,'').replace(\/ShOw\/g,'').replace(\/BaCkGrOuNd\/g,'').replace(\/QrCoDe\/g,'');<br \/>\n    if (pword != '') {<br \/>\n    pdelim='';<br \/>\n    durl='';<br \/>\n    if (xname.indexOf(' ' + pword) != -1) {  pdelim=' '; }<br \/>\n    if (xname.indexOf(String.fromCharCode(10) + pword) != -1) {  pdelim=String.fromCharCode(10); }<br \/>\n    if (xname.indexOf('&lt;br&gt;' + pword) != -1) {  pdelim='&lt;br&gt;'; }<br \/>\n    delim='';<br \/>\n    if (xname.indexOf(pdelim + pword + ' ') != -1) {  delim=' '; }<br \/>\n    if (xname.indexOf(pdelim + pword + String.fromCharCode(10)) != -1) {  delim=String.fromCharCode(10); }<br \/>\n    if (xname.indexOf(pdelim + pword + '&lt;br&gt;') != -1) {  delim='&lt;br&gt;'; }<br \/>\n    if (pword.indexOf('data:') == 0) {<br \/>\n      durl='&lt;details contenteditable=false style=\\\"display:inline-flex;justify-content: space-between;align-items:flex-end;\\\" open&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;';<br \/>\n      <br \/>\n      switch (thewords[eval(2 + jw)]) {<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      xsuffix='&lt;details contenteditable=false style=\\\"display:inline-block;\\\"&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#qrcode&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#https:\/\/www.rjmprogramming.com.au\/recording_ideas.php#' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      break;<br \/>\n      }<br \/>\n      <br \/>\n      switch (thewords[eval(2 + jw)]) {<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      xsuffix='&lt;details contenteditable=false style=\\\"display:inline-block;\\\"&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#qrcode&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#https:\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      break;<br \/>\n      }<br \/>\n      <br \/>\n      switch (thewords[eval(1 + jw)]) {<br \/>\n      case 'PlAy': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#play&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'BaCkGrOuNd': \/\/yt background<br \/>\n      if (durl.indexOf('data:image') != -1) {<br \/>\n      \/\/durl=durl.replace('width:','opacity:0.0;width:').replace('&lt;iframe ','&lt;iframe onload=\\\"setInterval(function(event){ event.target.style.opacity=' + \\\"'' + (eval('0' + event.target.style.opacity) &gt; 0.005 ? '0.0' : '1.0'); \\\" + '  }, 20000);\\\" ');<br \/>\n      durl=durl.replace('width:','opacity:0.0;width:').replace('&lt;iframe ','&lt;iframe id=if' + ifnum + ' data-ifid=if' + ifnum + ' onload=\\\"' + \\\"setInterval(function(event){ document.getElementById('if\\\" + ifnum + \\\"').style.opacity='' + (eval('0' + document.getElementById('if\\\" + ifnum + \\\"').style.opacity) &gt; 0.005 ? '0.0' : '1.0'); \\\" + '  }, 20000);\\\" ');<br \/>\n      ifnum++;<br \/>\n\/\/alert(durl);<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace(' style=\\\"',' style=\\\"background:url(' + pword + ');background-repeat:no-repeat;background-size:contain;').replace('&gt;&lt;\/summary&gt;',' style=\\\"opacity:0.5;color:lightgray;background:url(' + pword + ');background-repeat:repeat;background-size:contain;\\\"&gt;#background&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      \/\/xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace(' style=\\\"',' style=\\\"background:url(' + pword + ');background-repeat:no-repeat;background-size:contain;').replace(' style=\\\"background:url(' + pword + ');background-repeat:repeat;background-size:contain;\\\"&gt;&lt;\/summary&gt;','&gt;#background&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      } else {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#background&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      }<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      \/\/xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#qrcode&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#qrcode&lt;\/summary&gt;').replace('#NOWAYJOSE' + pword,'#' + encodeURIComponent('https:\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#' + pword)) + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'ShOw': \/\/ inhouse details closed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#show&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'EmBeD': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#embed&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'LiStEn': \/\/ inline inhouse<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#listen&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'DiSpLaY': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace('&gt;&lt;\/summary&gt;','&gt;#display&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + durl + xsuffix + delim);<br \/>\n      break;<br \/>\n      }<br \/>\n    } else if (pword.replace(\/\\@$\/g,'').indexOf('@') &gt; 0 && pword.indexOf('.') != -1 && eval('' + pword.split('@').length) &gt;= 2) {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Email to\\\" contenteditable=false target=_top href=\\\"mailto:' + pword + '?subject=&body=\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n    } else if (pword == encodeURIComponent(pword) && eval('' + pword.trim().length) == 11 && oklast.indexOf(pword.slice(-1)) != -1) {<br \/>\n      \/\/alert('Pword=' + pword + ' pdelim=' + pdelim.replace(String.fromCharCode(10),'x')+ ' delim=' + delim.replace(String.fromCharCode(10),'x') + ' ' + xname);<br \/>\n  \/\/alert('35:' + thewords[eval(1 + jw)]);<br \/>\n      switch (thewords[eval(2 + jw)]) {<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      xsuffix='&lt;details contenteditable=false style=\\\"display:inline-block;\\\"&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#qrcode&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#https:\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      break;<br \/>\n      }<br \/>\n      <br \/>\n      switch (thewords[eval(1 + jw)]) {<br \/>\n      case 'PlAy': \/\/ inhouse details open non-mobile playing non-muted<br \/>\n      \/\/xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '#play&lt;\/a&gt; &lt;iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https:\/\/www.youtube.com\/embed\/' + pword + '?si=FbkG3MuvQtUnTEg5\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen&gt;&lt;\/iframe&gt;' + xsuffix + delim);<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;&lt;details contenteditable=false style=\\\"display:inline-block;\\\" open&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#play&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:800px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=' + pword + '&youtube_duration=12345&email=&email=&emoji=on&i0=0&j0=12345&c0=on&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;' + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'BaCkGrOuNd': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '#background&lt;\/a&gt; &lt;iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https:\/\/www.youtube.com\/embed\/' + pword + '?si=FbkG3MuvQtUnTEg5\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen&gt;&lt;\/iframe&gt;' + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#https:\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;&lt;details contenteditable=false style=\\\"display:inline-block;\\\"&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#qrcode&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#https:\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;' + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'ShOw': \/\/ inhouse details open non-mobile playing muted<br \/>\n      \/\/xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '#show&lt;\/a&gt; &lt;iframe style=\\\"width:100%;height:800px;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=' + pword + '&youtube_duration=12345&email=&email=&emoji=on&i0=0&j0=12345&c0=on&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\"&gt;&lt;\/iframe&gt;' + delim);<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;&lt;details contenteditable=false style=\\\"display:inline-block;\\\" open&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#show&lt;\/summary&gt;&lt;iframe onload=\\\"var acontodd = (this.contentWindow || this.contentDocument);  if (acontodd != null) {  if (acontodd.document) { acontodd = acontodd.document; acontodd.title=' + \\\"'YouTube video mute control'\\\" + '; } } \\\" contenteditable=false title=\\\"YouTube video mute control\\\" style=\\\"width:100%;height:800px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=' + pword + '&youtube_duration=22234.0&email=&email=&emoji=on&i0=0&j0=12345&c0=on&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;' + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'EmBeD': \/\/ yt embed<br \/>\n      \/\/xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '#embed&lt;\/a&gt; &lt;iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https:\/\/www.youtube.com\/embed\/' + pword + '?si=FbkG3MuvQtUnTEg5\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen&gt;&lt;\/iframe&gt;' + xsuffix + delim);<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;&lt;details contenteditable=false style=\\\"display:inline-flex;justify-content: space-between;align-items:flex-end;\\\" open&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#embed&lt;\/summary&gt;&lt;iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https:\/\/www.youtube.com\/embed\/' + pword + '?si=FbkG3MuvQtUnTEg5\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen&gt;&lt;\/iframe&gt;&lt;\/details&gt;' + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'LiStEn': \/\/ inline inhouse<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;span contenteditable=false&gt;&lt;a target=\\\"_blank\\\" class=\\\"audioytplay\\\" title=\\\"?\\\" href=\\\"https:\/\/www.youtube.com\/watch?v=' + pword + '\\\" rel=\\\"noopener\\\"&gt;' + pword + '#listen&lt;\/a&gt;&lt;\/span&gt;' + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'DiSpLaY': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '#display&lt;\/a&gt; &lt;iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https:\/\/www.youtube.com\/embed\/' + pword + '?si=FbkG3MuvQtUnTEg5\\\" title=\\\"YouTube video player\\\" frameborder=\\\"0\\\" allow=\\\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\\\" referrerpolicy=\\\"strict-origin-when-cross-origin\\\" allowfullscreen&gt;&lt;\/iframe&gt;' + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + xsuffix + delim);<br \/>\n      break;<br \/>\n      }<br \/>\n      \/\/alert(xname);<br \/>\n    } else if (pword == encodeURIComponent(pword) && eval('' + pword.trim().length) == 34) {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube playlist\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=&index=1&list=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n    } else if (pword == encodeURIComponent(pword) && eval('' + pword.trim().length) == 22) {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Spotify playlist\\\" contenteditable=false target=_blank href=\\\"\/\/open.spotify.com\/playlist\/' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + delim).trim();<br \/>\n    } else if (eval('' + pword.split(',')[0].length) &gt; 4 && pword.replace(\/\\,\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"SMS to\\\" contenteditable=false target=_top href=\\\"sms:' + pword + '&body=\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n    } else if (pword.toLowerCase().indexOf('http') == 0 && pword.indexOf(':') != -1 && pword.indexOf('\/\/') != -1) {<br \/>\n      durl='&lt;details contenteditable=false style=\\\"display:inline-flex;justify-content: space-between;align-items:flex-end;\\\" open&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;';<br \/>\n      <br \/>\n      switch (thewords[eval(2 + jw)]) {<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      xsuffix='&lt;details contenteditable=false style=\\\"display:inline-block;\\\"&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#qrcode&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#https:\/\/www.rjmprogramming.com.au\/recording_ideas.php#' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      break;<br \/>\n      }<br \/>\n      <br \/>\n      switch (thewords[eval(2 + jw)]) {<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      xsuffix='&lt;details contenteditable=false style=\\\"display:inline-block;\\\"&gt;&lt;summary title=' + pword + ' contenteditable=false&gt;#qrcode&lt;\/summary&gt;&lt;iframe contenteditable=false style=\\\"width:100%;height:550px;display:block;\\\" src=\\\"\/\/www.rjmprogramming.com.au\/recording_ideas.php?noinitialwo=y#https:\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;&lt;\/iframe&gt;&lt;\/details&gt;';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      break;<br \/>\n      }<br \/>\n      <br \/>\n      switch (thewords[eval(1 + jw)]) {<br \/>\n      case 'PlAy': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace('&gt;&lt;\/summary&gt;','&gt;#play&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'BaCkGrOuNd': \/\/yt background<br \/>\n      if (durl.indexOf('data:image') != -1) {<br \/>\n      \/\/durl=durl.replace('width:','opacity:0.0;width:').replace('&lt;iframe ','&lt;iframe onload=\\\"setInterval(function(event){ event.target.style.opacity=' + \\\"'' + (eval('0' + event.target.style.opacity) &gt; 0.005 ? '0.0' : '1.0'); \\\" + '  }, 20000);\\\" ');<br \/>\n      durl=durl.replace('width:','opacity:0.0;width:').replace('&lt;iframe ','&lt;iframe id=if' + ifnum + ' data-ifid=if' + ifnum + ' onload=\\\"' + \\\"setInterval(function(event){ document.getElementById('if\\\" + ifnum + \\\"').style.opacity='' + (eval('0' + document.getElementById('if\\\" + ifnum + \\\"').style.opacity) &gt; 0.005 ? '0.0' : '1.0'); \\\" + '  }, 20000);\\\" ');<br \/>\n      ifnum++;<br \/>\n\/\/alert(durl);<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace(' style=\\\"',' style=\\\"background:url(' + pword + ');background-repeat:no-repeat;background-size:contain;').replace('&gt;&lt;\/summary&gt;',' style=\\\"opacity:0.5;color:lightgray;background:url(' + pword + ');background-repeat:repeat;background-size:contain;\\\"&gt;#background&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      \/\/xname=xname.replace(pdelim + pword + delim,pdelim + durl.replace(' style=\\\"',' style=\\\"background:url(' + pword + ');background-repeat:no-repeat;background-size:contain;').replace(' style=\\\"background:url(' + pword + ');background-repeat:repeat;background-size:contain;\\\"&gt;&lt;\/summary&gt;','&gt;#background&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      } else {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace('&gt;&lt;\/summary&gt;','&gt;#background&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      }<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'QrCoDe': \/\/ inhouse qr code representation<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace('&gt;&lt;\/summary&gt;','&gt;#qrcode&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'ShOw': \/\/ inhouse details closed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace('&gt;&lt;\/summary&gt;','&gt;#show&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'EmBeD': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace('&gt;&lt;\/summary&gt;','&gt;#embed&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'LiStEn': \/\/ inline inhouse<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace('&gt;&lt;\/summary&gt;','&gt;#listen&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      case 'DiSpLaY': \/\/ yt embed<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + durl.replace('&gt;&lt;\/summary&gt;','&gt;#display&lt;\/summary&gt;') + xsuffix + delim);<br \/>\n      thewords[eval(1 + jw)]='';<br \/>\n      break;<br \/>\n      <br \/>\n      default:<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n      break;<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n      <br \/>\n   }<br \/>\n   if (origxname != xname) { itchanged=true;  }<br \/>\n   setTimeout(function(){ acontod.getElementById('indiv').title='Journal text goes here where hashtags #qrcode and #play and #display and #listen and #embed and #show and #background are hashtag media effect options along with an understanding of data URI media entries'; }, 5000);<br \/>\n   return xname.replace(\/PlAy\/g,'').replace(\/DiSpLaY\/g,'').replace(\/LiStEn\/g,'').replace(\/EmBeD\/g,'').replace(\/ShOw\/g,'').replace(\/BaCkGrOuNd\/g,'').replace(\/QrCoDe\/g,'');<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php----GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application, which, with content, may look something like &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p> &#8230; and which you may want to compare the raw <i>Text words<\/i> below &#8230;<\/p>\n<p><textarea id=mytaid data-scroll=\"0\" style=width:100%; rows=16>Sat Jan 17 2026 16:47:25 GMT 1100 (Australian Eastern Daylight Time)<br \/>\nyes, well,<br \/>\nokay &#8230; as explained above with https:\/\/www.rjmprogramming.com.au\/ITblog\/journal-editing-tutorial\/ and<br \/>\nthe next day&#8217;s contenteditable=false explaining https:\/\/www.rjmprogramming.com.au\/ITblog\/journal-associations-tutorial\/ &#8230;<br \/>\nand as of 22\/01\/2026 dataURI ideas such as data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABblBMVEX\/\/\/8AAADxnQf8\/PwEBAT9\/\/\/\/\/\/35+fn\/\/f\/8\/\/+lpaX\/\/\/n\/+\/\/r6+vx8fHV1dW2trZiYmKZmZnf3994eHi9vb2qqqrExMRXV1ewsLDh4eFEREQvLy\/IyMhcXFxSUlIgICCJiYmcnJw5OTmBgYH\/v+J8fHxubm7\/\/\/QZGRkoKCiHh4c+Pj4PDw8AAAjvoAD0mwr75PT\/+efmaQD\/vePx0+YGCxpgXlUUAAAlBwCndCTspivwoTPHlCRjSxViPQDYnyzVjCL33pvhrEL5ngDwz5L\/883syYD8lgDfnQD667j86szWrnjtgg\/wrkrnkgDBfjXyhQDThTv1wt7uyprfcADydgL0ZAbSZQDkp2b97frbgjPYaxzw0rLppXrbdQPWi1LvxNnguJXt2L1FSV3o0ISGbCRKMxCplVz\/\/92DXiiXaCcnHQi\/gSXou2GzhCLlrF43IQ3Kv5vlvmzvvUz2sz3ZoRXnxV\/dlhHy3KmVSo1xAAAPN0lEQVR4nO1di1vbRhKXvJIsIT\/AYMAYsA0ExMtyxHHXljRNg0NsKM21KZc72lxK7no90ibtXduU\/Pe3u3qtXpaN1l7lPv2+D0JAlven2Z2ZnZkdc1yGDBkyZMiQIUOGDBkyZMiQIUOGDBkyZMiQIQEAl69MsR7EeDHP83ye9SDoAYDp1tpKHonO\/Ko2IcEZ1sOiiQUeoVVE9AC31MD\/LbIeFUWA\/AzmxOOlB+kKiC\/rUVHGdJMXIK9GiVtBVIX\/LxFigBamuFNsYgnyc6wHRAcAfy\/NLtSmpubX8UTdNwnyjc1KdfY916YA8iutVGa2eQsCH8D6Zq1cwhezHu2tMLtWJ8gJfoLOL7bn5mdZj3VUQIkUK82gyAZgbgHby\/dGluUZPkRqcSTL78dshWNcqFszc1SsT7Me\/VAo1+OpRGKnijVUmlGau5X0TGCnoJzmqQq4hf0EArSQan+uxSeQoIN6MY1iREPKN2gQRFO1zJpOCKB+KC0nlp6DKpc6jw5wxR1q\/KAYq6wJBQDy9AhiTKfObCSxgqFYSZm6maPMD6qbJdacPKhRJoiwnCZlUxwDQZ7fZE2LAPVFyON5upCSpQhwfHccaKZknoI8DVctFBXW3CxsjIceQikVRnE8agZB4HdTsRJpm0KSIV9izY4bpwgR1ljTg6iMleEOa3pQk44WNRwZK6wJmpmWsUFIgWOzNXiACQ0lfDlrgiBkTBDN5dE2\/ItzczMRQSzW03QlKKWtBTM3mC9X1oei17LSFsVamH\/LNvQGuF2SIfpxzeNLzg4On6KoU4t8QbkRyAYsT5iTF4Bb9jKcCVjo8qCVKPDrs977cdOBR8LW6Je8g4H22bsdQDnEQeZkzpdugm5occ93DduFuOARyFSoFxnl9AgRHku+4Z2obN2aCjngtbDwGPxViDYyER5PA3mvgtqaAI9ozDj8hKjiAxC+vRIQwYgXLHmuZKtqCBu2HrnRAb7VajEcsL31Bg1YbqBIe78UuVkF3FoIxUZ0yBdwnnnKMqw46w5jYMAhH8JwYMmQZ+myrGNw3e79wRe2AgQHPhEkRJfiAs0hj4iqs6hqg8MNS36C+4PCaMAbYmaZ3Z9yRhF3pd\/jjIuikfN6ntJob4OKLcJKXMRoyscwtnCP2JWxrCZu2Qxj1Z1vmsaXz9oLALtK7GCb8vW4C5GLTiLe1yRsKEuGdiBxiD2cx6\/Zjw2DktqU5Tq0GQ7h\/k+TFi4++ALgI7FfwFKX2gyHKPglFqIwlIVz7QVLe7hpjSFs0oHK6hxRGANIhsQTybcWN0JtY9m5nmXtya45hOVQhtDhqRP\/bxDrkLxsGmnWkNe7qoalX9oyh9AI+xvgVj3lBsRW0nv9eoTn6VzOsuh9LYoh3OOV0DQjckdE6HiDuCyPwgSh9sAuX4lxeccLSxusBmYZsERGWPYwAwcsXbUbdnPb0dsby9CHhCWXsHW05mEoSyr3x7YgtKGaafNVUVRVVUJ\/2IhmuGgxZBrXL0fJ0D4aY7kCkF+B+xPk9sGH7bbAlwuyzIki+ss8tnqhs9SOkDA95Fay12GQoZnct10BBXKEaumjo3sf32\/zJVWSsAztkEyotrQZsi1UNMcQ6pZOYeFakEVFrH3yQO\/oeu7TTzQFQsKzFKvjzVAnzmbItiCjHrBvLqpbboRflYyHx5BdJ9fpdPUHj040riCjeQq42tZ8eMTGMqD1kD9NEJY\/7Qm8iwiKCAcNv3OyamiacfL4wZNep5ODFHW90+v0jx+fnpycKYoK8CsURZT897Yq\/hlXnNRClgrkJckc0iWSonDqZ+f3Pj\/q57qQGyQISdp48uLPqqLCZyBDxSNKAYY7JkPG9cJWsK1G\/k4U5cLdw6urw7twInKy8dnBF70uFB2cpAjoh34n1z9\/9uWZKiryJb70klP89zYJCmzrTYClashwtyRyhcOndyCeHhag4ZO4rw4uznuE8JD8\/vLsr38zFFUVL6\/wtVeXfoYlkyHjyn3se0JsE7+D0+0SDxpSvMtBpakqZ18fXCCSeCF2er3zi4uDb55rSJ9aD+POnUPZd28rZDpJt3t2YSXoIU8FxgFlePeOhUO0KFVFNP5+8Ozg4sX5+RdfnJ9fHEB8ewLXoKaKhad3\/nAHfV0VfHdem7QmtdJ6W8iGEytjKeB3SIp415WhqUBE9asXBxgX5j9whkIfAKKALkVfAYar+NlNrqI9j8sq0Hsue9QKzjAIpHcsiQq5DjFDSVWMbyG9FxfPMMHnGgfXIL788goJ8enVpeh7Q8uXmJiemSeSz\/tTRObW2kARu3k4MQt3r7AuRQbR\/JWkqC8vDhC\/ZwdfnonQWpp\/gov2CvI7vJR9mmYaP7kqwRD9VG4hP6C5W6JP3EkUWhzz9ltbGV5S5SHByYWCDCesxRDKUFUV7eU3kN\/XLzWoYYCsYEpwFhcggvZw2XR4SZSmnBMP+\/ST+6u8F9vzee9fiIcKRwsB0DfF3EGIcNEpmqoaz1\/+w9BUzNymBLUt8mkkr1TMfRmp2cCaaT5QNnYcnk6wxLJZQylsALdJOOtei7+HCTH+Eg6JkKSBajS2Pe++OujFt4K\/lBvrnCp+bzObSbOIEEUIBM+mrNzwvT\/1rhogpKACjmEPhTKteoyY\/NoI74XnqFM9mzePbfowBn98Jrygor5ihhsEfpteSbb5OHEwH90zrIKVel4YkAltQoxoLs0WzZ+oPVazs0TdmhNoAQYe7lhcnVbk8fOtDdt1oyLGolngYd5tIaTGURhPoB\/AHWkoQ8wb+zuLVFaiRRAb2Kq\/AswR4RhcHcCVIgpAbdEKcOUkf+O82fykCamuRRxpHN+uOHQpekBhq2Nlt2vzfvtAYCP+NrfEQvSbmkiuAMrmUnC\/hWCc9fvzg+u2UW1bknkKQPwpOGHMFUSDD1cIiasK4hcCdi3Gt6XCVc+Dy++TNShpxUlQgItwrKe9ALcZc8BgHyQZQNyBcGEMLrcXwM1sRw0hPEQ\/HMLKNL2oT6KHTZwUEyiC8sAbwym6PoEkBohdLAk2NjEM+eVJ1O2jORJWEEvg9nn3wQz5vckdTDDDRFG4vcUIFGl6JNiYZJ6tHM1QSDJNB0lwbrKNsor16GZeCYKcUc6owCDZDTYixdi8\/aMOX+Go4eLEi72hWa+GjoZPdEAiymtDxRoMsmylxfDhJHE7QgVYZ1StD8U4HcowyYoJOV6zw7TfUEicL1kdWmALWmfeT2llx69TE\/nGRI0+uusW+65fgMv7J1ayOBi5tjeX\/OcZGWGl6doNgW8mu5mbPlhNURulPLmjij16MRhu+oBlAbsXgAxuCHyyloAAujXWhEhBwwgXhLMVWi88PMiGRVUWRj4c5DHExEcH7GkqsK5oI0FuepLrPlebsjcVNggPlcKxZNdRSk9bcyKKSsEDIcJRqTCGSDnYhRoCnTG5dR8p6ZxMnktbpOGDuNM0JZ+BAQhfkspGPH3T1HFDBEpJE9e8pqQxNBEDpDEeQBypHbpKZ7xwjcUinRu6sYzx5UJHgutnhZ59GR15J58eeqpt8nDNIa1J5bg1sQeMJwN370SrWY7zzLbjr50E3KPztPas7sqmdMOEcH0QWpkTV9WkYhkSDGkZ6CL1OybDFvXx5FPGcJP+eJzIVjpmaYU2Q+B2Z0oHQ9fiU8vR2gwZn3qy4Z7SppZBsW\/Its+XAzdMQynH4O7HKDm6SZF39AKtMmHHWiSrk6MFotyOVsHSLO1HlhQt2i6I47UxT61ZWHAyM5Rcb6f\/VFqSM25ghVKEc5HynEgO91QUFZvv7IBToko5Mv5HJdjmBH7SomjI1AyVViste12nJnEB7GZDPI1ABnDqaBOUHlHHEk0hOo0v2fdjJ7DlGIyEWW7nBLzAvJ2CF0QKMWlbJ0fPTPCY8zBwa04S5rndmH54a2lm8KRnbj8yVBBoz\/d0RDBsuCMTEuVTiA8eYto9KRRWQApqiGb+9qc+7Lukq9jERN5NlM7ckqGbdhKYf+pDCICzq7ttzxXcvt2ao7up+\/xDBKKt3m0WEbBvAFkmVcjjAlFRO\/pnUDoE+cmcjbkNPEXDtZE\/SLxmNYWY6NGRkUHU+FZGkSJ8GnO2APnFlErQhONzCfzMKAMt7ziWfiPln7Gu7blnTarcEHIEQLLqxQW+jc\/aBxqbpQuq1OL5tiWO+lAl0cWWSQ+9Yk6T\/P2U0oaCzJX3+Ha7bQpyeSpur1Ges0wEZPjPMnxCaWeoKQXtu38hMdrrqrFWdlakb87myy2iLcT3\/77mCoqopnyWytrpcad771Xbsd6Y5UZtpUh2dwKlpWpl0bIOCPuvXuv60cNrMc0MVUUrKMZ3fdTDU3\/ww4dQkHDutQXnQMb2cr2xOgPR2GvaDwDOZ57\/8dXre7itov7G0FKsSCVJK1y\/6edQd71u7ujop\/t4+Dz+5mgfB+02\/vP3rz769MhqqpjL6ceGprImEglFU6Q3kFsHoatDibz96dWPDiE\/Q57\/4P4Pr+\/lut1uz26KqXc7PxvDtZJiAUWVT5+YbS5NkSCm+s3rH+7\/x89te3F3\/r8fH+ld3A2z74gw1+nlnrPmEQ1JEd+gRrO4EytqxooodjuoK+vPxlJ5pTpdq01XV8qz2O1UTuF0ziFuutsUs9vXO2811kQiUVC0G103RWcP2ZRO9+g6cLV4BjWSjq+0Locv60G6\/ROV44IdW9OAgnpy082FoXNkyIEhn\/V0zzV4uvZz3dyJClLKUFaNB72Op5WuPfpjteAfsvSu42NoNjjt5q5TK0NVkd\/1ddQyOIBfxILqU5F+hjm90+v2unr\/ETL5qSTIQXNovDvu6ze\/Hfll+FgJMPTP0px+9Pnb\/tvjR4ELUwRNEjnNMAz1MRJkHysSbDqenCr+9p0cd32DFRHSueifnv5GM64NVUINM9MpQheicaz3usgW\/tqH+rHTeWMosl8ykvYImhLI7bcbrEb1tydIzikWIAn5+vf+kyf9t++MRzdQSMfXigwU39ihF3vc6fX6v1yf\/Ap1aP\/3E1n2t0tOLyRVNU5Oz2RVU08efvfOUBQ50LBbViT13e+PT1VFUY2zM0MTVS3tW0MXqiTDcavwW0GBglEUiRP9\/rSsQgsC6cmSBq+VOJlTU7xv8kOGw1ZlWVOhEE2IAYaSKGqgAJeeyAFRQR\/yUZDTu6vIkCFDhgwZMmTIkCFDhgwZMmTIkCFDhvcd\/wM5NzsBVOPPzAAAAABJRU5ErkJggg==<br \/>\nor view Rm1mFbLnh88 as of 22\/01\/2026 hashtagged idea media views such as &#8230;<br \/>\nRm1mFbLnh88#listen  Rm1mFbLnh88#show Rm1mFbLnh88#embed  Rm1mFbLnh88#qrcode<br \/>\n<\/textarea><\/p>\n<p><iframe onload=\" while (document.getElementById('mytaid').value.indexOf(String.fromCharCode(60) + 'br \/' + String.fromCharCode(62)) != -1) { document.getElementById('mytaid').value=document.getElementById('mytaid').value.replace(String.fromCharCode(60) + 'br \/' + String.fromCharCode(62), String.fromCharCode(10));  }  while (document.getElementById('mytaid').value.indexOf(String.fromCharCode(60) + 'br\/' + String.fromCharCode(62)) != -1) { document.getElementById('mytaid').value=document.getElementById('mytaid').value.replace(String.fromCharCode(60) + 'br\/' + String.fromCharCode(62), String.fromCharCode(10));  }   while (document.getElementById('mytaid').value.indexOf(String.fromCharCode(60) + 'br' + String.fromCharCode(62)) != -1) { document.getElementById('mytaid').value=document.getElementById('mytaid').value.replace(String.fromCharCode(60) + 'br' + String.fromCharCode(62), String.fromCharCode(10));  }   setInterval(function(){ if (document.getElementById('mytaid').getAttribute('data-scroll') == '0') { document.getElementById('mytaid').scrollTop=document.getElementById('mytaid').scrollHeight;  document.getElementById('mytaid').setAttribute('data-scroll','1'); } else { document.getElementById('mytaid').scrollTop=0;   document.getElementById('mytaid').setAttribute('data-scroll','0'); }  }, 15000);\" style=display:none; src=\/About_Us.html><\/iframe><\/p>\n<p> &#8230; as the basis for the construction of the Journal <a href='#ifx'>you can also try way below.<\/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\/journal-hashtag-tutorial\/' rel=\"noopener\">ournal Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jat'>Previous relevant <a target=\"_blank\" title='Journal Associations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-associations-tutorial\/' rel=\"noopener\">Journal Associations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Associations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_associations.gif\" title=\"Journal Associations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Associations Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Journal Editing Tutorial' href='#jet'>Journal Editing Tutorial<\/a> had us interested in &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true<br \/>\n<\/code><\/p>\n<p> &#8230; usage, which begs the question &#8230;<\/p>\n<blockquote><p>\nDo you ever need to get interested in &#8230;<br \/>\n<br \/>\n<a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=false<br \/>\n<br \/>\n?\n<\/p><\/blockquote>\n<p>Yes, we&#8217;ve had interest a couple of times now.  It happens, at least for us, with a <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true element, for some reason, for a part of that element&#8217;s content it is better to revert back to normal <i>onclick<\/i> ways clicking on that bit of the content.  And we come across that today, as we add to the potential intelligence of our textual data, allowing programmed for logic which transforms particular hardcoded words into &#8230;<\/p>\n<ul>\n<li>YouTube video pointing link<\/li>\n<li>YouTube playlist pointing link<\/li>\n<li>Spotify playlist pointing link<\/li>\n<li>Email &#8220;a&#8221; &#8220;mailto:&#8221; link<\/li>\n<li>SMS &#8220;a&#8221; &#8220;sms:&#8221; link<\/li>\n<li>Link to an ht<font color=black>tp:<\/font> or https: protocol web browser address bar URL<\/li>\n<\/ul>\n<p> &#8230; and for these created links it is better to apply <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=false to them so that clicking them is not to say &#8220;focus on this&#8221; but rather &#8220;take me to this&#8221; as per how your usual &#8220;a&#8221; elements behave.<\/p>\n<p>Also, today, emoji textual input works okay when posting, and sometimes when <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true editing <font size=1>(but our advice is to Post your emoji textual data entries)<\/font>.  A lot of all this functionality appears in our new Javascript function &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function inline_linking(xname) {<br \/>\n   var oklast=['A','E','I','M','Q','U','Y','c','g','k','o','s','w','0','4','8'];<br \/>\n   var pword='', origxname=xname, thiss='', thiscp='';<br \/>\n   var htes=xname.split('&#');<br \/>\n   for (ih=1; ih&lt;htes.length; ih++) {<br \/>\n     if (ih &lt; htes.length) {<br \/>\n      thiss='&#';<br \/>\n      thiscp=\\\"xname=xname.replace('&#',String.fromCodePoint()); htes=xname.split('&#'); \\\";<br \/>\n      thiscp=thiscp.replace(\\\"',\\\", (xname.substring(2 + xname.indexOf('&#')) + ' ').split('; ')[0] + \\\";',\\\");<br \/>\n      thiscp=thiscp.replace(\\\"()\\\", '('  + (xname.substring(2 + xname.indexOf('&#')) + ' ').split('; ')[0].replace(\/^x\/g,'0x').replace(\/\\;\\&\\#x\/g,',0x').replace(\/\\;\\&\\#\/g,',') + \\\")\\\");<br \/>\n      eval(thiscp); \/\/alert(thiscp);<br \/>\n     }<br \/>\n   }<br \/>\n   var xxname=xname;<br \/>\n   var delim=' ', pdelim=' ';<br \/>\n   while (xxname.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n     xxname=xxname.replace(String.fromCharCode(10), ' ');<br \/>\n   }<br \/>\n   while (xxname.indexOf('&lt;br&gt;') != -1) {<br \/>\n     xxname=xxname.replace('&lt;br&gt;', ' ');<br \/>\n   }<br \/>\n   var thewords=xxname.split(' ');<br \/>\n   for (var jw=0; jw&lt;thewords.length; jw++) {<br \/>\n   <br \/>\n    pword=thewords[jw];<br \/>\n    if (pword != '') {<br \/>\n    pdelim='';<br \/>\n    if (xname.indexOf(' ' + pword) != -1) {  pdelim=' '; }<br \/>\n    if (xname.indexOf(String.fromCharCode(10) + pword) != -1) {  pdelim=String.fromCharCode(10); }<br \/>\n    if (xname.indexOf('&lt;br&gt;' + pword) != -1) {  pdelim='&lt;br&gt;'; }<br \/>\n    delim='';<br \/>\n    if (xname.indexOf(pdelim + pword + ' ') != -1) {  delim=' '; }<br \/>\n    if (xname.indexOf(pdelim + pword + String.fromCharCode(10)) != -1) {  delim=String.fromCharCode(10); }<br \/>\n    if (xname.indexOf(pdelim + pword + '&lt;br&gt;') != -1) {  delim='&lt;br&gt;'; }<br \/>\n    if (pword.replace(\/\\@$\/g,'').indexOf('@') &gt; 0 && pword.indexOf('.') != -1 && eval('' + pword.split('@').length) &gt;= 2) {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Email to\\\" contenteditable=false target=_top href=\\\"mailto:' + pword + '?subject=&body=\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n    } else if (pword == encodeURIComponent(pword) && eval('' + pword.trim().length) == 11 && oklast.indexOf(pword.slice(-1)) != -1) {<br \/>\n      \/\/alert('Pword=' + pword + ' pdelim=' + pdelim.replace(String.fromCharCode(10),'x')+ ' delim=' + delim.replace(String.fromCharCode(10),'x') + ' ' + xname);<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube video\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n      \/\/alert(xname);<br \/>\n    } else if (pword == encodeURIComponent(pword) && eval('' + pword.trim().length) == 34) {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"YouTube playlist\\\" contenteditable=false target=_blank href=\\\"\/\/www.youtube.com\/watch?v=&index=1&list=' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n    } else if (pword == encodeURIComponent(pword) && eval('' + pword.trim().length) == 22) {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Spotify playlist\\\" contenteditable=false target=_blank href=\\\"\/\/open.spotify.com\/playlist\/' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + delim).trim();<br \/>\n    } else if (eval('' + pword.split(',')[0].length) &gt; 4 && pword.replace(\/\\,\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"SMS to\\\" contenteditable=false target=_top href=\\\"sms:' + pword + '&body=\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n    } else if (pword.toLowerCase().indexOf('http') == 0 && pword.indexOf(':') != -1 && pword.indexOf('\/\/') != -1) {<br \/>\n      xname=xname.replace(pdelim + pword + delim,pdelim + '&lt;a title=\\\"Link to\\\" contenteditable=false target=_blank href=\\\"' + pword + '\\\"&gt;' + pword + '&lt;\/a&gt;' + delim);<br \/>\n    }<br \/>\n    }<br \/>\n   <br \/> <br \/>\n   }<br \/>\n   if (origxname != xname) { itchanged=true;  }<br \/>\n   return xname;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php----GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application, which, with content, may look something like &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p> &#8230; and which <a href='#ifx'>you can also try below.<\/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\/new-journal-editing-tutorial\/' rel=\"noopener\">New Journal Editing Tutorial<\/a> ...<\/p>\n\n\n\n\n\n\n\n<hr>\n\n\n\n\n\n\n\n<p id='jet'>Previous relevant <a target=\"_blank\" title='Journal Editing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-editing-tutorial\/' rel=\"noopener\">Journal Editing Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Journal Editing Tutorial\"]<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Editing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_editing.gif\" title=\"Journal Editing Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>You may think, further to testerday's <a title='Journal Content Tutorial' href='#jct'>Journal Content Tutorial<\/a>'s \"consideration list\" ...<\/p>\n\n\n\n\n\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/journal-content-tutorial\/'>\n\n\n<ul>\n\n\n<li>format<\/li>\n\n\n\n\n<li>display<\/li>\n\n\n\n\n<li>styling<\/li>\n\n\n\n\n<li>usability<\/li>\n\n\n\n\n<li>navigation<\/li>\n\n\n<\/ul>\n\n\n<\/blockquote>\n\n\n\n\n\n<p> ... if we were to add to that \"consideration list\" ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>editability<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... we'd want to reinvoke interest in our <i>textarea<\/i> \"underlay\" to be an \"overlay\" here, it being a more natural text editing HTML element than an HTML <i>div<\/i> element?  Well, HTML5 gave us the wonderful <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true where the onblur event of a div element can perform this functionality for us, and we, then, need no <font size=1>(no doubt, kind of \"kludgy\" feeling)<\/font> <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=zOvyRjVQLjE' rel=\"noopener\">\"underlay, overlay\"<\/a> thinking, then, using ...<\/p>\n\n\n\n&lt;?php echo \"\n<code>\n  function sedit(spano) {\n    if (spano.innerText != decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(\/^null\/g,'').replace(\/^undefined\/g,''))) {\n      try {\n      document.getElementById('nearby').value=window.btoa(('' + spano.getAttribute('data-ts')).replace(\/^null\/g,'').replace(\/^undefined\/g,'').replace(\/\\_\/g, ' '));\n      } catch(hy) {\n      document.getElementById('nearby').value=('' + spano.getAttribute('data-ts')).replace(\/^null\/g,'').replace(\/^undefined\/g,'').replace(\/\\_\/g, ' ');\n      }\n      try {\n      document.getElementById('wascont').value=window.btoa(decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(\/^null\/g,'').replace(\/^undefined\/g,'')));\n  \/\/alert('0:' + document.getElementById('wascont').value);\n      } catch(hdfy) {\n      document.getElementById('wascont').value=decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(\/^null\/g,'').replace(\/^undefined\/g,''));\n  \/\/alert('10:' + document.getElementById('wascont').value);\n      }\n      spano.setAttribute('data-oit', encodeURIComponent(spano.innerText));\n      try {\n      document.getElementById('nowcont').value=window.btoa(spano.innerText);\n      } catch(hdy) {\n      document.getElementById('nowcont').value=spano.innerText;\n      }\n      spanolast=spano;\n      document.getElementById('editsub').click();\n    }\n  }\n<\/code>\n\"; ?&gt;\n\n\n\n<p> ... new Javascript, which only ever gets invoked should the Journal be accessed at the Journal originator's \"device place\", and building on the new HTML ...<\/p>\n\n\n\n&lt;?php echo \"\n<code>\n&lt;form id=editf style=display:none; action='.\/journal.php' method=POST target=jjcont&gt;\n&lt;input type=hidden name=nearby id=nearby value=''&gt;&lt;\/input&gt;\n&lt;input type=hidden name=wascont id=wascont value=''&gt;&lt;\/input&gt;\n&lt;input type=hidden name=nowcont id=nowcont value=''&gt;&lt;\/input&gt;\n&lt;input type=hidden name=relfile id=relfile value='\" . $jtitle . \"'&gt;&lt;\/input&gt;\n&lt;input type=submit id=editsub style=display:none; value='Submit'&gt;&lt;\/input&gt;\n&lt;\/form&gt;\n&lt;iframe onload=\\\"if (!notfirsttime) { if (4 == 5) { setTimeout(function(){ location.href='.\/journal.php?fjname=\" . $jtitle . \"'; }, 20000); } } notfirsttime=false;\\\" src='\/About_Us.html' id=jjcont name=jjcont style='display:none;'&gt;&lt;\/iframe&gt;\n<\/code>\n\"; ?&gt;\n\n\n\n\n<p> ... and calling on new PHP ...<\/p>\n\n\n\n\n&lt;?php \n<code>\nif (isset($_POST['nearby']) && isset($_POST['wascont']) && isset($_POST['nowcont']) && isset($_POST['relfile'])) {\n  if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'))) {\n    $origcont=file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'));\n    $ocont=$origcont;\n    $tsis=str_replace('+',' ',urldecode($_POST['nearby']));\n    if (strpos($tsis, ' ') === false) {\n    $tsis=base64_decode($_POST['nearby']);\n    $wasc=base64_decode($_POST['wascont']);\n    $nowc=base64_decode($_POST['nowcont']);\n    } else {\n    $wasc=str_replace('+',' ',urldecode($_POST['wascont']));\n    $nowc=str_replace('+',' ',urldecode($_POST['nowcont']));\n    }\n    \/\/file_put_contents('xa.xa', $tsis . \"\\n\" . $wasc . \"\\n\" . $nowc . \"\\n\" . $origcont . \"\\n\" . urlencode($wasc) . \"\\n\" . urlencode($nowc) . \"\\n\" . urlencode($origcont));\n    if (strpos($origcont, $tsis) !== false) {\n      $relcont=$tsis . explode($tsis, $origcont)[1];\n            if (strpos($origcont, trim($relcont)) !== false) {\n    \/\/file_put_contents('xa.xa2z', $relcont . \"\\nvs\\n\" . $wasc);\n            }\n      \/\/$relcont=explode($tsis, $origcont)[1];\n    \/\/file_put_contents('xa.xa2', $relcont . \"\\nvs\\n\" . $wasc);\n    if (9 == 9) {\n      if (strpos(trim($relcont), trim($wasc)) === false || (strpos($relcont, explode(\"\\n\",$wasc)[0]) !== false && strpos($relcont, $wasc) === false)) {\n    \/\/file_put_contents('xa.xa2g', $relcont . \"\\nvs\\n\" . $wasc);\n        $wsc=''; \/\/explode(\"\\n\",$wasc)[0];\n    \/\/file_put_contents('xa.xa2h', $relcont . \"\\nvs\\n\" . $wasc);\n        $afterrel=explode($tsis . $wsc, $origcont)[-1 + sizeof(explode($tsis . $wsc, $origcont))]; \/\/$relcont)[1];\n    \/\/file_put_contents('xa.xa2j', $afterrel);\n        $tsl=strlen($tsis);\n    \/\/file_put_contents('xa.xa2k', $tsl);\n        $tslws=explode(' ',$tsis);\n    \/\/file_put_contents('xa.xa2m', sizeof($tslws));\n        $afs=explode(\"\\n\", $afterrel);\n    \/\/file_put_contents('xa.xa2n', sizeof($afs));\n        $ndone=false;\n        for ($jj=0; $jj&lt;sizeof($afs); $jj++) {\n          if (!$ndone && (strlen($tsl) != strlen($afs[$jj]) || sizeof($tslws) != sizeof(explode(' ',$afs[$jj])))) {\n            $wsc.=$afs[$jj] . \"\\n\";\n          } else if (strlen($tsl) == strlen($afs[$jj]) && sizeof($tslws) == sizeof(explode(' ',$afs[$jj]))) {\n            $ndone=true;\n          }\n        }\n    \/\/file_put_contents('xa.xa2p', $relcont . \"\\nvs\\n\" . $wasc);\n        $wasc=trim($wsc);\n    \/\/file_put_contents('xa.xa2aa', $relcont . \"\\nvs\\n\" . $wasc);\n      }\n      }\n      \/\/if (strpos($relcont, explode(\"\\n\",$wasc)[0]) !== false) {\n      if (strpos($origcont, trim($wasc)) !== false && strpos(trim($relcont), trim($wasc)) === false) {\n        $relcont=$origcont;\n      }\n      if (strpos(trim($relcont), trim($wasc)) !== false) {\n    \/\/file_put_contents('xa.xa2a', $relcont);\n        if (strpos($origcont, trim($wasc) . \"\\n\") !== false && strpos($origcont, trim($relcont) . \"\\n\") !== false) {\n    \/\/file_put_contents('xa.xa2y', $relcont);\n        $origcont=str_replace(trim($relcont) . \"\\n\", str_replace(trim($wasc) . \"\\n\",trim($nowc) . \"\\n\",trim($relcont) . \"\\n\"), $origcont);\n        } else {\n        $origcont=str_replace(trim($relcont), str_replace(trim($wasc),trim($nowc),trim($relcont)), $origcont);\n        }\n            if (strpos($relcont, trim($wasc)) !== false) {\n    \/\/file_put_contents('xa.xa3z', $relcont . \"\\nvs\\n\" . $wasc);\n            }\n    \/\/file_put_contents('xa.xa3', $relcont);\n        if ($origcont != $ocont) {\n    \/\/file_put_contents('xa.xa4', $relcont);\n         file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'), $origcont);\n         echo \"&lt;html&gt;&lt;body&gt;&lt;p&gt;Did change&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";\n         exit;\n        }\n      }\n    }\n  }\n  echo \"&lt;html&gt;&lt;body&gt;&lt;\/body&gt;&lt;\/html&gt;\";\n  exit;\n}\n<\/code>\n?&gt;\n\n\n\n<p> ... in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php---GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php---GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application, which, with content, may look something like ...<\/p>\n\n\n\n<code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code>\n\n\n\n<p> ... and which <a href='#ifx'>you can also try below.<\/a><\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-editing-tutorial\/' rel=\"noopener\">Journal Editing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jct'>Previous relevant <a target=\"_blank\" title='Journal Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-content-tutorial\/' rel=\"noopener\">Journal Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_content.gif\" title=\"Journal Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Content Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Journal Privacy Tutorial' href='#jpt'>Journal Privacy Tutorial<\/a> we&#8217;re up to issues with &#8220;content&#8221; that involve &#8230;<\/p>\n<ul>\n<li>format<\/li>\n<li>display<\/li>\n<li>styling<\/li>\n<li>usability<\/li>\n<li>navigation<\/li>\n<\/ul>\n<p> &#8230; a lot of which do not suit yesterday&#8217;s content&#8217;s <i>textarea<\/i> format nearly as much as today&#8217;s <i>overlaying<\/i> nested <i>div<\/i> format.  As you will know using <i>textarea<\/i> textual data there are really no easy ways towards any &#8220;smart&#8221; navigation functionality possibilities, but an HTML div with the content (and now navigational dropdowns and &#8220;breadcrumb&#8221; buttons) hosted by another div with <i>display:flex<\/i> <font size=1>(and thanks, here, to the advice from <a target=\"_blank\" title='great advice, thanks' href='https:\/\/stackoverflow.com\/questions\/36130760\/use-justify-content-flex-end-and-to-have-vertical-scrollbar' rel=\"noopener\">this great link<\/a>)<\/font> and <i>absolute &#8220;overlaying&#8221; positioning<\/i> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function wbt(taow,tao) {<br \/>\n    \/\/alert(tao.value);<br \/>\n    if (acontod && tao) {<br \/>\n     if (!divelem) {<br \/>\n     document.getElementById('helpout').style.backgroundColor='yellow';<br \/>\n     document.getElementById('dcont').style.backgroundColor='yellow';<br \/>\n     divelem = acontod.getElementById('djc');<br \/>\n     gtao=tao;<br \/>\n     var recto = tao.getBoundingClientRect();<br \/>\n     if (divelem) { \/\/ thanks to ideas off http:\/\/stackoverflow.com\/questions\/12266320\/copy-div-content-to-textarea-or-text-with-the-same-font-family-style<br \/>\n      divelem.style.display='flex';<br \/>\n    \/\/divelem.style.alignItems='flex-end';<br \/>\n      divelem.style.overflowY='scroll';<br \/>\n      \/\/divelem.style.flexFlow='column nowrap';<br \/>\n      divelem.style.flexDirection='column-reverse';<br \/>\n      divelem.style.fontFamily = window.getComputedStyle(tao,null).fontFamily || tao.style.fontFamily || tao.currentStyle.getCurrentProperty('font-family');<br \/>\n      divelem.style.fontSize = window.getComputedStyle(tao,null).fontSize || tao.style.fontSize || tao.currentStyle.getCurrentProperty('font-size');<br \/>\n      divelem.style.border = window.getComputedStyle(tao,null).border || tao.style.border || tao.currentStyle.getCurrentProperty('border');<br \/>\n      divelem.style.padding = window.getComputedStyle(tao,null).padding || tao.style.padding || tao.currentStyle.getCurrentProperty('padding');<br \/>\n      divelem.style.margin = window.getComputedStyle(tao,null).margin || tao.style.margin || tao.currentStyle.getCurrentProperty('margin');<br \/>\n      divelem.style.overflow = window.getComputedStyle(tao,null).overflow || tao.style.overflow || tao.currentStyle.getCurrentProperty('overflow');<br \/>\n      divelem.style.position='absolute';<br \/>\n      divelem.style.left='' + recto.left + 'px';<br \/>\n      divelem.style.width='' + eval(0 + recto.width) + 'px';<br \/>\n      divelem.style.height='' + recto.height + 'px';<br \/>\n      divelem.style.top='' + eval(-12 + recto.top) + 'px';<br \/>\n      \/\/alert('' + recto.top + ' ' + recto.height + ' ' + ' ... ' + 'eval(-12 + recto.top + recto.height)=' + eval(-12 + recto.top + recto.height));<br \/>\n      \/\/divelem.style.bottom='' + eval(-12 + recto.top + recto.height) + 'px';<br \/>\n      divelem.style.zIndex='999';<br \/>\n      divelem.scrollTop=divelem.scrollHeight;<br \/>\n      tao.style.color='transparent';<br \/>\n     }<br \/>\n     }<br \/>\n     var taovalue=tao.value.replace(\/\\&lt;\/g,'&amp;lt;').replace(\/\\&gt;\/g,'&amp;gt;');<br \/>\n     while (taovalue.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      taovalue=taovalue.replace(String.fromCharCode(10),'&lt;br&gt;');<br \/>\n     }<br \/>\n     acontod.getElementById('djc').innerHTML='&lt;div id=indiv title=\\\"Journal\\\" style=\\\"text-shadow:-0.5px 0.5px 0.5px #ff0000;background: linear-gradient(to right, #e0eafc, #ffffff);margin-top: auto !important;\\\"&gt;' + massage(taovalue) + '&lt;\/div&gt;';<br \/>\n    }<br \/>\n    return '';<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; allows the div to look almost the same as the textarea but with the smarts and we leave a sliver of bottom textarea showing underneath to allow for a bit of resizing logic as well, here, today, in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php--GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php--GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application, which, with content, may look something like &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p><iframe id=ifx src='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' style='width:100%;height:800px;'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-content-tutorial\/' rel=\"noopener\">Journal Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jpt'>Previous relevant <a target=\"_blank\" title='Journal Privacy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-privacy-tutorial\/' rel=\"noopener\">Journal Privacy Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Privacy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_privacy.gif\" title=\"Journal Privacy Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Privacy Tutorial<\/p><\/div>\n<p>We&#8217;ve managed to almost keep up the brevity &#8230; regarding blog posting titles, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a><sup> given a character here or there<\/sup>?!<\/p>\n<p>Drilling down on the changed word, to &#8220;Privacy&#8221;, further to yesterday&#8217;s <a title='Journal Primer Tutorial' href='#jxxpt'>Journal Primer Tutorial<\/a> more loose privacy, what are we getting at?<\/p>\n<ul>\n<li>\n<blockquote><p>\nPrivacy is a subjective term\n<\/p><\/blockquote>\n<p> &#8230; what goes as &#8220;private&#8221; for one user can be a completely different set of standards to another user &#8230;<\/li>\n<li>take, on the clientside of the &#8220;privacy and security equation&#8221; of online considerations, it is really hard as a programmer to arrange &#8220;sensible levels&#8221; of security to a user using web browser web inspectors to their full functionality &#8230; but as programmers &#8230;<\/li>\n<li>we can attempt to make it &#8220;beyond the patience of those users&#8221; regarding the &#8220;privacy and security equation&#8221; &#8230; and in the case of our Journal web application &#8230;<\/li>\n<li>it interfaces on the clientside to a unique combination of &#8230;\n<ol>\n<li>device<\/li>\n<li>web browser<\/li>\n<\/ol>\n<p> &#8230; with our Journal web application via window.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a> means to construct those right hand button or dropdown Recall<sup>ing<\/sup> HTML element &#8220;aids&#8221; &#8230; and those users could get to that information via most modern web browser web inspectors &#8230; <font size=1 id=usbt>given, movie style, they quickly sneak onto the computer of the user just having used the Journal web application, presumably before the sleep manager kicks in, and gets to the relevant web browser&#8217;s web inspector&#8217;s functionality and copies two encrypted strings onto &#8230; it is the &#8220;wonderful USB&#8221; scene &#8230; presumably with a progress bar showing as they are just about to be discovered &#8230; and go away to decrypt at their leisure &#8230; <span><a class=audioytplay href='https:\/\/www.youtube.com\/watch?v=zROIlspgOjM'>Pina Colada<\/a><\/span>, anyone<sup>?<\/sup><\/font> &#8230; but &#8230;<\/li>\n<li>we can annoy such activity, perhaps, by encrypting both the window.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a> relevant record content and key &#8230; which we&#8217;re starting to do today<\/li>\n<\/ul>\n<p>We could go a stage further, and just work it within PHP but it is pointless to go too far along these lines because once the Journal link becomes like &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p> &#8230; well, everybody knows everything by then <font size=1>(to which end, as of today, there is less address bar argument usage going on as a user creates their content, because we now POST it rather than GET it, perhaps making it that wee bit harder for our <a href=#usbt>&#8220;USB thief&#8221;<\/a>)<\/font>, and that is why we could share that link with you all.  If we went too far regarding privacy and security the whole web application loses all friendliness!<\/p>\n<p>Also regarding <i>Recall<\/i> thoughts, users who use Name and Date of Birth access to a Journal may also be asked for a Secret Number, as well, as of today, depending on where they are when they access the Journal web application.<\/p>\n<p>What is another privacy thing we had going, even as of yesterday?  Would you believe it if we say the Journal data exists on a web server in it&#8217;s own non encrypted form in a file, but barring using <sup>s<\/sup>ftp or some other way to get to the RJM Programming web server in a Terminal session, or such like, the general public can not get to that file, and specify it in some web browser address bar URL, in that we&#8217;ve stored it outside that (for Apache web server, up the web server folder tree from <i>public_html<\/i> &#8220;Document Root&#8221; folder) public access place.  Keen programmers could also encrypt this data within the file, or use a database perhaps, or some other level of privacy\/security, but again, we are not going to that level of security with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php-GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php-GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application.<\/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\/journal-privacy-tutorial\/' rel=\"noopener\">Journal Privacy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jxxpt'>Previous relevant <a target=\"_blank\" title='Journal Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-primer-tutorial\/' rel=\"noopener\">Journal 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\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.gif\" title=\"Journal Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Primer Tutorial<\/p><\/div>\n<blockquote><p>\nIt&#8217;s a new project day &#8230;. yay!!!\n<\/p><\/blockquote>\n<blockquote><p>\nIt&#8217;s a candidate for shortest blog posting title hereabouts <sub><font siz=1> day<\/font><\/sub> &#8230;. yay!!!\n<\/p><\/blockquote>\n<p>And so, with the brevity, we must explain that PHP serverside language is needed here, because writing to the RJM Programming web server, into files, is required for this project.  If you do not like brevity though, we can <a href='#post-71684' onclick=\"setInterval(function(){ var ia='post-71684'; if (document.getElementById(ia).innerHTML.indexOf(String.fromCharCode(62) + 'Jou' + 'rnal') != -1) { document.getElementById(ia).innerHTML=document.getElementById(ia).innerHTML.replace(String.fromCharCode(62) + 'Jou' + 'rnal',String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal').replace('String.fromCharCode(62) + Dia' + 'ry',String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry').replace(String.fromCharCode(62) + 'Jou' + 'rnal',String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal').replace('String.fromCharCode(62) + Dia' + 'ry',String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry'); } else { document.getElementById(ia).innerHTML=document.getElementById(ia).innerHTML.replace(String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal',String.fromCharCode(62) + 'Jou' + 'rnal').replace(String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry',String.fromCharCode(62) + 'Dia' + 'ry').replace(String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal',String.fromCharCode(62) + 'Jou' + 'rnal').replace(String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry',String.fromCharCode(62) + 'Dia' + 'ry'); } }, 3765);\" href='#'>toggle the title<\/a> for you here!?<\/p>\n<p>Am sure our vagueness about any differences between a personal &#8220;journal&#8221; and a personal &#8220;diary&#8221; may grate on some &#8230;  <a href='#post-71684' onclick=\"setInterval(function(){ var iia='post-71684'; if (document.getElementById(iia).innerHTML.indexOf('Dia' + 'ry Primer') == -1) { document.getElementById(iia).innerHTML=document.getElementById(iia).innerHTML.replace('Jou' + 'rnal Primer ','Dia' + 'ry Primer ').replace('Jou' + 'rnal Primer ','Dia' + 'ry Primer '); } else { document.getElementById(iia).innerHTML=document.getElementById(iia).innerHTML.replace('Dia' + 'ry Primer ','Journ' + 'al Primer ').replace('Dia' + 'ry Primer ','Jou' + 'rnal Primer ');   } }, 7000);\" href='#'><font size=1>and all because you asked for it<\/font><\/a>!?<\/p>\n<p>Anyway, the concept is &#8230;<\/p>\n<ol>\n<li>Identification &#8230;\n<ul>\n<li>user enters their name<\/li>\n<li>user enters their 8 digit date of birth ( eg. 20041231 ) &#8230; then to round off on the &#8220;identification section&#8221; if you will the web application assigns a &#8230;<\/li>\n<li>6 digit secret number<\/li>\n<\/ul>\n<\/li>\n<li>Posting &#8230;\n<ul>\n<li>web application assigns a default Journal Entry timestamp &#8230; you can change along with a textarea means of entering that time snapshot&#8217;s &#8230;<\/li>\n<li>journal entry content &#8230; so far just text and 5000 character limit on this first draft<\/li>\n<li>user clicks\/taps the &#8220;Post to Journal&#8221; button to display the latest Journal version to the top left above<\/li>\n<\/ul>\n<\/li>\n<li>Recounting &#8230;\n<ul>\n<li>even just completing an Identification that will be remembered as a button or dropdown displayed to the right for the user refiring up the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application indicates a name of relevance onto which a click\/tap\/selection brings about &#8230;<\/li>\n<li>a validation of either the 8 digit date of birth or 6 digit secret number &#8230; allowing access and display to the relevant Journal at the top left of the web application &#8230; or if you know the Journal filename &#8230; for example &#8230;<\/li>\n<li><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Pretty straightforward in concept, but the security aspects to protect data privacy, add to the complication somewhat in the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php_GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try yourself.<\/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='#d71684' onclick='var dv=document.getElementById(\"d71684\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/journal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71684' 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='#d71711' onclick='var dv=document.getElementById(\"d71711\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/privacy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71711' 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='#d71732' onclick='var dv=document.getElementById(\"d71732\"); 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='d71732' 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='#d71749' onclick='var dv=document.getElementById(\"d71749\"); 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='d71749' 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='#d71758' onclick='var dv=document.getElementById(\"d71758\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71758' 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='#d71767' onclick='var dv=document.getElementById(\"d71767\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71767' 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='#d71792' onclick='var dv=document.getElementById(\"d71792\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71792' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today, it&#8217;s a mix of &#8230; styling &#8230; &lt;?php echo &#8221; &lt;style&gt; * { border-radius: 8px; margin: 5 5 5 5; } button { color: blue; } input[type=\\&#8221;submit\\&#8221;] { color: blue; } hr { background-color: red; height: 1px; border: 0; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/journal-emoji-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,29,37],"tags":[2824,2462,1653,5401,174,257,2442,281,1654,342,367,2570,2457,380,1538,385,5301,386,418,429,430,5398,2137,3033,2727,5402,557,3961,587,5403,2342,672,1807,2415,739,760,830,1546,860,894,932,1988,4702,2976,997,1986,1917,1107,1114,3716,1159,1184,1209,1212,1226,3889,1254,1262,5399,1341,1345,5400,2099,1411,3551,1452,1493],"class_list":["post-71792","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-operating-system","category-tutorials","tag-absolute","tag-association","tag-base64","tag-bredcrumb","tag-button","tag-content","tag-contenteditable","tag-css","tag-data-uri","tag-div","tag-dropdown","tag-edit","tag-editing","tag-email","tag-embed","tag-emoji","tag-encrypt","tag-encryption","tag-file","tag-file_get_contents","tag-file_put_contents","tag-first-draft","tag-flat-file","tag-flex","tag-hardcode","tag-hardcoded","tag-hashtag","tag-hashtagging","tag-iframe","tag-ink","tag-journal","tag-key","tag-link","tag-localstorage","tag-mailto","tag-media","tag-navigation","tag-nested","tag-onblur","tag-overlay","tag-php","tag-position","tag-primer","tag-privacy","tag-programming","tag-proof-of-concept","tag-scroll","tag-scrolling","tag-security","tag-serverside","tag-sms","tag-spotify","tag-style","tag-styling","tag-svg","tag-svgxml","tag-text","tag-textarea","tag-tutoriial","tag-update","tag-url","tag-web-browser-address-bar","tag-web-inspector","tag-web-server","tag-window-localstorage","tag-word","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71792"}],"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=71792"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71792\/revisions"}],"predecessor-version":[{"id":71812,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71792\/revisions\/71812"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=71792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=71792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=71792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}