{"id":67135,"date":"2025-02-24T03:01:00","date_gmt":"2025-02-23T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=67135"},"modified":"2025-02-24T15:10:55","modified_gmt":"2025-02-24T05:10:55","slug":"wordpress-emoji-menu-screen-resize-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-screen-resize-tutorial\/","title":{"rendered":"WordPress Emoji Menu Screen Resize Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Emoji Menu Screen Resize Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_wp_menu_resize.gif\" title=\"WordPress Emoji Menu Screen Resize Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">WordPress Emoji Menu Screen Resize Tutorial<\/p><\/div>\n<p>Occasionally resizing, and we include in here &#8220;pinching&#8221; and &#8220;stretching&#8221; mobile platform gestures, presents situations you don&#8217;t feel like you can <a target=\"_blank\" href='https:\/\/www.google.com\/search?q=let+go+through+to+the+keeper&#038;oq=let+go+through+to+the+keeper&#038;gs_lcrp=EgZjaHJvbWUyCggAEEUYFhgeGDkyCAgBEAAYFhgeMggIAhAAGBYYHjINCAMQABiGAxiABBiKBTINCAQQABiGAxiABBiKBTINCAUQABiGAxiABBiKBTIKCAYQABiiBBiJBdIBCDY3OTNqMGo0qAIAsAIB&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">&#8220;let go through to the keeper&#8221;<\/a> coding and testing web applications on a web browser.<\/p>\n<p>Our recent Emoji Menu work, with its &#8220;onclick scenario&#8221; inhouse webpages, as talked about with <a title='WordPress Emoji Menu Revamp Tutorial' href='#wpemrt'>WordPress Emoji Menu Revamp Tutorial<\/a>, is a case in point for us.  It used to be that zooming in left unused webpage &#8220;real estate&#8221; to the right and bottom, and we thought we could improve on that.<\/p>\n<p>What gets you to an intervention point with web browser screen resizing?  There may be some <i>window<\/i> object method, but we usually apply an &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Event onresize information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onresize.asp' rel=\"noopener\"><i>onresize<\/i><\/a> &#8230; <font color=purple>event call<\/font>, and <font color=blue>event code<\/font> &#8230; to &#8230;<\/li>\n<li><i>document.body<\/i> &#8230; along with some <font color=magenta><i>onload<\/i><\/font> event timed interventions, to help, as well &#8230;<br \/>\n<code><br \/>\n&lt;head&gt;<br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n   <font color=magenta>var sw=0;<br \/>\n   var sh=0;<br \/>\n   var rectis=null;<br \/>\n   var ifb='ifblank';<\/font><br \/>\n<br \/>\n   function donow() {<br \/>\n    document.getElementById('myHeader').innerHTML=sbitis;<br \/>\n    <font color=magenta>sw=eval('' + screen.width);<br \/>\n    sh=eval('' + screen.height);<br \/>\n    rectis=document.getElementById('ifblank').<a target=\"_blank\" title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect' rel=\"noopener\">getBoundingClientRect<\/a>();<\/font><br \/>\n   }<br \/>\n<br \/>\n   <font color=blue>function resz() {<br \/>\n     \/\/alert('sw=' + sw + ' and now window.innerWidth=' + window.innerWidth);<br \/>\n     document.getElementById('ifblank').style.width='' + eval(eval('' + rectis.width) * eval(sw \/ window.innerWidth)) + 'px';<br \/>\n     document.getElementById('ifblank').style.height='' + eval(eval('' + rectis.height) * eval(sh \/ window.innerHeight)) + 'px';<br \/>\n   }<\/font><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body style=width:100%;height:100%; <font color=purple>onresize=resz(); <\/font><font color=magenta>onload=donow(); <\/font>title=\"Double click in blank option toggles between displaying web application to right (as now) or in new window.\" ondblclick=fliptog();&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; where, as you can surmise, we actually did some work to understand the behaviour of <a target=\"_blank\" title='window.innerWidth information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_innerwidth.asp' rel=\"noopener\">window.innerWidth<\/a> and <a target=\"_blank\" title='window.innerHeight information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_innerheight.asp' rel=\"noopener\">window.innerHeight<\/a> and we were gobsmacked when they got smaller when the webpage became bigger (ie. zooming in).  In the meantime, on this MacBook Air&#8217;s web browser <a target=\"_blank\" title='screen.width information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_screen_width.asp' rel=\"noopener\"><i>screen.width<\/i><\/a> and <a target=\"_blank\" title='screen.height information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_screen_height.asp' rel=\"noopener\"><i>screen.height<\/i><\/a> remained unchanged during our tests, and so it tweaked with us that using them all together can determine dpi (dots per inch) resolution aspects, and that we could better use the resized screen better via those &#8230;<\/p>\n<p><code><br \/>\n     document.getElementById('ifblank').style.width='' + eval(eval('' + rectis.width) * eval(sw \/ window.innerWidth)) + 'px';<br \/>\n     document.getElementById('ifblank').style.height='' + eval(eval('' + rectis.height) * eval(sh \/ window.innerHeight)) + 'px';<br \/>\n<\/code><\/p>\n<p> &#8230; recalculations of the hosted HTML iframe element dimensions we&#8217;re now using to the right of the dropdown Emoji Menu in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.html----GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.html----GETME\" rel=\"noopener\">emoji_widget_idea.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.htm\" rel=\"noopener\">standalone Emoji Menu<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-screen-resize-tutorial\/' rel=\"noopener\">WordPress Emoji Menu Screen Resize Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpemrt'>Previous relevant <a target=\"_blank\" title='WordPress Emoji Menu Revamp Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-revamp-tutorial\/' rel=\"noopener\">WordPress Emoji Menu Revamp 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\/emoji_widget_idea.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Emoji Menu Revamp Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_wp_menu_revamp.gif\" title=\"WordPress Emoji Menu Revamp Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">WordPress Emoji Menu Revamp Tutorial<\/p><\/div>\n<p>We really like HTML <a target=\"_blank\" title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' rel=\"noopener\">iframe<\/a> usage around here.  In terms of &#8230;<\/p>\n<blockquote><p>\nSoftware Need Not Be Hard\n<\/p><\/blockquote>\n<p> &#8230; being our company byline, they tick a lot of boxes.  You&#8217;ll read online, though, issues with security and whatnot regarding them, so, as with all these matters, it is better to read around.  However, if you intend building up lots of web applications in your domain, online, HTML iframe elements &#8230;<\/p>\n<ol>\n<li>allow for chance to modularize &#8230;<\/li>\n<li>without it, necessarily, looking clunky &#8230; as well as &#8230;<\/li>\n<li>is a means to introduce <i>onload<\/i> event logic not tied to document.body <i>onload<\/i> event &#8230; like a chance to &#8220;reset&#8221; &#8230; as well as &#8230;<\/li>\n<li>can be a means, what we like to call <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Client+Pre-emptive+Iframe\" rel=\"noopener\">&#8220;Client Pre-emptive Iframe&#8221;<\/a> thinking, to test for the existence of a URL &#8230; as well as &#8230;<\/li>\n<li>the HTML iframe name attribute can tee up with second argument of <font size=1>Javascript<\/font> <a target=\"_blank\" href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools' rel=\"noopener\">window.open<\/a> to think of &#8220;<font size=1>the dreaded<\/font> popup window actually being <font size=1>the more acceptable<\/font> iframe window (relatively speaking)<\/font>&#8221; &#8230; as well as &#8230;<\/li>\n<li>the HTML iframe <i>src<\/i> attribute is a good Javascript DOM access point to use an iframe when you know the URL &#8230; versus &#8230;<\/li>\n<li>the HTML iframe <i>srcdoc<\/i> attribute is a good Javascript DOM access point to use an iframe when you know the content<\/li>\n<\/ol>\n<p>Hence, iframe usage got front and centre when thinking on how to revamp the Emoji Menu arrangements, at this blog, talked about at <a title='WordPress Emoji Menu Primer Tutorial' href='#wpempt'>WordPress Emoji Menu Primer Tutorial<\/a>.  That old arrangement opened new (second <i>_blank<\/i> arguments to window.open) to new windows, only, and felt a bit over the top, to us, especially because these Emoji Menus predominantly showcased Inhouse Web Applications.  Why not, at least, involve HTML iframe elements into the mix?<\/p>\n<p>That got us adjusting a WordPress <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-menu\/' rel=\"noopener\">&#8220;Emoji Menu&#8221;<\/a> <i>Page<\/i> for &#8220;clicking the Emoji Menu, here at this blog (or <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.htm\" rel=\"noopener\">in new window<\/a>), purposes&#8221; scenario and then there was <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.html---GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.html---GETME\" rel=\"noopener\">emoji_widget_idea.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.htm\" rel=\"noopener\">standalone Emoji Menu<\/a> web application we wrote for the &#8220;hovering over the Emoji Menu, here at this blog, purposes&#8221; scenario.<\/p>\n<p>We think the filling in of webpage space to the right of the Emoji Menu dropdown element is more elegant.  What do you think?<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-revamp-tutorial\/' rel=\"noopener\">WordPress Emoji Menu Revamp Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpempt'>Previous relevant <a target=\"_blank\" title='WordPress Emoji Menu Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-primer-tutorial\/' rel=\"noopener\">WordPress Emoji Menu 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\/emoji_widget_idea.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Emoji Menu Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_wp_menu.jpeg\" title=\"WordPress Emoji Menu Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">WordPress Emoji Menu Primer Tutorial<\/p><\/div>\n<p>The Emoji Menu concept mentioned in the previous <a title='Fixed Sticky Header Top Window Document Tutorial' href='#fshtwdt'>Fixed Sticky Header Top Window Document Tutorial<\/a> has been the inspiration to &#8230;<\/p>\n<ul>\n<li>add a new WordPress primary menu level &#8220;Emoji Menu&#8221; option (via the WordPress administration section&#8217;s Add Page option) &#8230; that &#8230;<\/li>\n<li>onclick calls a (WordPress) Page that is a select (dropdown) element size=9 (for non-mobile browser usefulness) whose innerHTML (ie. what you see) consists of emojis &#8230; and on a selection &#8230;<\/li>\n<li>opens into a new webpage a web application from the RJM Programming domain &#8230; similarly for the &#8230;<\/li>\n<li>onmouseover (hover (Ajax feeling functionality), for non-mobile browser usefulness) immediate display of a (smaller) select (dropdown) element directly below the &#8220;Emoji Menu&#8221; option heading &#8230; <b>facilitated<\/b> by a changed header.php coding change &#8230;<br \/>\n<code><br \/>\n\t\t\t&lt;script type=\"text\/javascript\"&gt;<br \/>\n\t\t\t<b>function donow() {<\/b><br \/>\n\t\t\tvar sbitis='&lt;select size=9 id=\"emojih\" onchange=window.open(this.value,\"_blank\");&gt;&lt;option title=\"Web Audio\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"iweb_audio\" id=\"aweb_audio\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.htm\"&gt;&amp;#128266;&lt;\/option&gt;&lt;option title=\"Square Hr Tracing\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"isquare_hr_tracing\" id=\"asquare_hr_tracing\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\"&gt;&amp;#128207;&lt;\/option&gt;&lt;option title=\"Emoji Walk Animation\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"iemoji_walk_animation\" id=\"aemoji_walk_animation\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.htm\"&gt;&amp;#127939;&amp;#127998;&amp;#8205;&amp;#9792;&amp;#65039;&lt;\/option&gt;&lt;option title=\"Fruits\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"ifruits\" id=\"afruits\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html\"&gt;&amp;#127820;&lt;\/option&gt;&lt;option title=\"Name Your Mascot\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"iname_your_mascot\" id=\"aname_your_mascot\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_your.html\"&gt;&amp;#128231;&lt;\/option&gt;&lt;option title=\"Sushi Train\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"isushi_train\" id=\"asushi_train\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.htm\"&gt;&amp;#127857;&lt;\/option&gt;&lt;option title=\"Flag Quiz\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"iflag_quiz\" id=\"aflag_quiz\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/flagquiz.htm\"&gt;&amp;#127462;&amp;#127465;&lt;\/option&gt;&lt;option title=\"Emoji Overlay\" style=\"cursor:pointer;text-decoration:none;font-size:36px;\" target=\"iemoji_overlay\" id=\"aemoji_overlay\" value=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_overlay.htm\"&gt;&amp;#128285;&lt;\/option&gt;&lt;option value=\"\" selected&gt;&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n            sbitis='&lt;iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.htm\"&gt;&lt;\/iframe&gt;';<br \/>\n\t\t\t<\/b>var isdone=0<b>, is2done=0<\/b>;<br \/>\n\t\t\tif (document.getElementsByClassName){<br \/>\n\t\t\t  var x304x = document.getElementsByClassName('page-item-304');<br \/>\n              x304x[0].onmouseover = function() { var xl=document.getElementById('x2language'); xl.style.display = 'block'; };<br \/>\n              isdone = 1;<br \/>\n\t\t\t  <b>var x46544x = document.getElementsByClassName('page-item-46575');<br \/>\n              x46544x[0].onmouseover = function() { if (this.innerHTML.replace('iframe ','select ').indexOf('select ') == -1) { this.innerHTML+=sbitis; } };<br \/>\n              is2done = 1;<\/b><br \/>\n\t\t\t} else { \/\/ IE<br \/>\n          \/\/var qis = document.getElementById(\"pick_content\").contentWindow.document;<br \/>\n          var ilis = 0;<br \/>\n          var eleis, ele2is;<br \/>\n          var lisis = document.getElementsByTagName(\"li\");<br \/>\n          while (eleis = lisis[ilis++]) {<br \/>\n                 if (eleis.className == \"page-item-304\" && isdone == 0) {<br \/>\n              eleis.onmouseover = function() { var xl=document.getElementById('x2language'); xl.style.display = 'block'; };<br \/>\n              isdone = 1;<br \/>\n                 }<br \/>\n                 <b>if (eleis.className.indexOf(\"page-item-46575\") != -1 && is2done == 0) {<br \/>\n              eleis.onmouseover = function() { var xl2=document.getElementById('emojih'); xl2.style.display = 'block'; };<br \/>\n              is2done = 1;<br \/>\n                 }<\/b><br \/>\n          }<br \/>\n            }<br \/>\n            <b>}<\/b><br \/>\n<br \/> <br \/>\n            <b>setTimeout(donow,2000);<\/b><br \/>\n<br \/>\t<br \/>\n\t\t\t&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; that HTML iframe <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.html-GETME\" title=\"emoji_widget_idea.htm\" rel=\"noopener\">emoji_widget_idea.htm<\/a> content (<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_widget_idea.htm\" title=\"Click picture\" rel=\"noopener\">live run<\/a>) preference above arising from our desire to add more flexibility to this content down the track.<\/p>\n<hr>\n<p id='fshtwdt'>Previous relevant <a target=\"_blank\" title='Fixed Sticky Header Top Window Document Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/fixed-sticky-header-top-window-document-tutorial\/' rel=\"noopener\">Fixed Sticky Header Top Window Document 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\/fixed_top.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Fixed Sticky Header Top Window Document Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_overlay.jpeg\" title=\"Fixed Sticky Header Top Window Document Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Fixed Sticky Header Top Window Document Tutorial<\/p><\/div>\n<p>The recent <a title='Fixed Sticky Header Primer Tutorial' href='#fshpt'>Fixed Sticky Header Primer Tutorial<\/a> involved &#8230;<\/p>\n<ul>\n<li>a supervisory &#8220;emoji menu&#8221; web application hosting &#8230;<\/li>\n<li>supervised iframe element hosted web applications<\/li>\n<\/ul>\n<p> &#8230; and you may think, if all this is going on with web applications on the same domain, what&#8217;s the big deal?  What could go wrong?  <font size=1>(These words always bringing a knowing chuckle around here!)<\/font><\/p>\n<p>For the most part, it&#8217;s true, there were no issues, but one &#8220;supervised iframe element hosted web application&#8221; we tried did not behave with all its functionality happening.  Lo and behold, applying a web inspector showed up an error, with a codeline (in Javascript) that went &#8230;<\/p>\n<p><code><br \/>\nmcp=parent.document.getElementById('lcp').value;<br \/>\n<\/code><\/p>\n<p> &#8230; and then we summed this up in two different strands of thought &#8230;<\/p>\n<ul>\n<li>can we write a generic external piece of Javascript called just before &lt;\/body&gt; that can pluck out lines of code, with corresponding line codes, and see if &#8220;parent.document&#8221; or &#8220;top.document&#8221; occur in them and effectively &#8220;better debug&#8221; within an errorHandler function that further examines this &#8220;null&#8221; return error &#8230; which looking into is not as easy as first optimistically envisaged &#8230; versus &#8230;<\/li>\n<li>get in there specifically with the web inspector, adjust the code of the &#8220;supervised iframe element hosted web application&#8221; and have it work being &#8230;\n<ol>\n<li>additionally supervised this way &#8230; and more importantly &#8230;<\/li>\n<li>still work the way it used to unsupervised, as ever it has worked up to now<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; via the simple (age old) paradigm, involving debugging (web applications, at the client level) via tools like (the web browser) Safari&#8217;s Web Inspector &#8230;<\/p>\n<ul>\n<li>Using Web Inspector type tools:<br \/>\n<br \/>\nIdentify the issue via &#8230;<br \/>\n<br \/>\nError line<br \/>\nError line number\n<\/li>\n<li>Using Web Inspector type tools:<br \/>\n<br \/>\nFix the issue until no errors happen\n<\/li>\n<\/ul>\n<p>And what would have been the better generic coding for a web application that may become a &#8220;supervised web application&#8221; (in different ways) into the future.<\/p>\n<table style='width:100%;'>\n<tr>\n<th>Don&#8217;t just &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n  if (window.top.document) {<br \/>\n    if (window.top.document != window.document) {<br \/>\n      document.getElementById('reout').style.height='250px';<br \/>\n      if (window.top.document != window.parent.document) {<br \/>\n        mcp=parent.document.getElementById('lcp').value;<br \/>\n        rcp=top.document.getElementById('rcp').value;<br \/>\n        lcp=top.document.getElementById('lcp').value;<br \/>\n        \/\/ more logic here<br \/>\n      } else {<br \/>\n        mcp=parent.document.getElementById('mcp').value;<br \/>\n        rcp=parent.document.getElementById('rcp').value;<br \/>\n        lcp=parent.document.getElementById('lcp').value;<br \/>\n        \/\/ more logic here<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>But <b>do<\/b> <i>&#8230;<\/i><\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n  if (<b>top.window && parent.window<\/b>) { \/\/  if (window.top.document) {<br \/>\n    <i>var plcp=parent.document.getElementById('lcp');<\/i><br \/>\n    if (window.top.document != window.document) {<br \/>\n      document.getElementById('reout').style.height='250px';<br \/>\n      if (window.top.document != window.parent.document && parent.document.getElementById('lcp')) {<br \/>\n        mcp=parent.document.getElementById('lcp').value;<br \/>\n        rcp=top.document.getElementById('rcp').value;<br \/>\n        lcp=top.document.getElementById('lcp').value;<br \/>\n        \/\/ more logic here<br \/>\n      } else if (parent.window && plcp) {<br \/>\n        mcp=parent.document.getElementById('mcp').value;<br \/>\n        rcp=parent.document.getElementById('rcp').value;<br \/>\n        lcp=parent.document.getElementById('lcp').value;<br \/>\n        \/\/ more logic here<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; in other words, check <b>window object<\/b> existence, before you <a target=\"_blank\" title='?' href='https:\/\/fistfuloftalent.com\/2015\/08\/when-you-assume.html' rel=\"noopener\">assume<\/a> <b>document object<\/b> existence, with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html------GETME\" rel=\"noopener\">emoji_slideshow.htm<\/a> part within the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.html\" rel=\"noopener\">emoji menu supervisor live run<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.html-GETME\" rel=\"noopener\">link&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.html-GETME\" rel=\"noopener\">fixed_top.html<\/a> code.<\/p>\n<hr>\n<p id='fshpt'>Previous relevant <a target=\"_blank\" title='Fixed Sticky Header Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/fixed-sticky-header-primer-tutorial\/' rel=\"noopener\">Fixed Sticky Header 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\/fixed_top.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Fixed Sticky Header Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.jpg\" title=\"Fixed Sticky Header Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Fixed Sticky Header Primer Tutorial<\/p><\/div>\n<p>Just like with the <a target=\"_blank\" title='How To series from W3schools, thanks' href='\/\/www.w3schools.com\/howto\/' rel=\"noopener\">W3schools How To series<\/a> inspired <a title='HTML and Javascript and CSS Survey Levelling Tutorial' href='#htmljcssslt'>HTML and Javascript and CSS Survey Levelling Tutorial<\/a> we have another <a target=\"_blank\" title='W3schools, thanks' href='\/\/www.w3schools.com\/' rel=\"noopener\">W3schools<\/a> inspired web application idea called <a target=\"_blank\" title='' href='https:\/\/\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_js_sticky_header' rel=\"noopener\">&#8220;Sticky Header&#8221;<\/a>.<\/p>\n<p>To quote <a target=\"_blank\" title='W3schools sticky header how to' href='https:\/\/www.w3schools.com\/howto\/howto_js_sticky_header.asp' rel=\"noopener\">W3schools<\/a> regarding the design aspects to the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fixed_top.html_GETME\" title=\"fixed_top.html\" rel=\"noopener\">fixed_top.html<\/a> &#8220;proof of concept&#8221; <a target=\"_blank\" rel=\"noopener\">web application<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/howto\/howto_js_sticky_header.asp'><p>\nOn Scroll Sticky Header<br \/>\nThe header will stick to the top when you reach its scroll position.<br \/>\nScroll back up to remove the sticky effect.\n<\/p><\/blockquote>\n<p>Which takes us to what we wanted to try as an inhouse addition to functionality.  We like emojis, as &#8220;text meets button design&#8221;.  Hence, we also like the &#8220;text&#8221; emoji being like an &#8220;a&#8221; link &#8220;button&#8221;, for two big<font size=1>gish<\/font> reasons &#8230;<\/p>\n<ul>\n<li>emoji buttons save space<\/li>\n<li>emoji buttons can look like images that can attract user attention, and be like an Internationizational improvement to your web application, given some careful consideration<\/li>\n<\/ul>\n<p> &#8230; that lead us to want to have the &#8220;Sticky Header&#8221; contain an &#8220;emoji menu&#8221; of &#8220;emoji buttons&#8221;, the &#8220;onclick&#8221; events of which show content below the &#8220;Sticky Header&#8221; in a one row table that pushes the latest content to the left of that row (so that our hashtagging logic will still see the emojis along with the latest selected content), yet allow an intrepid user venture right to &#8220;uncontrolled lands of functionality&#8221; should they wish.  <font size=1>We&#8217;re sticking left &#8230; chortle, chortle.<\/font><\/p>\n<hr>\n<p id='htmljcssslt'>Previous relevant <a target=\"_blank\" title='HTML and Javascript and CSS Survey Levelling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-levelling-tutorial\/' rel=\"noopener\">HTML and Javascript and CSS Survey Levelling 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\/parallax_example.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Levelling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.jpg\" title=\"HTML and Javascript and CSS Survey Levelling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Levelling Tutorial<\/p><\/div>\n<p>With the &#8220;terrestrial&#8221; side to Land Surveying (ie. that of the small distances kind), two &#8220;get out there and do it&#8221; skills spring to mind, those being &#8230;<\/p>\n<ul>\n<li>performing a <i>traverse<\/i> via the use of a <i>theodolite<\/i> (or &#8220;total station&#8221;) (as the web application works the mathematics of, off the field book, with the previous <a title='HTML and Javascript and CSS Survey Traverse Tutorial' href='#htmljcssstt'>HTML and Javascript and CSS Survey Traverse Tutorial<\/a>) working out the (&#8220;X&#8221;,&#8221;Y&#8221;) of 2D &#8220;life&#8221; &#8230; and today, we add to that with &#8230;<\/li>\n<li>performing a <i>levelling run<\/i> via the use of a <i>level<\/i> (or &#8220;total station&#8221;) &#8230;<\/li>\n<\/ul>\n<p> &#8230; and with today&#8217;s web application we simulate, to some degree, minus &#8220;how to level a level&#8221;, looking through the &#8220;level&#8221; viewer towards a &#8220;surveying staff&#8221; (held level and straight) on a point of something you want to know the elevation (or (3D &#8220;life&#8221;) &#8220;Z&#8221;) of in terrestrial terms, relative to known elevations you will probably want to start pointing at (the &#8220;surveying staff&#8221; being on) with your first (often a known &#8220;datum&#8221;) &#8230;<\/p>\n<ul>\n<li>Backsight &#8230; then &#8230;<\/li>\n<li>(however many Inter Sights followed by a) Foresight (and then back to Backsight, as necessary)<\/li>\n<\/ul>\n<p> &#8230; series of measurements (or &#8220;reading&#8221;) to derive &#8220;reduced levels&#8221; for each point the &#8220;surveying staff&#8221; visits.  This, in most practice, involves alternately leapfrogging (each other, at different times) &#8230;<\/p>\n<ul>\n<li>Land Surveyor recording and levelling the &#8220;level&#8221; &#8230; and a &#8230;<\/li>\n<li>Chainperson levelling and straightening the &#8220;surveying staff&#8221;<\/li>\n<\/ul>\n<p> &#8230; the &#8220;surveying staff&#8221; we simulate in our web application (somewhat) thanks to <a target=\"_blank\" title='Laser Survey Equipment' href='\/\/www.lasersurveyingequipment.com.au\/' rel=\"noopener\">Cody<\/a>.<\/p>\n<p>That&#8217;s the &#8220;what&#8221; of the web application, but what about the &#8220;how&#8221; (let alone the <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=RatKhtboq2E' rel=\"noopener\">who<\/a>)?  Here, we thank the great <a target=\"_blank\" title='Parallax information from W3schools, thanks' href='\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_parallax' rel=\"noopener\">W3schools parallax ideas<\/a>.<\/p>\n<p>The &#8220;central CSS smart&#8221; of these parallax ideas is the idea of &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  \/* Create the parallax scrolling effect *\/<br \/>\n  background-attachment: fixed;<br \/>\n  background-position: center;<br \/>\n  background-repeat: no-repeat;<br \/>\n  background-size: contain;<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>So take a look at <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.html_GETME\" title=\"parallax_example.html\" rel=\"noopener\">parallax_example.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/parallax_example.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link to see what we mean.<\/p>\n<hr>\n<p id='htmljcssstt'>Previous relevant <a target=\"_blank\" title='HTML and Javascript and CSS Survey Traverse Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-tutorial\/' rel=\"noopener\">HTML and Javascript and CSS Survey Traverse 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\/SurveyTraverse\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse Tutorial<\/p><\/div>\n<p>Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts.   The tutorial subject matter is a webpage to perform Survey Traverse calculations.   A Survey Traverse is:<\/p>\n<blockquote><p>Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:<\/p>\n<p>    Less reconnaissance and organization needed;<br \/>\n    While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;<br \/>\n    Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;<br \/>\n    Traverse networks are free of the strength of figure considerations that happen in triangular systems;<br \/>\n    Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.<\/p>\n<p>The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]<\/p><\/blockquote>\n<p>Let&#8217;s see some simple <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/' rel=\"noopener\">HTML<\/a> in action in a tutorial &#8230;<\/p>\n<p>Link to HTML &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" title='W3Schools' href='http:\/\/www.w3schools.com\/html\/' rel=\"noopener\">at W3Schools<\/a> has many tutorials.<br \/>\nLink to Survey Traverse live run &#8230; <a target=\"_blank\" title='Survey Traverse live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html' rel=\"noopener\">here<\/a>.<br \/>\nLink to Survey Traverse live run (additional Google Line Chart functionality)  <a target=\"_blank\" title='Survey Traverse live run with Google Line Chart' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php' rel=\"noopener\">here<\/a>.<br \/>\nLink to Survey Traverse information &#8230; <a target=\"_blank\" title='Survey Traverse information' href='http:\/\/en.wikipedia.org\/wiki\/Traverse_(surveying)' rel=\"noopener\">from Wikipedia from which quote above comes<\/a>.<br \/>\nLink to some downloadable HTML code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html_GETME' title='Download me' rel=\"noopener\">SurveyTraverse.html<\/a> which packages up a lot of Javascript and a little bit of CSS &#8230; or JaCvasScriptS &#8230; not sure whether this would ever catch on.<br \/>\nLink to some downloadable PHP programming code (additional Google Line Chart functionality) &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php_GETME' title='Download me' rel=\"noopener\">SurveyTraverse.php<\/a>\n<\/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='#d1271' onclick='var dv=document.getElementById(\"d1271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d1271' 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='#d46062' onclick='var dv=document.getElementById(\"d46062\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46062' 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='#d46173' onclick='var dv=document.getElementById(\"d46173\"); 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='d46173' 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='#d46195' onclick='var dv=document.getElementById(\"d46195\"); 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='d46195' 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='#d46576' onclick='var dv=document.getElementById(\"d46576\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmouseover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46576' 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='#d67003' onclick='var dv=document.getElementById(\"d67003\"); 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='d67003' 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='#d67135' onclick='var dv=document.getElementById(\"d67135\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onresize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67135' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Occasionally resizing, and we include in here &#8220;pinching&#8221; and &#8220;stretching&#8221; mobile platform gestures, presents situations you don&#8217;t feel like you can &#8220;let go through to the keeper&#8221; coding and testing web applications on a web browser. Our recent Emoji Menu &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-screen-resize-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[151,211,2365,1942,354,355,361,367,385,400,2258,1608,587,652,770,5049,1616,5115,861,870,871,1578,945,5119,967,997,1059,2079,2256,4146,4147,2506,2902,3151,5120,1319,1345,1407,1418,5114,2257,1583,4052,1826,1433,1456,3276,1498],"class_list":["post-67135","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-click","tag-dimensions","tag-document-body","tag-dom","tag-domain","tag-dpi","tag-dropdown","tag-emoji","tag-event","tag-height","tag-hover","tag-iframe","tag-javascript","tag-menu","tag-modular","tag-modularization","tag-modularize","tag-onclick","tag-onload","tag-onmouseover","tag-onresize","tag-pinch","tag-pinching","tag-popup","tag-programming","tag-resize","tag-resolution","tag-screen","tag-screen-height","tag-screen-width","tag-src","tag-srcdoc","tag-stretch","tag-stretching","tag-tutorial","tag-url","tag-web-design","tag-webpage","tag-webpage-design","tag-width","tag-window","tag-window-innerheight","tag-window-innerwidth","tag-window-open","tag-wordpress","tag-wordpress-blog","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67135"}],"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=67135"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67135\/revisions"}],"predecessor-version":[{"id":67152,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67135\/revisions\/67152"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=67135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=67135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=67135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}