{"id":54558,"date":"2022-01-09T03:01:52","date_gmt":"2022-01-08T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54558"},"modified":"2022-01-08T19:12:57","modified_gmt":"2022-01-08T09:12:57","slug":"emoji-borders-and-backgrounds-in-inhouse-slideshow-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-in-inhouse-slideshow-tutorial\/","title":{"rendered":"Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/slideshow_emoji_new.jpg\" title=\"Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial<\/p><\/div>\n<p>Continuing on from yesterday&#8217;s <a title='Emoji Borders and Backgrounds via Emoji Menu Tutorial' href='#ebbemt'>Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/a> and harkening back to <a title='Emoji Borders and Backgrounds Image Text Parent Tutorial' href='#ebbitpt'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-parent-tutorial\/'><p>\n\u2026 the functionalities that would be \u201ccool\u201d at the HTML\/Javascript\/CSS parent side, and then work out how to implement similar functionality, as possible, in SVG, and if possible, we should be able to pass arguments over to the \u201cPHP tool\u201d to eventually code it to be standalone to help other \u201cparenting arrangements\u201d.\n<\/p><\/blockquote>\n<p> &#8230; today&#8217;s &#8220;theme&#8221; concerns the first of those <i>other \u201cparenting arrangements\u201d<\/i> mentioned above, our PHP for Inhouse Slideshow presentation display options &#8230;<\/p>\n<p><select id=\"selmode\" size=4><option value=\"Slideshow\">Slideshow<\/option><option value=\"Exif Slideshow\">Exif Slideshow<\/option><option value=\"PDF Slideshow\">PDF Slideshow<\/option><option value=\"Emoji Border Slideshow\">Emoji Border Slideshow<\/option><\/select> <\/p>\n<p> &#8230; the new &#8220;Emoji Border Slideshow&#8221; display option above calling into play our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php---GETME\">inline_svg.php<\/a> PHP tool&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\">live run<\/a> <font size=1>(&#8220;Are we there yet, as a tool, I mean &#8230; Mum &#8230; Dad &#8230; anyone?&#8221;)<\/font> web application.<\/p>\n<p>And in so doing, to use an Emoji Menu methodology of selecting your emoji border decoration is &#8220;right up your street, Inhouse Slideshow supervisor&#8221;.<\/p>\n<p>You will find, examining <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php--GETME\">PHP code<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php\">representative &#8220;first cab off the rank&#8221; and &#8220;guinea pig&#8221; live run<\/a> that we introduce a non-existant external Javascript call &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript' src='\/inhouse_slideshow.js' defer&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; into the mix.  Why?  Well, perhaps, first off, you should read some history of this &#8220;Inhouse Slideshow&#8221; project over time at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-slideshow-temporary-unzip-tutorial\/'>Inhouse Slideshow Temporary Unzip Tutorial<\/a> and then see that this &#8220;external Javascript lark&#8221; could be better for a way to &#8220;future proof&#8221; the venture, with some improvements being changeable through one (into your chosen Document Root folder, wherever that may be <font size=1>(that is what the leading &#8220;\/&#8221; infers)<\/font>) external Javascript codefile rather than a myriad number of identical PHP codefiles.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-in-inhouse-slideshow-tutorial\/'>Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbemt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds via Emoji Menu Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-via-emoji-menu-tutorial\/'>Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a id=aem target=_blank onmouseover=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\" onclick=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\"  href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds via Emoji Menu Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_control_command_space.jpg\" title=\"Emoji Borders and Backgrounds via Emoji Menu Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/p><\/div>\n<p>On this macOS MacBook Air we&#8217;re used to &#8230;<\/p>\n<p><code><br \/>\ncontrol-command-space<br \/>\n<\/code><\/p>\n<p> &#8230; bringing up an Emoji Menu from which an emoji can be selected and placed wherever the cursor had been placed before that menu display.  That could be &#8230;<\/p>\n<ul>\n<li>on an address bar where the cursor is placed<\/li>\n<li>in a Javascript prompt window that is focussed<\/li>\n<\/ul>\n<p> &#8230; both scenarios (amongst many others, no doubt) of which we will be interested with our current Emoji Borders and Background web application project.  Today&#8217;s work develops our PHP tool ahead of its supervisory web application, and so we are interested in the first scenario above, as far as testing it goes with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php---GETME\">our changed underlying<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php---GETME\">inline_svg.php<\/a> PHP tool <a target=_blank onmouseover=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\" onclick=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\"  href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_more.jpg&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines\">live run<\/a> web application.<\/p>\n<p>The argument &#8220;text&#8221; is already catered for from yesterday but the nature of the data this $_GET[&#8216;text&#8217;] might contain had not catered for &#8230;<\/p>\n<ul>\n<li>unicode data (via Emoji Menus) &#8230; but rather <font color=blue>had catered for<\/font> &#8230;<\/li>\n<li>Javascript call of String.fromCodePoint(<font color=blue>[comma separated list of HTML Decimal Entity(s)]<\/font>);<\/li>\n<\/ul>\n<p> &#8230; only, as of yesterday&#8217;s <a title='Emoji Borders and Backgrounds Image Text PHP SVG Tutorial' href='#ebbitphpsvgt'>Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/a>.  As you would probably concur, yesterday&#8217;s setup was quite user unfriendly, as so many of us now are used to those Emoji Menus being used to fill in your emoji data requirements.<\/p>\n<p>The main gist of the PHP code changes goes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$innards='';<br \/>\n$preinnards='';<br \/>\n<br \/>\nfunction ingp($m) { \/\/ thanks to <a target=_blank title='https:\/\/pretagteam.com\/question\/how-do-i-convert-unicode-special-characters-to-html-entities' href='https:\/\/pretagteam.com\/question\/how-do-i-convert-unicode-special-characters-to-html-entities'>https:\/\/pretagteam.com\/question\/how-do-i-convert-unicode-special-characters-to-html-entities<\/a><br \/>\n global $innards, $preinnards;<br \/>\n if ($innards != '') {<br \/>\n$entity = preg_replace_callback('\/[\\x{80}-\\x{10FFFF}]\/u', function ($m) {<br \/>\n    $char = current($m);<br \/>\n    $utf = iconv('UTF-8', 'UCS-4', $char);<br \/>\n    return sprintf(\"&#x%s;\", ltrim(strtoupper(bin2hex($utf)), \"0\"));<br \/>\n}, $innards);<br \/>\n$preinnards=htmlentities($entity);<br \/>\n$innards='';<br \/>\n }<br \/>\n}<br \/>\n<br \/>\n\/\/ And then later <font color=blue>we change<\/font> ...<br \/>\nif (isset($_GET['insvg'])) {<br \/>\n  $innards=str_replace('+',<font color=blue>''<\/font>,urldecode($_GET['insvg']));<br \/>\n  <font color=blue>if (trim(str_replace(',','',str_replace('0','',str_replace('1','',str_replace('2','',str_replace('3','',str_replace('4','',str_replace('5','',str_replace('6','',str_replace('7','',str_replace('8','',str_replace('9','',$innards)))))))))))) != '') {<br \/>\n  ingp($innards);<br \/>\n  }<br \/>\n  if ($preinnards == '') {<\/font><br \/>\n  $preinnards='&amp;#' . str_replace(',',';&amp;#',$innards) . ';';<br \/>\n  <font color=blue>}<\/font><br \/>\n\/\/ rest of if block code uses $preinnards as SVG text innerHTML ... but UTF-16 Surrogate pair scenarios can fail<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-via-emoji-menu-tutorial\/'>Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbitphpsvgt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Image Text PHP SVG Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-php-svg-tutorial\/'>Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank onmouseover=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\" onclick=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\"  href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Image Text PHP SVG Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_more.jpg\" title=\"Emoji Borders and Backgrounds Image Text PHP SVG Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/p><\/div>\n<p>To add to yesterday&#8217;s <a title='Emoji Borders and Backgrounds Image Text Parent Tutorial' href='#ebbitpt'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a> today it is &#8220;PHP tool&#8221; work catching up <font color=blue>so as to say<\/font> &#8230;<\/p>\n<ul>\n<li>emoji border &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>emoji background &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>centralized text (in foreground) &#8230; now with wording control via HTML span contenteditable=true elements &#8230; <strike style=color:blue;>not yet <\/strike>argumented to PHP tool <font color=blue><br \/>\n&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['text'])) {<br \/>\n     $txt=str_replace(\"\\n\",\"&lt;br&gt;\", str_replace('&amp;nbsp;',' ',str_replace('+', ' ', urldecode($_GET['text']))));<br \/>\n     $minus30=($w \/ 2.0) - strlen(explode('&lt;br&gt;', $txt)[0]) * 3.1;<br \/>\n     $top30=($h \/ 2.0) + 25 - (sizeof(explode('&lt;br&gt;', $txt)) * 8);<br \/>\n     $lines=explode('&lt;br&gt;', $txt);<br \/>\n     for ($il=0; $il&lt;sizeof($lines); $il++) {<br \/>\n       $textcontent.='&lt;text x=\"' . $minus30 . '\" y=\"' . $top30 . '\"&gt;' . $lines[$il] . '&lt;\/text&gt;';<br \/>\n       $top30+=15;<br \/>\n     }<br \/>\n} else if (isset($_POST['text'])) {<br \/>\n     $txt=str_replace(\"\\n\",\"&lt;br&gt;\", str_replace('&amp;nbsp;',' ',str_replace('+', ' ', urldecode($_POST['text']))));<br \/>\n     $minus30=($w \/ 2.0) - strlen(explode('&lt;br&gt;', $txt)[0]) * 3.1;<br \/>\n     $top30=($h \/ 2.0) + 25 - (sizeof(explode('&lt;br&gt;', $txt)) * 8);<br \/>\n     $lines=explode('&lt;br&gt;', $txt);<br \/>\n     for ($il=0; $il&lt;sizeof($lines); $il++) {<br \/>\n       $textcontent.='&lt;text x=\"' . $minus30 . '\" y=\"' . $top30 . '\"&gt;' . $lines[$il] . '&lt;\/text&gt;';<br \/>\n       $top30+=15;<br \/>\n     }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n<\/font><\/li>\n<li>centralized image (in foreground) &#8230; including some width and height control &#8230; argumented to PHP tool<\/li>\n<\/ul>\n<p> &#8230; via a new &#8220;text&#8221; argument arranged for the PHP and in readiness for some more aesthetic improvements in the display side of things with our emoji borders and backgrounds <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php--GETME\">changed underlying<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php--GETME\">inline_svg.php<\/a> PHP tool <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_more.jpg&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines\">live run<\/a> web application (<a href='#ebb'>or in iframe<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-parent-tutorial\/'>New Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbitpt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Image Text Parent Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-parent-tutorial\/'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Image Text Parent Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background_more.jpg\" title=\"Emoji Borders and Backgrounds Image Text Parent Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Image Text Parent Tutorial<\/p><\/div>\n<p>Today&#8217;s work continues on from yesterday&#8217;s <a title='Emoji Borders and Backgrounds for Image Tutorial' href='#ebbit'>Emoji Borders and Backgrounds for Image Tutorial<\/a> combining both &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php-GETME\">inline_svg.php<\/a> underlying PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\">live run<\/a> (<a href='#ebb'>or in iframe<\/a>) &#8230; modelled under &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html--GETME\" title=\"emoji_border_background.html\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html--GETME\">emoji_border_background.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\">HTML Parent<\/a><\/li>\n<\/ul>\n<p> &#8230; partnership during testing.  Our final aim is to make the &#8220;underlying PHP&#8221; a proper standalone tool, but &#8220;that&#8217;s a ways off&#8221;, as they say.  Why this extra level of complication?  It&#8217;s easier to &#8230;<\/p>\n<ul>\n<li>see<\/li>\n<li>test<\/li>\n<li>debug (via web browser web inspectors)<\/li>\n<\/ul>\n<p> &#8230; the functionalities that would be &#8220;cool&#8221; at the HTML\/Javascript\/CSS parent side, and then work out how to implement similar functionality, as possible, in SVG, and if possible, we should be able to pass arguments over to the &#8220;PHP tool&#8221; to eventually code it to be standalone to help other &#8220;parenting arrangements&#8221;.<\/p>\n<p>And so, today, we &#8220;get functional&#8221; the combination of parental control through to PHP SVG child display &#8230;<\/p>\n<blockquote><p>\nOptionally enter an image URL ( as needs be, suffix by &#038;width=[preferredWidth]&#038;height=[preferredHeight] and\/or &#038;background=y ) and\/or # prefixed comma separated list of emoji HTML decimal Entity(s) ( eg. #127462,127465 ) ?  Cancel if it is wording you want to change to the left there.\n<\/p><\/blockquote>\n<ul>\n<li>emoji border &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>emoji background &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>centralized text (in foreground) &#8230; now with wording control via HTML span contenteditable=true elements &#8230; not yet argumented to PHP tool<\/li>\n<li>centralized image (in foreground) &#8230; including some width and height control &#8230; argumented to PHP tool<\/li>\n<\/ul>\n<p><code><br \/>\n function ask(sois) {<br \/>\n   var huhi=prompt('Optionally enter an image URL ( as needs be, suffix by &width=[preferredWidth]&height=[preferredHeight] and\/or &background=y ) and\/or # prefixed comma separated list of emoji HTML decimal Entity(s) ( eg. #127462,127465 ) ?  Cancel if it is wording you want to change to the left there.','');<br \/>\n   if (huhi == null) { huhi=''; }<br \/>\n   if (huhi.trim() != '') {<br \/>\n     if (document.URL.indexOf('rjmprogramming.com.au') == -1 && sois.title.indexOf('rjmprogramming.com.au') != -1) {<br \/>\n       sois.title=document.URL.substring(0,8) + document.URL.substring(8).split('\/')[0] + sois.title.split('rjmprogramming.com.au')[1];<br \/>\n     }<br \/>\n     if (huhi.indexOf('#') != -1) {<br \/>\n       var huhis=huhi.split('#')[1];<br \/>\n       for (var ihuhis=0; ihuhis&lt;huhis.length; ihuhis++) {<br \/>\n         if (eval('' + ihuhis) &lt; eval('' + huhis.length)) {<br \/>\n           if (huhis.substring(ihuhis).substring(0,1).replace('0','').replace('1','').replace('2','').replace('3','').replace('4','').replace('5','').replace('6','').replace('7','').replace('8','').replace('9','').replace(',','') != '') {<br \/>\n            huhi=huhi.replace('#' + huhis.split(huhis.substring(ihuhis).substring(0,1))[0], '');<br \/>\n            huhis=huhis.split(huhis.substring(ihuhis).substring(0,1))[0];<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       if (huhis == '') {<br \/>\n         if (sois.title.indexOf('?insvg=') != -1) {<br \/>\n           sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'');<br \/>\n         } else if (sois.title.indexOf('&insvg=') != -1) {<br \/>\n           sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'');<br \/>\n         }<br \/>\n       } else if (sois.title.indexOf('?insvg=') != -1) {<br \/>\n         sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'?insvg=' + encodeURIComponent(huhis));<br \/>\n       } else if (sois.title.indexOf('&insvg=') != -1) {<br \/>\n         sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'&insvg=' + encodeURIComponent(huhis));<br \/>\n       } else if (sois.title.indexOf('?') != -1) {<br \/>\n         sois.title=sois.title.replace('?','?insvg=' + encodeURIComponent(huhis) + '&');<br \/>\n       } else {<br \/>\n         sois.title=sois.title.split('#')[0] + '?insvg=' + encodeURIComponent(huhis);<br \/>\n       }<br \/>\n     }<br \/>\n     if (huhi.split('&')[0].split('#')[0].trim() != '') {<br \/>\n       if (sois.title.indexOf('?image=') != -1) {<br \/>\n         sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');<br \/>\n       } else if (sois.title.indexOf('&image=') != -1) {<br \/>\n         sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');<br \/>\n       }<br \/>\n       sois.title+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');<br \/>\n     } else if (sois.title.indexOf('?image=') != -1) {<br \/>\n       sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');<br \/>\n     } else if (sois.title.indexOf('&image=') != -1) {<br \/>\n       sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');<br \/>\n     }<br \/>\n     document.getElementById(sois.id.replace('span','if')).src=sois.title; \/\/+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function snapshot(sio) {<br \/>\n   lastih=sio.innerHTML;<br \/>\n   lastio=-1;<br \/>\n   for (var iuh=0; iuh&lt;cds.length; iuh++) {<br \/>\n     if (lastih == cds[iuh]) {  lastio=iuh; } else if (sio.innerHTML.indexOf(' of ') != -1) { if (lastih.split(' of ')[0] == cds[iuh].split(' of ')[0]) {  lastio=iuh;    }    }<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function newwords(sio) {<br \/>\n   if (lastih != sio.innerHTML && lastio &gt;= 0) {<br \/>\n     cds[lastio]=sio.innerHTML.replace(\/\\&nbsp\\;\/g,' ').replace(\/\\&lt;br\\&gt;\/g,String.fromCharCode(10));<br \/>\n     var documentURL=document.URL.split('#')[0].split('?arr' + lastio + '=')[0].split('&arr' + lastio + '=')[0];<br \/>\n     location.href=(documentURL + '&arr' + lastio + '=' + encodeURIComponent(cds[lastio])).replace('.html&','.html?').replace('.htm&','.htm?');       \/\/ fancystuff();<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-parent-tutorial\/'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a>.<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='ebbit'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds for Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-for-image-tutorial\/'>Emoji Borders and Backgrounds for Image Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Emoji Borders and Backgrounds for Image Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds for Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_image.jpg\" title=\"Emoji Borders and Backgrounds Context Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>Yesterday's <a title='Emoji Borders and Backgrounds Context Tutorial' href='#ebbct'>Emoji Borders and Backgrounds Context Tutorial<\/a> involved Emoji Borders and Backgrounds around some Text, and hosted the SVG producing PHP with an HTML\/Javascript\/CSS parent webpage, but today we're diving back into <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php-GETME\" title=\"inline_svg.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php-GETME\">inline_svg.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\">live run<\/a> to allow for the bordered or backgrounded content be an image, staying within the SVG itself that the PHP code produces.<\/p>\n\n\n\n\n\n<p>When image content becomes involved it might be best for you to see for yourself, below, how this new functionality might be used ...<\/p>\n\n\n\n\n\n<table style='width:100%;'>\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&width=260&height=260' title='Tutorial Picture bordered by Doves of Peace (width=260=height) ... http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&width=260&height=260'>Tutorial Picture bordered by Doves of Peace (width=260=height)<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&width=260&height=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&widZth=260&heigZht=260' title='Tutorial Picture bordered by Doves of Peace ... http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&widZth=260&heigZht=260'>Tutorial Picture bordered by Doves of Peace<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&widZth=260&heigZht=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&inZsvg=128330&widZth=260&heigZht=260' title='Tutorial Picture ... \"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&inZsvg=128330&widZth=260&heigZht=260'>Tutorial Picture<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&inZsvg=128330&widZth=260&heigZht=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insZvg=128330&width=260&height=260' title='Tutorial Picture (width=260=height) ... http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insZvg=128330&width=260&height=260'>Tutorial Picture (width=260=height)<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insZvg=128330&width=260&height=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html-GETME\" title=\"emoji_border_background.html\">Yesterday's changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html-GETME\">emoji_border_background.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\">HTML Parent<\/a> now Allows for an Image in SVG<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:880px;'><iframe style='width:100%;height:880px;' src=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\" title=\"emoji_border_background.html\"><\/iframe><\/td>\n\n<\/tr>\n\n\n<\/table>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-for-image-tutorial\/'>Emoji Borders and Backgrounds for Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbct'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Context Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-context-tutorial\/'>Emoji Borders and Backgrounds Context Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Context Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.jpg\" title=\"Emoji Borders and Backgrounds Context Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Context Tutorial<\/p><\/div>\n<p>It&#8217;s all fine and good creating the Emoji Borders and Backgrounds of yesterday&#8217;s <a title='Emoji Borders and Backgrounds Primer Tutorial' href='#ebbpt'>Emoji Borders and Backgrounds Primer Tutorial<\/a>, but it&#8217;s the context of their use that we are starting to take an interest in with today&#8217;s &#8230;<\/p>\n<ol>\n<li>take yesterday&#8217;s <a href='#emtable'>table<\/a> as a starting bit to our &#8230;<\/li>\n<li>&#8220;making use of&#8221; &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html_GETME\" title=\"emoji_border_background.html\">emoji_border_background.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\">live run<\/a> link for you to contextualize and make use of those table&#8217;s iframe contents from yesterday &#8230;<br \/>\n<iframe id=ebb style='width:100%;height:800px;' src='http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html'><\/iframe>\n<\/li>\n<\/ol>\n<p> &#8230; as we figure out, perhaps, some better &#8220;tool like generics&#8221; here.  We&#8217;ll see <font size=1>(we hope)<\/font>!<\/p>\n<p>But, so far, how would we assess the approach, here?  Well, what we had to do today reminded us a lot of what we do here, often, at this blog, when we talk about <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/\/tag\/overlay\">&#8220;overlay&#8221;<\/a> webpage design approaches.  CSS <i>position:absolute<\/i> and <i>opacity<\/i> and Javascript [element].<i>getBoundingClientRect()<\/i> all made guest appearances!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-context-tutorial\/'>Emoji Borders and Backgrounds Context Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbpt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-primer-tutorial\/'>Emoji Borders and Backgrounds 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\/inline_svg.php?insvg=127931\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.jpg\" title=\"Emoji Borders and Backgrounds Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Primer Tutorial<\/p><\/div>\n<p>Time for a new project into the new year.   It&#8217;s an &#8220;old chestnut&#8221; project, for us.   Being able to handle &#8230;<\/p>\n<ul>\n<li>borders made up of emoji images (in the form of &#8220;image\/svg+xml&#8221; mimetype data)<\/li>\n<li>backgrounds made up of emoji images (in the form of &#8220;image\/svg+xml&#8221; mimetype data)<\/li>\n<\/ul>\n<p> &#8230; via &#8220;proof of concept&#8221; (at least for our &#8220;Primer&#8221; tutorial start) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php_GETME\">inline_svg.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=127931\" title=\"Click picture\">single violin emoji<\/a> or &#8230;<\/p>\n<table id=emtable>\n<tr>\n<th>Description<\/th>\n<th>Iframe<\/th>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'><span id=spanone title=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128330&#038;width=260\">Line of Doves of Peace Emojis<\/span><\/td>\n<td><iframe id=ifone  src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128330&#038;width=260\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'><span id=spantwo title=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128646&#038;width=260&#038;height=120\">Border of Train Emojis<\/span><\/td>\n<td><iframe id=iftwo  src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128646&#038;width=260&#038;height=120\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'><span id=spanthree title=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=127462,127465&#038;width=260&#038;height=120&#038;background=\">Background Flag of Andorra Emojis<\/span><\/td>\n<td><iframe  id=ifthree src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=127462,127465&#038;width=260&#038;height=120&#038;background=\"><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p>Cute, huh?!<\/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='#d54474' onclick='var dv=document.getElementById(\"d54474\"); 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='d54474' 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='#d54500' onclick='var dv=document.getElementById(\"d54500\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/context\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54500' 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='#d54503' onclick='var dv=document.getElementById(\"d54503\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54503' 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='#d54526' onclick='var dv=document.getElementById(\"d54526\"); 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='d54526' 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='#d54533' onclick='var dv=document.getElementById(\"d54533\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/argument\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54533' 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='#d544548' onclick='var dv=document.getElementById(\"d54548\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/menu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54548' 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='#d54558' onclick='var dv=document.getElementById(\"d54558\"); 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='d54558' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Continuing on from yesterday&#8217;s Emoji Borders and Backgrounds via Emoji Menu Tutorial and harkening back to Emoji Borders and Backgrounds Image Text Parent Tutorial&#8216;s &#8230; \u2026 the functionalities that would be \u201ccool\u201d at the HTML\/Javascript\/CSS parent side, and then work &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-in-inhouse-slideshow-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":[1885,126,161,2105,281,367,385,2208,576,587,590,3101,652,770,2732,876,894,932,1988,997,1986,1151,1226,3889,1238,1254,1319,1404,2099,1480],"class_list":["post-54558","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-argument","tag-background","tag-border","tag-context","tag-css","tag-dropdown","tag-emoji","tag-getboundingclientrect","tag-html","tag-iframe","tag-image","tag-inhouse","tag-javascript","tag-menu","tag-mimetype","tag-opacity","tag-overlay","tag-php","tag-position","tag-programming","tag-proof-of-concept","tag-slideshow","tag-svg","tag-svgxml","tag-table","tag-text","tag-tutorial","tag-web-browser","tag-web-inspector","tag-xml"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54558"}],"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=54558"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54558\/revisions"}],"predecessor-version":[{"id":54566,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54558\/revisions\/54566"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=54558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=54558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=54558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}