{"id":48184,"date":"2020-03-04T03:01:23","date_gmt":"2020-03-03T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48184"},"modified":"2020-03-03T20:49:34","modified_gmt":"2020-03-03T10:49:34","slug":"wordpress-blog-email-post-collaboration-emphasis-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-email-post-collaboration-emphasis-tutorial\/","title":{"rendered":"WordPress Blog Email Post Collaboration Emphasis Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-menu\/' title='WordPress Blog Email Post Collaboration Emphasis Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_menu_email_collaboration_emphasis.gif\"  \/><\/a><p class=\"wp-caption-text\">WordPress Blog Email Post Collaboration Emphasis Tutorial<\/p><\/div>\n<p>There&#8217;d be lots of people who see the greatest challenge for them usefully using &#8220;the Internet&#8221; (or world wide web) is to &#8220;sort the wheat from the chaff&#8221;.   In relation to this with regard to yesterday&#8217;s <a title='WordPress Blog Email Post Collaboration History Tutorial' href='#wpbepcht'>WordPress Blog Email Post Collaboration History Tutorial<\/a>, within any collaboration emails (containing WordPress Blog content) it is that blog posting content that should be prominent, and yet there are header and menu content to de-emphasise, up the top, with our WordPress Blog content.  At first, to help here, we thought to use our favourite &#8220;reveal&#8221; tool, the HTML details\/summary partner tag set, but found it did not function over at the Inline HTML Email form of that content.  Never mind, there are other techniques, such as &#8230;<\/p>\n<ul>\n<li>encasing content into an HTML div element of reduced height &#8230;<\/li>\n<li>use style=display:inline-block; for many HTML div that used to be style=display:block;<\/li>\n<li>less &lt;br&gt; line break tags &#8230; and finally &#8230;<\/li>\n<li>delete some irrelevant HTML elements<\/li>\n<\/ul>\n<p> &#8230; helping create an &#8220;emphasis honer&#8221; to get the user&#8217;s vision to follow what you as the programmer intends &#8230; and using that last technique above as well, an HTML element whose content could encourage a bug regarding the data massaging going on here.  That is what we are doing here, that is &#8220;massaging data&#8221; as we get the opportunity we get to intervene before the invocation of the email creator PHP child web application (in an HTML iframe element).<\/p>\n<p>This is all converged as far as coding goes, to the totally reworked Javascript function in the WordPress Blog&#8217;s Twenty Ten theme&#8217;s header.php&#8217;s &#8230;<\/p>\n<p><code><br \/>\nfunction preface(infg) {<br \/>\n  if (infg.indexOf('&lt;\/div&gt;&lt;!-- #access --&gt;') != -1 && infg.indexOf('&lt;div id=\"access\"') != -1) {<br \/>\n    infg=infg.replace('&lt;\/div&gt;&lt;!-- #access --&gt;','&lt;\/div&gt;&lt;\/div&gt;&lt;!-- #access --&gt;').replace('&lt;div id=\"access\"', '&lt;div style=\"width:100%;height:90px;overflow:scroll;\"&gt;&lt;div id=\"access\"');<br \/>\n  }<br \/>\n  if (infg.indexOf('&lt;a href=\"#content\" title=\"Skip to content\"&gt;Skip to content&lt;\/a&gt;') != -1) {<br \/>\n    infg=infg.replace('&lt;a href=\"#content\" title=\"Skip to content\"&gt;Skip to content&lt;\/a&gt;','&lt;a href=\"' + document.URL + '\" title=\"' + document.title.split(' | ')[0] + '\"&gt;' + document.title.split(' | ')[0] + '&lt;\/a&gt;').replace('&lt;a onclick=\" alert(wadvice.replace(&quot;touch on&quot;,&quot;hover over&quot;)); \" href=\"#\" title=\"Long hover contextual help ... welcome to the long hover functionality that shows Context Help Mode toggling functionality via relevant All Posts menu Toggle Context Help Mode submenu ... also note that Highlighting Webpage Contents allows for Wikipedia, Google Translate, Free Dictionary and Google Search functionalities to appear\" onmouseover=\" getContextHelpMode(); \" ontouchstart=\" getContextHelpMode(); \" onmouseout=\" yehBut(); \" ontouchend=\" yehBut(); \"&gt;Highlighting and long hover help.&lt;\/a&gt;','').replace('width=\"940\" height=\"198\" style=\"width:940px;height:198px;\"','width=\"94\" height=\"20\" style=\"width:94px;height:20px;\"').replace('\"nav-next\"&gt;','\"nav-next\" style=\"display:inline-block;\"&gt;').replace('\"nav-previous\"&gt;','\"nav-previous\" style=\"display:inline-block;\"&gt;').replace('\"nav-above\" ','\"nav-above\" style=\"display:inline-block;\" ').replace('\"site-title\"&gt;','\"site-title\" style=\"display:inline-block;\"&gt;').replace('\"site-description\"&gt;','\"site-description\" style=\"display:inline-block;\"&gt;');<br \/>\n  }<br \/>\n  if (infg.indexOf('&lt;sel' + 'ect id=\"linkhints\" ') != -1) {<br \/>\n    return infg=infg.replace('&lt;sel' + 'ect id=\"linkhints\" ' + infg.split('&lt;sel' + 'ect id=\"linkhints\" ')[1].split('&lt;\/sel' + 'ect&gt;')[0] + '&lt;\/sel' + 'ect&gt;', '');<br \/>\n  }<br \/>\n  return infg;<br \/>\n}<br \/>\n<\/code><\/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\/wordpress-blog-email-post-collaboration-emphasis-tutorial\/'>WordPress Blog Email Post Collaboration Emphasis Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpbepcht'>Previous relevant <a target=_blank title='WordPress Blog Email Post Collaboration History Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-email-post-collaboration-history-tutorial\/'>WordPress Blog Email Post Collaboration History Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-menu\/' title='WordPress Blog Email Post Collaboration History Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_menu_email_collaboration_remember.jpg\"  \/><\/a><p class=\"wp-caption-text\">WordPress Blog Email Post Collaboration History Tutorial<\/p><\/div>\n<p>As far as web application user interaction goes, we feel that there is an understanding with a (HTML input type=text) textbox that its use is an implication that for the user to enter a great big lengthy string is not welcome.  Change that textbox into a (HTML) textarea element and the gloves are off, we feel.  We want to do this with our collaboration and feedback on top of the progress of the recent <a title='WordPress Blog Email Post Collaboration Tutorial' href='#wpbepct'>WordPress Blog Email Post Collaboration Tutorial<\/a> and yet keep the HTML form method=GET arrangements that suit the maximum number of email recipient client systems.<\/p>\n<p>But won&#8217;t we run into &#8220;Bad Request (error 400)&#8221; territory <font size=1>(we&#8217;re sure we heard from our Andorran audience)<\/font>?!   Yes, we might, but <font color=blue>there is help at hand<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;textarea style='width:500px;background-color:#f0f0f0;' rows=4 cols=50 <font color=blue>maxlength=200<\/font> placeholder='Optional feedback' name=replyis value=''&gt;&lt;\/textarea&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which, fortunately, must not involve Javascript (to enforce, behind the scenes), because it works over at the Inline HTML Form Emails we are using for our collaboration.  Limit the length of user input we can allow &#8230;<\/p>\n<ol>\n<li>chance to use line feeds &#8230; yet &#8230;<\/li>\n<li>probably not overshoot the URL length limit (around 800 for rjmprogramming.com.au domain)<\/li>\n<\/ol>\n<p>That&#8217;s one idea, and the other today, is to present to the collaborators a bit of timestamped history should the collaborative exchanges go to many toings and froings.  And here, we involved window.<a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a>, in preference to HTTP Cookies, to allow for your more verbose collaborators!<\/p>\n<p>See below <font color=blue>code changes<\/font> to WordPress Blog&#8217;s Twenty Ten theme&#8217;s header.php &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>function lsit(on_mode,in_url,in_subject,in_from,in_to,in_reply) {<br \/>\n  var sfaris='';<br \/>\n  var dow=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];<br \/>\n  var adate=new Date();<br \/>\n  var his=eval('' + adate.getHours());<br \/>\n  var mis=eval('' + adate.getMinutes());<br \/>\n  var sis=eval('' + adate.getSeconds());<br \/>\n  var ssuff='';<br \/>\n  if (('' + adate).indexOf(' GMT') != -1) { ssuff=' GMT' + ('' + adate).split(' GMT')[1]; }<br \/>\n  var rvalis=dow[eval('' + adate.getDay())] + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).split('.')[0].slice(-2) + ' ' + ('0' + adate.getDate()).slice(-2) + ' ' + ('0' + eval(1 + eval('' + adate.getMonth()))).slice(-2).replace('01','Jan').replace('02','Feb').replace('03','Mar').replace('04','Apr').replace('05','May').replace('06','Jun').replace('07','Jul').replace('08','Aug').replace('09','Sep').replace('10','Oct').replace('11','Nov').replace('12','Dec') + ' ' + ('' + adate.getFullYear()) + ' ' + ssuff;<br \/>\n  if (on_mode) {<br \/>\n    return ' on ' + rvalis;<br \/>\n  }<br \/>\n  if (window.localStorage) {<br \/>\n    var prefn='~~' + rvalis + '~~' + in_reply.replace(\/\\'\/g,'`') + '~~ ~~';<br \/>\n    var proposedn=in_url.split('\/\/')[1].replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_from.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_to.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') ;<br \/>\n    var lastn=decodeURIComponent('' + window.localStorage.getItem('lastn_' + in_from.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~')));<br \/>\n    if (lastn != proposedn && lastn != '') {  window.localStorage.removeItem(lastn);   }<br \/>\n    if (lastn != '') { window.localStorage.removeItem('lastn_' + in_from.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~'));  }<br \/>\n    window.localStorage.setItem('lastn_' + in_from.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~'), encodeURIComponent(proposedn));<br \/>\n    sfaris=decodeURIComponent('' + window.localStorage.getItem(in_url.split('\/\/')[1].replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_from.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_to.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~')    ));<br \/>\n    if (!sfaris) { sfaris=''; } else if (sfaris == 'null') { sfaris=''; }<br \/>\n    window.localStorage.removeItem(in_url.split('\/\/')[1].replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_from.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_to.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~'));<br \/>\n    window.localStorage.setItem(in_url.split('\/\/')[1].replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_from.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~') + in_to.replace(\/\\ \/g,'~').replace(\/\\\/\/g,'~'), encodeURIComponent(prefn + sfaris));<br \/>\n  }<br \/>\n  return sfaris;<br \/>\n}<\/font><br \/>\n<br \/>\nfunction last_email_check() {<br \/>\n&lt;?php<br \/>\n  if (isset($_GET['replyis']) && isset($_GET['replyto']) && isset($_GET['replysubject']) && isset($_GET['replyurl']) && isset($_GET['replyfrom'])) {<br \/>\n   if (strpos(urldecode($_GET['replyto']), '@') !== false && strlen(('' . $_GET['replyis'])) &gt; 0) {<br \/>\n    echo \"\\n\" . \" var fbmore=''; \" . \"\\n\";<br \/>\n    $huhr=str_replace(\"\\r\",\"\",str_replace(\"~~\",\"\\n\",str_replace(\"'\",\"`\",str_replace('+',' ',urldecode($_GET['replyis'])))));<br \/>\n    echo \"\\n\" . \" fbmore=(\\\"&lt;form <font color=blue>style='background-color:#e0e0e0;border:5px solid orange;padding:12px 12px 12px 12px;'<\/font> action='\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"' method=GET&gt;<font color=blue>&lt;span style=vertical-align:top;&gt;Optional feedback to \" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \" ... &lt;\/span&gt;&lt;textarea style='width:500px;background-color:#f0f0f0;' rows=4 cols=50 maxlength=200<\/font> placeholder='Optional feedback to \" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \" regarding ...' name=replyis value=''&gt;<font color=blue>&lt;\/TEXTAREA&gt;<\/font>&lt;br&gt;&lt;input type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \"' name=replyto&gt;&lt;\/input&gt;&lt;input type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replyto'])) . \"' name=replyfrom&gt;&lt;\/input&gt;&lt;input type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replysubject'])) . \"' name=replysubject&gt;&lt;\/input&gt;Regarding &lt;a target=_blank title='Relevant blog post' href='\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"'&gt;\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"&lt;\/a&gt; &lt;input style='width:500px;'  type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"' name=replyurl&gt;&lt;\/input&gt;&lt;br&gt;After they said<font color=blue> \\\" + lsit(true,'\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"','\" . str_replace('+',' ',urldecode($_GET['replysubject'])) . \"','\" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \"','\" . str_replace('+',' ',urldecode($_GET['replyto'])) . \"','\" . str_replace(\"'\",\"' + String.fromCharCode(27) + '\",str_replace(\"\\n\",\"~~\",str_replace(\"\\r\",\"\",str_replace(\"~~\",\"\\n\",str_replace(\"'\",\"`\",str_replace('+',' ',urldecode($_GET['replyis']))))))) . \"') + \\\" <\/font>...&lt;br&gt;&lt;textarea style=background-color:lightblue; id=valwas cols=80 rows=5&gt;\" . str_replace(\"\\n\",\"~~\",str_replace(\"\\r\",\"\",str_replace(\"~~\",\"\\n\",str_replace(\"'\",\"`\",str_replace('+',' ',urldecode($_GET['replyis'])))))) . \"&lt;\/textarea&gt;&lt;br&gt;&lt;input style=background-color:yellow; type=submit value='Email \" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \"'&gt;&lt;\/input&gt;&lt;\/form&gt;\\\")<font color=blue>.replace('&lt;\/textarea&gt;', lsit(false,'\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"','\" . str_replace('+',' ',urldecode($_GET['replysubject'])) . \"','\" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \"','\" . str_replace('+',' ',urldecode($_GET['replyto'])) . \"','\" . str_replace(\"'\",\"' + String.fromCharCode(27) + '\",str_replace(\"\\n\",\"~~\",str_replace(\"\\r\",\"\",str_replace(\"~~\",\"\\n\",str_replace(\"'\",\"`\",str_replace('+',' ',urldecode($_GET['replyis']))))))) . \"') + '&lt;\/textarea&gt;').replace('&lt;\/TEXTAREA&gt;','&lt;\/textarea&gt;')<\/font>; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdhuhta').innerHTML=fbmore.replace(\/\\~\\~\/g, String.fromCharCode(10)); \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('emailform').action='\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php'; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdto').value='\" . str_replace('+',' ',urldecode($_GET['replyto'])) . \"';\" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdsubj').value='\" . str_replace('+',' ',urldecode($_GET['replysubject'])) . \"'; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" if (1 == 2) { document.getElementById('iinline').value=encodeURIComponent(document.getElementById('tdhuhta').value); } \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('fsubm').click(); \" . \"\\n\";<br \/>\n   }<br \/>\n  } else if (isset($_POST['subj']) && isset($_POST['hcont']) && isset($_POST['to'])) {<br \/>\n   if (strpos(urldecode($_POST['to']), '@') !== false) {<br \/>\n    $toisa=str_replace('+',' ',urldecode($_POST['to']));<br \/>\n    echo \"\\n\" . \" var fbmore=''; \" . \"\\n\";<br \/>\n    if (strpos(str_replace('+',' ',urldecode($_POST['to'])), \",\") !== false) {<br \/>\n     $ees=explode(\",\", str_replace('+',' ',urldecode($_POST['to'])));<br \/>\n     $toisa=$ees[0];<br \/>\n     echo \"\\n\" . \" var fbmore=\\\"&lt;form <font color=blue>style='background-color:#e0e0e0;border:5px solid orange;padding:12px 12px 12px 12px;'<\/font> action=\\\" + document.URL + \\\" method=GET&gt;<font color=blue>&lt;span style=vertical-align:top;&gt;Optional feedback to \" . $ees[1] . \": &lt;\/span&gt;&lt;textarea style='width:500px;background-color:#f0f0f0;' rows=4 cols=50 maxlength=200<\/font> placeholder='Optional feedback to \" . $ees[1] . \" ...' name=replyis value=''&gt;<font color=blue>&lt;\/textarea&gt;<\/font>&lt;br&gt;&lt;input type=hidden value='\" . $ees[1] . \"' name=replyto&gt;&lt;\/input&gt;&lt;input type=hidden value='\" . $ees[0] . \"' name=replyfrom&gt;&lt;\/input&gt;&lt;input type=hidden value='\\\" + document.title + \\\"' name=replysubject&gt;&lt;\/input&gt;&lt;input type=hidden value='\\\" + document.URL + \\\"' name=replyurl&gt;&lt;\/input&gt;&lt;br&gt;&lt;input style=background-color:yellow; type=submit value='Email \" . $ees[1] . \"'&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;br&gt;\\\"; \" . \"\\n\";<br \/>\n    }<br \/>\n    echo \"\\n\" . \" document.getElementById('emailform').action='\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php'; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdto').value='\" . $toisa . \"';\" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdsubj').value=document.title; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdhuhta').value=preface('&lt;body&gt;' + String.fromHtmlEntities(fbmore + document.body.innerHTML) + '&lt;\/body&gt;'); \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('iinline').value=encodeURIComponent(document.getElementById('tdhuhta').value);  \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('fsubm').click(); \" . \"\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n}<br \/>\n<\/code><\/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\/wordpress-blog-email-post-collaboration-history-tutorial\/'>WordPress Blog Email Post Collaboration History Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpbepct'>Previous relevant <a target=_blank title='WordPress Blog Email Post Collaboration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-email-post-collaboration-tutorial\/'>WordPress Blog Email Post Collaboration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-menu\/' title='WordPress Blog Email Post Collaboration Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_menu_email_reply.jpg\"  \/><\/a><p class=\"wp-caption-text\">WordPress Blog Email Post Collaboration Tutorial<\/p><\/div>\n<p>The progress up to yesterday&#8217;s <a title='WordPress Blog Email Post Plus Tutorial' href='#wpbeppt'>WordPress Blog Email Post Plus Tutorial<\/a> concentrated on &#8230;<\/p>\n<ul>\n<li>sharing (email) mechanisms (albeit we are happy you see the content as you open the email) &#8230; but today we turn our attention to ideas regarding &#8230;<\/li>\n<li>collaboration between two parties independent of rjmprogramming.com.au domain<\/li>\n<\/ul>\n<p> &#8230; that collaboration started today using the mail server at rjmprogramming.com.au as an &#8220;honest broker&#8221; passing emails between &#8230;<\/p>\n<ul>\n<li>the email to (up to now) &#8230; and the optionally entered (comma delimited) &#8230;<\/li>\n<li>the email from (telling the recipient who is behind the email using rjmprogramming.com.au mail server as their conduit)<\/li>\n<\/ul>\n<p>As you can see, as far as user interaction goes, it is not taxing to kick off this collaboration phase for this WordPress Blog still up at Emoji &#128232; Menu in the top menu.  The change in WordPress Blog&#8217;s Twenty Ten theme&#8217;s header.php revolves around <font color=blue>seeing a comma in that email address user interaction result<\/font> as per &#8230;<\/p>\n<p><code><br \/>\nfunction askemail() {<br \/>\n   var isvalid=false;<br \/>\n&lt;?php<br \/>\n   if (strpos(\"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'], \"-tutorial\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n document.getElementById('emailform').action='\" . \"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] . \"'; \\n\";<br \/>\n   } else if (strpos(str_replace('??','?',\"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] . \"?\" . $_SERVER['QUERY_STRING']), \"?p=\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n document.getElementById('emailform').action='\" . str_replace('??','?',\"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] . \"?\" . $_SERVER['QUERY_STRING']) . \"'; \\n\";<br \/>\n   } else {<br \/>\n    echo \"\\n document.getElementById('emailform').action='\" . ('' . $_SERVER['HTTP_REFERER']) . \"'; \\n\";<br \/>\n   }<br \/>\n   if (strpos(('' . $_SERVER['HTTP_REFERER']), \"-tutorial\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n\";<br \/>\n   } else if (strpos(('' . $_SERVER['HTTP_REFERER']), \"?p=\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n\";<br \/>\n   }<br \/>\n?&gt;<br \/>\n  if (isvalid) {<br \/>\n  var etois=prompt(\"Please enter email address to forward this blog's \" + document.URL.split(':')[0] + ':' + document.getElementById('emailform').action + \" webpage to<font color=blue> (and optionally comma separate an email from address for collaboration)<\/font>\", \"\");<br \/>\n  if (etois != null) {<br \/>\n    if (etois.indexOf('@') != -1) {<br \/>\n     document.getElementById('tdto').value=etois;<br \/>\n     document.getElementById('fsubm').click();<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction withinpreface(infgx) {<br \/>\n  var huhs=infgx.split('&lt;\/sc' + 'ript&gt;');<br \/>\n  var inpre='';<br \/>\n  if (huhs.length &gt; 1) {<br \/>\n    for (var ihj=0; ihj&lt;huhs.length; ihj++) {<br \/>\n      inpre+=huhs[ihj].split('&lt;sc' + 'ript')[0];<br \/>\n    }<br \/>\n  }<br \/>\n  return inpre;<br \/>\n}<br \/>\n<br \/>\nfunction preface(infg) {<br \/>\n  var insuf='', inpre='';<br \/>\n  var huhg=document.head.innerHTML;<br \/>\n  var huhs=huhg.split('&lt;\/sc' + 'ript&gt;');<br \/>\n  if (huhs.length &gt; 1) {<br \/>\n    insuf='&lt;\/ht' + 'ml&gt;';<br \/>\n    inpre='&lt;ht' + 'ml&gt;&lt;he' + 'ad&gt;';<br \/>\n    inpre+=withinpreface(huhg);<br \/>\n    inpre+='&lt;\/he' + 'ad&gt;';<br \/>\n  }<br \/>\n  \/\/return inpre + infg + insuf;<br \/>\n  return infg;<br \/>\n}<br \/>\n<br \/>\nfunction last_email_check() {<br \/>\n&lt;?php<br \/>\n  <font color=blue>if (isset($_GET['replyis']) && isset($_GET['replyto']) && isset($_GET['replysubject']) && isset($_GET['replyurl']) && isset($_GET['replyfrom'])) {<br \/>\n   if (strpos(urldecode($_GET['replyto']), '@') !== false && strlen(('' . $_GET['replyis'])) > 0) {<br \/>\n    echo \"\\n\" . \" var fbmore=''; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" fbmore=\\\"&lt;form action='\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"' method=GET&gt;Optional feedback to \" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \" ...&lt;input style='width:500px;' type=text placeholder='Optional feedback to \" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \" regarding ...' name=replyis value=''&gt;&lt;\/input&gt;&lt;br&gt;&lt;input type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \"' name=replyto&gt;&lt;\/input&gt;&lt;input type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replyto'])) . \"' name=replyfrom&gt;&lt;\/input&gt;&lt;input type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replysubject'])) . \"' name=replysubject&gt;&lt;\/input&gt;Regarding &lt;a target=_blank title='Relevant blog post' href='\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"'&gt;\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"&lt;\/a&gt; ... &lt;input style='width:500px;'  type=hidden value='\" . str_replace('+',' ',urldecode($_GET['replyurl'])) . \"' name=replyurl&gt;&lt;\/input&gt;&lt;br&gt;After they said ...&lt;br&gt;&lt;textarea cols=80 rows=5&gt;\" . str_replace('+',' ',urldecode($_GET['replyis'])) . \"&lt;\/textarea&gt;&lt;br&gt;&lt;input style=background-color:yellow; type=submit value='Email \" . str_replace('+',' ',urldecode($_GET['replyfrom'])) . \"'&gt;&lt;\/input&gt;&lt;\/form&gt;\\\"; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdhuhta').innerHTML=fbmore; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('emailform').action='\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php'; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdto').value='\" . str_replace('+',' ',urldecode($_GET['replyto'])) . \"';\" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdsubj').value='\" . str_replace('+',' ',urldecode($_GET['replysubject'])) . \"'; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" if (1 == 2) { document.getElementById('iinline').value=encodeURIComponent(document.getElementById('tdhuhta').value); } \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('fsubm').click(); \" . \"\\n\";<br \/>\n   }<br \/>\n  } else<\/font> if (isset($_POST['subj']) && isset($_POST['hcont']) && isset($_POST['to'])) {<br \/>\n   if (strpos(urldecode($_POST['to']), '@') !== false) {<br \/>\n    <font color=blue>$toisa=str_replace('+',' ',urldecode($_POST['to']));<br \/>\n    echo \"\\n\" . \" var fbmore=''; \" . \"\\n\";<br \/>\n    if (strpos(str_replace('+',' ',urldecode($_POST['to'])), \",\") !== false) {<br \/>\n     $ees=explode(\",\", str_replace('+',' ',urldecode($_POST['to'])));<br \/>\n     $toisa=$ees[0];<br \/>\n     echo \"\\n\" . \" var fbmore=\\\"&lt;form action=\\\" + document.URL + \\\" method=GET&gt;Optional feedback to \" . $ees[1] . \": &lt;input style='width:500px;'  type=text placeholder='Optional feedback to \" . $ees[1] . \" ...' name=replyis value=''&gt;&lt;\/input&gt;&lt;br&gt;&lt;input type=hidden value='\" . $ees[1] . \"' name=replyto&gt;&lt;\/input&gt;&lt;input type=hidden value='\" . $ees[0] . \"' name=replyfrom&gt;&lt;\/input&gt;&lt;input type=hidden value='\\\" + document.title + \\\"' name=replysubject&gt;&lt;\/input&gt;&lt;input type=hidden value='\\\" + document.URL + \\\"' name=replyurl&gt;&lt;\/input&gt;&lt;br&gt;&lt;input style=background-color:yellow; type=submit value='Email \" . $ees[1] . \"'&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;br&gt;\\\"; \" . \"\\n\";<br \/>\n    }<\/font><br \/>\n    echo \"\\n\" . \" document.getElementById('emailform').action='\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php'; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdto').value='\" . <font color=blue>$toisa<\/font> . \"';\" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdsubj').value=document.title; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdhuhta').value=preface('<body>' + String.fromHtmlEntities(<font color=blue>fbmore + <\/font>document.body.innerHTML) + '<\/body>'); \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('iinline').value=encodeURIComponent(document.getElementById('tdhuhta').value);  \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('fsubm').click(); \" . \"\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and you can try this new collaboration for yourself up at the top menu of this WordPress Blog&#8217;s webpage.<\/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-wordpress-blog-email-post-collaboration-tutorial\/'>WordPress Blog Email Post Collaboration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpbeppt'>Previous relevant <a target=_blank title='WordPress Blog Email Post Plus Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-email-post-plus-tutorial\/'>WordPress Blog Email Post Plus Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-menu\/' title='WordPress Blog Email Post Plus Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_menu_email_plus.jpg\"  \/><\/a><p class=\"wp-caption-text\">WordPress Blog Email Post Plus Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='WordPress Blog Email Post Tutorial' href='#wpbept'>WordPress Blog Email Post Tutorial<\/a> conjoined parts to a weakness, as per &#8230;<\/p>\n<ol>\n<li>PHP&#8217;s urldecode &#8230; <\/li>\n<li>treatment of &#8220;+&#8221; character, normally thought of as representing a blank (ascii code 32 &#8230; hence we mostly (in the past) got away with &#8230;<br \/>\n<code><br \/>\n$goodhtml = str_replace('+',' ',urldecode($_POST['hcont']));<br \/>\n<\/code><br \/>\n) &#8230; but that strategy doesn&#8217;t &#8220;cut the mustard&#8221; with WordPress Blog content (causing truncated email WordPress Blog content results, on occasion) &#8230;<\/li>\n<li>there being lots of &lt;code&gt; code snippets &lt;\/code&gt; appearing in WordPress Blog content &#8230; it becomes a new issue that &#8230;<\/li>\n<li>we need to differentiate &#8220;+&#8221; blank characters (via urlencode form data translation that goes on) from legitimate &#8220;+&#8221; used in Javascript (and PHP) mathematics and Javascript concatenation (within those code snippets)<\/li>\n<\/ol>\n<p> &#8230; and the unknotting of this &#8220;tangle&#8221; does sound daunting, doesn&#8217;t it?<\/p>\n<p>How about calling on Javascript&#8217;s encodeURIComponent as part of the data sent to our Inline HTML Email PHP Helper, effectively <i>&#8220;getting in first&#8221;, applying a &#8220;%20&#8221; for every &#8220;blank&#8221;<\/i> paradigm, ahead of the &#8220;+&#8221; character getting a look in (when PHP gets its way), and then the &#8220;%20&#8221; get urldecode(d) as &#8220;blank&#8221; and &#8220;%2B&#8221; get urldecode(d) as &#8220;+&#8221;?  Sounds good, though it adds to the overall amount of data transferred in the network, here.  Remember us writing about encodeURIComponent (and decodeURIComponent) conversion concepts when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-primer-tutorial\/' title='Javascript and PHP Base64 Primer Tutorial'>Javascript and PHP Base64 Primer Tutorial<\/a>?  By the way, the base64 at Javascript window.btoa ideas we tried first did not work well on the client side when it contains emoji data.  Sometimes it pays to think simple!  But please do not underestimate PHP base64_encode for this same task on the server side.<\/p>\n<p>What coding mechanism (do we apply) to making this a (manageable) solution?  Well, that &#8220;inline&#8221; <strike>textbox<\/strike>textarea flags &#8220;Inline HTML Email&#8221;, which is always true here, so why not make a &#8220;binary&#8221; functionality &#8220;ternary&#8221;, and fill this data item with <strike>base64<\/strike>encodeURIComponent data to flag to the PHP Helper that it is better to <strike>&#8220;base64_decode&#8221;<\/strike>urldecode the data from the HTML form &#8220;inline&#8221; <strike>textbox<\/strike>textarea, rather than the hit or miss &#8220;+&#8221; character HTML being sent in that usual <strike>textbox<\/strike>textarea, as a potential solution means?  The PHP can differentiate &#8220;ternary&#8221; usage from &#8220;binary&#8221; via a test of the data item&#8217;s length.  Gets better and better!  Here is the WordPress Blog&#8217;s Twenty Ten theme&#8217;s header.php <font color=blue>HTML change<\/font> followed by a <font color=purple>Javascript change<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>&lt;textarea id=iinline style=display:none; name=inline value=\"\"&gt;&lt;\/textarea&gt;<\/font><br \/>\n<\/code><\/p>\n<p><code><br \/>\n    <font color=purple>echo \"\\n\" . \" document.getElementById('iinline').value=encodeURIComponent(document.getElementById('tdhuhta').value);  \" . \"\\n\"; <\/font><br \/>\n<\/code><\/p>\n<p>On the receiving end, creating the email via PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a> function, here is <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php--------GETME'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php--------GETME' title='emailhtml.php'>emailhtml.php<\/a> PHP Inline HTML Email helper.<\/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\/wordpress-blog-email-post-plus-tutorial\/'>WordPress Blog Email Post Plus Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpbept'>Previous relevant <a target=_blank title='WordPress Blog Email Post Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-email-post-tutorial\/'>WordPress Blog Email Post Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-menu\/' title='WordPress Blog Email Post Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_menu_email.jpg\"  \/><\/a><p class=\"wp-caption-text\">WordPress Blog Email Post Tutorial<\/p><\/div>\n<p>It was exciting to see real content (with emojis) in the body of an email, there before you as you open it, as a result of the work of yesterday&#8217;s <a title='Emoji SMS and Emailing Large Data Tutorial' href='#esmseldt'>Emoji SMS and Emailing Large Data Tutorial<\/a>.  So why not start getting our WordPress Blog, that you are reading now, into the act?<\/p>\n<p>Our first idea for an intervention point is as an added option up the top of our Emoji Menu (now Emoji &#128232; Menu), introduced when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-primer-tutorial\/' title='WordPress Emoji Menu Primer Tutorial'>WordPress Emoji Menu Primer Tutorial<\/a>, as per &#8230;<\/p>\n<p><code><br \/>\n&lt;option title=\"Email Last Blog Page\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" id=\"forwardemail\" value=\"askemail\"&gt;&amp;#128232;&lt;\/option&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; supported in the WordPress Blog&#8217;s Twenty Ten theme&#8217;s header.php by the new code <font color=blue>document.body onload call<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;body onload=\" if (1 == 1) { lookforbincode(); } lookforhighlight();  postcalendar(); changeasfordownload();  if (cafd == cafd) { cafd=0; } else { cafd=true; }  checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies();  cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); details_summary(0); <font color=-blue>setTimeout(last_email_check,5000);<\/font> \" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; calling on the Javascript (with PHP embeddings) &#8230;<\/p>\n<p><code><br \/>\nfunction askemail() {<br \/>\n   var isvalid=false;<br \/>\n&lt;?php<br \/>\n   if (strpos(\"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'], \"-tutorial\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n document.getElementById('emailform').action='\" . \"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] . \"'; \\n\";<br \/>\n   } else if (strpos(str_replace('??','?',\"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] . \"?\" . $_SERVER['QUERY_STRING']), \"?p=\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n document.getElementById('emailform').action='\" . str_replace('??','?',\"\/\/\" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] . \"?\" . $_SERVER['QUERY_STRING']) . \"'; \\n\";<br \/>\n   } else {<br \/>\n    echo \"\\n document.getElementById('emailform').action='\" . ('' . $_SERVER['HTTP_REFERER']) . \"'; \\n\";<br \/>\n   }<br \/>\n   if (strpos(('' . $_SERVER['HTTP_REFERER']), \"-tutorial\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n\";<br \/>\n   } else if (strpos(('' . $_SERVER['HTTP_REFERER']), \"?p=\") !== false) {<br \/>\n    echo \"\\n isvalid=true; \\n\";<br \/>\n   }<br \/>\n?&gt;<br \/>\n  if (isvalid) {<br \/>\n  var etois=prompt(\"Please enter email address to forward this blog's \" + document.URL.split(':')[0] + ':' + document.getElementById('emailform').action + \" webpage to\", \"\");<br \/>\n  if (etois != null) {<br \/>\n    if (etois.indexOf('@') != -1) {<br \/>\n     document.getElementById('tdto').value=etois;<br \/>\n     document.getElementById('fsubm').click();<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction withinpreface(infgx) {<br \/>\n  var huhs=infgx.split('&lt;\/sc' + 'ript&gt;');<br \/>\n  var inpre='';<br \/>\n  if (huhs.length &gt; 1) {<br \/>\n    for (var ihj=0; ihj&lt;huhs.length; ihj++) {<br \/>\n      inpre+=huhs[ihj].split('&lt;sc' + 'ript')[0];<br \/>\n    }<br \/>\n  }<br \/>\n  return inpre;<br \/>\n}<br \/>\n<br \/>\nfunction preface(infg) {<br \/>\n  var insuf='', inpre='';<br \/>\n  var huhg=document.head.innerHTML;<br \/>\n  var huhs=huhg.split('&lt;\/sc' + 'ript&gt;');<br \/>\n  if (huhs.length &gt; 1) {<br \/>\n    insuf='&lt;\/ht' + 'ml&gt;';<br \/>\n    inpre='&lt;ht' + 'ml&gt;&lt;he' + 'ad&gt;';<br \/>\n    inpre+=withinpreface(huhg);<br \/>\n    inpre+='&lt;\/he' + 'ad&gt;';<br \/>\n  }<br \/>\n  \/\/return inpre + infg + insuf;<br \/>\n  return infg;<br \/>\n}<br \/>\n<br \/>\nfunction last_email_check() {<br \/>\n&lt;?php<br \/>\n  if (isset($_POST['subj']) && isset($_POST['hcont']) && isset($_POST['to'])) {<br \/>\n   if (strpos(urldecode($_POST['to']), '@') !== false) {<br \/>\n    echo \"\\n\" . \" document.getElementById('emailform').action='\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php'; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdto').value='\" . str_replace('+',' ',urldecode($_POST['to'])) . \"';\" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdsubj').value=document.title; \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('tdhuhta').value=preface('&lt;body&gt;' + String.fromHtmlEntities(document.body.innerHTML) + '&lt;\/body&gt;'); \" . \"\\n\";<br \/>\n    echo \"\\n\" . \" document.getElementById('fsubm').click(); \" . \"\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; working and combining with some new HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;div id=\"emailformone\" style=\"display:none;\"&gt;&lt;form id=\"emailform\" style=\"display:none;\" target=\"emailiframe\" method=\"POST\" action=\"\/\/www.rjmprogramming.com.au\/ITblog\/&lt;?php if (strlen(('' . $_SERVER['QUERY_STRING'])) &gt; 0) { echo '?' . ('' . $_SERVER['QUERY_STRING']); } ?&gt;\"&gt;&lt;input type=hidden style=display:none; name=inline value=\"\"&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden style=display:none; name=to id=tdto value=\"\"&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden style=display:none; name=subj id=tdsubj value=\"Robert James Metcalfe Blog - RJM Programming\"&gt;&lt;\/input&gt;<br \/>\n&lt;textarea name=hcont style=display:none; value=\"\" id=tdhuhta cols=80 rows=30&gt;&lt;\/textarea&gt;<br \/>\n&lt;input type=hidden style=display:none; name=cc id=tdcc value=\"\"&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden style=display:none; name=bcc id=tdbcc value=\"\"&gt;&lt;\/input&gt;<br \/>\n&lt;input style=display:none; type=submit id=fsubm value=\"Email\"&gt;&lt;\/input&gt;&lt;\/form&gt;<br \/>\n&lt;iframe style='display:none;' name='emailiframe' src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php'&gt;&lt;\/iframe&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and you can try for yourself up at the top menu of this WordPress Blog&#8217;s webpage.<\/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\/wordpress-blog-email-post-tutorial\/'>WordPress Blog Email Post Tutorial<\/a>.<\/p-->\n<hr>\n<p id='esmseldt'>Previous relevant <a target=_blank title='Emoji SMS and Emailing Large Data Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-sms-and-emailing-large-data-tutorial\/'>Emoji SMS and Emailing Large Data Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html' title='Emoji SMS and Emailing Large Data Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/big_emoji_email.jpg\"  \/><\/a><p class=\"wp-caption-text\">Emoji SMS and Emailing Large Data Tutorial<\/p><\/div>\n<p>With the convenience and ease of user interaction the HTML textarea element offers, as you can try with yesterday&#8217;s <a title='Emoji SMS and Emailing Tutorial' href='#esmset'>Emoji SMS and Emailing Tutorial<\/a>, there is added responsibility on the programmer to cater for an adventurous user &#8220;stretching the friendship&#8221; and entering huge amounts of data into that generous &#8220;textarea&#8221; pallette.<\/p>\n<p>Even window.localStorage can&#8217;t help here on this so far exclusively &#8220;client&#8221; (ie. just HTML\/Javascript\/CSS) web application because &#8220;client email&#8221; and\/or &#8220;client SMS&#8221; still have that length limitation that avoids the dreaded &#8220;Bad Request&#8221; (error 400) when the amount of user entered data into that provided textarea goes beyond about 800 characters (at least for our rjmprogramming.com.au domain).<\/p>\n<p>So to progress here with large data scenarios, and yet still &#8220;feel client&#8221; here with this web application, we embed calls to PHP with an HTML iframe (name=[iframeName]) element, populated via an HTML form method=POST target=[iframeName] action=[inlineHTMLemailPHPhelper].  We&#8217;ve done all this before, so, is there anything new to discuss?  You bet there is, and it is to do with emoji data.  You see, in the <font color=blue>subject line<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;form id=ifemail target=\"iemail\" style=\"display:none;\" action=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php\" method=\"POST\"&gt;<br \/>\n&lt;input type=hidden style=display:none; name=inline value=\"\"&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden style=display:none; name=to id=tdto value=\"\"&gt;&lt;\/input&gt;<br \/>\n<font color=blue>&lt;input type=hidden style=display:none; name=subj id=tdsubj value=\"Name Your Mascot - RJM Programming\"&gt;&lt;\/input&gt;<\/font><br \/>\n<font color=purple>&lt;textarea name=hcont style=display:none; value=\"\" id=tdhuhta cols=80 rows=30&gt;&lt;\/textarea&gt;<\/font><br \/>\n&lt;input type=hidden style=display:none; name=cc id=tdcc value=\"\"&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden style=display:none; name=bcc id=tdbcc value=\"\"&gt;&lt;\/input&gt;<br \/>\n&lt;input style=display:none; type=submit id=fsubm value=\"Email\"&gt;&lt;\/input&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;iframe style=display:none; name=iemail id=iemail src=\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; emojis all work at the destination email, but those same emoji forms in <font color=purple>the email body section, as HTML<\/font> caused gobbledygook data at the resultant email.  We got <font color=red>great advice<\/font> from <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/18749591\/encode-html-entities-in-javascript'>this useful link<\/a>, thanks &#8230;<\/p>\n<p><code><br \/>\n\/**<br \/>\n * Convert a string to HTML entities ... thanks to https:\/\/stackoverflow.com\/questions\/18749591\/encode-html-entities-in-javascript<br \/>\n *\/<br \/>\nString.prototype.toHtmlEntities = function() {<br \/>\n    return this.replace(\/.\/gm, function(s) {<br \/>\n        \/\/ return \"&amp;#\" + s.charCodeAt(0) + \";\";<br \/>\n        return (s.match(\/[a-z0-9\\s]+\/i)) ? s : \"&amp;#\" + s.charCodeAt(0) + \";\";<br \/>\n    });<br \/>\n};<br \/>\n<br \/>\n\/**<br \/>\n * Create string from HTML entities<br \/>\n *\/<br \/>\n<font color=red>String.fromHtmlEntities = function(string) {<br \/>\n    return (string+\"\").replace(\/&amp;#\\d+;\/gm,function(s) {<br \/>\n        return String.fromCharCode(s.match(\/\\d+\/gm)[0]);<br \/>\n    })<br \/>\n};<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; to come up with the codeline to fix those emojis within the textarea element arriving properly at the output email via &#8230;<\/p>\n<p><code><br \/>\n     document.getElementById('tdhuhta').innerHTML='&lt;html&gt;&lt;body&gt;&lt;div&gt;' + <font color=red>String.fromHtmlEntities(<\/font>document.getElementById('mybody').value<font color=red>)<\/font> + '&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n<\/code><\/p>\n<p> &#8230; you can see happening with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html--GETME' title='name_your.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html--GETME' title='name_your.html'>name_your.html<\/a>&#8216;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html' title='Click picture'>live run<\/a> link, for your perusal.<\/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\/emoji-sms-and-emailing-large-data-tutorial\/'>Emoji SMS and Emailing Large Data Tutorial<\/a>.<\/p-->\n<hr>\n<p id='esmset'>Previous relevant <a target=_blank title='Emoji SMS and Emailing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-sms-and-emailing-tutorial\/'>Emoji SMS and Emailing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html' title='Emoji SMS and Emailing Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your_more.jpg\"  \/><\/a><p class=\"wp-caption-text\">Emoji SMS and Emailing Tutorial<\/p><\/div>\n<p>The recent <a title='Emoji Emailing Primer Tutorial' href='#eept'>Emoji Emailing Primer Tutorial<\/a>, it being a sharing web application pointing at client &#8230;<\/p>\n<ul>\n<li>email &#8230; is a doddle to add &#8230;<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p> &#8230; functionality onto because of all the commonalities between using &#8220;a&#8221; link &#8220;mailto:&#8221; URLs versus &#8220;a&#8221; link &#8220;sms:&#8221; URLs.  But just because you can, should you?  In our view, yes, because SMS represents a more immediate and often, a briefer, form of communication, versus the use of email.<\/p>\n<p>To simulate the &#8220;body&#8221; section of either email or SMS the best HTML element to use is the <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> as being the closest thing to a classroom blackboard (or old fashioned whiteboard) for textual data.  That textual data doesn&#8217;t have to be just the characters and numbers and other special keyboard characters.  It can include <a target=_blank title='Emoji information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Emoji'>emoji<\/a> characters where imagery meets text writing, as a way to enhance your communications.  The <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> element allows you to include a paragraphing feel to your writing, as ascii code 10 allows you to add line feeds into the mix.<\/p>\n<p>A tiny annoyance with client SMS, compared to email, is the lack of a &#8220;subject&#8221; data item, so we just prefix what an email subject would be to the top of an SMS body section, as you can see happening with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html-GETME' title='name_your.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html-GETME' title='name_your.html'>name_your.html<\/a>&#8216;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html' title='Click picture'>live run<\/a> link.<\/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\/emoji-sms-and-emailing-primer-tutorial\/'>Emoji SMS and Emailing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eept'>Previous relevant <a target=_blank title='Emoji Emailing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-emailing-primer-tutorial\/'>Emoji SMS and Emailing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html' title='Emoji Emailing Primer Tutorial'><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_email.jpg\"  \/><\/a><p class=\"wp-caption-text\">Emoji Emailing Primer Tutorial<\/p><\/div>\n<p>You can get your point across in many ways, especially in our digital age, if the means are there to make a connection.  We like email a lot, and for amusement, <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Emoji' title='Emoji information from Wikipedia ... thanks'>Emoji<\/a> characters can be a good way to communicate in that &#8220;cut through&#8221; way.<\/p>\n<p>In today&#8217;s HTML and Javascript web application we allow you to team up with your chosen &#8220;mascot&#8221; Emoji, give it a name, and email somebody with your news.<\/p>\n<p>Pretty simple really, and as long as you don&#8217;t mind the small size of Emoji they have three big advantages over attached documents for emailing &#8230;<\/p>\n<ol>\n<li>they can be included in the Subject line as well<\/li>\n<li>they can be sprinkled in amongst your email Body (and Subject) at exact positions to suit your needs<\/li>\n<li>they cross over language barriers, quite often<\/li>\n<\/ol>\n<p>Because we use the <a target=_blank title='Mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto<\/i><\/a> HTML <a target=_blank title='HTML a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'>a<\/a> tag (though it is styled to look a lot like a button) method of sending the email it will send you to your email client, where, before sending, you can amend or add to the email, and there are often email client means to add Emojis there as well.<\/p>\n<p>A very useful resource we used (a lot) to create this web application, was this <a target=_blank title='Emoji useful link ... thanks' href='http:\/\/apps.timwhitlock.info\/emoji\/tables\/unicode#block-6c-other-additional-symbols'>useful link<\/a>, so, thanks.<\/p>\n<p>In today&#8217;s HTML and Javascript programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html_GETME' title='name_your.html'>name_your.html<\/a> we literally copied Emoji from the link above in between the &gt; and &lt; of the HTML select tag&#8217;s option tags, to make it happen.  Feel free to try a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html' title='Click picture'>live run<\/a>, and see for 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='#d18286' onclick='var dv=document.getElementById(\"d18286\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18286' 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='#d48090' onclick='var dv=document.getElementById(\"d48090\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/sms\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48090' 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='#d48096' onclick='var dv=document.getElementById(\"d48096\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48096' 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='#d48140' onclick='var dv=document.getElementById(\"d48140\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48140' 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='#d48148' onclick='var dv=document.getElementById(\"d48148\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/encodeURIComponent\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48148' 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='#d48162' onclick='var dv=document.getElementById(\"d48162\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/reply\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48162' 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='#d48179' onclick='var dv=document.getElementById(\"d48179\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/localStorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48179' 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='#d48184' onclick='var dv=document.getElementById(\"d48184\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/emphasis\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48184' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There&#8217;d be lots of people who see the greatest challenge for them usefully using &#8220;the Internet&#8221; (or world wide web) is to &#8220;sort the wheat from the chaff&#8221;. In relation to this with regard to yesterday&#8217;s WordPress Blog Email Post &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-email-post-collaboration-emphasis-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[151,1604,305,367,380,385,3245,1605,1847,452,566,576,3127,2487,652,2415,3243,770,1830,932,970,997,1133,1137,2834,1319,1324,1325,1350,1456],"class_list":["post-48184","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-collaboration","tag-debug","tag-dropdown","tag-email","tag-emoji","tag-emphasis","tag-encodeuricomponent","tag-feedback","tag-form","tag-history","tag-html","tag-html-email","tag-inline","tag-javascript","tag-localstorage","tag-maxlength","tag-menu","tag-method","tag-php","tag-post","tag-programming","tag-share","tag-sharing","tag-timestamp","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-user-experience","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48184"}],"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=48184"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48184\/revisions"}],"predecessor-version":[{"id":48189,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48184\/revisions\/48189"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}