{"id":49081,"date":"2020-05-24T03:01:00","date_gmt":"2020-05-23T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49081"},"modified":"2020-05-24T07:28:06","modified_gmt":"2020-05-23T21:28:06","slug":"my-list-token-subject-positioning-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/my-list-token-subject-positioning-tutorial\/","title":{"rendered":"My List Token Subject Positioning Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"My List Token Subject Positioning Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_token_better.jpg\" title=\"My List Token Subject Positioning Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">My List Token Subject Positioning Tutorial<\/p><\/div>\n<p>With our &#8220;My List&#8221; (last talked about with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/list-web-application-php-tutorial\/#wrapper' title='List Web Application PHP Tutorial'>List Web Application PHP Tutorial<\/a>) web application &#8220;subject token&#8221; work on top of yesterday&#8217;s <a title='Vertex Pointing Game Token Subject Positioning Tutorial' href='#vpgtspt'>Vertex Pointing Game Token Subject Positioning Tutorial<\/a> we &#8230;<\/p>\n<ul>\n<li>allow for [name] as being mapped to email address or the &#8220;John Smith&#8221; of an email address such as &#8220;John Smith [jsmith@anemailprovider.com]&#8221; &#8230;<\/li>\n<li>positioning of an Inline HTML Email body sectioning for incoming relatively positioned HTML data where the $_POST[&#8216;doboth&#8217;] is allowed to contain a suitable top offset to the appended HTML code<\/li>\n<\/ul>\n<p>This means <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-------------GETME' title='emailhtml.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-------------GETME' title='emailhtml.php'>emailhtml.php<\/a> helps out <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html------GETME' title='mylist.htm'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.html------GETME' title='mylist.htm'>mylist.htm<\/a> that you can try out at this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist.htm\" title=\"Click picture\">live run<\/a> link to see what we mean here.<\/p>\n<p>Those emailhtml.php main code parts now sit as &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$fflist=\"\";<br \/>\n$ffname=\"\";<br \/>\n$subjarr=[\"\", \"\", \"\", \"\"];<br \/>\n<br \/>\nfunction zmail($zris, $zxsis, $ztis, $zhis) {<br \/>\n     global $subjarr, $fflist, $ffname;<br \/>\n     if (strpos($zxsis, \"[\") === false && strpos($zxsis, \"&lt;\") === false && $zxsis != \"\") {<br \/>\n        $zxsis.=\" at [date] for [files]\";<br \/>\n        analtoken($zxsis, \"\");<br \/>\n     }<br \/>\n     subjtokenization($fflist, \"files\");<br \/>\n     subjtokenization($ffname, \"name\");<br \/>\n     if ($ffname == \"\") { $zhis=str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $zhis)); }<br \/>\n     $zhis=str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;name&gt;\", $ffname, str_replace(\"[name]\", $ffname, $zhis))));<br \/>\n     return mail($zris, subjtokenization($zxsis,\"subject\"), $ztis, $zhis);<br \/>\n}<br \/>\n<br \/>\nfunction analtoken($inofinterest, $ifnotblankbody) {<br \/>\n  global $subjarr, $fflist, $ffname;<br \/>\n  $inofinterest=trim($inofinterest);<br \/>\n  if ($ifnotblankbody == \"\" && $inofinterest != \"\") {   \/\/ subject<br \/>\n    if (strpos($inofinterest, \"[\") === false && strpos($inofinterest, \"&lt;\") === false && $inofinterest != \"\") {<br \/>\n        $inofinterest.=\" [lf] at [date] [lf] for [files]\";<br \/>\n    }<br \/>\n    if (strpos(($inofinterest . \"~\"), \"]~\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n      $subjarr[3]=\"html\";<br \/>\n      $inofinterest=str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inofinterest);<br \/>\n      if (isset($_SERVER['HTTP_REFERER'])) {<br \/>\n      $inofinterest=str_replace(\"[httpreferer]\", $_SERVER['HTTP_REFERER'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[serveraddr]\", $_SERVER['SERVER_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesttime]\", $_SERVER['REQUEST_TIME'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpacceptlanguage]\", $_SERVER['HTTP_ACCEPT_LANGUAGE'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpuseragent]\", $_SERVER['HTTP_USER_AGENT'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[remoteaddr]\", $_SERVER['REMOTE_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesturi]\", $_SERVER['REQUEST_URI'], $inofinterest);<br \/>\n      if (isset($_SERVER['PATH_INFO'])) {<br \/>\n      $inofinterest=str_replace(\"[pathinfo]\", $_SERVER['PATH_INFO'], $inofinterest);<br \/>\n      }<br \/>\n      }<br \/>\n      if ($ffname != \"\") {  $inofinterest=str_replace(\"[name]\", $ffname, $inofinterest);    }<br \/>\n      $inofinterest=str_replace(\"[lf]\", \"\\n\", $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[crlf]\", \"\\r\\n\", $inofinterest);<br \/>\n      $inofinterest=str_replace(\"   \", \" + \", $inofinterest);<br \/>\n      $huharr=explode(\"[\", $inofinterest);<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if (strpos($thisone, \" \") === false) {<br \/>\n            if (isset($_POST[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_POST[$thisone])), $inofinterest);<br \/>\n            } else if (isset($_GET[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_GET[$thisone])), $inofinterest);<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        $huharr=explode(\"[\", $inofinterest);<br \/>\n        $proposedih=$huharr[0];<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if ($huharr[$ih] != ($thisone . \"]\")) {<br \/>\n            $proposedih.=explode(($thisone . \"]\"), $huharr[$ih])[1];<br \/>\n          }<br \/>\n        }<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $proposedih));<br \/>\n        if (substr($inofinterest, 0, 1) == \"[\") {<br \/>\n          $subjarr[1]=str_replace(\"   \", \" + \",str_replace(\"\\n\", \"&lt;br&gt;\", str_replace(\"[\", \"&lt;\", str_replace(\"]\", \"&gt;\", $inofinterest))));<br \/>\n        } else {<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;' rows=\" . (1 + sizeof($huharr)) . \"&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n        }<br \/>\n      } else {<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $inofinterest));<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;' rows=\" . (1 + sizeof($huharr)) . \"&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  } else if ($inofinterest != \"\") {   \/\/ body<br \/>\n    if (strpos($inofinterest, \"@\") !== false) {<br \/>\n    if (strpos($inofinterest, \"[\") !== false && strpos($inofinterest, \"]\") !== false) {<br \/>\n    $ffname=trim(explode(\"[\", explode(\",\", $inofinterest)[0])[0]);<br \/>\n    } else {<br \/>\n    $ffname=explode(\",\", $inofinterest)[0];<br \/>\n    }<br \/>\n    } else {<br \/>\n    $ifnotblankbody=trim($ifnotblankbody);<br \/>\n    }<br \/>\n  }<br \/>\n  return $inofinterest;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction subjtokenization($inthing, $inmode) {<br \/>\n  global $subjarr, $fflist, $ffname;<br \/>\n  if ($inmode == \"subject\") {<br \/>\n    if ($subjarr[0] != \"\") {<br \/>\n      if ($fflist == \"\" && $ffname == \"\") { return $subjarr[0];   }<br \/>\n      if ($fflist == \"\") { return str_replace(\"&lt;name&gt;\", $ffname, str_replace(\"[name]\", $ffname, $subjarr[0]));   }<br \/>\n      return str_replace(\"&lt;name&gt;\", $ffname, str_replace(\"[name]\", $ffname, str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, $subjarr[0]))))));<br \/>\n    } else if (strpos($inthing, \"[\") !== false) {<br \/>\n      if ($fflist == \"\" && $ffname == \"\") { return str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing);   }<br \/>\n      if ($fflist == \"\") { return str_replace(\"&lt;name&gt;\", $ffname, str_replace(\"[name]\", $ffname, str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing)));   }<br \/>\n      return str_replace(\"&lt;name&gt;\", $ffname, str_replace(\"[name]\", $ffname, str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing)))))));<br \/>\n    }<br \/>\n    return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $inthing));<br \/>\n  } else if (substr($inmode,0,11) == \"bodysubject\") {<br \/>\n    if ($subjarr[1] != \"\") {<br \/>\n      $bsprefix=\"\";<br \/>\n<br \/> <br \/>\n      if (strlen($inmode) &gt; 11) {<br \/>\n<br \/>       $bsprefix=str_replace(\"&lt;body&gt;\",\"\",str_replace(\"&lt;\/body&gt;\",\"\",str_replace(\"&lt;html&gt;\",\"\",str_replace(\"&lt;\/html&gt;\",\"\",substr($inmode,11)))));<br \/>\n        $tbdiv=\"&lt;\/body&gt;\";<br \/>\n        $tbz=0;<br \/>\n        if (isset($_POST['doboth'])) {<br \/>\n          if (substr(($_POST['doboth'] . ' '),0,1) &gt;= \"0\" && substr(($_POST['doboth'] . ' '),0,1) &lt;= \"9\") {<br \/>\n            $tbz='' . $_POST['doboth'];<br \/>\n          }<br \/>\n        } else if (isset($_GET['doboth'])) {<br \/>\n          if (substr(($_GET['doboth'] . ' '),0,1) &gt;= \"0\" && substr(($_GET['doboth'] . ' '),0,1) &lt;= \"9\") {<br \/>\n            $tbz='' . $_GET['doboth'];<br \/>\n          }<br \/>\n        }<br \/>\n        $tbits=explode(\"top:\", $bsprefix);<br \/>\n        for ($it=1; $it&lt;sizeof($tbits); $it++) {<br \/>\n          $tbdiv=\"&lt;\/div&gt;&lt;\/body&gt;\";<br \/>\n          if ($tbz &lt; trim(explode(\"px\", $tbits[$it])[0])) {<br \/>\n            $tbz=(0 + trim(explode(\"px\", $tbits[$it])[0]));<br \/>\n          }<br \/>\n        }<br \/>\n        if ($tbdiv == \"&lt;\/div&gt;&lt;\/body&gt;\") {<br \/>\n          $tbz+=20;<br \/>\n          $bsprefix.=\"&lt;div style='position:absolute;left:0px;top:\" . $tbz . \"px;'&gt;\";<br \/>\n        }<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/body&gt;\", $tbdiv, str_replace(\"&lt;body&gt;\", \"&lt;body&gt;\" . str_replace(\"   \", \" + \",$bsprefix), $subjarr[1]));<br \/>\n      }<br \/>\n      if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/h1&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/h1&gt;\", \"&lt;\/h1&gt;&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;\", $subjarr[1]);<br \/>\n      } else if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/body&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/body&gt;\", \"&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;&lt;\/body&gt;\", $subjarr[1]);<br \/>\n      }<br \/>\n      if ($fflist == \"\" || 1 == 1) { return $subjarr[1]; }<br \/>\n      return str_replace(\"   \", \" + \",str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $subjarr[1])));<br \/>\n    }<br \/>\n  } else if ($inmode == \"body\") {<br \/>\n    if ($subjarr[2] != \"\") {<br \/>\n      return $subjarr[2];<br \/>\n    }<br \/>\n  } else if ($inmode == \"contenttype\") {<br \/>\n    if ($subjarr[3] != \"\") {<br \/>\n      return $subjarr[3];<br \/>\n    }<br \/>\n  } else if ($inmode == \"file\") {<br \/>\n    $subjarr[1]=str_replace(\"&lt;file&gt;\", $inthing, str_replace(\"[file]\", $inthing, $subjarr[1]));<br \/>\n  } else if ($inmode == \"name\" && $inthing != \"\") {<br \/>\n    $subjarr[0]=str_replace(\"&lt;name&gt;\", $inthing, str_replace(\"[name]\", $inthing, $subjarr[0]));<br \/>\n    $subjarr[1]=str_replace(\"&lt;name&gt;\", $inthing, str_replace(\"[name]\", $inthing, $subjarr[1]));<br \/>\n    if ($subjarr[0] != \"\" && $subjarr[1] != \"\") {<br \/>\n      if (strpos(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0])))) !== false) {<br \/>\n        $subjarr[0].=explode(\"&lt;\", explode(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))))[1])[0];<br \/>\n      }<br \/>\n    }<br \/>\n  } else if ($inmode == \"files\" && $inthing != \"\") {<br \/>\n    $subjarr[0]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[0]));<br \/>\n    $subjarr[1]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[1]));<br \/>\n    if ($subjarr[0] != \"\" && $subjarr[1] != \"\") {<br \/>\n      if (strpos(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0])))) !== false) {<br \/>\n        $subjarr[0].=explode(\"&lt;\", explode(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))))[1])[0];<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return $inthing;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; mainly to cater for that name [name] type of subject token.<\/p>\n<p>See also in today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mylist_token_better.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> how Safari (web browser) Develop menu&#8217;s Web Inspector&#8217;s Network tab can help with PHP child (in iframe) Warning message troubleshooting.<\/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\/my-list-token-subject-positioning-tutorial\/'>My List Token Subject Positioning Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vpgtspt'>Previous relevant <a target=_blank title='Vertex Pointing Game Token Subject Positioning Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/vertex-pointing-game-token-subject-positioning-tutorial\/'>Vertex Pointing Game Token Subject Positioning Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Vertex Pointing Game Token Subject Positioning Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing_token_better.jpg\" title=\"Vertex Pointing Game Token Subject Positioning Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Vertex Pointing Game Token Subject Positioning Tutorial<\/p><\/div>\n<p>You may have noticed in yesterday&#8217;s <a title='Vertex Pointing Game Token Subject Tutorial' href='#vpgtst'>Vertex Pointing Game Token Subject Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/vertex-pointing-game-token-subject-tutorial\/'><p>\nsome email clients allow the attachment but do not show position:absolute very well (eg Gmail webmail) while Apple macOS Mail shows position:absolute well but (at least for us) the attachments are not being downloaded, for our HTML content today\n<\/p><\/blockquote>\n<p> &#8230; which is a tad frustrating, but we do not think is an excuse to throw up the hands and give up, to settle for the lowest common denominator solution to the idea of creating the clearest emails you can code for.  In other words, you cannot avoid the email client differences, but in a case like this, we think you should cater for the most lenient email client as far as text\/html content goes.  For us, that is Apple macOS Mail email client where that &#8220;position:absolute;&#8221; HTML is honoured.   Luckily, thinking about solutions to separating the text\/html body content parts away from the attachment parts &#8230;<\/p>\n<ul>\n<li>our first more complex though to use global attributes regarding CSS top co-ordinate (and mapping otherwise, before email creation) &#8230; we had enough time &#8230;<\/p>\n<li>to reject on behalf of encasing the &#8220;non-graph&#8221; parts of that text\/html within a new encasing HTML div element to which we can apply &#8230;\n<ol>\n<li>position: absolute<\/li>\n<li>top: (20 + maximum calculated &#8220;top&#8221; of rest)px<\/li>\n<\/ol>\n<p> &#8230; was a <font color=blue>far better and simpler solution<\/font> &#8230;<br \/>\n&lt;?php<br \/>\n <code><br \/>\n      if (strlen($inmode) &gt; 11) {<br \/>\n<br \/>       $bsprefix=str_replace(\"&lt;body&gt;\",\"\",str_replace(\"&lt;\/body&gt;\",\"\",str_replace(\"&lt;html&gt;\",\"\",str_replace(\"&lt;\/html&gt;\",\"\",substr($inmode,11)))));<br \/>\n        <font color=blue>$tbdiv=\"&lt;\/body&gt;\";<br \/>\n        $tbz=0;<br \/>\n        $tbits=explode(\"top:\", $bsprefix);<br \/>\n        for ($it=1; $it&lt;sizeof($tbits); $it++) {<br \/>\n          $tbdiv=\"&lt;\/div&gt;&lt;\/body&gt;\";<br \/>\n          if ($tbz &lt; trim(explode(\"px\", $tbits[$it])[0])) {<br \/>\n            $tbz=(0 + trim(explode(\"px\", $tbits[$it])[0]));<br \/>\n          }<br \/>\n        }<br \/>\n        if ($tbdiv == \"&lt;\/div&gt;&lt;\/body&gt;\") {<br \/>\n          $tbz+=20;<br \/>\n          $bsprefix.=\"&lt;div style='position:absolute;left:0px;top:\" . $tbz . \"px;'&gt;\";<br \/>\n        }<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/body&gt;\", $tbdiv, str_replace(\"&lt;body&gt;\", \"&lt;body&gt;\" . str_replace(\"   \", \" + \",$bsprefix), $subjarr[1]));<\/font><br \/>\n      }<br \/>\n <\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p>And so <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php------------GETME' title='emailhtml.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php------------GETME' title='emailhtml.php'>emailhtml.php<\/a> helps out <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------------------------------GETME' title='square_hr_tracing.htm'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------------------------------GETME' title='square_hr_tracing.htm'>square_hr_tracing.htm<\/a> that you can try out at this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Vertex%20Pointing%20Game&#038;question=%20#blank=plot\" title=\"Click picture\">live run<\/a> link to see what we mean, by entering an email address into that &#8220;Plot Axes&#8221; textbox after defining your Linear or Parabola equation.<\/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\/vertex-pointing-game-token-subject-positioning-tutorial\/'>Vertex Pointing Game Token Subject Positioning Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vpgtst'>Previous relevant <a target=_blank title='Vertex Pointing Game Token Subject Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/vertex-pointing-game-token-subject-tutorial\/'>Vertex Pointing Game Token Subject Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Vertex Pointing Game Token Subject Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing_token.jpg\" title=\"Vertex Pointing Game Token Subject Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Vertex Pointing Game Token Subject Tutorial<\/p><\/div>\n<p>Adding onto yesterday&#8217;s <a title='Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial' href='#fvdmmtset'>Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial<\/a> email &#8220;subject tokens&#8221; progress, today we change our most generic email helper, <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-----------GETME' title='emailhtml.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-----------GETME' title='emailhtml.php'>emailhtml.php<\/a> to conjoin &#8230;<\/p>\n<ul>\n<li>Vertex Pointing Game for Linear and Parabola equation drawing purposes on a grid) &#8230;<\/li>\n<li>combined with, for the first time an email requirement for an email HTML attachment whose contents will also be included within the body top section text\/html explanations above the attachment &#8230; why? &#8230;<\/li>\n<li>some email clients allow the attachment but do not show position:absolute very well (eg Gmail webmail) while Apple macOS Mail shows position:absolute well but (at least for us) the attachments are not being downloaded, for our HTML content today<\/li>\n<\/ul>\n<p>Let&#8217;s update you with emailhtml.php&#8217;s new &#8220;subject token&#8221; functions &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$fflist=\"\";<br \/>\n$subjarr=[\"\",\"\",\"\",\"\"];<br \/>\n<br \/>\nfunction zmail($zris, $zxsis, $ztis, $zhis) {<br \/>\n     global $subjarr, $fflist;<br \/>\n     if (strpos($zxsis, \"[\") === false && strpos($zxsis, \"&lt;\") === false && $zxsis != \"\") {<br \/>\n        $zxsis.=\" at [date] for [files]\";<br \/>\n        analtoken($zxsis, \"\");<br \/>\n     }<br \/>\n     subjtokenization($fflist, \"files\");<br \/>\n     $zhis=str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $zhis));<br \/>\n     return mail($zris, subjtokenization($zxsis,\"subject\"), $ztis, $zhis);<br \/>\n}<br \/>\n<br \/>\nfunction analtoken($inofinterest, $ifnotblankbody) {<br \/>\n  global $subjarr, $fflist;<br \/>\n  $inofinterest=trim($inofinterest);<br \/>\n  if ($ifnotblankbody == \"\" && $inofinterest != \"\") {   \/\/ subject<br \/>\n     if (strpos($inofinterest, \"[\") === false && strpos($inofinterest, \"&lt;\") === false && $inofinterest != \"\") {<br \/>\n        $inofinterest.=\" [lf] at [date] [lf] for [files]\";<br \/>\n    }<br \/>\n    if (strpos(($inofinterest . \"~\"), \"]~\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n       $subjarr[3]=\"html\";<br \/>\n      $inofinterest=str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inofinterest);<br \/>\n      if (isset($_SERVER['HTTP_REFERER'])) {<br \/>\n      $inofinterest=str_replace(\"[httpreferer]\", $_SERVER['HTTP_REFERER'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[serveraddr]\", $_SERVER['SERVER_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesttime]\", $_SERVER['REQUEST_TIME'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpacceptlanguage]\", $_SERVER['HTTP_ACCEPT_LANGUAGE'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpuseragent]\", $_SERVER['HTTP_USER_AGENT'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[remoteaddr]\", $_SERVER['REMOTE_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesturi]\", $_SERVER['REQUEST_URI'], $inofinterest);<br \/>\n      if (isset($_SERVER['PATH_INFO'])) {<br \/>\n      $inofinterest=str_replace(\"[pathinfo]\", $_SERVER['PATH_INFO'], $inofinterest);<br \/>\n      }<br \/>\n      }<br \/>\n      $inofinterest=str_replace(\"[lf]\", \"\\n\", $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[crlf]\", \"\\r\\n\", $inofinterest);<br \/>\n      $inofinterest=str_replace(\"   \", \" + \", $inofinterest);<br \/>\n      $huharr=explode(\"[\", $inofinterest);<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if (strpos($thisone, \" \") === false) {<br \/>\n            if (isset($_POST[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_POST[$thisone])), $inofinterest);<br \/>\n            } else if (isset($_GET[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_GET[$thisone])), $inofinterest);<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        $huharr=explode(\"[\", $inofinterest);<br \/>\n        $proposedih=$huharr[0];<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if ($huharr[$ih] != ($thisone . \"]\")) {<br \/>\n            $proposedih.=explode(($thisone . \"]\"), $huharr[$ih])[1];<br \/>\n          }<br \/>\n        }<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $proposedih));<br \/>\n        if (substr($inofinterest, 0, 1) == \"[\") {<br \/>\n          $subjarr[1]=str_replace(\"   \", \" + \",str_replace(\"\\n\", \"&lt;br&gt;\", str_replace(\"[\", \"&lt;\", str_replace(\"]\", \"&gt;\", $inofinterest))));<br \/>\n        } else {<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;' rows=\" . (1 + sizeof($huharr)) . \"&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n        }<br \/>\n      } else {<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $inofinterest));<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;' rows=\" . (1 + sizeof($huharr)) . \"&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . str_replace(\"   \", \" + \",$inofinterest) . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  } else if ($inofinterest != \"\") {   \/\/ body<br \/>\n    $ifnotblankbody=trim($ifnotblankbody);<br \/>\n  }<br \/>\n  return $inofinterest;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction subjtokenization($inthing, $inmode) {<br \/>\n  global $subjarr, $fflist;<br \/>\n  if ($inmode == \"subject\") {<br \/>\n    if ($subjarr[0] != \"\") {<br \/>\n      if ($fflist == \"\") { return $subjarr[0];   }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, $subjarr[0]))));<br \/>\n    } else if (strpos($inthing, \"[\") !== false) {<br \/>\n      if ($fflist == \"\") { return str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing);   }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing)))));<br \/>\n    }<br \/>\n    return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $inthing));<br \/>\n  } else if (substr($inmode,0,11) == \"bodysubject\") {<br \/>\n    if ($subjarr[1] != \"\") {<br \/>\n      $bsprefix=\"\";<br \/>\n      if (strlen($inmode) &gt; 11) {<br \/>\n<br \/>       $bsprefix=str_replace(\"&lt;body&gt;\",\"\",str_replace(\"&lt;\/body&gt;\",\"\",str_replace(\"&lt;html&gt;\",\"\",str_replace(\"&lt;\/html&gt;\",\"\",substr($inmode,11)))));<br \/>\n        $subjarr[1]=str_replace(\"&lt;body&gt;\", \"&lt;body&gt;\" . $bsprefix, $subjarr[1]);<br \/>\n      }<br \/>\n      if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/h1&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/h1&gt;\", \"&lt;\/h1&gt;&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;\", $subjarr[1]);<br \/>\n      } else if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/body&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/body&gt;\", \"&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;&lt;\/body&gt;\", $subjarr[1]);<br \/>\n      }<br \/>\n      if ($fflist == \"\" || 1 == 1) { return $subjarr[1]; }<br \/>\n      return str_replace(\"   \", \" + \",str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $subjarr[1])));<br \/>\n    }<br \/>\n  } else if ($inmode == \"body\") {<br \/>\n    if ($subjarr[2] != \"\") {<br \/>\n      return $subjarr[2];<br \/>\n    }<br \/>\n  } else if ($inmode == \"contenttype\") {<br \/>\n    if ($subjarr[3] != \"\") {<br \/>\n      return $subjarr[3];<br \/>\n    }<br \/>\n  } else if ($inmode == \"file\") {<br \/>\n    $subjarr[1]=str_replace(\"&lt;file&gt;\", $inthing, str_replace(\"[file]\", $inthing, $subjarr[1]));<br \/>\n  } else if ($inmode == \"files\" && $inthing != \"\") {<br \/>\n    $subjarr[0]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[0]));<br \/>\n    $subjarr[1]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[1]));<br \/>\n    if ($subjarr[0] != \"\" && $subjarr[1] != \"\") {<br \/>\n      if (strpos(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0])))) !== false) {<br \/>\n        $subjarr[0].=explode(\"&lt;\", explode(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))))[1])[0];<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return $inthing;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>We hope you try <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----------------------------GETME' title='square_hr_tracing.htm'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----------------------------GETME' title='square_hr_tracing.htm'>square_hr_tracing.htm<\/a> that you can try out at this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Vertex%20Pointing%20Game&#038;question=%20#blank=plot\" title=\"Click picture\">live run<\/a> link to see what we mean.<\/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-flowchart-and-venn-diagram-and-mind-map-token-subject-emoji-tutorial\/'>New Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='fvdmmtset'>Previous relevant <a target=_blank title='Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-and-venn-diagram-and-mind-map-token-subject-emoji-tutorial\/'>Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial\"]<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart_email_emoji.jpg\" title=\"Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>These genericizations of \"text\/html\" email body text integrations keep bringing up a variety of issues, and we keep learning little things to make things work.  This brings us onto the \"next cab off the rank\" adding onto yesterday's <a title='Gimp Guillotine Token Subject Tutorial' href='#ggtst'>Gimp Guillotine Token Subject Tutorial<\/a> with integration to our Flowchart and Venn Diagram and Mind Map graphical web application that does not use an HTML(5) canvas element.<\/p>\n\n\n\n\n\n<p>If you spurn the use of the HTML(5) canvas element to write a graphical data creator web application, when it comes to sharing this data with an emailee, you may find you want to create HTML email attachments, and now that we can do it, we can use HTML again where we used to have text\/plain text above that attachment, and from today on, use text\/html cuter presentation aspects to our emails.<\/p>\n\n\n\n\n\n<p>We needed to change ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html--------------------GETME' title='flowchart.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html--------------------GETME' title='flowchart.html'>flowchart.html<\/a> that you can try out at this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\" title=\"Click picture\">live run<\/a> link<\/li>\n\n\n\n\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.php-----------GETME' title='flowchart.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.php-----------GETME' title='flowchart.php'>flowchart.php<\/a><\/li>\n\n\n\n\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-----------GETME' title='emailhtml.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-----------GETME' title='emailhtml.php'>emailhtml.php<\/a><\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>That flowchart.php above has code to add emojis for those Flowchart and Venn Diagram and Mind Map sharing emails.  Remember how with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mind-map-and-flowchart-and-venn-diagram-collaborator-tutorial\/' title='Mind Map and Flowchart and Venn Diagram Collaborator Tutorial '>Mind Map and Flowchart and Venn Diagram Collaborator Tutorial<\/a> we had sets of two emojis animated (and overlaying)?  Well, with our emails, there is limited success, modelling this \"animated emoji\" concept ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>in the email subject line we are forced to show the set of two emojis side by side (because it truly is text\/plain) ... but ...<\/li>\n\n\n\n\n<li>for some email clients such as Apple macOS Mail you can see a set of two emojis overlayed (but not animated) in the body section (that is now text\/html and so can do this via HTML div nesting two span elements, the second one with a negative margin-left)<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... as per flowchart.php's version of <i>function subjtokenization()<\/i> (regarding the email subject line) ...<\/p>\n\n\n\n&lt;?php\n<code>\n    if (strpos($subjarr[1], \"Flowchart \") !== false) {\n      $subjarr[0]=str_replace(\"Flowchart \", \"Flowchart \" .  <a target=_blank title='PHP html-entity-decode function information' href='https:\/\/www.php.net\/manual\/en\/function.html-entity-decode.php'>html_entity_decode<\/a>(\"&amp;#127754;\") . html_entity_decode(\"&amp;#128202;\") . \" \", $subjarr[0]);\n    }\n    if (strpos($subjarr[1], \"Venn Diagram \") !== false) {\n      $subjarr[0]=str_replace(\"Venn Diagram \", \"Venn Diagram \" . html_entity_decode(\"&amp;#128206;\") . html_entity_decode(\"&amp;#128391;\") . \" \", $subjarr[0]);\n    }\n    if (strpos($subjarr[1], \"Mind Map \") !== false) {\n      $subjarr[0]=str_replace(\"Mind Map \", \"Mind Map \" . html_entity_decode(\"&amp;#129504;\") . html_entity_decode(\"&amp;#128506;\") . \" \", $subjarr[0]);\n    }\n<\/code>\n?&gt;\n\n\n\n<p> ... and <font color=blue>as per<\/font> flowchart.php's version of <i>function analtoken()<\/i> (regarding the email body (now) text\/html section) ...<\/p>\n\n\n\n&lt;?php\n<code>\n        <font color=blue>if (strpos(\"&gt;\" . $inofinterest, \"&gt;Flowchart \") !== false) {\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;div style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;'&gt;\" . str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"Flowchart \", \"Flowchart &lt;span title=\\\"Animated Emoji\\\" style='opacity:0.5;font-size:32px;'&gt;&amp;#127754;&lt;\/span&gt;&lt;span style='margin-left:-32px;opacity:0.5;font-size:32px;'&gt;&amp;#128202;&lt;\/span&gt; \", $inofinterest)) . \"&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;\";\n        } else if (strpos(\"&gt;\" . $inofinterest, \"&gt;Mind Map \") !== false) {\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;div style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;'&gt;\" . str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"Mind Map \", \"Mind Map &lt;span title=\\\"Animated Emoji\\\" style='opacity:0.5;font-size:32px;'&gt;&amp;#129504;&lt;\/span&gt;&lt;span style='margin-left:-32px;opacity:0.5;font-size:32px;'&gt;&amp;#128506;&lt;\/span&gt; \", $inofinterest)) . \"&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;\";\n        } else if (strpos(\"&gt;\" . $inofinterest, \"&gt;Venn Diagram \") !== false) {\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;div style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;'&gt;\" . str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"Venn Diagram \", \"Venn Diagram &lt;span title=\\\"Animated Emoji\\\" style='opacity:0.5;font-size:32px;'&gt;&amp;#128206;&lt;\/span&gt;&lt;span style='margin-left:-32px;opacity:0.5;font-size:32px;'&gt;&amp;#128391;&lt;\/span&gt; \", $inofinterest)) . \"&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;\";\n        } else {<\/font>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:90%;font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;' rows=\" . (1 + sizeof($huharr)) . \"&gt;\" . $inofinterest . \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";\n        <font color=blue>}<\/font>\n<\/code>\n?&gt;\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\/flowchart-and-venn-diagram-and-mind-map-token-subject-emoji-tutorial\/'>Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ggtst'>Previous relevant <a target=_blank title='Gimp Guillotine Token Subject Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-token-subject-tutorial\/'>Gimp Guillotine Token Subject Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Gimp Guillotine Token Subject Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followuptoken.jpg\" title=\"Gimp Guillotine Token Subject Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Gimp Guillotine Token Subject Tutorial<\/p><\/div>\n<p>On top of yesterday&#8217;s <a title='Feedback Annotation Canvas Image Tokens Tutorial' href='#facitt'>Feedback Annotation Canvas Image Tokens Tutorial<\/a> &#8220;first cab off the rank&#8221; for &#8220;subject token&#8221; email functionality is today&#8217;s Gimp Guillotine Follow Up web application (last discussed with <a target=_blank title='Gimp Guillotine Absolute to Relative Image Url Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-absolute-to-relative-image-url-tutorial\/'>Gimp Guillotine Absolute to Relative Image Url Tutorial<\/a>) &#8220;next cab off the rank&#8221; software integration for &#8220;subject tokens&#8221;.<\/p>\n<p>Yesterday&#8217;s <a href='#ysp'>Stop Press<\/a> gave you a heads up that yesterday&#8217;s promise &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-annotation-canvas-image-tokens-tutorial\/'><p>\n[lf] line feed and [crlf] carriage return\/line feed\n<\/p><\/blockquote>\n<p> &#8230; required PHP tweaking, unsurprisingly.  And some $_SERVER[] array assumptions we made were not the greatest things to <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=KEP1acj29-Y'>assume<\/a>, and so we started using that ever useful PHP <a target=_blank title='PHP isset' href='https:\/\/www.php.net\/manual\/en\/function.isset.php'>isset<\/a> function to help out here.<\/p>\n<p>Below are the new PHP <font color=blue>code changes<\/font> as a result of this &#8220;second cab&#8221; &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$fflist=\"\";<br \/>\n$subjarr=[\"\", \"\", \"\", \"\"];<br \/>\n<br \/>\nfunction zmail($zris, $zxsis, $ztis, $zhis) {<br \/>\n     global $subjarr, $fflist;<br \/>\n     if (strpos($zxsis, \"[\") === false && strpos($zxsis, \"&lt;\") === false && $zxsis != \"\") {<br \/>\n        $zxsis.=\" at [date] for [files]\";<br \/>\n        analtoken($zxsis, \"\");<br \/>\n     }<br \/>\n     subjtokenization($fflist, \"files\");<br \/>\n     $zhis=str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $zhis));<br \/>\n     return mail($zris, subjtokenization($zxsis,\"subject\"), $ztis, $zhis);<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction analtoken($inofinterest, $ifnotblankbody) {<br \/>\n  global $subjarr, $fflist;<br \/>\n  $inofinterest=trim($inofinterest);<br \/>\n  if ($ifnotblankbody == \"\" && $inofinterest != \"\") {   \/\/ subject<br \/>\n    if (strpos(($inofinterest . \"~\"), \"]~\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n      $subjarr[3]=\"html\";<br \/>\n      $inofinterest=str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inofinterest);<br \/>\n      <font color=blue>if (isset($_SERVER['HTTP_REFERER'])) {<\/font><br \/>\n      $inofinterest=str_replace(\"[httpreferer]\", $_SERVER['HTTP_REFERER'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[serveraddr]\", $_SERVER['SERVER_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesttime]\", $_SERVER['REQUEST_TIME'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpacceptlanguage]\", $_SERVER['HTTP_ACCEPT_LANGUAGE'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpuseragent]\", $_SERVER['HTTP_USER_AGENT'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[remoteaddr]\", $_SERVER['REMOTE_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesturi]\", $_SERVER['REQUEST_URI'], $inofinterest);<br \/>\n      <font color=blue>if (isset($_SERVER['PATH_INFO'])) {<\/font><br \/>\n      $inofinterest=str_replace(\"[pathinfo]\", $_SERVER['PATH_INFO'], $inofinterest);<br \/>\n      <font color=blue>}<br \/>\n      }<\/font><br \/>\n      $inofinterest=str_replace(\"[lf]\", \"\\n\", $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[crlf]\", \"\\r\\n\", $inofinterest);<br \/>\n      $huharr=explode(\"[\", $inofinterest);<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if (strpos($thisone, \" \") === false) {<br \/>\n            if (isset($_POST[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_POST[$thisone])), $inofinterest);<br \/>\n            } else if (isset($_GET[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_GET[$thisone])), $inofinterest);<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        $huharr=explode(\"[\", $inofinterest);<br \/>\n        $proposedih=$huharr[0];<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if ($huharr[$ih] != ($thisone . \"]\")) {<br \/>\n            $proposedih.=explode(($thisone . \"]\"), $huharr[$ih])[1];<br \/>\n          }<br \/>\n        }<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $proposedih));<br \/>\n        if (substr($inofinterest, 0, 1) == \"[\") {<br \/>\n          $subjarr[1]=str_replace(\"\\n\", \"&lt;br&gt;\", str_replace(\"[\", \"&lt;\", str_replace(\"]\", \"&gt;\", $inofinterest)));<br \/>\n        } else {<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:90%;<font color=blue>font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;<\/font>' rows=\" . <font color=blue>(1 + sizeof($huharr))<\/font> . \"&gt;\" <font color=blue>. $inofinterest .<\/font> \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . $inofinterest . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n        }<br \/>\n      } else {<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $inofinterest));<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:90%;<font color=blue>font-size:28px;font-weight:bold;border:1px solid transparent;background-color:#f0f0f0;<\/font>' rows=\" . <font color=blue>(1 + sizeof($huharr))<\/font> . \"&gt;\" <font color=blue>. $inofinterest .<\/font> \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . $inofinterest . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  } else if ($inofinterest != \"\") {   \/\/ body<br \/>\n    $ifnotblankbody=trim($ifnotblankbody);<br \/>\n  }<br \/>\n  return $inofinterest;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction subjtokenization($inthing, $inmode) {<br \/>\n  global $subjarr, $fflist;<br \/>\n  if ($inmode == \"subject\") {<br \/>\n    if ($subjarr[0] != \"\") {<br \/>\n      if ($fflist == \"\") { return $subjarr[0];   }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, $subjarr[0]))));<br \/>\n    } else if (strpos($inthing, \"[\") !== false) {<br \/>\n      if ($fflist == \"\") { return str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing);   }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing)))));<br \/>\n    }<br \/>\n    return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $inthing));<br \/>\n  } else if ($inmode == \"bodysubject\") {<br \/>\n    if ($subjarr[1] != \"\") {<br \/>\n      if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/h1&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/h1&gt;\", \"&lt;\/h1&gt;&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;\", $subjarr[1]);<br \/>\n      } else if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/body&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/body&gt;\", \"&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;&lt;\/body&gt;\", $subjarr[1]);<br \/>\n      }<br \/>\n      if ($fflist == \"\" || 1 == 1) { return $subjarr[1]; }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $subjarr[1]));<br \/>\n    }<br \/>\n  } else if ($inmode == \"body\") {<br \/>\n    if ($subjarr[2] != \"\") {<br \/>\n      return $subjarr[2];<br \/>\n    }<br \/>\n  } else if ($inmode == \"contenttype\") {<br \/>\n    if ($subjarr[3] != \"\") {<br \/>\n      return $subjarr[3];<br \/>\n    }<br \/>\n  } else if ($inmode == \"file\") {<br \/>\n    $subjarr[1]=str_replace(\"&lt;file&gt;\", $inthing, str_replace(\"[file]\", $inthing, $subjarr[1]));<br \/>\n  } else if ($inmode == \"files\" && $inthing != \"\") {<br \/>\n    $subjarr[0]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[0]));<br \/>\n    $subjarr[1]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[1]));<br \/>\n    if ($subjarr[0] != \"\" && $subjarr[1] != \"\") {<br \/>\n      <font color=blue>if (strpos(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0])))) !== false) {<br \/>\n        $subjarr[0].=explode(\"&lt;\", explode(preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[0]))), preg_replace('\/\\s+\/', ' ', str_replace(\"&lt;br&gt;\",\"\",str_replace(\"\\n\",\"\",$subjarr[1]))))[1])[0];<br \/>\n      }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n  return $inthing;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>And so that got us better using an HTML textarea element for body wording over multiple line purposes, as email text on top of any attachments placed with the web application&#8217;s emails sent out.<\/p>\n<p>To see these improved email Gimp Guillotine web application integrations <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php----------------------GETME' title='gimp_guillotine_followup.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php----------------------GETME' title='gimp_guillotine_followup.php'>gimp_guillotine_followup.php<\/a> that you can try out at this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php\" title=\"Click picture\">live run<\/a> link is worth a try.<\/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\/gimp-guillotine-token-subject-tutorial\/'>Gimp Guillotine Token Subject Tutorial<\/a>.<\/p-->\n<hr>\n<p id='facitt'>Previous relevant <a target=_blank title='Feedback Annotation Canvas Image Tokens Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-annotation-canvas-image-tokens-tutorial\/'>Feedback Annotation Canvas Image Tokens Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Annotation Canvas Image Tokens Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedbacktoken.jpg\" title=\"Feedback Annotation Canvas Image Tokens Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Annotation Canvas Image Tokens Tutorial<\/p><\/div>\n<p>The discovery in yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-sendmail-remote-attachment-tutorial\/' title='Linux sendmail Remote Attachment Tutorial'>Linux sendmail Remote Attachment Tutorial<\/a> that &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-sendmail-remote-attachment-tutorial\/'><p>\nin the \u201cbody\u201d section part of the email above the attachment we\u2019ve written functionality for Content-Type: text\/plain \u2026<br \/>\n<br \/>\nso why not today write functionality to cater for Content-Type: text\/html here (if allowed \u2026 spoiler alert \u2026 yes, it is \u2026 we tried some, and it worked, and we do this when a user defines their own tailored email subject, as talked about below)\n<\/p><\/blockquote>\n<p> &#8230; has far reaching implications for lots of inhouse web applications, improving the email look we can develop and improve upon.  And so, today, we start out on that software integration journey, picking on the Feedback web application of the recent <a title='Feedback Annotation Canvas Image Filter Tutorial' href='#facift'>Feedback Annotation Canvas Image Filter Tutorial<\/a> as the first guinea pig one to try.<\/p>\n<p>We decided to approach it with a concept we like almost as much as we like &#8220;delimiter solutions&#8221;, that being a &#8220;token solution&#8221;.  Not a forlorn solution, but <a target=_blank title='Token usage idea, thanks' href='http:\/\/www.commandfusion.com\/wiki2\/software\/gui-designer\/tokens'>a solution<\/a> using &#8230;<\/p>\n<blockquote cite='http:\/\/www.commandfusion.com\/wiki2\/software\/gui-designer\/tokens'><p>\nTokens<br \/>\nA token is basically a variable that you can store data in or retrieve data from at runtime in your guiDesigner projects. A token has a name and a value.<br \/>\n<br \/>\nToken Naming<br \/>\nSuggested Syntax: [name]<br \/>\n<br \/>\nA token can be named anything you like, but we suggest you follow the syntax above, including the square brackets in your token names. By doing this, it makes it easier to see where your token is actually being used within command values, etc.\n<\/p><\/blockquote>\n<p> &#8230; a square bracket <i>[name]<\/i> system &#8220;slapped over&#8221; by PHP mail preparation execution &#8220;value&#8221; substitution.<\/p>\n<p>The first two such generic <i>[name]<\/i>s we try in this first round of work are used in the Feedback web application&#8217;s email Subject field for &#8230;<\/p>\n<ul>\n<li>[date]<\/li>\n<li>[files]<\/li>\n<\/ul>\n<p> &#8230; but as the days go on we are going to allow and test &#8230;<\/p>\n<ul>\n<li>some PHP $_SERVER[] variables<\/li>\n<li>$_POST[] or $_GET[] arguments<\/li>\n<li>[lf] line feed and [crlf] carriage return\/line feed<\/li>\n<li>[file] for first file only<\/li>\n<\/ul>\n<p>As you will have surmised, this is a serverside PHP job, it being an email creation component change.  The totally new PHP bits are &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$fflist=\"\";<br \/>\n$subjarr=[\"\", \"\", \"\", \"\"];<br \/>\n<br \/>\nfunction zmail($zris, $zxsis, $ztis, $zhis) {<br \/>\n     global $subjarr, $fflist;<br \/>\n     if (strpos($zxsis, \"[\") === false && strpos($zxsis, \"&lt;\") === false && $zxsis != \"\") {<br \/>\n        $zxsis.=\" at [date] for [files]\";<br \/>\n        analtoken($zxsis, \"\");<br \/>\n     }<br \/>\n     subjtokenization($fflist, \"files\");<br \/>\n     $zhis=str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $zhis));<br \/>\n     return mail($zris, subjtokenization($zxsis,\"subject\"), $ztis, $zhis);<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction analtoken($inofinterest, $ifnotblankbody) {<br \/>\n  global $subjarr, $fflist;<br \/>\n  $inofinterest=trim($inofinterest);<br \/>\n  if ($ifnotblankbody == \"\" && $inofinterest != \"\") {   \/\/ subject<br \/>\n    if (strpos(($inofinterest . \"~\"), \"]~\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n      $subjarr[3]=\"html\";<br \/>\n      $inofinterest=str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpreferer]\", $_SERVER['HTTP_REFERER'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[serveraddr]\", $_SERVER['SERVER_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesttime]\", $_SERVER['REQUEST_TIME'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpacceptlanguage]\", $_SERVER['HTTP_ACCEPT_LANGUAGE'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[httpuseragent]\", $_SERVER['HTTP_USER_AGENT'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[remoteaddr]\", $_SERVER['REMOTE_ADDR'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[requesturi]\", $_SERVER['REQUEST_URI'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[pathinfo]\", $_SERVER['PATH_INFO'], $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[lf]\", \"\\n\", $inofinterest);<br \/>\n      $inofinterest=str_replace(\"[crlf]\", \"\\r\\n\", $inofinterest);<br \/>\n      $huharr=explode(\"[\", $inofinterest);<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if (strpos($thisone, \" \") === false) {<br \/>\n            if (isset($_POST[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_POST[$thisone])), $inofinterest);<br \/>\n            } else if (isset($_GET[$thisone])) {<br \/>\n              $inofinterest=str_replace(\"[\" . $thisone . \"]\", str_replace(\"+\", \" \", urldecode($_GET[$thisone])), $inofinterest);<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      if (strpos(($inofinterest . \"~\"), \"]\") !== false && strpos(($inofinterest . \"~\"), \"[\") !== false) {<br \/>\n        $huharr=explode(\"[\", $inofinterest);<br \/>\n        $proposedih=$huharr[0];<br \/>\n        for ($ih=1; $ih&lt;sizeof($huharr); $ih++) {<br \/>\n          $thisone=explode(\"]\", $huharr[$ih])[0];<br \/>\n          if ($huharr[$ih] != ($thisone . \"]\")) {<br \/>\n            $proposedih.=explode(($thisone . \"]\"), $huharr[$ih])[1];<br \/>\n          }<br \/>\n        }<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $proposedih));<br \/>\n        if (substr($inofinterest, 0, 1) == \"[\") {<br \/>\n          $subjarr[1]=str_replace(\"\\n\", \"&lt;br&gt;\", str_replace(\"[\", \"&lt;\", str_replace(\"]\", \"&gt;\", $inofinterest)));<br \/>\n        } else {<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:100%;' rows=\" . sizeof($huharr) . \"&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", str_replace(\"\\r\\n\", \"&lt;br&gt;\", $inofinterest)) . \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . $inofinterest . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n        }<br \/>\n      } else {<br \/>\n        $subjarr[0]=str_replace(\"\\n\", \" \", str_replace(\"\\r\\n\", \" \", $inofinterest));<br \/>\n        if (strpos($inofinterest, \"\\n\") !== false) {<br \/>\n          $huharr=explode(\"\\n\", $inofinterest);<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;textarea style='width:100%;' rows=\" . sizeof($huharr) . \"&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", str_replace(\"\\r\\n\", \"&lt;br&gt;\", $inofinterest)) . \"&lt;\/textarea&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        } else {<br \/>\n          $subjarr[1]=\"&lt;html&gt;&lt;body&gt;&lt;h1&gt;\" . $inofinterest . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  } else if ($inofinterest != \"\") {   \/\/ body<br \/>\n    $ifnotblankbody=trim($ifnotblankbody);<br \/>\n  }<br \/>\n  return $inofinterest;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction subjtokenization($inthing, $inmode) {<br \/>\n  global $subjarr, $fflist;<br \/>\n  if ($inmode == \"subject\") {<br \/>\n    if ($subjarr[0] != \"\") {<br \/>\n      if ($fflist == \"\") { return $subjarr[0];   }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, $subjarr[0]))));<br \/>\n    } else if (strpos($inthing, \"[\") !== false) {<br \/>\n      if ($fflist == \"\") { return str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing);   }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, str_replace(\"&lt;file&gt;\", $fflist, str_replace(\"[file]\", $fflist, str_replace(\"[date]\", date('l jS \\of F Y h:i:s A'), $inthing)))));<br \/>\n    }<br \/>\n    return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $inthing));<br \/>\n  } else if ($inmode == \"bodysubject\") {<br \/>\n    if ($subjarr[1] != \"\") {<br \/>\n      if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/h1&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/h1&gt;\", \"&lt;\/h1&gt;&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;\", $subjarr[1]);<br \/>\n      } else if (substr($subjarr[1], 0, 1) == \"&lt;\" && strpos($subjarr[1], \"&lt;\/body&gt;\") !== false) {<br \/>\n        $subjarr[1]=str_replace(\"&lt;\/body&gt;\", \"&lt;h3&gt;\" . str_replace(\"\\n\", \"&lt;br&gt;\", $inthing) . \"&lt;\/h3&gt;&lt;\/body&gt;\", $subjarr[1]);<br \/>\n      }<br \/>\n      if ($fflist == \"\" || 1 == 1) { return $subjarr[1]; }<br \/>\n      return str_replace(\"&lt;files&gt;\", $fflist, str_replace(\"[files]\", $fflist, $subjarr[1]));<br \/>\n    }<br \/>\n  } else if ($inmode == \"body\") {<br \/>\n    if ($subjarr[2] != \"\") {<br \/>\n      return $subjarr[2];<br \/>\n    }<br \/>\n  } else if ($inmode == \"contenttype\") {<br \/>\n    if ($subjarr[3] != \"\") {<br \/>\n      return $subjarr[3];<br \/>\n    }<br \/>\n  } else if ($inmode == \"file\") {<br \/>\n    $subjarr[1]=str_replace(\"&lt;file&gt;\", $inthing, str_replace(\"[file]\", $inthing, $subjarr[1]));<br \/>\n  } else if ($inmode == \"files\" && $inthing != \"\") {<br \/>\n    $subjarr[0]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[0]));<br \/>\n    $subjarr[1]=str_replace(\"&lt;files&gt;\", $inthing, str_replace(\"[files]\", $inthing, $subjarr[1]));<br \/>\n    if ($subjarr[0] != \"\" && $subjarr[1] != \"\") {<br \/>\n      if (strpos($subjarr[1], $subjarr[0]) !== false) {<br \/>\n        $subjarr[0].=explode(\"&lt;\", explode($subjarr[0], $subjarr[1])[1])[0];<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return $inthing;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; related to (examples of) <font color=blue>how it gets used<\/font> in the rest of the code &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n\/\/ Early on, as a subject input data item is identified ...<br \/>\n  $psubject = <font color=blue>analtoken(<\/font>explode(\"~\", str_replace(\"+\",\" \",urldecode($_GET['tdsubj'])))[0]<font color=blue>,\"\")<\/font>;<br \/>\n\/\/ Content-Type (for body section part above any attachments) ...<br \/>\n  $headers .= \"Content-Type: text\/<font color=blue>\" . subjtokenization(\"<\/font>plain<font color=blue>\", \"contenttype\") . \"<\/font>; charset=\\\"iso-8859-1\\\"\" . $eol;<br \/>\n\/\/ Attachment file name established ...<br \/>\n  <font color=blue>if ($fflist == \"\") {<br \/>\n    $fflist=$filename;<br \/>\n  } else {<br \/>\n    $fflist.=\",\" . $filename;<br \/>\n  }<\/font><br \/>\n  $headers .= \"Content-Disposition: attachment;filename=\\\"\" . <font color=blue>subjtokenization(<\/font>$filename<font color=blue>,\"file\")<\/font> . \"\\\"\" . $eol;<br \/>\n\/\/ New call to create the email, via a new call ...<br \/>\n  <font color=blue>z<\/font>mail($ris, $xsis, $tis, $his);<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php-----------GETME'>The changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php-----------GETME' title='world.php'>world.php<\/a> represents about 98% of the changes, <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------------------GETME' title='feedback.htm'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------------------GETME' title='feedback.htm'>feedback.htm<\/a> representing the &#8220;informing the user of the token possibilities&#8221; only, that you can try out at this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p id='ysp'><b><i>Stop Press<\/i><\/b><\/p>\n<p>A follow up (&#8220;Guinea Pig Two&#8221;) tutorial (called <a target=_blank title='Gimp Guillotine Token Subject Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-token-subject-tutorial'>Gimp Guillotine Token Subject Tutorial<\/a> as of 20th May 2020) has taught us some lessons for a subject like &#8230;<\/p>\n<p><code><br \/>\nFeedback [lf] at [date] [crlf] ... [files]<br \/>\n<\/code><\/p>\n<p> &#8230; along with some $_SERVER[] array (PHP) <a target=_blank title='PHP isset' href='https:\/\/www.php.net\/manual\/en\/function.isset.php'>isset<\/a> checking, and some textarea styling (for multiple line subjects in the body section), caused <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php------------GETME'>a further changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php------------GETME' title='world.php'>world.php<\/a> to be set into play for your retesting purposes.<\/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\/feedback-annotation-canvas-image-tokens-tutorial\/'>Feedback Annotation Canvas Image Tokens Tutorial<\/a>.<\/p-->\n<hr>\n<p id='facift'>Previous relevant <a target=_blank title='Feedback Annotation Canvas Image Filter Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-annotation-canvas-image-filter-tutorial\/'>Feedback Annotation Canvas Image Filter Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Annotation Canvas Image Filter Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_annotation_canvas_php_gd_filter.jpg\" title=\"Feedback Annotation Canvas Image Filter Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Annotation Canvas Image Filter Tutorial<\/p><\/div>\n<p id=dslideshow>There are other image filters we can apply on top of yesterday&#8217;s <a title='Feedback Annotation Canvas Pixels Tutorial' href='#facpt'>Feedback Annotation Canvas Pixels Tutorial<\/a> canvas pixel and transformational ones, they being ones that make use of the PHP <a target=_blank title='PHP GD Image library information' href='http:\/\/php.net\/manual\/en\/book.image.php'>GD<\/a> image library.  But there is a way to integrate this new functionality into our Feedback web application, rather than reinventing any wheels.<\/p>\n<p><script type='text\/javascript'>\n function aqthen() {\n  location.href='#nav-above';\n }\nsetTimeout(aqthen, 20000);\n<\/script><\/p>\n<p>We&#8217;re going to integrate to the PHP web application featured in <a target=_blank title='Gimp Guillotine Absolute to Relative Image URL Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-absolute-to-relative-image-url-tutorial\/'>Gimp Guillotine Absolute to Relative Image URL Tutorial<\/a> to make this happen and introduce in a new HTML select (dropdown) element, as per &#8230;<\/p>\n<p><code><br \/>\n&lt;select id=phpsel onchange=phpselit(this.value);&gt;&lt;option value=''&gt;Image Filter ...&lt;\/option&gt;&lt;option value='emboss'&gt;Emboss&lt;\/option&gt;&lt;option value='edge'&gt;Edge&lt;\/option&gt;&lt;option value='negedge'&gt;Negedge&lt;\/option&gt;&lt;option value='sharpen'&gt;Sharpen&lt;\/option&gt;&lt;option value='boxblur'&gt;Boxblur&lt;\/option&gt;&lt;option value='negate'&gt;Negate&lt;\/option&gt;&lt;option value='colourizered'&gt;Colourizered&lt;\/option&gt;&lt;option value='colourizegreen'&gt;Colourizegreen&lt;\/option&gt;&lt;option value='colourizeblue'&gt;Colourizeblue&lt;\/option&gt;&lt;option value='colourize'&gt;Colourize&lt;\/option&gt;&lt;option value='pixellate'&gt;Pixellate&lt;\/option&gt;&lt;option value='smooth'&gt;Smooth&lt;\/option&gt;&lt;option value='contrast'&gt;Contrast&lt;\/option&gt;&lt;option value='brightness'&gt;Brightness&lt;\/option&gt;&lt;option value='sketchy'&gt;Sketchy&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code><\/p>\n<p><select size=16><option value=''>Image Filter &#8230;<\/option><option value='emboss'>Emboss<\/option><option value='edge'>Edge<\/option><option value='negedge'>Negedge<\/option><option value='sharpen'>Sharpen<\/option><option value='boxblur'>Boxblur<\/option><option value='negate'>Negate<\/option><option value='colourizered'>Colourizered<\/option><option value='colourizegreen'>Colourizegreen<\/option><option value='colourizeblue'>Colourizeblue<\/option><option value='colourize'>Colourize<\/option><option value='pixellate'>Pixellate<\/option><option value='smooth'>Smooth<\/option><option value='contrast'>Contrast<\/option><option value='brightness'>Brightness<\/option><option value='sketchy'>Sketchy<\/option><\/select><\/p>\n<p> &#8230; teamed with new navigational img and form and iframe related invisible elements as per &#8230;<\/p>\n<p><code><br \/>\n&lt;img onload=myiminteresting(this); style=display:none; id=myimx src=''&gt;&lt;\/img&gt;&lt;form target=myiframenine method=POST style=display:none; action='..\/PHP\/gimp_guillotine_followup.php'&gt;&lt;div id=phpaction style=display:none;&gt;&lt;\/div&gt;&lt;textarea name=duis id=duis style=display:none;&gt;&lt;\/textarea&gt;&lt;input id=bduis type=submit style=display:none; value=Act&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;iframe style='display:none;' name='myiframenine' id='myiframenine' src='..\/PHP\/gimp_guillotine_followup.php'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that teams with new Javascript as per &#8230;<\/p>\n<p><code><br \/>\nfunction myiminteresting(iois) {<br \/>\n  if (iois != null) {<br \/>\n     if (iois.src.replace(document.URL,'').trim() != '') {<br \/>\n      if (document.getElementById('myimx').src.replace(document.URL,'') != '') {<br \/>\n      if (parent.document.getElementById('canvaselement')) {<br \/>\n   parent.document.getElementById('canvaselement').getContext('2d').drawImage(document.getElementById('myimx'), 0, 0, document.getElementById('myimx').width, document.getElementById('myimx').height);<br \/>\n   parent.document.getElementById('phpsel').value='';<br \/>\n      } else {<br \/>\n   context.drawImage(document.getElementById('myimx'), 0, 0, document.getElementById('myimx').width, document.getElementById('myimx').height);<br \/>\n   document.getElementById('phpsel').value='';<br \/>\n      }<br \/>\n   canvascommands.push(\"context.drawImage(document.getElementById('myimx'), 0, 0);\");<br \/>\n      }<br \/>\n     }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction postphpselit() {<br \/>\n     document.getElementById('duis').innerHTML=elem.toDataURL(\"image\/png\",0);<br \/>\n     document.getElementById('myimx').src=document.URL;<br \/>\n     document.getElementById('bduis').click();<br \/>\n}<br \/>\n<br \/>\nfunction phpselit(tv) {<br \/>\n   if (tv.trim() != '') {<br \/>\n     if (document.getElementById('myimx').src.replace(document.URL,'') != '') {<br \/>\n     postphpselit();<br \/>\n     } else {<br \/>\n     document.getElementById('bduis').name=tv.trim();<br \/>\n     icontain=true;<br \/>\n     icover=false;<br \/>\n     document.getElementById('pcbut').click();<br \/>\n     setTimeout(postphpselit, 3000);<br \/>\n     }<br \/>\n   }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and a changed PHP receiving &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_POST['duis'])) {<br \/>\n    new_content(urldecode($_POST['duis']));<br \/>\n    exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and a new local rewritten function code snippet <font color=blue>as per<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n function ourfile_get_contents($ourfilename) {<br \/>\n   global $zipfile, $ziparrc, $ziparr, $ext;<br \/>\n   if (trim($zipfile) == \"\") {<br \/>\n     <font color=blue>if (substr(($ourfilename . \"     \"),0,5) == \"data:\") {<br \/>\n       $ext=\".\" .<br \/>\n       explode(\"\/\", explode(\";base64,\", str_replace(\" \",\"+\",$ourfilename))[0])[-1 + sizeof(explode(\"\/\", explode(\";base64,\", str_replace(\" \",\"+\",$ourfilename))[0]))];   \/\/ \/jpeg;<br \/>\n       return base64_decode(explode(\";base64,\", str_replace(\" \",\"+\",$ourfilename))[1]);<br \/>\n     }<\/font><br \/>\n     return file_get_contents($ourfilename);<br \/>\n   }  \/\/ lots more code follows<br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and <font color=blue>a new code snippet<\/font> in each if block of function new_content as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n function new_content($zfilename) {<br \/>\n    global $div_img, $ext;<br \/>\n    if (isset($_GET['emboss']) || isset($_POST['emboss'])) {<br \/>\n      $im_php = imagecreatefromstring(ourfile_get_contents($zfilename));<br \/>\n      $emboss = array([-2, -1, 0], [-1, 1, 1], [0, 1, 2]);<br \/>\n      imagefilter($im_php, IMG_FILTER_EMBOSS);<br \/>\n      $new_name = 'anewimage0.jpg';<br \/>\n      $nj=0;<br \/>\n      while (file_exists('anewimage' . $nj . '.jpg')) {<br \/>\n        $nj++;<br \/>\n        $new_name = 'anewimage' . $nj . '.jpg';<br \/>\n      }<br \/>\n      imagejpeg($im_php, $new_name);<br \/>\n      $qpzm='data:image\/jpeg;base64,' . base64_encode(ourfile_get_contents($new_name));<br \/>\n      imagedestroy($im_php);<br \/>\n      unlink($new_name);<br \/>\n      <font color=blue>if (strpos($_SERVER['HTTP_REFERER'], \"\/feedback\") !== false && strpos($_SERVER['HTTP_REFERER'], \"rjmprogramming.com.au\") !== false) {<br \/>\n       echo \"&lt;!doctype html&gt;&lt;html&gt;&lt;body onload=\\\" if (parent.document.getElementById('myimx')) {   parent.document.getElementById('myimx').src='\" . $qpzm . \"';  }   \\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n       exit;<br \/>\n      }  <\/font><br \/>\n      return $qpzm;<br \/>\n    } \/\/ lots more code if blocks follows<br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; yet again, in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--------------------------GETME'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--------------------------GETME'>feedback.htm<\/a> (and its <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js------------------------GETME' title='world.js'>changed external Javascript<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js------------------------GETME'>world.js<\/a> and calling <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-------------------GETME' title='gimp_guillotine_followup.php'>changed PHP GD logic helper<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/gimp_guillotine_followup.php-------------------GETME'>gimp_guillotine_followup.php<\/a>) <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a>, for you to try, we hope.<\/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\/feedback-annotation-canvas-image-filter-tutorial\/'>Feedback Annotation Canvas Image Filter Tutorial<\/a>.<\/p-->\n<hr>\n<p id='facpt'>Previous relevant <a target=_blank title='Feedback Annotation Canvas Pixels Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-annotation-canvas-pixels-tutorial\/'>Feedback Annotation Canvas Pixels Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Annotation Canvas Pixels Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_annotation_canvas_pixel.jpg\" title=\"Feedback Annotation Canvas Pixels Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Annotation Canvas Pixels Tutorial<\/p><\/div>\n<p>So far with our revisit work on the Feedback web application of yesterday&#8217;s <a title='Feedback Annotation Image Cover Contain Tutorial' href='#faicct'>Feedback Annotation Image Cover Contain Tutorial<\/a> we haven&#8217;t talked much about the middle person conduit of data, the HTML(5) <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element, it being a useful &#8220;middle person conduit candidate&#8221; because &#8230;<\/p>\n<ul>\n<li>after data is captured to a canvas element it can easily be exported onto its next use via [canvasElement].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>() method &#8230;<\/li>\n<li>a variety of HTML(5) canvas data &#8220;populator&#8221; functions like [canvasContext].<a target=_blank title='HTML canvas element drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage<\/a>() method allow data to come into canvas &#8230;<\/li>\n<\/ul>\n<p> &#8230; but the canvas element also has &#8220;rearrange of data&#8221; functions too.<\/p>\n<p>Two at a pixel level are [canvasContext].<a target=_blank title='Canvas getImageData method information from w3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_getimagedata.asp'>getImageData<\/a>() and [canvasContext].<a target=_blank title='Canvas getImageData method information from w3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_putimagedata.asp'>putImageData<\/a>() used to add some new Annotation image functionality for &#8230;<\/p>\n<ul>\n<li>Grayscale<\/li>\n<li>Inverse<\/li>\n<\/ul>\n<p> &#8230; and regarding &#8220;transformational&#8221; ways to &#8220;rearrange data&#8221; we offer &#8230;<\/p>\n<ul>\n<li>Flip<\/li>\n<li>Flop<\/li>\n<\/ul>\n<p> &#8230; presented in terms of a user interface as HTML input type=checkbox as per (<font color=red>and Stop Press<\/font>) &#8230;<\/p>\n<p><code><br \/>\n&amp;nbsp;&amp;nbsp;Grayscale:&amp;nbsp;&lt;input <font color=red>id=chkgrayscale <\/font>title=Grayscale type=checkbox onchange=oureval('dograyscale=',this.checked);&gt;&lt;\/input&gt;&amp;nbsp;&amp;nbsp;Inverse:&amp;nbsp;&lt;input <font color=red>id=chkinverse <\/font>title=Inverse type=checkbox onchange=oureval('doinverse=',this.checked);&gt;&lt;\/input&gt;&amp;nbsp;&amp;nbsp;Flip:&amp;nbsp;&lt;input <font color=red>id=chkflip <\/font>title=Flip type=checkbox onchange=oureval('doflip=',this.checked);&gt;&lt;\/input&gt;&amp;nbsp;&amp;nbsp;Flop:&amp;nbsp;&lt;input <font color=red>id=chkflop <\/font>title=Flop type=checkbox onchange=oureval('doflop=',this.checked);&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and supported by the new Javascript &#8230;<\/p>\n<p><code><br \/>\nvar dograyscale=false;<br \/>\nvar doinverse=false;<br \/>\nvar doflop=false;<br \/>\nvar doflip=false;<br \/>\n<br \/>\nfunction oureval(incmd, twot) {<br \/>\n   eval(incmd + twot);<br \/>\n   <font color=red>   twot='!' + incmd.split(\"=\")[0] + \"; document.getElementById('\" + incmd.split(\"=\")[0].replace('do','chk') + \"').checked=\" + incmd.split(\"=\")[0] + \";\";<\/font><br \/>\n   canvascommands.push(incmd + twot);<br \/>\n}<br \/>\n<br \/>\nfunction ourDrawImage(ioo, ione, itwo, ithree, ifour, ifive, isix, iseven, ieight) {  \/\/ thanks to <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/3129099\/how-to-flip-images-horizontally-with-html5'>https:\/\/stackoverflow.com\/questions\/3129099\/how-to-flip-images-horizontally-with-html5<\/a><br \/>\n  if (doflip) {<br \/>\n    context.setTransform(-1,0,0,1,elem.width,0);  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/42844470\/how-to-rotate-and-mirror-canvas-element<br \/>\n  } else if (doflop) {<br \/>\n    context.setTransform(1,0,0,-1,0,elem.height);  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/42844470\/how-to-rotate-and-mirror-canvas-element<br \/>\n  }<br \/>\n  if (typeof ieight !== 'undefined') {<br \/>\n    context.drawImage(ioo, ione, itwo, ithree, ifour, ifive, isix, iseven, ieight);<br \/>\n    if (dograyscale) { grayscale(ioo, ione, itwo, ithree, ifour, ifive, isix, iseven, ieight); }<br \/>\n    if (doinverse) { inverse(ioo, ione, itwo, ithree, ifour, ifive, isix, iseven, ieight); }<br \/>\n  } else if (typeof isix !== 'undefined') {<br \/>\n    context.drawImage(ioo, ione, itwo, ithree, ifour, ifive, isix);<br \/>\n    if (dograyscale) { grayscale(ioo, ione, itwo, ithree, ifour, ifive, isix); }<br \/>\n    if (doinverse) { inverse(ioo, ione, itwo, ithree, ifour, ifive, isix); }<br \/>\n  } else {<br \/>\n    context.drawImage(ioo, ione, itwo, ithree, ifour);<br \/>\n    if (dograyscale) { grayscale(ioo, ione, itwo, ithree, ifour); }<br \/>\n    if (doinverse) { inverse(ioo, ione, itwo, ithree, ifour); }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction inverse(ioo, ione, itwo, ithree, ifour, ifive, isix, iseven, ieight) {  \/\/ thanks to https:\/\/www.w3schools.com\/tags\/canvas_getimagedata.asp<br \/>\n  var i;<br \/>\n  var imgData;<br \/>\n  if (typeof ieight !== 'undefined') {<br \/>\n    imgData=context.getImageData(ione, itwo, ithree, ifour);<br \/>\n  } else if (typeof isix !== 'undefined') {<br \/>\n    imgData=context.getImageData(ione, itwo, ithree, ifour);<br \/>\n  } else {<br \/>\n    imgData=context.getImageData(ione, itwo, ithree, ifour);<br \/>\n  }<br \/>\n           var data = imgData.data;<br \/>\nfor (i=0;i&lt;data.length;i+=4) {<br \/>\n  data[i]=eval(255 - data[i]);<br \/>\n  data[i+1]=eval(255 - data[i+1]);<br \/>\n  data[i+2]=eval(255 - data[i+2]);<br \/>\n  \/\/data[i+3]=eval(15); \/\/255); \/\/ - data[i+3]);<br \/>\n}<br \/>\n  context.putImageData(imgData,ione, itwo);<br \/>\n}<br \/>\n<br \/>\nfunction grayscale(ioo, ione, itwo, ithree, ifour, ifive, isix, iseven, ieight) {  \/\/ thanks to https:\/\/www.w3schools.com\/tags\/canvas_getimagedata.asp<br \/>\n  var i;<br \/>\n  var imgData;<br \/>\n  if (typeof ieight !== 'undefined') {<br \/>\n    imgData=context.getImageData(ione, itwo, ithree, ifour);<br \/>\n  } else if (typeof isix !== 'undefined') {<br \/>\n    imgData=context.getImageData(ione, itwo, ithree, ifour);<br \/>\n  } else {<br \/>\n    imgData=context.getImageData(ione, itwo, ithree, ifour);<br \/>\n  }<br \/>\n           var data = imgData.data;<br \/>\n           for (i = 0; i &lt; data.length; i += 4) {<br \/>\n              var bright = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];<br \/>\n              data[i] = bright;<br \/>\n              data[i + 1] = bright;<br \/>\n              data[i + 2] = bright;<br \/>\n           }<br \/>\n  context.putImageData(imgData,ione, itwo);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; again, in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------GETME'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------GETME'>feedback.htm<\/a> (and its <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------------GETME' title='world.js'>changed external Javascript<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------------GETME'>world.js<\/a>) <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a>, for you to try, we hope.<\/p>\n<p><b><i><font color=red>Stop Press<\/font><\/i><\/b><\/p>\n<p><font color=red>We needed to consider integration with the Undo and Redo functionality.<\/font><\/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\/feedback-annotation-canvas-pixels-tutorial\/'>Feedback Annotation Canvas Pixels Tutorial<\/a>.<\/p-->\n<hr>\n<p id='faicct'>Previous relevant <a target=_blank title='Feedback Annotation Image Cover Contain Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-annotation-image-cover-contain-tutorial\/'>Feedback Annotation Image Cover Contain Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Annotation Image Cover Contain Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_cover_contain.jpg\" title=\"Feedback Annotation Image Cover Contain Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Annotation Image Cover Contain Tutorial<\/p><\/div>\n<p>Do you remember a discussion here about the CSS property <i>background-size<\/i> we discussed with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-background-size-contain-and-cover-primer-tutorial\/' title='CSS3 Background Size Contain and Cover Primer Tutorial'>CSS3 Background Size Contain and Cover Primer Tutorial<\/a>?  It\u2019s become one of our favourite properties ever since our bid for the Opera House failed?!<\/p>\n<p>Well, today, we\u2019re channeling that excellent concept to add some image to canvas placement additions to functionality, and scaling thoughts, regarding the Annotation section of our Feedback web application (last talked about with the recent <a title='Mobile Feedback Annotation Image Camera Capture Tutorial' href='#mfaicct'>Mobile Feedback Annotation Image Camera Capture Tutorial<\/a>) which we have been revisiting lately.<\/p>\n<p>Think of the two this way &#8230;<\/p>\n<ul>\n<li>Contain (within canvas) retains an image\u2019s aspect ratio but may scale it as to best fit within the bounds of the canvas given the dimensions of the image<\/li>\n<li>Cover (within canvas) is unlikely to retain the aspect ratio as it scales the image to fit the dimensions of the canvas<\/li>\n<\/ul>\n<p>These two options have the advantage that no user clicks on the canvas need happen ahead of image placement.  As this is the case, we feel we can avail the user of this new functionality in two ways, those being &#8230;<\/p>\n<ul>\n<li>Four <font color=blue>new<\/font> buttons &#8230;<br \/>\n<code><br \/>\n&lt;button <font color=blue>id=pcbut <\/font>onclick='zeroone=1.0; readBlob(0,0);'&gt;Place Click&lt;\/button&gt;&lt;button <font color=blue>id=ocbut <\/font>onclick='zeroone=1.0; readOBlob(0,0);'&gt;Overlay Click&lt;\/button&gt;<font color=blue>&lt;button onclick=\"icover=true; icontain=false; document.getElementById('pcbut').click();\"&gt;Cover Place&lt;\/button&gt;&lt;button onclick=\"icontain=true; icover=false; document.getElementById('pcbut').click();\"&gt;Contain Place&lt;\/button&gt;&lt;button onclick=\"icover=true; icontain=false; document.getElementById('ocbut').click();\"&gt;Cover Overlay&lt;\/button&gt;&lt;button onclick=\"icontain=true; icover=false; document.getElementById('ocbut').click();\"&gt;Contain Overlay&lt;\/button&gt;<\/font><br \/>\n<\/code>\n<\/li>\n<li>Four new dropdown options on that scaling dropdown &#8230;<br \/>\n<code><br \/>\n&lt;select id='imageclickmode' onchange=' <font color=blue>  if (eval(this.value) == 4) {  icover=true; icontain=false; document.getElementById(\"pcbut\").click();  } else if (eval(this.value) == 6) {  icover=true; icontain=false; document.getElementById(\"ocbut\").click();   } else if (eval(this.value) == 5) { icover=false; icontain=true; document.getElementById(\"pcbut\").click(); } else if (eval(this.value) == 7) { icover=false; icontain=true; document.getElementById(\"ocbut\").click(); } else { <\/font> imageclickmode=dmyformit(eval(this.value)); <font color=blue> } <\/font> '&gt;&lt;option value=0&gt;Scaling as shown above&lt;\/option&gt;&lt;option value=1&gt;Scaling to fit last two click\/touch rectangle&lt;\/option&gt;&lt;option value=2&gt;Scaling to suit last two click\/touch rectangle width&lt;\/option&gt;&lt;option value=3&gt;Scaling to suit last two click\/touch rectangle height&lt;\/option&gt;<font color=blue>&lt;option value=4&gt;Cover Place&lt;\/option&gt;&lt;option value=5&gt;Contain Place&lt;\/option&gt;&lt;option value=6&gt;Cover Overlay&lt;\/option&gt;&lt;option value=7&gt;Contain Overlay&lt;\/option&gt;<\/font>&lt;\/select&gt;<br \/>\n<\/code><br \/>\n &#8230; (we now remind the user about for all image browse completions (either taking a photo or successfully browsing for one))<\/li>\n<\/ul>\n<p>Though by the end it doesn\u2019t look much like an Android <a target=_blank href='https:\/\/developer.android.com\/guide\/topics\/ui\/notifiers\/toasts' title='Android toast dialog box'>Toast<\/a> temporary HTML div element (dialog box) showing this advice, a lot of its workings are based on how we applied Toast to the marmalade of our previous web application <strike>saut\u00e9<\/strike>sortie (as per <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/daylight-saving-time-google-geo-chart-tooltips-tutorial\/' title='Daylight Saving Time Google Geo Chart Tooltips Tutorial'>Daylight Saving Time Google Geo Chart Tooltips Tutorial<\/a>).<\/p>\n<p>Today, <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------GETME'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------GETME'>feedback.htm<\/a>&#8216;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js----------------------GETME' title='world.js'>changed external Javascript<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js----------------------GETME'>world.js<\/a> is called by our Feedback <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">web application<\/a> for your perusal and trial.<\/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\/feedback-annotation=image-cover-contain-tutorial\/'>Feedback Annotation Image Cover Contain Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mfaicct'>Previous relevant <a target=_blank title='Mobile Feedback Annotation Image Camera Capture Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-feedback-annotation-image-camera-capture-tutorial\/'>Mobile Feedback Annotation Image Camera Capture Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Feedback Annotation Image Camera Capture Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_image_file_capture.jpg\" title=\"Mobile Feedback Annotation Image Camera Capture Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Mobile Feedback Annotation Image Camera Capture Tutorial<\/p><\/div>\n<p>Mobile devices, those &#8220;smart ones&#8221;, gave us a very useful advantage on top of a lot of the laptops that preceded them (regarding personal computing) &#8230; the inbuilt camera.  HTML came along before the modern smart phone or tablet, so the HTML mechanism to support the webpage creation and storing of images via access to the device&#8217;s inbuilt camera had to be agreed upon.  So, onto the progress of yesterday&#8217;s <a title='Feedback Emoji Mixed Content Tutorial' href='#femct'>Feedback Emoji Mixed Content Tutorial<\/a> <font color=blue>we came up with<\/font> (in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js---------------------GETME' title='world.js'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js---------------------GETME'>world.js<\/a> external Javascript called by our Feedback <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">web application<\/a>) &#8230;<\/p>\n<p><code><br \/>\n&lt;img <font color=blue>onload='thisim=this;' style='width:30px;height:32px;font-size:30px;' <\/font>src='\/\/www.rjmprogramming.com.au\/MarkItUp\/image.png' onclick=\"   bmode=' an image ';   document.getElementById('file').click();  document.getElementById('file').style.display='inline-block'; document.getElementById('dpf').style.display='block'; \" alt='Image' title='Image'<font color=blue> id=imagefile<\/font>&gt;&lt;\/img&gt;<font color=blue>&lt;span id=spanimo&gt;&lt;\/span&gt;<\/font>&lt;input onchange=' audiomaybe(); ' style='display:none;' id='file' type='file' name='file'<font color=blue> data-ucapture='user' accept='image\/*' data-capture='camera'<\/font>&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; the apt snippet being (<a target=_blank title='Advice' href='https:\/\/stackoverflow.com\/questions\/21523544\/html-file-input-control-with-capture-and-accept-attributes-works-wrong'>merely<\/a>) <font color=blue>accept=&#8217;image\/*&#8217;<\/font> to allow for all of &#8230;<\/po>\n<ul>\n<li>Take Photo<\/li>\n<li>Photo Library<\/li>\n<li>Browse&#8230;<\/li>\n<\/ul>\n<p> &#8230; on those &#8220;smart mobile devices&#8221;.  Nothing else &#8220;web application workflow wise&#8221; is needed.  Everything becomes possible to use your &#8220;smart mobile device camera&#8221; to take a photo after the button press and capture and store it on the canvas element, perhaps on its way to a Feedback Email through to an emailee of the user&#8217;s choosing.<\/p>\n<p>But how to flag to that &#8220;smart mobile device&#8221; user that this new functionality is available?  We decided on a &#8220;ternary slide animation button&#8221; (ie. 3 slides) to replace a single &#8220;image button&#8221; to flag this, and hooked into the HTML above with the accompanying Javascript event logic as per &#8230;<\/p>\n<p><code><br \/>\nvar thisim=null, thisimo=null;<br \/>\n<br \/>\nsetTimeout(changeifile, 2000);<br \/>\n<br \/>\nfunction changeifile() {<br \/>\n  var irect, thisimsrc='none', donext=true, randnis=Math.floor(Math.random() * 19876452);<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  if (thisim) {<br \/>\n    if (thisimo) { thisimo=document.getElementById('spanimo'); thisimsrc='' + thisimo.style.display; if (thisimsrc.trim() == '') { thisimsrc='none'; thisimo=null; } }<br \/>\n    if (thisimsrc.toLowerCase() == 'none') { \/\/thisim.src.indexOf('image.png') != -1) {<br \/>\n      if (thisimo) {<br \/>\n        if (eval(randnis % 2) == 1) {<br \/>\n        document.getElementById('spanimo').style.fontSize='30px';<br \/>\n        document.getElementById('spanimo').style.zIndex='777';<br \/>\n        document.getElementById('spanimo').style.opacity='1.0';<br \/>\n        document.getElementById('spanimo').style.border='1px dotted red';<br \/>\n        document.getElementById('spanimo').style.display='inline-block';<br \/>\n        document.getElementById('spanimo').style.marginLeft='-34px';<br \/>\n        document.getElementById('spanimo').style.marginTop='-14px';<br \/>\n        document.getElementById('spanimo').innerHTML='&amp;#128247;';<br \/>\n        thisimo.style.display='inline-block';<br \/>\n        thisim.style.opacity='0.0';<br \/>\n        } else {<br \/>\n        thisim.style.opacity='1.0';<br \/>\n        }<br \/>\n        thisim.style.borderRadius='35px';<br \/>\n        thisim.style.border='5px solid black';<br \/>\n      } else {<br \/>\n        irect=thisim.getBoundingClientRect();<br \/>\n        if (eval('' + irect.left) != 0) {<br \/>\n        thisimo=document.getElementById('spanimo');<br \/>\n        if (eval(randnis % 2) == 1) {<br \/>\n        document.getElementById('spanimo').style.fontSize='30px';<br \/>\n        document.getElementById('spanimo').style.zIndex='777';<br \/>\n        document.getElementById('spanimo').style.opacity='1.0';<br \/>\n        document.getElementById('spanimo').style.border='1px dotted red';<br \/>\n        document.getElementById('spanimo').style.display='inline-block';<br \/>\n        document.getElementById('spanimo').style.marginLeft='-34px';<br \/>\n        document.getElementById('spanimo').style.marginTop='-14px';<br \/>\n        document.getElementById('spanimo').innerHTML='&amp;#128247;';<br \/>\n        thisim.style.opacity='0.0';<br \/>\n        } else {<br \/>\n        thisim.style.opacity='1.0';<br \/>\n        }<br \/>\n        thisim.style.borderRadius='35px';<br \/>\n        thisim.style.border='5px solid black';<br \/>\n        } else {<br \/>\n        setTimeout(changeifile, 8000);<br \/>\n        donext=false;<br \/>\n        }<br \/>\n      }<br \/>\n    } else {<br \/>\n      if (thisimo) {<br \/>\n        thisimo.style.display='none';<br \/>\n        thisim.style.opacity='1.0';<br \/>\n        thisim.style.borderRadius='';<br \/>\n        thisim.style.border='';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  if (donext) { setTimeout(changeifile, 2000); }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; making use of &#8230;<\/p>\n<ul>\n<li>combination of <i>border-radius:35px;<\/i> and <i>border:5px solid black;<\/i> for one of the new slide ideas &#8230; versus &#8230;<\/li>\n<li>combination of <i>span<\/i> (&#128247;) and <i>display:inline-block;<\/i> and <i>font-size:30px;<\/i> and <i>margin-left:-34px;<\/i> for the other one of the new slide ideas<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------------------GETME'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------------------GETME'>feedback.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a>, for you to try, we hope.<\/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\/mobile-feedback-annotation-image-camera-capture-tutorial\/'>Mobile Feedback Annotation Image Camera Capture Tutorial<\/a>.<\/p-->\n<hr>\n<p id='femct'>Previous relevant <a target=_blank title='Feedback Emoji Mixed Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-emoji-mixed-content-tutorial\/?rand=17856433'>Feedback Emoji Mixed Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Emoji Mixed Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_https.jpg\" title=\"Feedback Emoji Mixed Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Emoji Mixed Content Tutorial<\/p><\/div>\n<p>The issue of Mixed Content (ie. the mixing of http: and https: protocol) web content is an issue to look out for should you be a web application developer with a penchant for the HTML iframe element.  We approached the fixing of Mixed Content issues for two issues in two different ways today.  As a result &#8230;<\/p>\n<ul>\n<li>for an emoji web application not asking for any personalized user entries we just decided to perform a one off check of https: protocol usage and redirected to http: as per <font color=blue>the added<\/font> Javascript &#8230;<br \/>\n<code><br \/>\n  <font color=blue>if (document.URL.toLowerCase().indexOf('https:') == 0) {<br \/>\n    location.href='http' + document.URL.substring(5);<br \/>\n  }<\/font><br \/>\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n<\/code><br \/>\n &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html---GETME\" title=\"fairy_story_assistant.html\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html---GETME\" title=\"fairy_story_assistant.html\">fairy_story_assistant.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.html\" title=\"Click picture\">live run<\/a> supervisor of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php------GETME\" title=\"fairy_story_assistant.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php------GETME\" title=\"fairy_story_assistant.php\">fairy_story_assistant.php<\/a> Fairy Story creator web application &#8230; &#8220;easy peasy&#8221; but not so good for a more sensitive &#8230;\n<\/li>\n<li>feedback (involving emoji HTML iframe) web application (which you can read about at the recent <a title='Feedback Inline HTML Form Email Collaboration Animation Tutorial' href='#fihtmlfecat'>Feedback Inline HTML Form Email Collaboration Animation Tutorial<\/a> below) that has email sharing functionality we decided to nut out how to make the &#8220;Mixed Content&#8221; weak emoji HTML iframe child work for the https: protocol (and remain working for the http: protocol, as it always had) &#8230; via, in broad brush terms &#8230;\n<ol>\n<li>when using https: protocol separate navigation to navigate to some middle person PHP &#8230; <font color=blue>as per<\/font> in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------------GETME'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------------GETME'>feedback.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a>&#8216;s &#8230;<br \/>\n<code><br \/>\n<font color=blue>&lt;script type='text\/javascript'&gt;<br \/>\nif (document.URL.toLowerCase().indexOf('http:') != -1) {<br \/>\n document.write(\"<\/font>&lt;td id='emojis' style='vertical-align:top;border:4px solid red; float:left; height:180px; -webkit-overflow-scrolling:touch;overflow:hidden; align: top;'&gt;&lt;iframe style='height:240px;' name='emojis' id='emojis' src='\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php#myh3'&gt;&lt;\/iframe&gt;&lt;\/td&gt;<font color=blue>\");<br \/>\n} else {<br \/>\n document.write(\"&lt;td id='emojis' style='vertical-align:top;border:4px solid red; float:left; height:180px; -webkit-overflow-scrolling:touch;overflow:hidden; align: top;'&gt;&lt;iframe style='height:240px;' name='emojis' id='emojis' src='<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticonkeyboardshortcuts.php_GETME\" title=\"emoticonkeyboardshortcuts.php\">\/\/www.rjmprogramming.com.au\/PHP\/emoticonkeyboardshortcuts.php<\/a>#myh3'&gt;&lt;\/iframe&gt;&lt;\/td&gt;\");<br \/>\n}<br \/>\n&lt;\/script&gt;<\/font><br \/>\n<\/code>\n<\/li>\n<li>and within the middle person PHP we start to use (for us) text\/html data-URIs (associated with an HTML iframe&#8217;s &#8220;src&#8221; attribute) as per PHP (help via <a target=_blank title='PHP file_get_contents() method information' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php'>file_get_contents()<\/a>) &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$pineapple=file_get_contents(\"HTTP:\/\/emojiterra.com\/pineapple\");<br \/>\n$pineto='data:text\/html,' . urlencode($pineapple);<br \/>\n<br \/>\n$pineapp=file_get_contents(\"HTTP:\/\/afeld.github.io\/emoji-css\/\");<br \/>\n$pinetwo='data:text\/html,' . urlencode($pineapp);<br \/>\n<br \/>\necho str_replace(' src=\"HTTP:\/\/afeld.github.io\/emoji-css\/\"', ' src=\"' . $pinetwo . '\"', str_replace(' src=\"HTTP:\/\/emojiterra.com\/pineapple\/\"', ' src=\"' . $pineto . '\"', str_replace(' src=\"\/\/afeld.github.io\/emoji-css\/\"', ' src=\"' . $pinetwo . '\"', str_replace(' src=\"\/\/emojiterra.com\/pineapple\/\"', ' src=\"' . $pineto . '\"', file_get_contents(\"..\/PHP\/emoticon_keyboard_shortcuts.htm\")))));<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; as a means whereby you can substitute any &#8220;protocol syntax&#8221; for &#8220;data-URI syntax&#8221; (as that transportable way to define data, at the expense of verbosity) &#8230; an advantage here being the lack of any need to involve any &#8220;srcdoc&#8221; attribute, at all\n<\/li>\n<li>as well as &#8220;the first port of call&#8221; checks for needless use of &#8220;http:&#8221; and &#8220;https:&#8221; hard codings, where absolute URLs starting with <i>\/\/<\/i> are &#8220;all the go&#8221;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Food for thought, we hope.<\/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\/feedback-emoji-mixed-content-tutorial\/'>Feedback Emoji Mixed Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fihtmlfecat'>Previous relevant <a target=_blank title='Feedback Inline HTML Form Email Collaboration Animation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-animation-tutorial\/?rand=17856443'>Feedback Inline HTML Form Email Collaboration Animation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Inline HTML Form Email Collaboration Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_textarea_reply_collaboration_gif.gif\" title=\"Feedback Inline HTML Form Email Collaboration Animation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Inline HTML Form Email Collaboration Animation Tutorial<\/p><\/div>\n<p>In order to add &#8220;animation&#8221; thoughts into the mix of the thinking regarding the &#8220;Feedback&#8221; web application of <a title='Feedback Inline HTML Form Email Collaboration Recall Tutorial' href='#fihtmlfecrt'>Feedback Inline HTML Form Email Collaboration Recall Tutorial<\/a> we had to &#8230;<\/p>\n<ol>\n<li>establish you can define an animated GIF that is not just the first slide, static, in an HTML img element using a data URI for the src attribute &#8230; check<\/li>\n<li>see if the animated GIF could be the background to an Inline HTML Email textarea element, animated &#8230; uncheck, alas, as well as to do with the usual size of such animated GIFs (to avoid the dreaded <a target=_blank href='https:\/\/fulcrumtech.net\/resources\/preventing-gmail-from-clipping-your-emails\/' title='Useful link, thanks'>Gmail Clipping<\/a> perhaps)  &#8230; so &#8230;<\/li>\n<li>team up the attached image email with the Inline HTML Form Email one we now &#8230;\n<ul>\n<li>ditch the textarea background attempts when a .gif image involved<\/li>\n<li>guarantee email subjects match (for both types of email)<\/li>\n<li>place the same GMT date string in both emails to be a search of emails criteria for the collaborators (even offering a webmail link for the second collaborator having a <a target=_blank href='https:\/\/gmail.com'>Gmail<\/a> email address)<\/li>\n<\/ul>\n<\/ol>\n<p>How does the user of &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----------------------GETME\">the changed<\/a> HTML\/Javascript\/CSS supervisor <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----------------------GETME\">feedback.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\">live run<\/a> link &#8230; supervising &#8230;<\/li>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js--------------------GETME'>a changed<\/a> external Javascript <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js--------------------GETME' title='world.js'>world.js<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php---------GETME'>a changed<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php---------GETME' title='world.php'>world.php<\/a><\/li>\n<\/ul>\n<p> &#8230; even involve Animated GIFs?  Well &#8230;<\/p>\n<ul>\n<li>down in the green &#8220;Annotations&#8221; section &#8230;<\/li>\n<li>there is an &#8220;image&#8221; icon\/button you can click &#8230;<\/li>\n<li>to browse for image files to upload, and they can be Animated GIFs (or they could come from the &#8220;Image URL&#8221; textbox as well) &#8230; and then &#8230;<\/li>\n<li>clicking the &#8220;Place into Canvas&#8221; button &#8230; will &#8230;<\/li>\n<li>add into the top left white section (with pink border) a new Animated GIF thumbnail button &#8230; that if pressed &#8230;<\/li>\n<li>causes a check to be made if there is enough information to email those two email types to the Email To email address<\/li>\n<\/ul>\n<p> &#8230; that&#8217;s how!  And if a picture tells a thousand words, watch out for the &#8220;verbosity overload&#8221; with your Animated GIFs!<\/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\/feedback-inline-html-form-email-collaboration-animation-tutorial\/'>Feedback Inline HTML Form Email Collaboration Animation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fihtmlfecrt'>Previous relevant <a target=_blank title='Feedback Inline HTML Form Email Collaboration Recall Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-recall-tutorial\/?rand=17856453'>Feedback Inline HTML Form Email Collaboration Recall Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Inline HTML Form Email Collaboration Recall Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_textarea_reply_collaboration_cookies.jpg\" title=\"Feedback Inline HTML Form Email Collaboration Recall Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Inline HTML Form Email Collaboration Recall Tutorial<\/p><\/div>\n<p>Just because yesterday&#8217;s <a title='Feedback Inline HTML Form Email Collaboration Accountability Tutorial' href='#fihtmlfecat'>Feedback Inline HTML Form Email Collaboration Accountability Tutorial<\/a>&#8216;s Inline HTML Email Form got dumbed down from method=POST to method=GET (and so the data URI data of the image subject matter could not be &#8220;chained along&#8221; in the email thread of our Feedback and Collaboration subset of functionality from our Feedback web application) doesn&#8217;t mean we have to &#8230;<\/p>\n<ul>\n<li>give up on recall via serverside language (PHP) methodologies (though we do have some ideas for a &#8220;gap year&#8221; project one day) &#8230; because there is still &#8230;<\/li>\n<li>client-side recall via what many people know as (Javascript DOM) HTTP Cookies, though today we&#8217;re using <a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> web browser local storage, usually only for the original author of the image subject matter<\/li>\n<\/ul>\n<p>Why &#8220;localStorage&#8221; and not &#8220;HTTP Cookies&#8221;?   Have you ever seen the error message &#8230;<\/p>\n<p><code><br \/>\nHTTP 414 \"Request URI too long\"<br \/>\n<\/code><\/p>\n<p> &#8230; surfing the net?  Many of us, for sure.  It happens when the URL at the address bar exceeds length limits for the web server it is destined to liaise with.  HTTP Cookies work to this same limit, more or less.  We tend to think 800 to 900 characters for RJM Programming regarding this HTTP 414 error.   That&#8217;s why we&#8217;re always raving about &#8220;method=POST&#8221; and PHP&#8217;s $_POST array (rather than method=GET and $_GET array), because that 800 to 900 is not going  to handle the data URI length for that image.   HTTP Cookies came first, but then localStorage got invented.   Yayyyyyyyyyyyy!!!!!!!<\/p>\n<p>How do we work localStorage into <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---------------------GETME\">feedback.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\">Feedback live run<\/a> underlying web application, bearing in mind, it is only useful for the original &#8220;author&#8221; of the image data (on the web browser they were using at the time of Inline HTML Form Email relay to their fellow collaborator)?<\/p>\n<table>\n<tr>\n<th>Checking for a previous storing of an Inline HTML Form Email image in localStorage at document.body onload event Javascript function &#8220;onloading&#8221;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n var imgd=null;<br \/>\n var dval='';<br \/>\n function onloading() {<br \/>\n\/\/other logic here<br \/>\n    if (window.localStorage) {<br \/>\n    for (var iq in window.localStorage) {<br \/>\n     var val = localStorage.getItem(iq);<br \/>\n     if (val) {<br \/>\n     if (iq == 'lf_img') {<br \/>\n        dval=decodeURIComponent(val);<br \/>\n        if (document.getElementById('dilhe').innerHTML.indexOf('\"checkbox\"') == -1) {<br \/>\n         document.getElementById('dilhe').innerHTML+='&nbsp;&lt;span id=rcbx title=\"Recall last Inline HTML Email image into canvas just below\">Recall Last? &lt;input type=\"checkbox\" onchange=\"loadimgd();\"&gt;&lt;\/input&gt;&lt;\/span&gt;';<br \/>\n        }<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n\/\/other logic here<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; adding that new checkbox, as found, that, if checked will cause the Javascript function &#8220;loadimgd&#8221; to be executed, as per &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction loadimgd() {<br \/>\n          var ditems=dval.split(' ');<br \/>\n          if (ditems.length &gt;= 5) {<br \/>\n          imgd = new Image();<br \/>\n<br \/>\n          imgd.onload = function() {<br \/>\n             context.drawImage(imgd, 0, 0);<br \/>\n          };<br \/>\n<br \/>\n          imgd.src = ditems[4];<br \/>\n          document.getElementById('myto').value = ditems[0];<br \/>\n          if (ditems[1].replace(\"@\",\"\").trim() != \"\") { document.getElementById('mycc').value = ditems[1]; }<br \/>\n          if (ditems[2].replace(\"@\",\"\").trim() != \"\") { document.getElementById('mybcc').value = ditems[2]; }<br \/>\n          if (ditems[3].replace(\/\\~\/g,\" \").trim() != \"\") { document.getElementById('feedback').value = ditems[3].replace(\/\\~\/g,' '); }<br \/>\n          if (document.getElementById('rcbx')) {<br \/>\n            document.getElementById('rcbx').innerHTML=\"\";<br \/>\n          }<br \/>\n          }<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>&#8230; filling in emailee and subject textboxes, as well as initializing the canvas with the image subject data found &#8230; and kicking off all this localStorage storing of images happens when the user clicks the &#8220;Send Feedback as Inline HTML Email&#8221; button, as per Javascript function &#8220;lssave&#8221;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction lssave() {<br \/>\n    if (window.localStorage) {<br \/>\n     if (document.getElementById('myto').value.indexOf('@') != -1) {<br \/>\n      var ccis=document.getElementById('mycc').value;<br \/>\n      var bccis=document.getElementById('mybcc').value;<br \/>\n      var fbis=document.getElementById('feedback').value.replace(\/\\ \/g, '~');<br \/>\n      if (ccis == '') { ccis='@'; }<br \/>\n      if (bccis == '') { bccis='@'; }<br \/>\n      if (fbis == '') { fbis='~'; }<br \/>\n      localStorage.setItem('lf_img', encodeURIComponent(document.getElementById('tdto').value + ' ' + ccis + ' ' + bccis + ' ' + fbis + ' ' + elem.toDataURL(\"image\/png\",0)));<br \/>\n      if (document.getElementById('dilhe').innerHTML.indexOf('\"checkbox\"') == -1) {<br \/>\n         document.getElementById('dilhe').innerHTML+='&nbsp;&lt;span id=rcbx&gt;Recall Last? &lt;input type=\"checkbox\" onchange=\"loadimgd();\"&gt;&lt;\/input&gt;&lt;\/span&gt;';<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p>As you might surmise, best used to pick up where you left off developing an idea or concept.<\/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\/feedback-inline-html-form-email-collaboration-frecall-tutorial\/'>Feedback Inline HTML Form Email Collaboration Recall Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fihtmlfecat'>Previous relevant <a target=_blank title='Feedback Inline HTML Form Email Collaboration Accountability Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-accountability-tutorial\/'>Feedback Inline HTML Form Email Collaboration Accountability 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Inline HTML Form Email Collaboration Accountability Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_textarea_reply_collaboration_accountability.jpg\" title=\"Feedback Inline HTML Form Email Collaboration Accountability Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Inline HTML Form Email Collaboration Accountability Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Feedback Inline HTML Form Email Collaboration Reply Tutorial' href='#fihtmlfecrt'>Feedback Inline HTML Form Email Collaboration Reply Tutorial<\/a> left off with an &#8230;<\/p>\n<ul>\n<li>initial image creation phase &#8230; and from there we talked about the new &#8230;<\/li>\n<li>Inline HTML Form Email (textarea background image) approach &#8230; to collaborating with a second collaborator via &#8230;<\/li>\n<li>HTML form method=POST means<\/li>\n<\/ul>\n<p> &#8230; and that method=POST had two implications, those being &#8230;<\/li>\n<ol>\n<li>you need to involve a serverside language such as PHP to work with method=POST &#8230; its large data handling capabilities meaning &#8230;<\/li>\n<li>we could send the image (of feedback and collaboration focus) as a data URL along with the email<\/li>\n<\/ul>\n<p> &#8230; but, alas, looking more into the practicalities of involving both email clients we&#8217;ve tried here &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-tutorial\/'>\n<ul>\n<li><a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a> via a web browser URL (webmail email client) shows the Inline HTML Email Form without the textarea background data URL showing, yet the old email attachment sending of that same image data works to be able to download this Feedback image<\/li>\n<li>the macOS <a target=_blank title='Mail app information from Apple' href='https:\/\/www.apple.com\/au\/support\/mac-apps\/mail\/'>Mail<\/a> desktop application email client shows the Inline HTML Email Form with the textarea background data URL showing, yet the old email attachment sending of that same image data does not work (to be able to download this Feedback image)<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; that macOS Mail desktop application choice above, we found, only transfered our collaboration data if we used method=GET on our Inline HTML Form Email forms.  Out the door goes chaining the image data URL data along with the email any more!   Boo hoo!  How else, now, can we be &#8220;accountable&#8221; (to us, to do with whether you can recreate a scenario, or value add)?  Well, we have that first email involving both Email To and Email From to work with, where both parties will have access to a downloading method to get to the image data, unless they have deleted the original email(s), that is.  What is a way to go back to an email?   We chose to &#8220;chain along&#8221; a GMT date time (to second accuracy) within the email thread, to apply here.  Accountability back to the original image data subject matter we hope, and keeping the web application project idea of not having to store all these images on the RJM Programming web server.  Rather, the mail servers involved are the repository of these image data discussion points.<\/p>\n<p>Have another look, anyway, at &#8230;<\/p>\n<ul>\n<li>The supervisory <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--------------------GETME\">lightly changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--------------------GETME\">feedback.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\">live run<\/a> link &#8230; supervises &#8230;<\/li>\n<li>a supervised <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php----------------GETME'>and extensively changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php----------------GETME' title='emoticon_keyboard_shortcuts.php'>emoticon_keyboard_shortcuts.php<\/a><\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-accountability-tutorial\/'>Feedback Inline HTML Form Email Collaboration Accountability Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fihtmlfecrt'>Previous relevant <a target=_blank title='Feedback Inline HTML Form Email Collaboration Reply Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-reply-tutorial\/'>Feedback Inline HTML Form Email Collaboration Reply 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Inline HTML Form Email Collaboration Reply Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_textarea_reply_collaboration_rect.jpg\" title=\"Feedback Inline HTML Form Email Collaboration Retry Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Inline HTML Form Email Collaboration Reply Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Feedback Inline HTML Form Email Collaboration Tutorial' href='#fihtmlfect'>Feedback Inline HTML Form Email Collaboration Tutorial<\/a> start has been continued, and we were surprised how hard it was replying to that first Inline HTML Email to another Inline HTML Email and swapping the emailee To with the emailee From, but there you go.  Sometimes it is hard to tell what will be difficult and what not.<\/p>\n<p>And even with this &#8220;reply to first collaboration call email&#8221; now set up to chain the emailing collaboration text between the two collaborators, we find some mysteries we&#8217;ll keep you posted on.  The most intriguing is the Inline HTML Email form behaviour for textarea elements only accepting space characters when you paste them in, but not typing them in.  Go figure!   It&#8217;s probably something on our end, but have never seen this before.  Work for tomorrow.<\/p>\n<p>Have a look, anyway, at &#8230;<\/p>\n<ul>\n<li>The supervisory <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------------GETME\">lightly changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------------GETME\">feedback.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\">live run<\/a> link &#8230; supervises &#8230;<\/li>\n<li>a supervised <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php---------------GETME'>and extensively changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php---------------GETME' title='emoticon_keyboard_shortcuts.php'>emoticon_keyboard_shortcuts.php<\/a> &#8230; which calls on &#8230;<\/li>\n<li>a further supervised <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-----GETME'>lightly changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php-----GETME' title='emailhtml.php'>emailhtml.php<\/a><\/li>\n<\/ul>\n<p>Let&#8217;s face it.  It&#8217;s a work in progress!<\/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\/feedback-inline-html-form-email-collaboration-reply-tutorial\/'>Feedback Inline HTML Form Email Collaboration Reply Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fihtmlfect'>Previous relevant <a target=_blank title='Feedback Inline HTML Form Email Collaboration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-tutorial\/'>Feedback Inline HTML Form Email Collaboration 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback Inline HTML Form Email Collaboration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_textarea_reply_collaboration.jpg\" title=\"Feedback Inline HTML Form Email Collaboration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback Inline HTML Form Email Collaboration Tutorial<\/p><\/div>\n<p>We want to embark on a more collaborative phase to our Feedback web application last tweaked with the recent <a title='Feedback SMS via Highlighting Mark Tag Tutorial' href='#fsmshmtt'>Feedback SMS via Highlighting Mark Tag Tutorial<\/a>.<\/p>\n<p>What&#8217;s changed here (at RJM Programming recently) to make this something we have mulled over in our mind, and imagined, is our PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a> techniques to send Inline HTML Form Emails.  So this means, now &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------------GETME\" title=\"feedback.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------------GETME\" title=\"feedback.htm\">feedback.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> has a new &#8220;Send Feedback as Inline HTML Email&#8221; button &#8230; that sends a new &#8230;<\/li>\n<li>HTML &#8230;<br \/>\n<code><br \/>\n       document.getElementById('tdhuhta').innerHTML='&lt;body&gt;&lt;h1&gt;Feedback and Collaboration to ' + vstvs + '&lt;\/h1&gt;&lt;br&gt;&lt;h3&gt;RJM Programming&lt;h3&gt;&lt;br&gt;&lt;br&gt;&lt;form method=POST action=\"' + document.URL.split('HTMLCSS\/feedback.htm')[0] + 'PHP\/emoticon_keyboard_shortcut.php\"&gt;' +  'Feedback: &lt;br&gt;&lt;textarea rows=15 cols=300 name=already title=\"Multi-line feedback\" style=' + \"'\" + 'width:' + ('' + document.getElementById('canvaselement').width).replace('px','') + 'px;height:' + ('' + document.getElementById('canvaselement').height).replace('px','') + 'px;background:URL(\"' + canvascont + '\");' + \"'\" + '&gt;&lt;\/textarea&gt;&lt;input type=hidden name=dataurlis value=\"' + canvascont + '\"&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;One line feedback: &lt;input type=text placeholder=\"Enter any one line feedback here\" value=\"\" name=\"oneliner\"&gt;&lt;\/input&gt;&lt;input type=hidden value=\"' + document.getElementById('tdto').value + '\" name=\"emailtois\"&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;' + ('&lt;input type=hidden value=\"' + document.getElementById('tdcc').value + '\" name=\"emailfromis\"&gt;&lt;\/input&gt;').replace('&lt;input type=hidden value=\"\"','Email from: &lt;input type=text value=\"\"') + '&lt;br&gt;&lt;br&gt;&lt;input type=submit style=\"background-color:yellow;\" value=\"Feedback back to RJM Programming\"&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/body&gt;';<br \/>\n<\/code><br \/>\n &#8230; which, as you can see, passes on to (a supervised) <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php--------------GETME'>the changed<\/a>  <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php--------------GETME' title='emoticon_keyboard_shortcuts.php'>emoticon_keyboard_shortcuts.php<\/a> (but not changed yet for the next phase of &#8220;Analyzing the Response to the Initial Feedback with Your Collaborator&#8221; &#8230; tomorrow&#8217;s work) the data items &#8230;<\/p>\n<ol>\n<li>Email To (relative to first Feedback web application initiator)<\/li>\n<li>Email From (relative to first Feedback web application initiator)<\/li>\n<li>Feedback Image Data URL (which also helps create a background image to the textarea element of the Inline HTML Form Email)<\/li>\n<li>Feedback Response Collaboration multi-line text<\/li>\n<li>Feedback Response Collaboration single-line text<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>We found our two types of email client for our <a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a> behaved differently for this new email component &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a> via a web browser URL (webmail email client) shows the Inline HTML Email Form without the textarea background data URL showing, yet the old email attachment sending of that same image data works to be able to download this Feedback image<\/li>\n<li>the macOS <a target=_blank title='Mail app information from Apple' href='https:\/\/www.apple.com\/au\/support\/mac-apps\/mail\/'>Mail<\/a> desktop application email client shows the Inline HTML Email Form with the textarea background data URL showing, yet the old email attachment sending of that same image data does not work (to be able to download this Feedback image)<\/li>\n<\/ul>\n<p>As a result, we continue to send both email approaches.<\/p>\n<p>Our dream with this project is that our mail server can be that &#8220;honest broker&#8221; between two (or more) collaborators tweaking image based discussion points, and tomorrow&#8217;s &#8220;Analyzing the Response to the Initial Feedback with Your Collaborator&#8221; represents another step towards this aim.  We hope you join us on this project!<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-inline-html-form-email-collaboration-tutorial\/'>Feedback Inline HTML Form Email Collaboration Tutorial<\/a>.<\/p>\n<hr>\n<p id='fsmshmtt'>Previous relevant <a target=_blank title='Feedback SMS via Highlighting Mark Tag Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/feedback-sms-via-highlighting-mark-tag-tutorial\/'>Feedback SMS via Highlighting Mark Tag 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Feedback SMS via Highlighting Mark Tag Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_sms.jpg\" title=\"Feedback SMS via Highlighting Mark Tag Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Feedback SMS via Highlighting Mark Tag Tutorial<\/p><\/div>\n<p>It&#8217;s come around to that time of the year.  Yes, it&#8217;s the day after yesterday, and the previous <a title='Email Subject Line Emojis Primer Tutorial' href='#eslept'>Email Subject Line Emojis Primer Tutorial<\/a> last reference to our Feedback web application (around here) deserves a revisit.  Why?  The recent talking points &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML5 mark tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_mark.asp'>mark<\/a> tag<\/li>\n<li>SMS communication via the SMS client (eg. Messages app) and via a sms: &#8220;a&#8221; link<\/li>\n<li>highlighted text Javascript logic<\/li>\n<\/ul>\n<p> &#8230; spring to mind &#8230; and HTML div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true is really useful here too.  We often want to filter data, and highlighting text is a new area of interest to us with our web applications recently.<\/p>\n<p>See if this interests you with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------------GETME\">feedback.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\">live run<\/a> link.<\/p>\n<hr>\n<p id='eslept'>Previous relevant <a target=_blank title='Email Subject Line Emojis Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/email-subject-line-emojis-primer-tutorial\/'>Email Subject Line Emojis Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Signature Signature Emoji Placeholder Lookup Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_more.jpg\" title=\"Email Subject Line Emojis Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Email Subject Line Emojis Primer Tutorial<\/p><\/div>\n<p>There are two themes to today&#8217;s Email Subject Line Emojis Primer Tutorial blog posting, those being &#8230;<\/p>\n<ul>\n<li>if you have a programming job, and it sounds daunting on paper, it is good to mull (ie. think) for a while on it, and let it (ie. your mind) stew through possibilities, so that the topic of &#8220;Emojis on Email Subject Lines&#8221;, which you seem to see everywhere these days (or is Christmas arriving soon?!), didn&#8217;t seem so daunting when we categorized the hardest bit of the job (some would be saying dohhhhhh!) being the display of emojis to choose, when it <strike>mulled<\/strike>occurred to us that we spent quite some hours with the web application featured in <a title='Signature Signature Emoji Placeholder Lookup Tutorial' href='#sseplt'>Signature Signature Emoji Placeholder Lookup Tutorial<\/a> displaying emojis for the purpose of (Feedback and\/or Contact Us) communications, and so the integration with this (and very easy and small it was) was the way to go, as a means whereby we can share with you (ie. you) a feel for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_more.jpg\" title=\"Tutorial picture\">what we mean here<\/a> &#8230; however, and didn&#8217;t you just know that a &#8220;but&#8221; would be around the next carriage return &#8230;<\/li>\n<li>but we would suggest that because you gain knowledge of a programming technique you think of &#8220;association&#8221; and &#8220;judiciousness&#8221; as well, because these emojis in subject lines appear to be associated with &#8220;marketing&#8221; a lot, and perhaps the use in business communication should be avoided &#8230; pretty obviously those decisions are up to users, and the context, and seriousness of the communications involved<\/li>\n<\/ul>\n<p>The other thing is that your normal native emailing methods via webmail URLs or client email programs will have native functionality that you can add an emoji to email subject lines yourself.  We just turn what used to be a <b>hardcoded webpage piece of text<\/b> into an HTML <i>input type=button button<\/i> to facilitate <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----------------GETME\">feedback.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\">live run<\/a> &#8230;<\/p>\n<p><code><br \/>\n document.write(\"<i>&lt;input type=button value=<\/i><b>Subject<\/b><i> onclick=\\\"document.getElementById('feedback').value+=document.getElementById('myfeedback').value;\\\" title='Optionally (and judiciously) add emojis to right onto subject line'&gt;&lt;\/input&gt;<\/i>: &lt;input style='width:160px; align:right;' type='text' id='feedback' onblur=\\\" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); \\\" value='Feedback'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input type='button' id='feedbutton' onclick=\\\"  xcapture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail'));  \\\" value='Send Feedback' style='background-color:yellow; '&gt;&lt;\/input&gt;\");<br \/>\n<\/code><\/p>\n<p> &#8230; so, as you can see, not much to do here, so jobs &#8220;can sometimes integrate themselves off others&#8221; (quite simply) is our message today.<\/p>\n<hr>\n<p id='sseplt'>Previous relevant <a target=_blank title='Signature Signature Emoji Placeholder Lookup Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/signature-signature-emoji-placeholder-lookup-tutorial\/'>Signature Signature Emoji Placeholder Lookup 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\/user_of_signature_signature.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Signature Signature Emoji Placeholder Lookup Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/uosstwo.jpg\" title=\"Signature Signature Emoji Placeholder Lookup Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Signature Signature Emoji Placeholder Lookup Tutorial<\/p><\/div>\n<p>If you are interested in Emojis, perhaps we should direct you to read, back in time, <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-primer-tutorial\/' title='Emoji Name Search Primer Tutorial'>Emoji Name Search Primer Tutorial<\/a>, because it was there we tweaked onto the great <a target=_blank title='Emoji Terra' href='http:\/\/emojiterra.com'>Emoji Terra<\/a> website&#8217;s permalink arrangements for Emoji lookups, that can be used to glean the CodePoint information needed to construct simple or compound Emojis via the <a target=_blank title='String.fromCodePoint() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/fromCodePoint'>String.fromCodePoint<\/a>() Javascript function.<\/p>\n<p>You&#8217;d be surprised to hear, perhaps, that to make this happen involved changes to three pieces of code where yesterday&#8217;s <a title='Signature Signature Emoji Placeholder Tutorial' href='#ssept'>Signature Signature Emoji Placeholder Tutorial<\/a> changes only involved one.<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php----GETME\" title=\"fairy_story_assistant.php\">fairy_story_assistant.php<\/a>, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php----GETME\" title='fairy_story_assistant.php'>this way<\/a>, whose job it is to get the great <a target=_blank title='Emoji Terra' href='http:\/\/emojiterra.com'>Emoji Terra<\/a> website help us out, via its ideal permalink arrangements, with emoji search lookups, thanks &#8230; supervised by &#8230;<\/li>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js----------------------------------GETME' title='signature_signature.js'>signature_signature.js<\/a> external Javascript with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js----------------------------------GETME' title='signature_signature.js'>these changes<\/a> &#8230; supervised, in turn, by &#8230;<\/li>\n<li>today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">live run<\/a> link&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html-----------GETME\" title=\"user_of_signature_signature.html\">user_of_signature_signature.html<\/a> that had <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html-----------GETME\" title=\"user_of_signature_signature.html\">these changes<\/a><\/li>\n<\/ul>\n<p>So, within the <i>onblur<\/i> event keyboard activity of our new HTML input type=text element, what ways are available to enter an Emoji now &#8230;<\/p>\n<ul>\n<li>enter dot delimited CodePoint numbers &#8230; eg. &#8230; 128675.127996<\/li>\n<li>enter HTML dec format &#8230; eg. &amp;#128675;&amp;#127996;<\/li>\n<li>enter Mac OS X Command-Control-Space or Windows+; to get to an Emoji menu method of entry<\/li>\n<li>continuously changing case piece of text that will be looked up at <a target=_blank title='Emoji Terra' href='http:\/\/emojiterra.com'>Emoji Terra<\/a> &#8230; eg. &#8230; aPpLe<\/li>\n<\/ul>\n<p> &#8230; as well as the <i>onclick<\/i> Emojis in the placeholder method.  Other approaches make whatever text you enter go through to the awaiting HTML textarea element and onto the awaiting HTML canvas element, and perhaps onto the awaiting emailee recipient.<\/p>\n<p>Happy &#128513; Emoji entry making!<\/p>\n<hr>\n<p id='ssept'>Previous relevant <a target=_blank title='Signature Signature Emoji Placeholder Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/signature-signature-emoji-placeholder-tutorial\/'>Signature Signature Emoji Placeholder 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\/user_of_signature_signature.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Signature Signature Emoji Placeholder Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/uoss.jpg\" title=\"Signature Signature Emoji Placeholder Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Signature Signature Emoji Placeholder Tutorial<\/p><\/div>\n<p>Akin to the <a title='Contact Us Feedback Emoji Placeholder Tutorial' href='#cufept'>Contact Us Feedback Emoji Placeholder Tutorial<\/a> ideas for &#8220;Emoji Placeholders&#8221; the other thought we had in this line of thinking was for interfacing this new idea as another revisit to the web application of <a target=_blank title='User of Signature Signature Revisit Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/user-of-signature-signature-revisit-primer-tutorial\/'>User of Signature Signature Revisit Primer Tutorial<\/a>, as emoji creation is a useful adjunct to any communication tool.<\/p>\n<p>Again, very similar code is involved, that being to external Javascript sitting in an HTML iframe, so <b>parent.<\/b>document becomes the go this time &#8230;<\/p>\n<p><code><br \/>\n function ipf() {<br \/>\n   var chac=-1; \/\/Math.floor(Math.random() * 79) + 128512;<br \/>\n   var chactwo=[]; \/\/Math.floor(Math.random() * 4) + 127995;<br \/>\n<br \/> <br \/>\n   <b>if (parent.document) {<br \/>\n   if (parent.document.getElementById('iplaceholder')) {<\/b><br \/>\n   var elist=['128512.128591',<br \/>\n '128640.128767',<br \/>\n '9728.9983',<br \/>\n '&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;',<br \/>\n '&amp;#127939;&amp;#8205;&amp;#9794;&amp;#65039;',<br \/>\n '&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#8205;&amp;#9794;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127997;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;',<br \/>\n '&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#8205;&amp;#9794;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127997;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;',<br \/>\n '&amp;#128675;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;','&amp;#128675;','&amp;#128675;&amp;#127996;','&amp;#128675;&amp;#127997;','&amp;#128675;&amp;#127998;','&amp;#128675;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127997;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127996;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127995;','&amp;#128675;&amp;#127999;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127999;',<br \/>\n '&amp;#128675;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;','&amp;#128675;','&amp;#128675;&amp;#127996;','&amp;#128675;&amp;#127997;','&amp;#128675;&amp;#127998;','&amp;#128675;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127997;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127996;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127995;','&amp;#128675;&amp;#127999;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127999;',<br \/>\n '9984.10175',<br \/>\n '127744.128511',<br \/>\n '129280.129535',<br \/>\n '128512.128591'];<br \/>\n<br \/> <br \/>\n    var ehac=Math.floor(Math.random() * elist.length), mul='', ichac=0;<br \/>\n<br \/> <br \/>\n    if (elist[ehac].indexOf('.') != -1) {<br \/>\n      chac=Math.floor(Math.random() * eval(eval(elist[ehac].split('.')[1]) - eval(elist[ehac].split('.')[0]))) + eval(elist[ehac].split('.')[0]);<br \/>\n    } else {<br \/>\n      chactwo=(elist[ehac] + ';').replace(';;','').replace('&#','').split(';&#');<br \/>\n      for (ichac=0; ichac&lt;chactwo.length; ichac++) {<br \/>\n        mul+=String.fromCodePoint(eval('' + chactwo[ichac]));<br \/>\n      }<br \/>\n    }<br \/>\n<br \/> <br \/>\n   if (<b>parent.<\/b>document.getElementById('iplaceholder').placeholder.length &gt;= 39) {<br \/>\n    if (chac &gt;= 0) {<br \/>\n     <b>parent.<\/b>document.getElementById('iplaceholder').placeholder=String.fromCodePoint(chac);<br \/>\n    } else {<br \/>\n     <b>parent.<\/b>document.getElementById('iplaceholder').placeholder=mul;<br \/>\n    }<br \/>\n   } else {<br \/>\n    if (chac &gt;= 0) {<br \/>\n     <b>parent.<\/b>document.getElementById('iplaceholder').placeholder+=String.fromCodePoint(chac);<br \/>\n    } else {<br \/>\n     <b>parent.<\/b>document.getElementById('iplaceholder').placeholder+=mul;<br \/>\n    }<br \/>\n   }<br \/>\n   setTimeout(ipf, 2500);<br \/>\n   <b>}<br \/>\n   }<\/b><br \/>\n }<br \/>\n<br \/> <br \/>\n setTimeout(ipf, 2500);<br \/>\n<\/code> <\/p>\n<p> &#8230; this time entering the Javascript DOM pieced together HTML &#8230;<\/p>\n<p><code><br \/>\n<b>var emoji_placeholder=\"&lt;br&gt;&lt;input onblur=\\\"if (this.value.length &gt; 0) {  document.getElementById('myta').value+=this.value; this.value='';  } else if (this.placeholder.length &gt; 0) {  document.getElementById('myta').value+=this.placeholder; this.placeholder=''; }\\\"  onclick=\\\"if (this.placeholder.length &gt; 0) {  document.getElementById('myta').value+=this.placeholder; this.placeholder=''; }\\\" type=text style='width:30%;border:1px dotted yellow;' value='' title='Click when you like an emoji to place below' id='iplaceholder' placeholder=''&gt;&lt;\/input&gt;\";<\/b><br \/>\nparent.document.getElementById('toptd').innerHTML+=pdfbookdata + \"&lt;div id='domymd5' style='text-decoration:underline;cursor:pointer;' onclick=\\\"  document.getElementById('\" + topielem.id + \"').contentWindow.setdomymd5();  this.innerHTML=''; \\\"&gt;&lt;\/div&gt;&nbsp;&lt;div id='dmycbox'&gt;&lt;input id=mycbox style='border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;text-decoration:line-through;' onclick=\\\"if (this.value.indexOf('Show ') == 0) { document.getElementById('topiframe').style.display='block'; this.value=this.value.replace('Show ','Hide '); this.style.textDecoration='line-through'; } else { document.getElementById('topiframe').style.display='none'; this.value=this.value.replace('Hide ','Show '); this.style.textDecoration='none';  }\\\" type=button value='Hide Signature Panel &#128179;'&gt;&lt;\/input&gt;&nbsp;&lt;input id='jsdownload' style='border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;' type='button' value='Download &#128190;' onclick=\\\" document.getElementById('\" + topielem.id + \"').contentWindow.download(); \\\"&gt;&lt;\/input&gt;&nbsp;&lt;input id='jsnewwindow' style='border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;' type='button' value='New Windows &#128209;' onclick=\\\" document.getElementById('\" + topielem.id + \"').contentWindow.wop(); \\\"&gt;&lt;\/input&gt;&nbsp;&lt;input style='display:none;border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;' id='jsundo' type='button' value='Undo &#10060;' onclick=\\\" document.getElementById('\" + topielem.id + \"').contentWindow.undosnapshotcanvas(); \\\"&gt;&lt;\/input&gt;&nbsp;&lt;input style='display:none;border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;' id='jsredo' type='button' value='Redo &#10004;' onclick=\\\" document.getElementById('\" + topielem.id + \"').contentWindow.redosnapshotcanvas(); \\\"&gt;&lt;\/input&gt;<b>\" + emoji_placeholder + \"<\/b>&lt;br&gt;&lt;br&gt;&lt;input style=' width: 18px; height: 18px; position: relative; margin: 2px auto; background: #fcfff4; background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 25px; box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);' onchange=\\\" if (this.checked) { document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('transcontent=true'); } else { document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('transcontent=false'); } transcontent=this.checked;\\\" type='checkbox' id='transcontent' title='Transform left &#128072; canvas &#127912; content versus look (of it only)' checked&gt;&lt;\/input&gt; Content Flip &#8596;: &lt;input onchange=\\\" if (this.checked) { document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('always_horizontally_flip=true'); } else { document.getElementById('\" + topielem.id + \"').contentWindow.evalit('always_horizontally_flip=false'); } always_horizontally_flip=this.checked;\\\" style=' width: 18px; height: 18px; position: relative; margin: 2px auto; background: #fcfff4; background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 25px; box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);' type='checkbox' id='autoflip' title='Horizontally Flip left &#128072; canvas &#127912;'&gt;&lt;\/input&gt;&nbsp;Flop &#128579;: &lt;input title='Vertically Flop left &#128072; canvas &#127912;' onchange=\\\" if (this.checked) { document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('always_vertically_flop=true'); } else { document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('always_vertically_flop=false'); } always_vertically_flop=this.checked;\\\" style=' width: 18px; height: 18px; position: relative; margin: 2px auto; background: #fcfff4; background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 25px; box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);' type='checkbox' id='autoflop'&gt;&lt;\/input&gt;&nbsp;Rotation &#127905;: &lt;input title='Rotate (in degrees) left &#128072; canvas &#127912;' id='autorotation' style='width:35px;' type=number onblur=\\\" document.getElementById('\" + topielem.id + \"').contentWindow.evalit('rotis=' + this.value); \" + intocb + \"\\\" onchange=\\\" document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('rotis=' + this.value);  \" + intocb + \"\\\" min='-360' max='360' value='0' step='1'&gt;&lt;\/input&gt;&deg;&lt;br&gt;&lt;br&gt;Email &#128231; To: &lt;input title='Separate email &#128231; to from optional email cc by (,) and from optional email bcc by (;) and suffixed, optionally by (:) followed by an email Subject' id='jsemail' type='text' onblur='  jsemail=this.value;' value='\" + jsemail + \"'&gt;&lt;\/input&gt;&nbsp;&lt;input id='jsemailb' style='display:none;border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;' type='button' onclick=\\\"document.getElementById('jsemail').value=document.getElementById('jsemail').value.trim() + ' ';\\\" value='Email &#128231;'&gt;&lt;\/input&gt;&nbsp;&nbsp;&lt;input id='jsemailpdf' style='display:none;border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;' type='button' onclick=\\\"document.getElementById('jsemail').value=document.getElementById('jsemail').value.trim() + '   ';\\\" value='Email PDF &#128196;'&gt;&lt;\/input&gt;&nbsp;&nbsp;&lt;input id='jsemailp' style='display:none;border:4px outset green;background-color:lightgray;-webkit-appearance: none;-moz-appearance:none;appearance:none;height:35px;' type='button' onclick=\\\"document.getElementById('jsemail').value=document.getElementById('jsemail').value.trim() + '  ';\\\" value='Postcard &#9993;'&gt;&lt;\/input&gt;&lt;br&gt;&lt;div id='danimation'&gt;\" + insidedanimation + \"&lt;\/div&gt;&lt;br&gt;\" + sobutton + \"&lt;br&gt;&lt;select onchange=\\\" document.getElementById('\" + topielem.id + \"').contentWindow.rezero(); \\\" style='width:92%; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;border: 5px solid #ccc;background-color:lightgreen;' id='dcm' title='Discrete click\/touch mode'&gt;&lt;option id='odef' value=&gt;Discrete Canvas &#127912; Click\/Touch &#128433; Mode [Rectangle (outline) &#128306; (via two clicks &#128433;&#128433;)]&lt;\/option&gt;&lt;option value='lo'&gt;Line &#128207; (via two clicks &#128433;&#128433;)&lt;\/option&gt;&lt;option value='im'&gt;Image &#128444; URL &#9875; (sized via two clicks &#128433;&#128433;)&lt;\/option&gt;&lt;option value='ib'&gt;Image &#128444; Browse &#128194; (sized via two clicks &#128433;&#128433;)&lt;\/option&gt;\" + pdfideas + \"&lt;option value='Im'&gt;Background &#127782; Canvas Image &#128444; URL &#9875; (Image dimension changes) (can do Standing Orders\t&#128198;, as below)&lt;\/option&gt;&lt;option value='Ib'&gt;Background &#127782; Canvas Image &#128444; Browse &#128194; (Image dimension changes)&lt;\/option&gt;&lt;option value='IM'&gt;Background &#127782; Image &#128444; Canvas URL &#9875; (Canvas dimension changes) (can do Standing Orders &#128198;, as below)&lt;\/option&gt;&lt;option value='IB'&gt;Background &#127782; Image &#128444; Canvas Browse &#128194; (Canvas dimension changes)&lt;\/option&gt;&lt;option value='iM'&gt;Background &#127782; Canvas Image &#128444; Camera &#128247; (Image dimension changes) (as applicable)&lt;\/option&gt;&lt;option value='iB'&gt;Background &#127782; Image &#128444; Canvas Camera &#128247; (Canvas dimension changes) (as applicable)&lt;\/option&gt;&lt;option value='ro'&gt;Rectangle (outline) &#128306; (via two clicks &#128433;&#128433;)&lt;\/option&gt;&lt;option value='rx'&gt;Rectangle (clear) &#11036; (via two clicks &#128433;&#128433;)&lt;\/option&gt;&lt;option value='rf'&gt;Rectangle (filled) &#11035; (via two clicks &#128433;&#128433;)&lt;\/option&gt;&lt;option value='co'&gt;Circle (outline via centre then point on circle)\t&#11093; (via two clicks &#128433;&#128433;)&lt;\/option&gt;&lt;option value='cf'&gt;Circle (filled via centre then point on circle) &#128309; (via two clicks &#128433;&#128433;)&lt;\/option&gt;&lt;option value='Text'&gt;Text &#9000; (of textarea) Top Left &#128433;&lt;\/option&gt;&lt;option value='text'&gt;Text &#9000; (of textarea) Top Left and Top Right &#128433;&#128433;&lt;\/option&gt;&lt;option value='textseq'&gt;Sequential Text &#128198; Centre Left 1 and Centre Left 2 &#128433;&#128433;&lt;\/option&gt;&lt;option value=' '&gt;Discrete Canvas &#127912; Click\/Touch &#128433; Mode (no action) &#9997;&lt;\/option&gt;&lt;\/select&gt;&lt;div id='divbrowse' style='display:none;'&gt;\" + cbrowse_nocapture + \"&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&#128072; Canvas&#127912; Font&#11015;&lt;input style='width:70px;' id='jscf' type='text' onblur='jscf=this.value;' value='\" + jscf + \"'&gt;&lt;\/input&gt; &lt;input id='colcf' type='text' style='color:blue;width:120px;' onblur=\\\"colcf=this.value; this.style.color=this.value.split(' ')[eval(-1 + this.value.split(' ').length)];\\\" value='\" + colcf + \"'&gt;&lt;\/input&gt;&nbsp;&lt;input title='Text rotation &#127905; (in degrees) for left &#128072; canvas &#127912;' id='trotation' style='width:35px;' type=number onblur=\\\" document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('trotis=' + this.value);  trotis=this.value;\\\" onchange=\\\" document.getElementById('\"  + topielem.id + \"').contentWindow.evalit('trotis=' + this.value); trotis=this.value;\\\" min='-360' max='360' value='0' step='1'&gt;&lt;\/input&gt;&deg;&lt;br&gt;&lt;br&gt;&lt;textarea title='What is typed here goes over to left &#128072; canvas &#127912;' style='border:8px dashed yellow;' id='myta' rows=\" + eighty + \" cols=60 value=''&gt;&lt;\/textarea&gt;\" + tenimages + \"&lt;\/div&gt;\";<br \/>\n<\/code><\/p>\n<p>Here is the <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------------------GETME' title='signature_signature.js'>signature_signature.js<\/a> external Javascript with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------------------GETME' title='signature_signature.js'>its changes<\/a> for you to examine, or you could try this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>And then we had a look at the logic of the &#8220;New Windows&#8221; button.  We learnt from this <a target=_blank href='https:\/\/stackoverflow.com\/questions\/46702929\/show-base64-pdf-data-using-window-open-on-chrome-new-version' title='Useful link, thanks'>great link<\/a>, thanks, that it can be best to involve an HTML iframe when using window.open in Chrome (and then we learnt, Safari) for a PDF data url, as well as Chrome being pretty against a straight data uri window.open first parameter generally.  That being the case, <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js----------------------------------GETME' title='signature_signature.js'>signature_signature.js<\/a> external Javascript <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js----------------------------------GETME' title='signature_signature.js'>changed this way<\/a> and  <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php----------------GETME' title='signature_signature.js'>signature_signature.php<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php----------------GETME' title='signature_signature.js'>changed this way<\/a>.<\/p>\n<hr>\n<p id='cufept'>Previous relevant <a target=_blank title='Contact Us Feedback Emoji Placeholder Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/contact-us-feedback-emoji-placeholder-tutorial\/'>Contact Us Feedback Emoji Placeholder 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Contact Us Feedback Emoji Placeholder Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_emoji.jpg\" title=\"Contact Us Feedback Emoji Placeholder Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Contact Us Feedback Emoji Placeholder Tutorial<\/p><\/div>\n<p>Continuing on &#8230;<\/p>\n<ul>\n<li>the (uses of HTML element) &#8220;placeholder&#8221; (attribute) theme of yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/country-via-capital-placeholder-quiz-game-tutorial\/' title='Country via Capital Placeholder Quiz Game Tutorial'>Country via Capital Placeholder Quiz Game Tutorial<\/a> &#8230; onto the work of &#8230;<\/p>\n<li>the blog posting Contact Us and Feedback thinking series of blog postings culminating in <a title='Contact Us Feedback Animated GIF Tutorial' href='#cufagift'>Contact Us Feedback Animated GIF Tutorial<\/a> below<\/li>\n<\/ul>\n<p> &#8230; we&#8217;re pretty keen, around here, with the concept of &#8220;Emoji Placeholder&#8221;, where an HTML input type=text element&#8217;s placeholder attribute is &#8230;<\/p>\n<ul>\n<li>populated with Emoji data (that can join into the Contact Us or Feedback message data) suggested by the web application &#8230; as a contrast to the previous arrangements where, for the most part &#8230;<\/li>\n<li>the user could &#8220;go fishing&#8221; for their own Emojis (at their instigation)<\/li>\n<\/ul>\n<p>Why do this?  Well, for us &#8230;<\/p>\n<ul>\n<li>sometimes we&#8217;re happy to be offered a suggestion, when it comes to Emojis &#8230; and &#8230;<\/li>\n<li>letting the web application be involved we can offer some &#8220;compound Emojis&#8221; (those involving multiple argument calls to <a target=_blank title='String.fromCodePoint() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/fromCodePoint'>String.fromCodePoint<\/a>() complementing some of the ideas from last week in <a target=_blank title='Compound Emoji via Codepoint Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/compound-emoji-via-codepoint-primer-tutorial\/' title='Compound Emoji via Codepoint Primer Tutorial'>Compound Emoji via Codepoint Primer Tutorial<\/a>) &#8230; and, as mentioned before &#8230;<\/li>\n<li>for optional functionalities, we like the semi-transparent look of an HTML input type=text element presentation of its &#8220;placeholder&#8221; attribute data &#8230; and, event logic wise &#8230;<\/li>\n<li>an HTML input type=text element involving this can separate (and be functional for both of) <i>onclick<\/i> event logic dealing with the &#8220;placeholder&#8221; attribute Emojis and <i>onblur<\/i> event logic dealing with any &#8220;value&#8221; attribute data they may add themselves in between Emojis to explain their Contact Us or Feedback message data<\/li>\n<\/ul>\n<p>Today&#8217;s one new Javascript function <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---------------GETME\" title=\"feedback.htm\">changes to<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---------------GETME\" title=\"feedback.htm\">feedback.htm<\/a> combines ideas from other blog postings mentioned above (as well as <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/rainbow-games-background-image-mobile-tutorial\/' title='Rainbow Games Background Image Mobile Tutorial'>Rainbow Games Background Image Mobile Tutorial<\/a>), to be a standalone <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> controlled additional piece of Javascript &#8230;<\/p>\n<p><code><br \/>\n function ipf() {<br \/>\n   var chac=-1; \/\/Math.floor(Math.random() * 79) + 128512;<br \/>\n   var chactwo=[]; \/\/Math.floor(Math.random() * 4) + 127995;<br \/>\n<br \/> <br \/>\n   var elist=['128512.128591',<br \/>\n '128640.128767',<br \/>\n '9728.9983',<br \/>\n '&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;',<br \/>\n '&amp;#127939;&amp;#8205;&amp;#9794;&amp;#65039;',<br \/>\n '&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#8205;&amp;#9794;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127997;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;',<br \/>\n '&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#8205;&amp;#9794;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127997;','&amp;#127939;&amp;#127999;','&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#127939;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;',<br \/>\n '&amp;#128675;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;','&amp;#128675;','&amp;#128675;&amp;#127996;','&amp;#128675;&amp;#127997;','&amp;#128675;&amp;#127998;','&amp;#128675;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127997;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127996;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127995;','&amp;#128675;&amp;#127999;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127999;',<br \/>\n '&amp;#128675;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;','&amp;#128675;','&amp;#128675;&amp;#127996;','&amp;#128675;&amp;#127997;','&amp;#128675;&amp;#127998;','&amp;#128675;&amp;#127995;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127997;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127996;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127995;','&amp;#128675;&amp;#127999;&amp;#8205;&amp;#9792;&amp;#65039;','&amp;#128675;&amp;#127999;',<br \/>\n '9984.10175',<br \/>\n '127744.128511',<br \/>\n '129280.129535',<br \/>\n '128512.128591'];<br \/>\n<br \/> <br \/>\n    var ehac=Math.floor(Math.random() * elist.length), mul='', ichac=0;<br \/>\n<br \/> <br \/>\n    if (elist[ehac].indexOf('.') != -1) {<br \/>\n      chac=Math.floor(Math.random() * eval(eval(elist[ehac].split('.')[1]) - eval(elist[ehac].split('.')[0]))) + eval(elist[ehac].split('.')[0]);<br \/>\n    } else {<br \/>\n      chactwo=(elist[ehac] + ';').replace(';;','').replace('&#','').split(';&#');<br \/>\n      for (ichac=0; ichac&lt;chactwo.length; ichac++) {<br \/>\n        mul+=String.fromCodePoint(eval('' + chactwo[ichac]));<br \/>\n      }<br \/>\n    }<br \/>\n<br \/> <br \/>\n   if (document.getElementById('iplaceholder').placeholder.length &gt;= 59) {<br \/>\n    if (chac &gt;= 0) {<br \/>\n     document.getElementById('iplaceholder').placeholder=String.fromCodePoint(chac);<br \/>\n    } else {<br \/>\n     document.getElementById('iplaceholder').placeholder=mul;<br \/>\n    }<br \/>\n   } else {<br \/>\n    if (chac &gt;= 0) {<br \/>\n     document.getElementById('iplaceholder').placeholder+=String.fromCodePoint(chac);<br \/>\n    } else {<br \/>\n     document.getElementById('iplaceholder').placeholder+=mul;<br \/>\n    }<br \/>\n   }<br \/>\n   setTimeout(ipf, 2500);<br \/>\n }<br \/>\n<br \/> <br \/>\n setTimeout(ipf, 2500);<br \/>\n<\/code><\/p>\n<p> &#8230; working off the new HTML (and inline CSS and inline (event logic) Javascript) &#8230;<\/p>\n<p><code><br \/>\n&lt;br&gt;&lt;input onblur=\"if (this.value.length &gt; 0) {  document.getElementById('myfeedback').value+=this.value; this.value='';  } else if (this.placeholder.length &gt; 0) {  document.getElementById('myfeedback').value+=this.placeholder; this.placeholder=''; }\"  onclick=\"if (this.placeholder.length &gt; 0) {  document.getElementById('myfeedback').value+=this.placeholder; this.placeholder=''; }\" type=text style='width:100%;border:1px dotted yellow;' value='' title='Click when you like an emoji to place above' id='iplaceholder' placeholder=''&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to become that subtly more functional web application that you can try for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='cufagift'>Previous relevant <a target=_blank title='Contact Us Feedback Animated GIF Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/contact-us-feedback-animated-gif-tutorial\/'>Contact Us Feedback Animated GIF 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Contact Us Feedback Animated GIF Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_animated_gif.jpg\" title=\"Contact Us Feedback Animated GIF Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Contact Us Feedback Animated GIF Tutorial<\/p><\/div>\n<p>We can&#8217;t imagine how much longer it would have taken us to suss out the solution to our desire of having our Animated GIF email attachments for the &#8220;Feedback&#8221; web application not have a black background without great advice from <a target=_blank title='Stackoverflow' href='https:\/\/stackoverflow.com'>Stackoverflow<\/a>&#8216;s <a target=_blank href='https:\/\/stackoverflow.com\/questions\/17010758\/black-background-on-gif-instead-of-transparency-in-php-using-imagegif' title='Great link'>great link<\/a>.  Yesterday&#8217;s <a title='Contact Us Feedback Smoothly Filtering Tutorial' href='#cufsft'>Contact Us Feedback Smoothly Filtering Tutorial<\/a> told of the virtues of &#8220;empirical&#8221; thinking.  Today we come back to the advice of the knowledgeable.  Both approaches have their worth.<\/p>\n<p>You may have wondered about why this is an issue.  Well, the PHP <a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagegif.php'>imagegif<\/a> method has had a bit of a chequered history in the PHP <a target=_blank title='PHP GD Image library information' href='http:\/\/php.net\/manual\/en\/book.image.php'>GD<\/a> image library, perhaps regarding its flakiness retaining opacity, something the PNG image format is best at.  The Animated GIF, via data URI, creation code needs <b>all the bold bits specially regarding GIF work<\/b> below &#8230;<\/p>\n<p><code><br \/>\n$eachone<b>string<\/b>=\"<br \/>\n<br \/>\n\\$text='';<br \/>\n<br \/>\n\/\/ Open the first source image and add the text.<br \/>\n\\$<b>under<\/b>image = imagecreatefromjpeg('source01.jpg');<br \/>\n<b>\\$old_width  = imagesx(\\$underimage);<br \/>\n\\$old_height = imagesy(\\$underimage);<br \/>\n\\$image = <a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecreatetruecolor.php'>imagecreatetruecolor<\/a>(\\$old_width, \\$old_height);<br \/>\n\\$black = <a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolorallocatealpha.php'>imagecolorallocatealpha<\/a>(\\$image, 254, 254, 254, 0);<br \/>\n<a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagefill.php'>imagefill<\/a>(\\$image, 0, 0, \\$black);<br \/>\n<a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecopyresampled.php'>imagecopyresampled<\/a>(\\$image, \\$underimage, 0, 0, 0, 0, \\$old_width, \\$old_height, \\$old_width, \\$old_height);<br \/>\n<a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolortransparent.php'>imagecolortransparent<\/a>(\\$image, \\$black);<\/b><br \/>\n\\$text_color = imagecolorallocate(\\$image, 200, 200, 200);<br \/>\nimagestring(\\$image, 5, 5, 5,  \\$text, \\$text_color);<br \/>\n<br \/>\n\/\/ Generate GIF from the $image<br \/>\n\/\/ We want to put the binary GIF data into an array to be used later,<br \/>\n\/\/  so we use the output buffer.<br \/>\nob_start();<br \/>\nimagegif(\\$image);<br \/>\n\\$frames[]=ob_get_contents();<br \/>\n\\$framed[]=40; \/\/ Delay in the animation.<br \/>\nob_end_clean();<br \/>\n<br \/>\n\/\/ And again..<br \/>\n\";<br \/>\n<\/code> <\/p>\n<p>Perhaps the crucial code line, here, is <b><a target=_blank href='http:\/\/php.net\/manual\/en\/function.imagecolortransparent.php'>imagecolortransparent<\/a>(\\$image, \\$black);<\/b> using your selected &#8220;masking&#8221; colour (and background colour) as the basis for manipulating the image on &#8220;all but that colour&#8221;, which we chose as that wee bit different to white, but looks like white as your new Animated GIF background colour.<\/p>\n<p>We don&#8217;t mind a black background, but it is a bit awkward for a couple of reasons &#8230;<\/p>\n<ul>\n<li>any pure black text (and we often choose black for text) will disappear into a black background<\/li>\n<li>the result of the HTML5 canvas <i>[canvasElement].toDataURI(&#8216;image\/png&#8217;,0);<\/i> has a white background, so there is quite a degree of inconsistency if we make no attempts at today&#8217;s changes<\/li>\n<\/ul>\n<p> &#8230; as you can see with the finished Animated GIF we created that inspired the tutorial picture above, below &#8230;<\/p>\n<p><img title='Animated GIF with near while background' src='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tut_pic.gif'><\/img><\/p>\n<p>As you might surmise &#8230;<\/p>\n<ul>\n<li>PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------GETME\" title=\"tutorial_to_animated_gif.php\">tutorial_to_animated_gif.php<\/a> code changed the most to cater for these Animated GIF background colours in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------GETME\">this way<\/a> or try it as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Click picture\">live run<\/a> &#8230; supervised by &#8230;<\/li>\n<li>HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed minutely in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------------GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ul>\n<p>We hope you try some email attachment &#8220;Feedback&#8221; animations, yourself.<\/p>\n<hr>\n<p id='cufsft'>Previous relevant <a target=_blank title='Contact Us Feedback Smoothly Filtering Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/contact-us-feedback-smoothly-filtering-tutorial\/'>Contact Us Feedback Smoothly Filtering 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\/feedback.htm?justideas=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Contact Us Feedback Smoothly Filtering Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_word_search_smooth.jpg\" title=\"Contact Us Feedback Smoothly Filtering Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Contact Us Feedback Smoothly Filtering Tutorial<\/p><\/div>\n<p>Around here we think it&#8217;s fairer on you readers to be quite empirical about the study of web applications.  That&#8217;s not to say we don&#8217;t have the utmost respect for all that the great <a target=_blank title='Stackoverflow' href='https:\/\/stackoverflow.com'>Stackoverflow<\/a> website offers regarding great analysis of issues and ideas in this area, thanks.  Nevertheless &#8230; and didn&#8217;t you know there wouldn&#8217;t be a but, exactly?! &#8230; to be empirical means we can at least say that we try web applications we talk about under some platforms and web browsers, ourselves, and so can say at the time of writing such and such display such and such a behaviour.  Ideally, we&#8217;d mention versions of things much more, but for us, that is too far over the top for the technicality we wish to impart, with this blog.<\/p>\n<p>Yesterday&#8217;s <a title='Contact Us Feedback Filtering WordPress Tutorial' href='#cuffwpt'>Contact Us Feedback Filtering WordPress Tutorial<\/a> gave us some &#8220;filtering&#8221; capabilities, but the way it flashed the &#8220;whole shebang&#8221; temporarily at the start wore away at our &#8220;programming conscience&#8221;, and we determined that us knowing in our minds &#8220;that the web application display doesn&#8217;t stay that way&#8221; is just not good enough, nor fair, in the sense that there are a lot of users out there, in this day and age of interruption, that might interpret this &#8220;flashing&#8221; of disappearing functionality as &#8220;suss&#8221;, so we set out on a web application client approach to refining this behaviour to not have this &#8220;flashing&#8221; look.  Before we go further, it should be noted that if we were prepared to use PHP serverside thoughts here you could research the incredibly useful <a target=_blank title='PHP ob_end_clean method information' href='http:\/\/php.net\/manual\/en\/function.ob-end-clean.php'>ob_end_clean<\/a>(); and <a target=_blank title='PHP ob_start method information' href='http:\/\/php.net\/manual\/en\/function.ob-start.php'>ob_start<\/a>(); and <a target=_blank title='PHP ob_get_contents method information' href='http:\/\/php.net\/manual\/en\/function.ob-get-contents.php'>ob_get_contents<\/a>(); approaches, these being so useful they are intrinsic to speed improvements that effectively zip up the blog contents you are reading right now (and which you can read more about at <a target=_blank title='EasyApache in cPanel Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/easyapache-in-cpanel-primer-tutorial\/'>EasyApache in cPanel Primer Tutorial<\/a>) to solve this dilemma.<\/p>\n<p>For us to solve it we empirically determined that &#8230;<\/p>\n<ul>\n<li>document.body <i>onload<\/i>=onloading(); event trapping &#8230; will not cover &#8230;<\/li>\n<li>after &lt;body <i>onload<\/i>=onloading();&gt; the &lt;script type=&#8217;text\/javascript&#8217;&gt;    document.write([HTMLgoesHere]);   &lt;\/script&gt;<\/li>\n<\/ul>\n<p> &#8230; the (empirical) lesson being that, even though it is more awkward and disparate to do this, you must address the &#8220;if&#8221; statements required with that &#8220;after &lt;body <i>onload<\/i>=onloading();&gt; the &lt;script type=&#8217;text\/javascript&#8217;&gt;    document.write([HTMLgoesHere]);   &lt;\/script&gt;&#8221; as described above, otherwise you remain with the flashing as we can show you (or <a onclick=\"document.getElementById('notsmooth').src+='' + Math.floor(Math.random() * 1234); \" style=\"cursor:pointer;text-decoration:underline;\">refresh for you<\/a>) below &#8230;<\/p>\n<p><iframe id='notsmooth' src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=maybe&#038;x=x' title='Word Search'><\/iframe><\/p>\n<p> &#8230; &lt;iframe id=&#8217;notsmooth&#8217; src=&#8217;<a target=_blank title='Too flashy' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=maybe'>\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=maybe<\/a>&#8216; title=&#8217;Word Search&#8217;&gt;&lt;\/iframe&gt; that is a &#8220;smoother&#8221; display (or <a onclick=\"document.getElementById('smooth').src+='' + Math.floor(Math.random() * 1234); \" style=\"cursor:pointer;text-decoration:underline;\">refresh if you want to see in action, for yourself<\/a>) via the improved &#8230; &lt;iframe id=smooth src=&#8217;<a target=_blank title='Less flashy' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=y'>\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=y<\/a>&#8216; title=&#8217;Word Search&#8217;&gt;&lt;\/iframe&gt; &#8230;<\/p>\n<p><iframe id=smooth src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=y&#038;z=z' title='Word Search'><\/iframe><\/p>\n<p>A variation that justified our optimistic self delusion &#8220;that the web application display doesn&#8217;t stay that way&#8221; is good enough, is that &#8230;<\/p>\n<ul>\n<li>you quickly click that first refresh link above &#8230;<\/li>\n<li>quickly click inside the &#8220;To:&#8221; textbox &#8230;<\/li>\n<li>if you are quick enough the &#8220;full shebang&#8221; shows else if you didn&#8217;t click in this field or were too slow, the &#8220;reduced shebang&#8221; shows <font size=1>Deluded self: &#8220;A feature rather than a confusion.&#8221;<\/font> &#8230; and what causes this to happen ..\n<ol>\n<li>we make &#8220;justideas=y&#8221; the value of a global variable &#8230; <b>var basis=&#8221;justideas=y&#8221;;<\/b> (and make it so that this <b>basis<\/b> global var<font size=1>iable<\/font> is used everywhere in the code except in the first two &#8220;if&#8221;s just after &#8220;&lt;body <i>onload<\/i>=onloading();&gt; the &lt;script type=&#8217;text\/javascript&#8217;&gt;    &#8220;) &#8230;<br \/>\n<code><br \/>\nvar exs='';<br \/>\nif (document.URL.indexOf('justideas=') != -1) exs='display:none;';  \/\/ start with nothing<br \/>\nif (document.URL.indexOf('justideas=maybe') != -1) exs='';<br \/>\n<\/code>\n<\/li>\n<li>change the workings of the &#8220;To&#8221; textbox <b>as per<\/b><br \/>\n<code><br \/>\n document.write(\"To: &lt;input <b>onclick=\\\"basis=basis.replace('justideas','nowayjose');\\\"<\/b> style='width:200px; align:right;' type='email' id='myto' onblur=\\\" fixto(this.value); \\\" value=''&gt;&lt;\/input&gt;&lt;br&gt;\");<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>The improved <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback &#8220;reduction&#8221; functionality that changed from that last time in order for the content to be smoothly &#8220;reduced&#8221; (aka ?justideas=y) in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----------GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=y\" title=\"Click picture\">reduced live run<\/a> link (the independent way, or <a target=_blank title='WordPress Word Search' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/word-search'>the WordPress way<\/a>) or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">full functionality live run<\/a> link.<\/p>\n<hr>\n<p id='cuffwpt'>Previous relevant <a target=_blank title='Contact Us Feedback Filtering WordPress Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/contact-us-feedback-filtering-wordpress-tutorial\/'>Contact Us Feedback Filtering WordPress 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\/feedback.htm?justideas=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Contact Us Feedback Filtering WordPress Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_word_search.jpg\" title=\"Contact Us Feedback Filtering WordPress Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Contact Us Feedback Filtering WordPress Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Contact Us Feedback Filtering Tutorial' href='#ecufft'>Emoji Contact Us Feedback Filtering Tutorial<\/a>&#8216;s new filtering functionality related to a &#8220;section&#8221; of the &#8220;Feedback&#8221; web application it was applied to.  And this exemplifies, for us, that the term &#8220;modularisation&#8221; can take on various &#8220;levels&#8221; of modularisation such as &#8230;<\/p>\n<ul>\n<li>high level modularisation as per MVC types of coding styles that modularise the underlying code, and in all likelihood, the &#8220;look&#8221; of the resultant web pages &#8230; all the way through to &#8230;<\/li>\n<li> &#8230; OOP code classes line up with web application &#8220;item look&#8221; &#8230; to &#8230;<\/li>\n<li>a web application &#8220;looks modular&#8221;, with elements organized into &#8220;container&#8221; elements, but to look at the Javascript, and maybe the HTML of the web application, it is hard to see any of this &#8220;modularisation&#8221; in terms of its code<\/li>\n<\/ul>\n<p>If it is your job to &#8220;reduce&#8221; a web application into a &#8220;contained&#8221; section of the web page display of that web application, even that (most rudimentary) last level of &#8220;modularisation&#8221; above is fine to &#8230;<\/p>\n<ul>\n<li>work out what differentiates normal &#8220;busy&#8221; display from the pared down &#8220;reduced&#8221; look &#8230; today, for us, it&#8217;s <i>?justideas=y<\/i> added to our URL to become today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=y\" title=\"Click picture\">reduced live run<\/a> link (as distinct to a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">full live run<\/a> link)<\/li>\n<li>work out codewise how to manifest that difference above, and that is, for us &#8230;<br \/>\n<code><br \/>\n     if (document.URL.indexOf('justideas=') == -1) {<br \/>\n       \/\/ pared down \"reduced\" look code goes here<br \/>\n     } else {<br \/>\n       \/\/ normal \"busy\" display code goes here<br \/>\n     }<br \/>\n<\/code>\n<\/li>\n<li>think about when and where to intervene in the code, so that you can come up with a code line like today&#8217;s &#8230;<br \/>\n<code><\/p>\n<details>\n<summary><\/summary>\n<p>                if (document.URL.indexOf('justideas=') != -1) {<\/details>\n<p>                document.body.innerHTML='&lt;div id=<i>ideas<\/i>&gt;' + ideasprefix + amongthis + ideassuffix + '&lt;\/div&gt;';<\/p>\n<details>\n<summary><\/summary>\n<p>                } else if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { <\/details>\n<details>\n<summary><\/summary>\n<p>                document.getElementById('<i>ideas<\/i>').innerHTML=ideasprefix + amongthis + '&lt;br&gt;&lt;iframe id=ideasiframe style=\"display:none;-webkit-overflow-scrolling:touch;overflow:scroll;\" src=\"\"&gt;&lt;\/iframe&gt;' + ideassuffix;<\/details>\n<details>\n<summary><\/summary>\n<p>                } else {<\/details>\n<details>\n<summary><\/summary>\n<p>                document.getElementById('<i>ideas<\/i>').innerHTML=ideasprefix + amongthis + ideassuffix;<\/details>\n<details>\n<summary><\/summary>\n<p>                }<\/details>\n<p><\/code><br \/>\n &#8230; where <i>ideas<\/i> is an element &#8220;ID&#8221; (of a &#8220;container&#8221; element) both before (when it is a table cell (td) element) and after (when it is a div element, on its own within the document.body&#8217;s content (ie. its innerHTML))\n<\/li>\n<li> &#8230; for us, that being the successful HTML iframe <i>onload<\/i> event (Client Pre-emptive Iframe logic) code, after which the HTML dropdown containing blog posting unique word &#8220;option&#8221; tags are complete<\/li>\n<li>use a web inspector to see where else in the whole Javascript logic you&#8217;ll need to refine with &#8220;if (document.URL.indexOf(&#8216;justideas=&#8217;) != -1) { } else { }&#8221; interventions, via those web inspector Console tab errors, that are bound to occur instigating the steps above<\/li>\n<\/ul>\n<p>So this leaves us with &#8220;why?&#8221;.  Well, what is a &#8220;section&#8221; of the &#8220;Feedback&#8221; web application could happily sit as a WordPress Blog menu item, because we can imagine you, the reader, could benefit as a researcher, or &#8220;driller innerer of<font size=1>erer<\/font> more detail and more specificity&#8221; might like to hone in on a particular blog posting topic of interest using this technique.<\/p>\n<p>What of the WordPress end of this interfacing of functionality?  Further down the &#8220;well&#8221; (tee hee), this is as easy as falling off a log &#8230;<\/p>\n<ul>\n<li>Pick a menu item name, ours being &#8220;Word Search&#8221;<\/li>\n<li>as admin of your WordPress Blog use the Add Page icon to type &#8220;Word Search&#8221; into the title field &#8230; and then in the &#8220;body textarea&#8221; &#8230;<\/li>\n<li>\n<code><br \/>\n&lt;iframe src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=y' title='Word Search'&gt;&lt;\/iframe&gt;<br \/>\n<\/code>\n<\/li>\n<li>Add or Update into the WordPress Blog menu<\/li>\n<\/ul>\n<p>Sew if you like, while you see the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----------GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time to be able to be &#8220;reduced&#8221; (aka ?justideas=y) in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----------GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm?justideas=y\" title=\"Click picture\">reduced live run<\/a> link (the independent way, or <a target=_blank title='WordPress Word Search' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/word-search'>the WordPress way<\/a>) or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">full functionality live run<\/a> link.<\/p>\n<hr>\n<p id='ecufft'>Previous relevant <a target=_blank title='Emoji Contact Us Feedback Filtering Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-filtering-tutorial\/'>Emoji Contact Us Feedback Filtering 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Contact Us Feedback Filtering Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_filtering.jpg\" title=\"Emoji Contact Us Feedback Filtering Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Contact Us Feedback Filtering Tutorial<\/p><\/div>\n<p>Do not know if you have been trying the functionality in the third table cell up near the top of the Feedback web application last talked about at yesterday&#8217;s <a title='Emoji Contact Us Feedback Email Animation Tutorial' href='#ecufeat'>Emoji Contact Us Feedback Email Animation Tutorial<\/a> but if you have (or haven&#8217;t (welcome aboard)) that dropdown in that third cell contains all the blog postings on this blog, as a prompter for a topic of an email you could send to us as an email piecing together your feedback.<\/p>\n<p>Today&#8217;s improvements concern two areas &#8230;<\/p>\n<ul>\n<li>redelving into our favourite HTML &#8220;reveal&#8221; tool, the details\/summary partnership and the idea that the summary part of this could contain an HTML select (dropdown) element &#8230; and you might call today&#8217;s work the &#8220;guinea pig project&#8221; here, as we expect to improve, and also &#8230;<\/li>\n<li>finding a way, that we think has great potential, for people using this blog for research and development and\/or as a learning tool, a &#8220;filtering&#8221; mechanism to hone in on <i>topics of interest<\/i> (which now can open a popup or iframe (for mobile)) to any chosen blog posting of interest<\/li>\n<\/ul>\n<p>How do we determine <i>topics of interest<\/i>?  Scan every word we&#8217;ve ever used in a blog posting title, and if that word satisfies a few criteria, and hasn&#8217;t been mentioned before, gets added to an array of different such words, sorted at the end and added (ie. appended to the HTML select element&#8217;s innerHTML property) to the pre-existing options of that details\/summary dropdown, that being &#8230;<\/p>\n<p><select size=3 id='bigselect'><option value=''>Ideas:<\/option><option value='Cut to the Chase'>Cut to the Chase<\/option><option value='Feedback'>Feedback &#8230; all versus &#8230;<\/option><\/select><\/p>\n<p> &#8230; or as HTML (with <b>innerHTML<\/b> being emboldened <font size=1>&#8230; I&#8217;d just give up and take it to the beach &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/bondi_innerHTML.gif' title='You and innerHTML and Bondi Beach'><\/img><br \/>\n&#8230; if I were you<\/font>) &#8230;<\/p>\n<p><code><br \/>\n&lt;select id='bigselect'&gt;<b>&lt;option value=''&gt;Ideas:&lt;\/option&gt;&lt;option value='Cut to the Chase'&gt;Cut to the Chase&lt;\/option&gt;&lt;option value='Feedback'&gt;Feedback ... all versus ...&lt;\/option&gt;<\/b>&lt;\/select&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; whereby if the user selects one of these &#8220;filterers&#8221;, they being given lowercase values, we filter that dropdown&#8217;s initial &#8220;big content&#8221; filtering it down into &#8220;little content&#8221; via that tried and true <strike>Siri dropdown, go and filter<\/strike>re-establishment of a smaller innerHTML property for that details\/summary dropdown, the understanding being we can at any time go back to the &#8220;big content&#8221; by re-establishing the innerHTML to this (Javascript) global var<font size=1>iable<\/font> value should the user repick one of those non-lowercase options.<\/p>\n<p>What&#8217;s &#8220;Cut to the Chase&#8221;?  It&#8217;s our trying to help busy blog readers just wanting to jump to executing the &#8220;action item&#8221; of a blog posting straight away.<\/p>\n<p>So, see the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---------GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---------GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='ecufeat'>Previous relevant <a target=_blank title='Emoji Contact Us Feedback Email Animation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-email-animation-tutorial\/'>Emoji Contact Us Feedback Email Animation 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Contact Us Feedback Email Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_email_animation.jpg\" title=\"Emoji Contact Us Feedback Email Animation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Contact Us Feedback Email Animation Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='Emoji Contact Us Feedback Animation Tutorial' href='#ecufat'>Emoji Contact Us Feedback Animation Tutorial<\/a>&#8216;s Feedback animation beginnings, after today&#8217;s work, we can email animated GIF animations via an email attachment.<\/p>\n<p>To avoid too many files being involved we sharpen up the <a target=_blank title='Data URL (or Data URI) information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> usage aspects to the &#8230;<\/p>\n<ul>\n<li>PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----GETME\" title=\"tutorial_to_animated_gif.php\">tutorial_to_animated_gif.php<\/a> code changed for those data URI improvements in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----GETME\">this way<\/a> or try it as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Click picture\">live run<\/a> &#8230; as well as changing the email helper &#8230;<\/li>\n<li>PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php--------GETME\" title=\"world.php\">world.php<\/a>, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php--------GETME\" title='world.php'>this way<\/a> to help create the PHP mail animated GIF email attachments &#8230; supervised by &#8230;<\/li>\n<li>HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--------GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--------GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ul>\n<p> &#8230; animated GIF email attachment functionality as you can see below &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/countdown.gif' title='Animated GIF countdown via Feedback web application usage'><\/img><\/p>\n<p>As you might imagine, using data URIs can avoid some file creation but asks a lot of data transfer techniques, hence the need below (in an example of 4 slides to an animated GIF where you can imagine the huge data URI strings within the <b>src=&#8221;&#8221;<\/b>s below) with the HTML form navigation used between the supervisor and the animated GIF creator PHP &#8230;<\/p>\n<p><code><br \/>\n&lt;form target='gifa' style='display:none;' action='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' method='<b>POST<\/b>'&gt;<br \/>\n        &lt;input type=hidden id=slideshow name=slideshow value='<b> src=\"[dataURIslide1]\" src=\"[dataURIslide2]\" src=\"[dataURIslide3]\" src=\"[dataURIslide4]\" <\/b>'&gt;&lt;\/input&gt;<br \/>\n        &lt;input type=hidden id=delay name=delay value='4000'&gt;&lt;\/input&gt;<br \/>\n        &lt;input type=hidden id=stitle name=stitle value='Animated Feedback'&gt;&lt;\/input&gt;<br \/>\n        &lt;input type=hidden id=outfile name=outfilex value='animated_gif_slideshow'&gt;&lt;\/input&gt;<br \/>\n        &lt;input id=olbit type=submit value=Submit&gt;&lt;\/input&gt;<br \/>\n        &lt;\/form&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; needs that method=&#8221;<b>POST<\/b>&#8221; to work these animated GIF creations.<\/p>\n<p>We must say here, that to use an animated GIF is just one slideshow (or animation) approach, and we mention many other ideas regarding <a target=_blank title='Slideshow blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slideshow'>slideshow<\/a> usage.  Another we thought about would have involved HTML attachments that use no Javascript, just CSS, to create animations via document.body background images.  We may try this technique further down the track.<\/p>\n<hr \/>\n<p id='ecufat'>Previous relevant <a target=_blank title='Emoji Contact Us Feedback Animation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-animation-tutorial\/'>Emoji Contact Us Feedback Animation 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Contact Us Feedback Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_animation.jpg\" title=\"Emoji Contact Us Feedback Animation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Contact Us Feedback Animation Tutorial<\/p><\/div>\n<p>As we said early on in the recent blog postings on this thread of postings last talked about with yesterday&#8217;s <a title='Emoji Contact Us Feedback Copy and Paste Tutorial' href='#ecufcpt'>Emoji Contact Us Feedback Copy and Paste Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-textarea-tutorial\/'>\n<p>\n&#8230; but we envisage, optimistically, to involve animation and more refined positioning possibilities\n<\/p>\n<\/blockquote>\n<p>Well, the news is, we&#8217;re getting closer, by allowing for the &#8220;internal use only&#8221; creation (and playing) of an animation slideshow from changing canvas image representations, if that is what you want to do, that is.  It uses a self-destructing HTML div element presentation we&#8217;re not sure whether we&#8217;ve ever used before.  As you may know, an HTML div element, being the &#8220;container&#8221; (innerHTML) element that it is, can self-destruct via a myriad of methods, the last of which below being our method for today&#8217;s work &#8230;<\/p>\n<ul>\n<li>Javascript DOM [divElementObject].style.display=&#8217;none&#8217;;<\/li>\n<li>Javascript DOM [divElementObject].style.visibility=&#8217;hidden&#8217;; \/\/ this one may leave whitespace depending<\/li>\n<li>Javascript DOM [divElementObject].style.width=&#8217;0px&#8217;; (or [divElementObject].style.height=&#8217;0px&#8217;; &#8230; you get the gist?)<\/li>\n<li>Javascript DOM [divElementObject].style.top=&#8217;-700px&#8217;; (or [divElementObject].style.left=&#8217;-500px&#8217;; &#8230; you get the gist?)<\/li>\n<li>Javascript DOM [divElementObject].style.opacity=&#8217;0&#8242;;<\/li>\n<li>Javascript DOM [divElementObject].style.fontColor=&#8217;transparent&#8217;; \/\/ if data is textual and this one may leave whitespace depending<\/li>\n<li>Javascript DOM [divElementObject].className='[classThatMakesDivElementInvisible]&#8217;;  (or [divElementObject].className+='[classThatMakesDivElementInvisible]&#8217;; &#8230; you get the gist?)<\/li>\n<li>Javascript DOM [divElementObject].innerHTML=&#8221;;<\/li>\n<\/ul>\n<p> &#8230; which we make happen today, after that HTML div is given the contents of each &#8220;slide&#8221; of the animation (or slideshow), separated, just for now, via a 4 second delay as per &#8230;<\/p>\n<p><code><br \/>\nvar filmslidenumber=1, fromfilmslidenumber=0, tofilmslidenumber=0;<\/p>\n<p>function tanimation() {<br \/>\n  if (fromfilmslidenumber &lt; tofilmslidenumber) {<br \/>\n  document.getElementById('dslideshow').innerHTML='&lt;img style=\"border:8px dashed lightblue;\" src=' + document.getElementById('tablefilmimg' + eval(1 + fromfilmslidenumber)).src + '&gt;&lt;\/img&gt;';<br \/>\n  fromfilmslidenumber++;<br \/>\n  setTimeout(tanimation, 4000);<br \/>\n  } else {<br \/>\n  document.getElementById('dslideshow').innerHTML='';<br \/>\n  }<br \/>\n}<\/p>\n<p>function animation() {<br \/>\n  fromfilmslidenumber = 0;<br \/>\n  tofilmslidenumber = eval(-1 + filmslidenumber);<br \/>\n  document.getElementById('dslideshow').innerHTML='&lt;img style=\"border:8px dashed lightblue;\" src=' + document.getElementById('tablefilmimg1').src + '&gt;&lt;\/img&gt;';<br \/>\n  location.href='#dslideshow';<br \/>\n  fromfilmslidenumber++;<br \/>\n  setTimeout(tanimation, 4000);<br \/>\n}<\/p>\n<p>function addtofilm() {<br \/>\n  var ptoh=elem.toDataURL('image\/png',0);<br \/>\n  if (filmslidenumber == 1) {<br \/>\n    if (document.getElementById('eimg').innerHTML == '') {<br \/>\n    if (document.getElementById('divannotation')) {<br \/>\n    if (('' + document.getElementById('divannotation').style.top).indexOf('525') != -1) {<br \/>\n    document.getElementById('divannotation').style.top=eval(eval(('' + document.getElementById('divannotation').style.top).replace('px','')) + 240) + 'px';<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    document.getElementById('eimg').innerHTML='&lt;table id=tablefilm&gt;&lt;tr id=tablefilmtr&gt;&lt;td id=tablefilmcell1&gt;&lt;img id=tablefilmimg1 style=\"border:8px dashed lightgreen;\" src=' + ptoh + '&gt;&lt;\/img&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr id=tablefilmfooter&gt;&lt;td id=tablefilmfooter1&gt;&lt;a href=#tablefilmfooter1&gt;Slide&lt;\/a&gt; 1 of ...&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;';<br \/>\n  } else {<br \/>\n    document.getElementById('tablefilmtr').innerHTML+='&lt;td id=tablefilmcell' + filmslidenumber + '&gt;&lt;img id=tablefilmimg' + filmslidenumber + ' style=\"border:8px dashed lightgreen;\" src=' + ptoh + '&gt;&lt;\/img&gt;&lt;\/td&gt;';<br \/>\n    document.getElementById('tablefilmfooter').innerHTML=document.getElementById('tablefilmfooter').innerHTML.replace(' ...',' &lt;a href=#tablefilmfooter' + filmslidenumber + '&gt;...&lt;\/a&gt;') + '&lt;td id=tablefilmfooter' + filmslidenumber + '&gt;&lt;a href=#tablefilmfooter1&gt;Slide&lt;\/a&gt; ' + filmslidenumber + ' of ...&lt;\/td&gt;';<br \/>\n  }<br \/>\n  if (filmslidenumber == 2) {<br \/>\n    document.getElementById('daddtofilm').innerHTML+='&nbsp;&lt;input style=display:inline-block; type=button onclick=animation(); value=\"Play Animation\" id=banimation&gt;&lt;\/input&gt;';<br \/>\n  }<br \/>\n  filmslidenumber++;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; helped out by <b>additional<\/b> HTML as per &#8230;<\/p>\n<p><code><br \/>\n document.write('&lt;table style=width:100%;&gt;&lt;tr&gt;&lt;td&gt;<b>&lt;div id=dslideshow&gt;&lt;\/div&gt;<\/b>&lt;h1 id=myh1 align=\"center\"&gt;Feedback&lt;\/h1&gt;&lt;\/td&gt;&lt;td style=width:90%; nowrap&gt;&lt;div style=display:inline-block;width:100%;overflow-x:scroll; id=dviai&gt;&lt;form style=display:none;width:100%;overflow-x:scroll; action=fairy_story_assistant.php method=GET target=fsa&gt;&lt;input name=emoji id=iemoji value=&gt;&lt;\/input&gt;&lt;input type=submit id=isubm value=Submit&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;iframe style=display:none;width:100%;overflow-x:scroll; id=fsa name=fsa src=&gt;&lt;\/iframe&gt;&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;');<br \/>\n<\/code><\/p>\n<p> &#8230; and some <b>changed<\/b> Javascript as per &#8230;<\/p>\n<p><code><br \/>\n      document.getElementById('divannotation').innerHTML=document.getElementById('divannotation').innerHTML.replace('Annotations++','Annotations++ &lt;input onclick=\"document.getElementById(' + \"'\" + 'canbet' + \"'\" + ').value=' + \"'\" + 'transparent' + \"'\" + ';\" type=button value=\"Copy (via 2) and Paste (via 1) Parts of Canvas Above to Canvas Above\"&gt;&lt;\/input&gt;&lt;br&gt;<b>&lt;div id=daddtofilm&gt;&lt;input onclick=\"addtofilm();\" value=\"Add to Animated Film\" type=\"button\" title=\"Make an Animation\"&gt;&lt;\/input&gt;&lt;\/div&gt;<\/b>').replace('&lt;input type=\"text\" id=\"mycolour\"','&lt;input type=\"color\" id=\"myrcolour\" value=\"black\" onchange=\"if (this.value.toLowerCase().indexOf(' + \"'\" + 'transparent' + \"'\" + ') == -1) { obeforetransparent=this.value; } document.getElementById(' + \"'\" + 'mycolour' + \"'\" + ').value=this.value;\"&gt;&lt;\/input&gt;&nbsp;&lt;input onblur=\"if (this.value.toLowercase().indexOf(' + \"'\" + 'transparent' + \"'\" + ') == -1) { obeforetransparent=this.value; }\" type=\"text\" id=\"mycolour\"').replace('&lt;input id=\"mycolour\"','&lt;input type=\"color\" id=\"myrcolour\" value=\"black\" onchange=\"if (this.value.toLowerCase().indexOf(' + \"'\" + 'transparent' + \"'\" + ') == -1) { obeforetransparent=this.value; } document.getElementById(' + \"'\" + 'mycolour' + \"'\" + ').value=this.value;\"&gt;&lt;\/input&gt;&nbsp;&lt;input onblur=\"if (this.value.toLowerCase().indexOf(' + \"'\" + 'transparent' + \"'\" + ') == -1) { obeforetransparent=this.value; } \" id=\"mycolour\"').replace(\"&lt;\/form&gt;\",\"&lt;input type=hidden id=canbet value=&gt;&lt;\/input&gt;&lt;input type=hidden name=from id=from value=''&gt;&lt;\/input&gt;&lt;\/form&gt;\").replace(\"&lt;\/form&gt;\",\"&lt;input type=hidden name=cc id=cc value=''&gt;&lt;\/input&gt;&lt;\/form&gt;\").replace(\"&lt;\/form&gt;\",\"&lt;input type=hidden name=bcc id=bcc value=''&gt;&lt;\/input&gt;&lt;\/form&gt;\");<br \/>\n<\/code><\/p>\n<p>Now to think about emailing these optional animations.<\/p>\n<p>Today, also, we&#8217;ve made the CSS much better suited to the mobile devices you may be using, by introducing the equivalent canvas <i>onclick<\/i> event logic mapped to the <i>touchstart<\/i> event, that mobile devices detect.<\/p>\n<p>Today&#8217;s changes just involved <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr \/>\n<p id='ecufcpt'>Previous relevant <a target=_blank title='Emoji Contact Us Feedback Copy and Paste Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-copy-and-paste-tutorial\/'>Emoji Contact Us Feedback Copy and Paste 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Contact Us Feedback Copy and Paste Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_revisit_four.jpg\" title=\"Emoji Contact Us Feedback Copy and Paste Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Contact Us Feedback Copy and Paste Tutorial<\/p><\/div>\n<p>We&#8217;ve got quite a variety of functional improvements on top of what was there already with yesterday&#8217;s <a title='Emoji Contact Us Feedback Cross-Browser Tutorial' href='#ecufc-bt'>Emoji Contact Us Feedback Cross-Browser Tutorial<\/a> (optionally email) Feedback web application.  These changes, today, in brief, involved &#8230;<\/p>\n<ul>\n<li>copy and paste with the canvas element whose image representation forms the body of an email sent via this web application<\/li>\n<li>in order to ensure the consistency of canvas (y or top) positioning we had quite a lot to do, such as &#8230;\n<ol>\n<li>no longer placing the image that results from &#8220;Send Feedback and Show Body of Email as Image&#8221; up the top right, but now to under the canvas with a pink dashed border (for clarity)<\/li>\n<li>no longer making the emojis map (big) into the header h1 element but now in a table cell as per &#8230;<br \/>\n<code><br \/>\n&lt;td style=width:90%; <a target=_blank title='td nowrap property information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_td_nowrap.asp'>nowrap<\/a>&gt;&lt;div style=display:<a target=_blank title='inline-block information from w3schools' href='https:\/\/www.w3schools.com\/css\/css_inline-block.asp'>inline-block<\/a>;width:100%;<a target=_blank title='overflow-x information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_overflow-x.asp'>overflow-x<\/a>:scroll; id=dviai&gt;&lt;form style=display:none;width:100%;overflow-x:scroll; action=fairy_story_assistant.php method=GET target=fsa&gt;&lt;input name=emoji id=iemoji value=&gt;&lt;\/input&gt;&lt;input type=submit id=isubm value=Submit&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;iframe style=display:none;width:100%;overflow-x:scroll; id=fsa name=fsa src=&gt;&lt;\/iframe&gt;&lt;\/div&gt;&lt;\/td&gt;<br \/>\n<\/code><br \/>\n&#8230; ensuring it takes up as little height as possible, but stretches out to the right as much as it likes, but you can scroll to those parts way out off the screen to the right\n<\/li>\n<\/ol>\n<li>allowing some web browsers make use of their HTML5 <a target=_blank title='input type=color information from w3schools' href='https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_input_color'>input type=color<\/a> colour wheel methods of defining annotation and canvas drawing foreground colour<\/li>\n<li>inform the user, via a self-closing popup window, that the PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a> has sent an email, the look of which has a little bit of &#8220;Android <a target=_blank title='Andoid toast information' href='https:\/\/developer.android.com\/reference\/android\/widget\/Toast.html'>toast<\/a>&#8221; about it<\/li>\n<\/ul>\n<p>So let&#8217;s talk about the &#8220;Copy (via 2) and Paste (via 1) Parts of Canvas Above to Canvas Above&#8221;.  After a little dead end thinking pixel level thoughts might be the go &#8230; no &#8230; it was image level thoughts we needed, trapped at the canvas element&#8217;s <a target=_blank title='Javascript event onclick information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'><i>onclick<\/i><\/a> logic &#8230;<\/p>\n<ul>\n<li>the Copy (via 2 click\/touch) aspects via [canvasElement].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>(&#8216;image\/png&#8217;,0) copies the whole canvas, but while we are at that we are recording the user&#8217;s last two click&#8217;s &#8230;\n<ol>\n<li>The x coordinate where to start clipping<\/li>\n<li>The y coordinate where to start clipping<\/li>\n<li>The width of the clipped image<\/li>\n<li>The height of the clipped image<\/li>\n<\/ol>\n<p> &#8230; which we&#8217;ll come back to, and now to <b>convert that into image data<\/b> (for the statically defined HTML &lt;img id=&#8217;myim&#8217; style=&#8217;dispay:none;&#8217; src=&#8221; title=&#8221; alt=&#8221;&gt;&lt;\/img&gt;), we &#8230;<br \/>\n<code><br \/>\n      <b>omyimgdata=elem.toDataURL('image\/png',0);<br \/>\n      document.getElementById('myim').style.width=elem.style.width;<br \/>\n      document.getElementById('myim').style.height=elem.style.height;<br \/>\n      document.getElementById('myim').src=omyimgdata;<\/b><br \/>\n      omidatax=eval(Math.min(x,lastx));<br \/>\n      omidatay=eval(Math.min(y,lasty));<br \/>\n      omidataw=Math.abs(x - lastx);<br \/>\n      omidatah=Math.abs(y - lasty);<br \/>\n<\/code>\n<\/li>\n<li>the Paste (via 1 click\/touch) aspect using the &#8220;full might&#8221; of the [canvasContext].<a target=_blank title='HTML canvas element drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage<\/a>() calling incarnations as per &#8230;<br \/>\n<code><br \/>\n         context.<a target=_blank title='HTML canvas element drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage<\/a>(document.getElementById('myim'),omidatax,omidatay,omidataw,omidatah,x,y,omidataw,omidatah);<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Code changes, today, involved the PHP email helper  &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php-------GETME\" title=\"world.php\">world.php<\/a>, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php-------GETME\" title='world.php'>this way<\/a>, whose job it is to help create the PHP mail created email attachments, in the form of image renderings on the canvas we use &#8230; supervised by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html------GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ul>\n<hr \/>\n<p id='ecufc-bt'>Previous relevant <a target=_blank title='Emoji Contact Us Feedback Cross-Browser Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-cross-browser-tutorial\/'>Emoji Contact Us Feedback Cross-Browser 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Contact Us Feedback Cross-Browser Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_revisit_three.jpg\" title=\"Emoji Contact Us Feedback Cross-Browser Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Contact Us Feedback Cross-Browser Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Contact Us Feedback Textarea Tutorial' href='#ecuftt'>Emoji Contact Us Feedback Textarea Tutorial<\/a> had us more integrated involving emojis with the HTML5 canvas element we use as the source for an image attachment to a potential email for use as Feedback, perhaps.<\/p>\n<p>There are cross-browser issues here.<\/p>\n<ol>\n<li>Firefox is not transferring the emojis to the canvas, <a target=_blank title='Firefox emojis on canvas' href='https:\/\/www.fxsitecompat.com\/en-CA\/docs\/2015\/canvas-fails-to-render-emojis-on-os-x\/'>at least for us<\/a>.<\/li>\n<li>And Safari does not offer great two finger gesture options when hovering over the canvas, such as &#8220;Save Image As&#8230;&#8221;.  So, today, we offer those Safari users the chance to be able to &#8220;Save Image As&#8230;&#8221; image (email attachment) download possibilities by offering a new button called &#8220;Send Feedback and Show Body of Email as Image&#8221;.  Use this, and that image that results is downloadable.<\/li>\n<\/ol>\n<p>In order to allow for that last one, and not wrongly overlay the Annotations div element menus, we adjust the top (y) co-ordinate of the Annotations div element menus as per &#8230;<\/p>\n<p><code><br \/>\n    if (document.getElementById('divannotation')) {<br \/>\n     if (('' + document.getElementById('divannotation').style.top).indexOf('485') != -1) {<br \/>\n      document.getElementById('divannotation').style.top=eval(eval(('' + document.getElementById('divannotation').style.top).replace('px','')) + 300) + 'px';<br \/>\n     }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; a technique that may fail for elements that do not define the <i>top<\/i> property, whether that be teamed or not (as for today) with <i>position:absolute<\/i> property &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById('divannotation').style.top='485px';<br \/>\n<\/code><\/p>\n<p>A different child PHP helper to yesterday&#8217;s one needed work today &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php------GETME\" title=\"world.php\">world.php<\/a>, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.php------GETME\" title='world.php'>this way<\/a>, whose job it is to help create the PHP mail created email attachments, in the form of image renderings on the canvas we use &#8230; supervised by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-----GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ul>\n<hr \/>\n<p id='ecuftt'>Previous relevant <a target=_blank title='Emoji Contact Us Feedback Textarea Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-textarea-tutorial\/'>Emoji Contact Us Feedback Textarea 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\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Contact Us Feedback Textarea Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_revisit_two.jpg\" title=\"Emoji Contact Us Feedback Textarea Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Contact Us Feedback Textarea Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Contact Us Feedback Integration Tutorial' href='#ecufit'>Emoji Contact Us Feedback Integration Tutorial<\/a> started us down the road of trying to make emoji usage more functional with the annotation aspects of our Feedback (Contact Us type of) web application.<\/p>\n<p>We have a textarea HTML element currently in use as a means by which we collect textual data, that may go into the feedback, and then onto an email, perhaps.  We&#8217;ve lately been preferring to use &#8230;<\/p>\n<ul>\n<li>div contenteditable=true &#8230; in preference to &#8230;<\/li>\n<li>textarea<\/li>\n<\/ul>\n<p> &#8230; and though we keep the textarea as the interfacing element of &#8220;textual data collection&#8221; for the user, today, it gets helped out by accompanying &#8230;<\/p>\n<ul>\n<li>div contenteditable=true &#8230; and encompassing the textarea we have a new &#8230;<\/li>\n<li>div &#8230; acting as a parent<\/li>\n<\/ul>\n<p>How come?   Well, in our experience, when you mix up the keyboard character type of text with emoji HTML Entity &#8220;textual&#8221; data, the relationship between the textarea&#8217;s &#8230;<\/p>\n<ul>\n<li>value property<\/li>\n<li>innerHTML property<\/li>\n<\/ul>\n<p> &#8230; unique among elements, and really generally useful, stuffs up, or we stuff up, one of the two.<\/p>\n<p>But &#8230; and didn&#8217;t you just know there&#8217;d be a &#8220;but&#8221; &#8230; combine the content of the first &#8220;shadowing&#8221; div element with a complete rewrite of the textarea via the innerHTML property of the &#8220;encasing&#8221; second div (parent) element and you can go back to the conditions at the start of the web application, as far as the textarea is concerned, where you can place HTML Entity representations of that mix of textual data that may include emojis, into the textarea&#8217;s innerHTML via code like &#8230;<\/p>\n<p><code><br \/>\n      \/\/ store current innards of the textarea<br \/>\n      var mtv=top.document.getElementById('myfeedback').value;<br \/>\n      \/\/ at to those textarea innards the current HTML Entity emoji data addition and place into the innerHTML of the \"shadowing\" div  contenteditable=true element<br \/>\n      top.document.getElementById('dmyfeedback').innerHTML=mtv + cnotatend;<br \/>\n      \/\/ clear contents of textarea<br \/>\n      top.document.getElementById('myfeedback').value='';<br \/>\n      \/\/ repopulate textarea in an innerHTML (HTML Entity friendly) way by reinstating its whole (outerHTML) instantiation by setting the innerHTML of that textarea's encasing div element, and in between where &gt; meets &lt;\/textarea&gt; place that same div contenteditable=true innerHTML where spaces map to (HTML Entity) &amp;nbsp;<br \/>\n      top.document.getElementById('ddmyfeedback').innerHTML='&lt;textarea style=\"color=lightgray;width:200px;\" rows=6 cols=40 id=\"myfeedback\" title=\"Feedback\" value=\"\" onchange=\" pseudo_sentence=this.value; placetext(); \" onblur=\" pseudo_sentence=this.value;  placetext(); \"&gt;' + mtv.replace(\/\\ \/g,'&amp;nbsp;') + cnotatend + '&lt;\/textarea&gt;';<br \/>\n<\/code><\/p>\n<p> &#8230; all carried out with an HTML iframe hosted child PHP helper &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php---GETME\" title=\"fairy_story_assistant.php\">fairy_story_assistant.php<\/a>, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fairy_story_assistant.php---GETME\" title='fairy_story_assistant.php'>this way<\/a>, whose job it is to get the great <a target=_blank title='Emoji Terra' href='http:\/\/emojiterra.com'>Emoji Terra<\/a> website help us out, via its ideal permalink arrangements, with emoji search lookups, thanks &#8230; supervised by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ul>\n<hr \/>\n<p id='ecufit'>Previous relevant <a target=_blank title='Emoji Contact Us Feedback Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-integration-tutorial\/'>Emoji Contact Us Feedback Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Contact Us Feedback Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback_revisit.jpg\" title=\"Emoji Contact Us Feedback Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Contact Us Feedback Integration Tutorial<\/p><\/div>\n<p>We&#8217;re revisiting the work of <a title='Contact Us Feedback Android Tutorial' href='#cufat'>Contact Us Feedback Android Tutorial<\/a> which features &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>feedback<\/li>\n<li>canvas<\/li>\n<\/ul>\n<p> &#8230; with some early days integration with the recent work of <a target=_blank title='Emoji Name Search Fairy Story PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-fairy-story-php-tutorial\/'>Emoji Name Search Fairy Story PHP Tutorial<\/a>, because we think the addition of more sophisticated emoji search (and later, usage) functionality would be a good improvement.  Who&#8217;s to know if we can do it, but we envisage, optimistically, to involve animation and more refined positioning possibilities.<\/p>\n<p>Hope you can hang around for the full journey that starts with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----GETME\" title='feedback.htm'>feedback.htm<\/a> HTML and Javascript feedback functionality that changed from that last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html----GETME\" title='feedback.html'>this way<\/a> and which you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr \/>\n<p id='cufat'>Previous relevant <a target=_blank title='Contact Us Feedback Android Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/contact-us-feedback-android-tutorial\/'>Contact Us Feedback Android Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Contact_Us.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Contact Us Feedback Android Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/android_mailto.jpg\" title=\"Contact Us Feedback Android Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Contact Us Feedback Android Tutorial<\/p><\/div>\n<p>A couple of days ago we presented <a title='Contact Us Feedback Primer Tutorial' href='#cufpt'>Contact Us Feedback Primer Tutorial<\/a> as shown below &#8230; and said &#8230;<\/p>\n<blockquote>\n<p>Maybe you remember reading about the recent Feedback functionality here at RJM Programming when we presented <a target=_blank title='Feedback Email Attachment Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/feedback-email-attachment-iframe-tutorial\/'>Feedback Email Attachment Iframe Tutorial<\/a>.  It struck us that it would be good to extend the &#8220;Contact Us&#8221; webpage here at RJM Programming by adding a &#8220;Feedback&#8221; form to the &#8220;Contact Us&#8221; now presented via an HTML select &#8220;dropdown&#8221; element.<\/p>\n<\/blockquote>\n<p> &#8230; well, we discovered down the track that the behaviour of the HTML <i>a<\/i> tag&#8217;s <a target=_blank title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> <i>href<\/i> parameter navigation needs to be nuanced for Android (mobile) usage.<\/p>\n<p>A bit of reading on this lead us in one direction and the <a target=_blank title='Useful link' href='https:\/\/getsatisfaction.com\/apperyio\/topics\/navigator_app_loadurl_the_link_openexternal_true_not_supported_with_latest_release_of_appery_io_android_tester_app'>useful link<\/a> pulled us completely back into a good line, thanks, via the advice &#8230;<\/p>\n<blockquote>\n<p>\nwindow.top.location = &#8220;http:\/\/example.com&#8221;;\n<\/p>\n<\/blockquote>\n<p> &#8230; but, for us, that goes (something like) &#8230;<\/p>\n<p><code><br \/>\nwindow.top.location = \"mailto:fill.in@email.address?subject=blah&#038;cc=&#038;bcc=&#038;body=Lots%20Of%20Blah\";<br \/>\n<\/code><\/p>\n<p> &#8230; presumably to get the external Android Mail app into the picture.  On the way <a target=_blank title='Also useful' href='http:\/\/www.telerik.com\/forums\/proper-way-to-do-mailto-and-tel-links'>this link<\/a> was useful, also, so, thanks.<\/p>\n<p>Trap for young players?  (Am blushing)<\/p>\n<p>So for feedback functionality what changed for this Android fix (which also has trouble, perhaps, with inhouse Javascript functions called &#8220;capture&#8221;?!) was &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---GETME\" title='feedback.html'>feedback.html<\/a> HTML and Javascript feedback functionality changed from last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html---GETME\" title='feedback.html'>this way<\/a><\/li>\n<li><a target=_blank title='world.js' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------GETME' title='world.js'>world.js<\/a> external Javascript annotation functionality changed from last time in <a target=_blank title='world.js' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------GETME' title='world.js'>like this<\/a><\/li>\n<\/ul>\n<p>So &#8230; pleeeeease don&#8217;t fall in the trap, like me?!<\/p>\n<hr \/>\n<p id='cufpt'>Previous relevant <a target=_blank title='Contact Us Feedback Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/contact-us-feedback-primer-tutorial\/'>Contact Us Feedback 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\/Contact_Us.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Contact Us Feedback Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contact_us_idea.jpg\" title=\"Contact Us Feedback Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Contact Us Feedback Primer Tutorial<\/p><\/div>\n<p>Maybe you remember reading about the recent Feedback functionality here at RJM Programming when we presented <a target=_blank title='Feedback Email Attachment Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/feedback-email-attachment-iframe-tutorial\/'>Feedback Email Attachment Iframe Tutorial<\/a>.  It struck us that it would be good to extend the &#8220;Contact Us&#8221; webpage here at RJM Programming by adding a &#8220;Feedback&#8221; form to the &#8220;Contact Us&#8221; now presented via an HTML select &#8220;dropdown&#8221; element.<\/p>\n<p>You can see the gist of what is involved with today&#8217;s <a target=_blank title='Tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contact_us_idea.jpg'>tutorial picture<\/a> for the creation of a short worded feedback email, via your default email client (ie. an HTML <i>a<\/i> <a target=_blank title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> link is used), perhaps regarding a tutorial here at this blog, which can be chosen via an HTML select &#8220;dropdown&#8221; element populated from the RJM Programming Landing Page, the logic for which you can read about with <a target=_blank title='Client Pre-emptive Iframe Crontab Curl Rotated Report Tutorial ' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/client-pre-emptive-iframe-crontab-curl-rotated-report-tutorial\/'>Client Pre-emptive Iframe Crontab Curl Rotated Report Tutorial<\/a>.  As you would glean from this blog posting title, what we are involving here is &#8230;<\/p>\n<ul>\n<ol>\n<li>WordPress Blog&#8217;s MySql database<\/li>\n<li>curl call of PHP to extract blog posting information<\/li>\n<li>crontab scheduled execution of PHP to assemble this data into an updated HTML select &#8220;dropdown&#8221; element in the RJM Programming Landing Page<\/li>\n<\/ol>\n<li>an HTML iframe element loads the Landing Page and the crontab\/curl inspired PHP\/MySql data is extracted (at that iframe&#8217;s <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onload<\/i><\/a> event) and reworked to the purposes of this Feedback functionality<\/li>\n<\/ul>\n<p>So what changed here?<\/p>\n<ul>\n<li><a target=_blank title='Contact Us' href='http:\/\/www.rjmprogramming.com.au\/Contact_Us.html'>Contact_Us.html<\/a> changed in the <b>bold<\/b> ways below &#8230;<br \/>\n<code><br \/>\n          &lt;div id=\"id4\" style=\"height: 36px; left: 17px; position: absolute; top: 304px; width: 674px; z-index: 1; \" class=\"style_SkipStroke_3\"&gt;<br \/>\n            &lt;div class=\"text-content style_External_674_96\" style=\"padding: 0px; \"&gt;<br \/>\n              &lt;div class=\"style_2\"&gt;<br \/>\n                &lt;<b>!--<\/b>p style=\"padding-bottom: 0pt; padding-top: 0pt; \" class=\"Caption\"&gt;Contact Us at RJM Programming&lt;\/p<b>--<\/b>&gt;<br \/>\n                <b>&lt;div style=\"padding-bottom: 0pt; padding-top: 0pt; \" class=\"Caption\"&gt;&lt;select id=mysel onchange=\" var huhs; var dds=document.getElementsByTagName('div'); for (var idds=0; idds&lt;dds.length; idds++) { huhs=dds[idds].innerHTML.split('&lt;div ');  if (huhs.length == 1) { huhs=dds[idds].innerHTML.split('&lt;img ');  if (huhs.length &gt; 5) { dds[idds].style.display='none';  } }  }  document.getElementById('mycrawler').style.display='none';  document.getElementById('widget2b').style.height='500px'; document.getElementById('widget2-frame').height='500px'; document.getElementById('widget2-frame').style.height='500px';  document.getElementById('widget2-frame').style.zIndex='5'; document.getElementById('widget2-frame').src=this.value; \"&gt;&lt;option value=\"http:\/\/www.rjmprogramming.com.au\/Contact_Us_files\/widget2a_markup.html\"&gt;Contact Us&lt;\/option&gt;&lt;option value=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html?contact=contact\"&gt;Feedback&lt;\/option&gt;&lt;\/select&gt; at RJM Programming&lt;\/div&gt;<\/b><br \/>\n              &lt;\/div&gt;<br \/>\n            &lt;\/div&gt;<br \/>\n          &lt;\/div&gt;<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--GETME\" title='feedback.html'>feedback.html<\/a> HTML and Javascript feedback functionality changed from last time in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html--GETME\" title='feedback.html'>this way<\/a><\/li>\n<li><a target=_blank title='world.js' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js----------------GETME' title='world.js'>world.js<\/a> external Javascript annotation functionality changed from last time in <a target=_blank title='world.js' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js----------------GETME' title='world.js'>like this<\/a><\/li>\n<\/ul>\n<p>Maybe this is food for thought for your own &#8220;Contact Us&#8221; page, perhaps second only to &#8220;Landing Page&#8221; in popularity on today&#8217;s websites of the &#8220;net&#8221;.<\/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='#d21746' onclick='var dv=document.getElementById(\"d21746\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d21746' 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='#d21927' onclick='var dv=document.getElementById(\"d21927\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/android\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d21927' 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='#d37117' onclick='var dv=document.getElementById(\"d37117\"); 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='d37117' 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='#d37125' onclick='var dv=document.getElementById(\"d37125\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37125' 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='#d37145' onclick='var dv=document.getElementById(\"d37145\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cross-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37145' 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='#d37154' onclick='var dv=document.getElementById(\"d37154\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/paste\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37154' 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='#d37177' onclick='var dv=document.getElementById(\"d37177\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slideshow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37177' 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='#d37196' onclick='var dv=document.getElementById(\"d37196\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37196' 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='#d37212' onclick='var dv=document.getElementById(\"d37212\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37212' 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='#d37232' onclick='var dv=document.getElementById(\"d37232\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37232' 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='#d37252' onclick='var dv=document.getElementById(\"d37252\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37252' 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='#d37284' onclick='var dv=document.getElementById(\"d37284\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gd\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37284' 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='#d41274' onclick='var dv=document.getElementById(\"d41274\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/placeholder\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41274' 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='#d41292' onclick='var dv=document.getElementById(\"d41292\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pdf\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41292' 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='#d41312' onclick='var dv=document.getElementById(\"d41312\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/permalink\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41312' 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='#d42265' onclick='var dv=document.getElementById(\"d42265\"); 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='d42265' 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='#d44893' onclick='var dv=document.getElementById(\"d44893\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sms\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44893' 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='#d47325' onclick='var dv=document.getElementById(\"d47325\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/collaboration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47325' 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='#d47330' onclick='var dv=document.getElementById(\"d47330\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reply\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47330' 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='#d47339' onclick='var dv=document.getElementById(\"d47339\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/accountability\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47339' 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='#d47348' onclick='var dv=document.getElementById(\"d47348\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/local-storage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47348' 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='#d47367' onclick='var dv=document.getElementById(\"d47367\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animated-gif\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47367' 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='#d48890' onclick='var dv=document.getElementById(\"d48890\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/data-uri\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48890' 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='#d48904' onclick='var dv=document.getElementById(\"d48904\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48904' 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='#d48929' onclick='var dv=document.getElementById(\"d48929\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48929' 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='#d48935' onclick='var dv=document.getElementById(\"d48935\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pixel\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48935' 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='#d48942' onclick='var dv=document.getElementById(\"d48942\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gd\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48942' 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='#d49043' onclick='var dv=document.getElementById(\"d49043\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/substitution\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49043' 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='#d49055' onclick='var dv=document.getElementById(\"d49055\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/token\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49055' 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='#d49069' onclick='var dv=document.getElementById(\"d49069\"); 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='d49069' 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='#d49074' onclick='var dv=document.getElementById(\"d49074\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/equation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49074' 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='#d49078' onclick='var dv=document.getElementById(\"d49078\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49078' 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='#d49081' onclick='var dv=document.getElementById(\"d49081\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/name\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49081' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With our &#8220;My List&#8221; (last talked about with List Web Application PHP Tutorial) web application &#8220;subject token&#8221; work on top of yesterday&#8217;s Vertex Pointing Game Token Subject Positioning Tutorial we &#8230; allow for [name] as being mapped to email address &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/my-list-token-subject-positioning-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":[155,380,385,392,2671,1613,491,538,2298,2670,576,3305,2598,3306,752,793,2505,894,898,932,1988,997,2086,1867,1262,3304,1319,1367],"class_list":["post-49081","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-body","tag-email","tag-emoji","tag-equation","tag-file-specification","tag-flowchart","tag-gimp","tag-graph","tag-grid","tag-guillotine","tag-html","tag-html_entity_decode","tag-line","tag-linear-eqation","tag-mathematics","tag-mind-map","tag-name","tag-overlay","tag-parabola","tag-php","tag-position","tag-programming","tag-subject","tag-substitution","tag-textarea","tag-token","tag-tutorial","tag-venn-diagram"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49081"}],"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=49081"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49081\/revisions"}],"predecessor-version":[{"id":49086,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49081\/revisions\/49086"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}