{"id":63120,"date":"2024-03-23T03:01:24","date_gmt":"2024-03-22T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63120"},"modified":"2024-03-24T11:46:22","modified_gmt":"2024-03-24T01:46:22","slug":"find-english-highlighted-words-game-selection-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/find-english-highlighted-words-game-selection-tutorial\/","title":{"rendered":"Find English Highlighted Words Game Selection Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Find English Highlighted Words Game Selection Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.gif\" title=\"Find English Highlighted Words Game Selection Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Find English Highlighted Words Game Selection Tutorial<\/p><\/div>\n<p>Thinking about yesterday&#8217;s <a title='Find English Highlighted Words Game Primer Tutorial' href='#fehwgpt'>Find English Highlighted Words Game Primer Tutorial<\/a>&#8216;s first draft of a Find the Word game web application, we found it easy to pinpoint where to improve it &#8230;<\/p>\n<ul>\n<li>better informing the user when a textarea selection event detection caused an analysis of the word forwards and backwards to be analyzed &#8230; and flagging this better for them &#8230;<br \/>\n<code><br \/>\n  function preshowthesel() {<br \/>\n     if (showsel) {<br \/>\n      if (rend &gt;= 0 && rstart &gt;= 0) {<br \/>\n        if (!clickthere) {<br \/>\n          setTimeout(preshowthesel, 5000);<br \/>\n          return '';<br \/>\n        }<br \/>\n        if (isd || isg0 || isg1) {<br \/>\n        if (altsel.trim() != '' && thesel != '') {<br \/>\n        \/\/alert('here ' + document.getElementById('myta').value.indexOf(thesel) + ' ... ' + altsel)<br \/>\n        document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), hlem(altsel))));<br \/>\n        document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), lem(altsel)));<br \/>\n        } else if (altsel.trim() != '' && lastsel != '') {<br \/>\n        \/\/alert('hEre ' + document.getElementById('myta').value.indexOf(lastsel) + ' ... ' + altsel)<br \/>\n        document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel))));<br \/>\n        document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel)));<br \/>\n        } \/\/ else {<br \/>\n        \/\/alert('Why? ' + thesel);<br \/>\n        \/\/}<br \/>\n        } else if (ish) {<br \/>\n        if (eval('' + rstart) &gt; 0) {<br \/>\n        document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.substring(0,rstart).toUpperCase() + hlem(document.getElementById('myta').value.substring(rstart).substring(0, eval(eval('' + rend) - eval('' + rstart) )).toLowerCase()) + document.getElementById('myta').value.substring(rend).toUpperCase()));<br \/>\n        document.getElementById('myta').value=togglelem(document.getElementById('myta').value.substring(0,rstart).toUpperCase() + hlem(document.getElementById('myta').value.substring(rstart).substring(0, eval(eval('' + rend) - eval('' + rstart) )).toLowerCase()) + document.getElementById('myta').value.substring(rend).toUpperCase());<br \/>\n        } else {<br \/>\n        document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(hlem(document.getElementById('myta').value.substring(rstart).substring(0, eval(eval('' + rend) - eval('' + rstart) )).toLowerCase()) + document.getElementById('myta').value.substring(rend).toUpperCase()));<br \/>\n        document.getElementById('myta').value=togglelem(hlem(document.getElementById('myta').value.substring(rstart).substring(0, eval(eval('' + rend) - eval('' + rstart) )).toLowerCase()) + document.getElementById('myta').value.substring(rend).toUpperCase());<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n      altsel=' ';<br \/>\n     }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; as your starting point &#8230;\n<\/li>\n<li>parameterizations via ? and &#038; address bar URL arguments &#8230; pretty self explanatory via &#8230;<br \/>\n<code><br \/>\n   var minwordlength=location.search.split('min=')[1] ? Math.min(3,eval(decodeURIComponent(location.search.split('min=')[1].split('&')[0]))) : 3;<br \/>\n   var maxwordlength=location.search.split('max=')[1] ? eval(decodeURIComponent(location.search.split('max=')[1].split('&')[0])) : 15;<br \/>\n   var numlettersacross=location.search.split('across=')[1] ? eval(decodeURIComponent(location.search.split('across=')[1].split('&')[0])) : 76;<br \/>\n   var numlettersdown=location.search.split('down=')[1] ? eval(decodeURIComponent(location.search.split('down=')[1].split('&')[0])) : 40;<br \/>\n   var fontpixels=location.search.split('pixels=')[1] ? eval(decodeURIComponent(location.search.split('pixels=')[1].split('&')[0])) : 13;<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank title='Regional Indicator Symbol Letter A' href='https:\/\/emojipedia.org\/regional-indicator-symbol-letter-a'>regional indicator<\/a> based emoji numerical display helpers for down and diagonal user guesses &#8230; in an <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\">overlayed<\/a> textarea element &#8230; using &#8230;<br \/>\n<code><br \/>\n   var letteremojis=[], blankemojis=[], loweremojis=[], upperemojis=[];<br \/>\n<br \/>\n    var lris='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');<br \/>\n    for (var ii=0; ii&lt;lris.length; ii++) {<br \/>\n      letteremojis.push(orflag(lris[ii]));<br \/>\n      blankemojis.push(' ');  \/\/ ' ';<br \/>\n      loweremojis.push(lris[ii].toLowerCase());  \/\/ ' ';<br \/>\n      upperemojis.push(lris[ii].toUpperCase());  \/\/ ' ';<br \/>\n    }<br \/>\n<br \/>\n     function orflag(thiscc) {<br \/>\n   var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';<br \/>\n   var dri=['127462','127463','127464','127465','127466','127467','127468','127469','127470','127471','127472','127473','127474','127475','127476','127477','127478','127479','127480','127481','127482','127483','127484','127485','127486','127487'];<br \/>\n       var ccsuff='', ccchar=' ', cde='';<br \/>\n       for (var iccsuff=0; iccsuff&lt;thiscc.length; iccsuff++) {<br \/>\n         ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();<br \/>\n         ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); \/\/'&amp;#' + dri[eval('' + lri.indexOf(ccchar))] + ';';<br \/>\n         cde='.';<br \/>\n       }<br \/>\n       return ccsuff;<br \/>\n     }<br \/>\n<\/code><br \/>\n &#8230; as an ascii letter to emoji mapping mechanism &#8230; or &#8230;<\/li>\n<li>toggle the display text case for horizontal user guesses &#8230; in an <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\">overlayed<\/a> textarea element &#8230; using &#8230;<br \/>\n<code><br \/>\n   function togglelem(insg) {<br \/>\n     var outsg='';<br \/>\n     var inarr=insg.split('');<br \/>\n     for (var jin=0; jin&lt;insg.length; jin++) {<br \/>\n       if (insg.substring(jin).substring(0,1) == insg.substring(jin).substring(0,1).toLowerCase() && insg.substring(jin).substring(0,1) != insg.substring(jin).substring(0,1).toUpperCase()) {<br \/>\n         outsg+=insg.substring(jin).substring(0,1).toUpperCase();<br \/>\n       } else if (insg.substring(jin).substring(0,1) != insg.substring(jin).substring(0,1).toLowerCase() && insg.substring(jin).substring(0,1) == insg.substring(jin).substring(0,1).toUpperCase()) {<br \/>\n         outsg+=insg.substring(jin).substring(0,1).toLowerCase();<br \/>\n       } else {<br \/>\n         outsg+=insg.substring(jin).substring(0,1)<br \/>\n       }<br \/>\n     }<br \/>\n     return outsg;<br \/>\n   }<br \/>\n<\/code>\n<\/li>\n<li>add a very simple text CSS styling embellisher &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n textarea {<br \/>\n     text-shadow: -1px 1px 1px #952dff;<br \/>\n }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/li>\n<li>use the webpage title (on web browser tab) to allow a synopsis without resorting to right hand information, perhaps &#8230; via &#8230;<br \/>\n<code><br \/>\n       document.title='Score:' + document.getElementById('score').innerHTML.split('Score:')[1] + ' ... Find the Words Highlighting Game - RJM Programming - March, 2024';<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.html-GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.html-GETME\">textarea_find_words.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.html\" title=\"Click picture\">Find the Words<\/a> <a href='#ftwgame' title='Play game below'>game<\/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\/find-english-highlighted-words-game-selection-tutorial\/'>Find English Highlighted Words Game Selection Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fehwgpt'>Previous relevant <a target=_blank title='Find English Highlighted Words Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/find-english-highlighted-words-game-primer-tutorial\/'>Find English Highlighted Words Game Primer 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\/textarea_find_words.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Find English Highlighted Words Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.jpg\" title=\"Find English Highlighted Words Game Primer Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Find English Highlighted Words Game Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Event Calendar Collaboration Textarea Highlight Linking Tutorial' href='#eccthlt'>Event Calendar Collaboration Textarea Highlight Linking Tutorial<\/a> gave us an idea for an English Word Game based on the use of the  &#8220;\/usr\/share\/dict\/words&#8221; inbuilt, in our case, English, dictionary you get to look up for free on macOS and Linux web server systems.<\/p>\n<p>This highlighting within a sea of letters presented in a textarea was the framework for users to play a game highlighting &#8230;<\/p>\n<ul>\n<li>horizontally<\/li>\n<li>vertically<\/li>\n<li>diagonally<\/li>\n<\/ul>\n<p> &#8230; words in left to right or top to bottom order, or reversed, to score in our &#8220;Find the Words&#8221; game presented today.<\/p>\n<p>You might question the design here.   Highlighting within a textarea element is easy to understand for the horizontal option above, but how does it work for the other two?   Well, the textarea selection start position relative to the selection end position can differentiate between the last two options above, as well as for <i>none of the above<\/i>.  And we hope to help with some better display smarts with future releases.<\/p>\n<p>Take a look at the crucial <i>selectionchange<\/i> event logic for today&#8217;s Find the Word game &#8230;<\/p>\n<p><code><br \/>\n function handleSelection() { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/46651479\/reacting-to-selection-changes-in-an-html-textarea<br \/>\n  const activeElement = document.activeElement;<br \/>\n<br \/>\n  \/\/ Make sure this is your textarea<br \/>\n  if (activeElement && activeElement.outerHTML.indexOf('&lt;textarea') == 0) {<br \/>\n    const range = {<br \/>\n      start: activeElement.selectionStart,<br \/>\n      end: activeElement.selectionEnd<br \/>\n    };<br \/>\n    \/\/ Do something with your range<br \/>\n    if (eval('' + range.end) &gt; eval('' + range.start)) {<br \/>\n      thesel=(activeElement.value.substring(range.start).substring(0, eval(eval('' + range.end) - eval('' + range.start) )));<br \/>\n      lesssel=thesel;<br \/>\n      while (lesssel.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n        lesssel=lesssel.replace(String.fromCharCode(10), '');<br \/>\n      }<br \/>\n      complines=thesel.split(String.fromCharCode(10));<br \/>\n      \/\/diagl=eval('' + complines.length);<br \/>\n      \/\/diagl+=eval(eval(-1 + eval('' + complines.length)) * 80);<br \/>\n      \/\/document.title='' + eval('' + lesssel.length) + ' vs ' + eval(eval(eval(-1 + eval('' + complines.length)) * 80) + eval(2 - eval('' + complines.length)));<br \/>\n      if (sofar.indexOf(';' + thesel + ';') != -1) {<br \/>\n        document.title='Repeat selection ...';<br \/>\n      } else if (sofar.indexOf(';' + thesel + ';') == -1 && eval('' + complines.length) &gt;= 3 && eval('' + lesssel.length) == eval(eval(eval('' + complines.length) + eval(eval(-1 + eval('' + complines.length)) * 80)))) {<br \/>\n        \/\/ 3 goes with 163 (2x80 + 3) or 159 (2x80 - 1)<br \/>\n        \/\/ 4 goes with 244 (3x80 + 4) or 238 (3x80 - 2)<br \/>\n        \/\/ 5 goes with 325 (4x80 + 5) or 317 (4x80 - 3)<br \/>\n        icols=0;<br \/>\n        twowordstocheck=[lesssel.substring(icols).substring(0,1), lesssel.substring(icols).substring(0,1)];<br \/>\n        tworesults=['',''];<br \/>\n        for (ilines=1; ilines&lt;eval('' + complines.length); ilines++) {<br \/>\n           icols+=81;<br \/>\n           twowordstocheck[0]+=lesssel.substring(icols).substring(0,1);<br \/>\n           twowordstocheck[1]=lesssel.substring(icols).substring(0,1) + twowordstocheck[1];<br \/>\n        }<br \/>\n        document.title='Left Diagonal words ' + twowordstocheck[0] + ' and ' + twowordstocheck[1] + ' being checked ...';<br \/>\n        documenttitle='&nbsp;' + document.title;<br \/>\n        document.getElementById('results').innerHTML=documenttitle;<br \/>\n        sofar+=thesel + ';';<br \/>\n        \/\/document.getElementById('myta').style.cursor='progress';<br \/>\n        if (!showsel) { setTimeout(showthesel, 5000); }<br \/>\n        showsel=true;<br \/>\n      } else if (sofar.indexOf(';' + thesel + ';') == -1 && eval('' + complines.length) &gt;= 3 && eval('' + lesssel.length) == eval(eval(eval(-1 + eval('' + complines.length)) * 80) + eval(2 - eval('' + complines.length)))) {<br \/>\n        \/\/ 3 goes with 163 (2x80 + 3) or 159 (2x80 - 1)<br \/>\n        \/\/ 4 goes with 244 (3x80 + 4) or 238 (3x80 - 2)<br \/>\n        \/\/ 5 goes with 325 (4x80 + 5) or 317 (4x80 - 3)<br \/>\n        icols=0;<br \/>\n        twowordstocheck=[lesssel.substring(icols).substring(0,1), lesssel.substring(icols).substring(0,1)];<br \/>\n        tworesults=['',''];<br \/>\n        sofar+=thesel + ';';<br \/>\n        for (ilines=1; ilines&lt;eval('' + complines.length); ilines++) {<br \/>\n           icols+=79;<br \/>\n           twowordstocheck[0]+=lesssel.substring(icols).substring(0,1);<br \/>\n           twowordstocheck[1]=lesssel.substring(icols).substring(0,1) + twowordstocheck[1];<br \/>\n        }<br \/>\n        document.title='Right Diagonal words ' + twowordstocheck[0] + ' and ' + twowordstocheck[1] + ' being checked ...';<br \/>\n        documenttitle='&nbsp;' + document.title;<br \/>\n        document.getElementById('results').innerHTML=documenttitle;<br \/>\n        \/\/document.getElementById('myta').style.cursor='progress';<br \/>\n        if (!showsel) { setTimeout(showthesel, 5000); }<br \/>\n        showsel=true;<br \/>\n      } else if (sofar.indexOf(';' + thesel + ';') == -1 && eval('' + complines.length) &gt;= 3 && eval(-1 + eval('' + lesssel.length)) == eval(eval(eval(-1 + eval('' + complines.length)) * 80) + eval(0 * eval('' + complines.length)))) {<br \/>\n        \/\/ 6 goes with 401<br \/>\n        \/\/ 4 goes with 241<br \/>\n        icols=0;<br \/>\n        twowordstocheck=[lesssel.substring(icols).substring(0,1), lesssel.substring(icols).substring(0,1)];<br \/>\n        tworesults=['',''];<br \/>\n        sofar+=thesel + ';';<br \/>\n        for (ilines=1; ilines&lt;eval('' + complines.length); ilines++) {<br \/>\n           icols+=80;<br \/>\n           twowordstocheck[0]+=lesssel.substring(icols).substring(0,1);<br \/>\n           twowordstocheck[1]=lesssel.substring(icols).substring(0,1) + twowordstocheck[1];<br \/>\n        }<br \/>\n        document.title='Down words ' + twowordstocheck[0] + ' and ' + twowordstocheck[1] + ' being checked ...';<br \/>\n        documenttitle='&nbsp;' + document.title;<br \/>\n        document.getElementById('results').innerHTML=documenttitle;<br \/>\n        \/\/document.getElementById('myta').style.cursor='progress';<br \/>\n        if (!showsel) { setTimeout(showthesel, 5000); }<br \/>\n        showsel=true;<br \/>\n      } else if (sofar.indexOf(';' + thesel + ';') == -1 && thesel.indexOf(String.fromCharCode(10)) == -1 && eval('' + thesel.length) &gt;= 3) {<br \/>\n        \/\/alert('Horizontal word ' + eval('' + thesel.length) + ' ... ' + thesel);<br \/>\n        twowordstocheck=[lesssel, lesssel.split('').reverse().join('')];<br \/>\n        tworesults=['',''];<br \/>\n        sofar+=thesel + ';';<br \/>\n        document.title='Horizontal words ' + twowordstocheck[0] + ' and ' + twowordstocheck[1] + ' being checked ...';<br \/>\n        documenttitle='&nbsp;' + document.title;<br \/>\n        document.getElementById('results').innerHTML=documenttitle;<br \/>\n        \/\/document.getElementById('myta').style.cursor='progress';<br \/>\n        if (!showsel) { setTimeout(showthesel, 5000); }<br \/>\n        showsel=true;<br \/>\n      } else {<br \/>\n        document.title='Find the Words Highlighting Game - RJM Programming - March, 2024';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<br \/>\n document.addEventListener('selectionchange', handleSelection);<br \/>\n<\/code> <\/p>\n<p> &#8230; in our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.html_GETME\">first draft<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.html\" title=\"Click picture\">Find the Words<\/a> game you can try below &#8230;<\/p>\n<p><iframe name=ftwgame id=ftwgame style=\"width:95%;height:900px;\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_find_words.html?across=22&#038;down=20&#038;fontpixels=13&#038;wordlenmin=3&#038;wordlenmax=12\" data-onload=\"var aconto = null; aconto = (this.contentWindow || this.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.style.transform='scale(0.6)'; } }\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-event-calendar-collaboration-textarea-highlight-linking-tutorial\/'>New Event Calendar Collaboration Textarea Highlight Linking Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eccthlt'>Previous relevant <a target=_blank title='Event Calendar Collaboration Textarea Highlight Linking Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-collaboration-textarea-highlight-linking-tutorial\/'>Event Calendar Collaboration Textarea Highlight Linking 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\/events_in_month.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Event Calendar Collaboration Textarea Highlight Linking Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month_collaboration_textarea_links.gif\" title=\"Event Calendar Collaboration Textarea Highlight Linking Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Event Calendar Collaboration Textarea Highlight Linking Tutorial<\/p><\/div>\n<p>For the first time we can remember, with our Events in Month web application of yesterday&#8217;s <a title='Event Calendar Collaboration Remembering Recipient Tutorial' href='#eccrrt'>Event Calendar Collaboration Remembering Recipient Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>we&#8217;re channelling how in emails &#8220;word strings&#8221; starting with &#8220;http&#8221; become links &#8230; and so &#8230;<\/li>\n<li>in our event in month &#8220;blurb&#8221; textarea elements we allow user highlighted text containing such &#8220;http&#8221; &#8220;word strings&#8221; be opened in popup windows showing the content of those URLs, as available<\/li>\n<\/ul>\n<p>Here is the relevant Javascript we ended up with, for this &#8230;<\/p>\n<p><code><br \/>\n  var thesel='', showsel=false, lastsel='';<br \/>\n<br \/>\n  function showthesel() {<br \/>\n     var uwords=[], iuw=1, ils=0;<br \/>\n     if (showsel) {<br \/>\n      showsel=false;<br \/>\n      if (lastsel != thesel && thesel.toLowerCase().replace('https:', 'http:').indexOf('http:\/\/') &gt;= 0) {<br \/>\n        lastsel=thesel;<br \/>\n        thesel='';<br \/>\n      }<br \/>\n      if (lastsel != '' && thesel == '') {<br \/>\n        uwords=lastsel.toLowerCase().split('http');<br \/>\n        ils=eval(4 + eval('' + uwords[0].length));<br \/>\n        for (iuw=1; iuw&lt;uwords.length; iuw++) {<br \/>\n          window.open('\/\/' + lastsel.substring(ils).split('\/\/')[1].split(' ')[0].split(String.fromCharCode(10))[0].split(String.fromCharCode(13))[0], '_blank', 'top=' + eval(10 * iuw + 50) + ',left=' + eval(10 * iuw + 50) + ',width=600,height=600');<br \/>\n          ils+=eval(4 + eval('' + uwords[iuw].length));<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n function handleSelection() { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/46651479\/reacting-to-selection-changes-in-an-html-textarea<br \/>\n  const activeElement = document.activeElement;<br \/>\n<br \/>\n  \/\/ Make sure this is your textarea<br \/>\n  if (activeElement && activeElement.outerHTML.indexOf('&lt;textarea') == 0) {<br \/>\n    const range = {<br \/>\n      start: activeElement.selectionStart,<br \/>\n      end: activeElement.selectionEnd<br \/>\n    };<br \/>\n    \/\/ Do something with your range<br \/>\n    if (eval('' + range.end) &gt; eval('' + range.start)) {<br \/>\n      thesel=(activeElement.value.substring(range.start).substring(0, eval(eval('' + range.end) - eval('' + range.start) )));<br \/>\n      if (!showsel && thesel.toLowerCase().replace('https:', 'http:').indexOf('http:\/\/') &gt;= 0) {<br \/>\n        showsel=true;<br \/>\n        setTimeout(showthesel, 5000);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<br \/>\n document.addEventListener('selectionchange', handleSelection);<br \/>\n<\/code><\/p>\n<p>Also, today, we have a few CSS tweaks in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html-------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html-------GETME\">events_in_month.htm<\/a> parent of the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\">Events in Month web application<\/a>.  Feel free to try it for yourself.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Just briefly, delved into the wooooorrrrllllldddd of <i>days of the week<\/i> before 1582 debate <font size=1>&#8230; you had to be there<\/font> &#8230; and in the words of Lleyton &#8230; <font size=4>Come on!!!!<\/font>  And we came out the other side.  <a target=_blank title='?' href='https:\/\/getyarn.io\/yarn-clip\/1737ecbf-d33d-4830-baf2-7db3f1f51d5b'>Good times<\/a>!  Anyway, thanks for all the interesting discussion, which we recommend you start at with <a target=_blank href='https:\/\/aulis.org\/Calendar\/Day_of_the_Week.html' title='Thanks'>this gem<\/a>.  Anyway, we now allow dates after 1582 (after this was previously set at 1970) in all respects and dates between 0000 and 1581 only via tweaks to the address bar URL you do yourself and we just hide the day of the week string.  Otherwise &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=q0rsiC-C8hs'>this could be needed<\/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\/event-calendar-collaboration-textarea-highlight-linking-tutorial\/'>Event Calendar Collaboration Textarea Highlight Linking Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eccrrt'>Previous relevant <a target=_blank title='Event Calendar Collaboration Remembering Recipient Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-collaboration-remembering-recipient-tutorial\/'>Event Calendar Collaboration Remembering Recipient 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\/events_in_month.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Event Calendar Collaboration Remembering Recipient Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month_collaboration_remember.gif\" title=\"Event Calendar Collaboration Remembering Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Event Calendar Collaboration Remembering Recipient Tutorial<\/p><\/div>\n<p>When doing our inhouse testing for <a title='Event Calendar Collaboration Tutorial' href='#ecct'>Event Calendar Collaboration Tutorial<\/a> the other day, it got us &#8220;peeved&#8221;, shall we say.  We wanted a mechanism, with those &#8220;a&#8221; link &#8220;mailto:&#8221; emailing arrangements, of not having to fill out the email address in the &#8220;To:&#8221; field each time.  First world problem alert!  Still and all &#8230;<\/p>\n<ul>\n<li>When it comes to procedures &#8230; <\/li>\n<li>A<font size=1>aaaaarrrrgggghhhh<\/font> &#8230;<\/li>\n<li>Nuances count &#8230; regarding &#8230;<\/li>\n<li>E<font size=1>rrrrrrr<\/font> &#8230;<\/li>\n<li>Saving time &#8230;<\/li>\n<li>Saving frustration<\/li>\n<\/ul>\n<p> &#8230; resulting in the &#8220;easy to remember&#8221; acronym WANESS &#8230; we rest our cases!<\/p>\n<p>What can help here?  Well, it is a personalization &#8230; so &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Lou_Montulli'>Lou<\/a>, back from holidays, a month late &#8230; yes, well, okay &#8230; we can see you&#8217;ve put some thought into this &#8230; HTTP Cookies could be used.   Yes, <a target=_blank title='?' href='https:\/\/dev.opera.com\/articles\/web-storage\/'>Shwetank<\/a>, you&#8217;ve had your hand up some time now.  We agree, Web Storage window.<a target=_blank title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> allows for more data, so we&#8217;ll go with that, though either style of approach would work here.<\/p>\n<table>\n<tr>\n<th>Global var<font size=1>iables<\/font> initialization &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n  var defemail='', defsms='';<br \/>\n  if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         defemail=window.localStorage.getItem('eventcollaboratoremailee');<br \/>\n  }<br \/>\n  if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         defsms=window.localStorage.removeItem('eventcollaboratorsmsno');<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>Within document.body onload event logic &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n     if (document.getElementById('semail') && document.getElementById('ssms')) {<br \/>\n       document.getElementById('semail').oncontextmenu=function(){ emailaskit(); };<br \/>\n       document.getElementById('semail').ontouchmove=function(){ emailaskit(); };<br \/>\n       document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); };<br \/>\n       document.getElementById('ssms').ontouchmove=function(){ smsaskit(); };<br \/>\n       if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n         document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes';<br \/>\n         document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes';<br \/>\n       } else {<br \/>\n         document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes';<br \/>\n         document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes';<br \/>\n       }<br \/>\n     }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>Calling these two Javascript function helpers &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n  function emailaskit() {<br \/>\n    if (defemail == defemail.trim()) {<br \/>\n      defemail=defemail.trim() + ' ';<br \/>\n      var emailm=prompt('Enter default email address.', defemail.trim());<br \/>\n      if (emailm == null) { emailm=''; }<br \/>\n      if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) {<br \/>\n        defemail=emailm.trim() + ' ';<br \/>\n        if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         defemail=window.localStorage.removeItem('eventcollaboratoremailee');<br \/>\n        }<br \/>\n        window.localStorage.setItem('eventcollaboratoremailee', emailm.trim());<br \/>\n      }<br \/>\n    }<br \/>\n    defemail=defemail.trim() + ' ';<br \/>\n  }<br \/>\n  <br \/>\n  function smsaskit() {<br \/>\n    if (defsms == defsms.trim()) {<br \/>\n      defsms=defsms.trim() + ' ';<br \/>\n      var smsm=prompt('Enter default SMS number.', defsms.trim());<br \/>\n      if (smsm == null) { smsm=''; }<br \/>\n      if (smsm.trim() != '' && smsm.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').trim() == '') {<br \/>\n        defsms=smsm.trim() + ' ';<br \/>\n        if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         window.localStorage.removeItem('eventcollaboratorsmsno');<br \/>\n        }<br \/>\n        window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim());<br \/>\n      }<br \/>\n    }<br \/>\n    defsms=defsms.trim() + ' ';<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>And allow control, as well, <font color=blue>at the SMS prompt window logic<\/font> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n  function dosms() {<br \/>\n  <font color=blue>if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         defemail=window.localStorage.getItem('eventcollaboratoremailee');<br \/>\n  }<br \/>\n  if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         defsms=window.localStorage.removeItem('eventcollaboratorsmsno');<br \/>\n  }<\/font><br \/>\n  \/\/alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length));<br \/>\n  if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) &gt;= 18000) {<br \/>\n  snum=('' + prompt('Please enter SMS number to send to.  We suspect message is too long for an SMS and if you enter an email address here instead, we will try to send an email instead.  Append space(s) to remember, whatever you enter, for next time.', snum)).replace(\/^null\/g, (defemail.indexOf('@') != -1 ? defemail : (defsms != '' ? defsms : ''))   );<br \/>\n  } else {<br \/>\n  snum=('' + prompt('Please enter SMS number to send to.  Append space(s) to remember for next time.', snum)).replace(\/^null\/g, (defsms != '' ? defsms : (defemail.indexOf('@') != -1 ? defemail : '')));<br \/>\n  }<br \/>\n  if (snum == null) { snum='';  }<br \/>\n  if (snum.indexOf('@') != -1) {<br \/>\n    <font color=blue>if (snum.trim() != snum) {<br \/>\n      snum=snum.trim();<br \/>\n      if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         window.localStorage.removeItem('eventcollaboratoremailee');<br \/>\n      }<br \/>\n      window.localStorage.setItem('eventcollaboratoremailee', snum);<br \/>\n      defemail=snum;<br \/>\n    }<\/font><br \/>\n    return doemail(snum);<br \/>\n  } else if (snum.trim() != '' && snum.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').trim() == '') {<br \/>\n  \/\/alert('Snum=' + snum + '?');<br \/>\n    <font color=blue>if (snum.trim() != snum) {<br \/>\n      snum=snum.trim();<br \/>\n      if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         window.localStorage.removeItem('eventcollaboratorsmsno');<br \/>\n      }<br \/>\n      window.localStorage.setItem('eventcollaboratorsmsno', snum);<br \/>\n      defsms=snum;<br \/>\n    }<\/font><br \/>\n    var azx=top.document.getElementById('xas' + 'ms');<br \/>\n    if (azx == null) { azx=top.document.createElement(\"a\"); }<br \/>\n    \/\/if (1 == 1) {<br \/>\n   \/\/ document.getElementById('divas').appendChild(azx);<br \/>\n    \/\/} else {<br \/>\n    top.document.body.appendChild(azx);<br \/>\n   \/\/ }<br \/>\n    azx.id = 'xas' + 'ms';<br \/>\n    azx.target = \"_top\";<br \/>\n    azx.style = \"display: none\";<br \/>\n    azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()));<br \/>\n    azx.click();<br \/>\n  }<br \/>\n  return '';<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p>Also, today, we battled the logic to allow the textarea element <i>onblur<\/i> events also open the door to emailing and SMS &#8220;work in progress&#8221;.  Believe it or not, this <i>timing<\/i> change was quite difficult in  <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html------GETME\">events_in_month.htm<\/a> parent of the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\">Events in Month web application<\/a>.  Never a dull moment in web application I.T. we&#8217;d say!<\/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\/event-calendar-collaboration-remembering-recipient-tutorial\/'>Event Calendar Collaboration Remembering Recipient Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ecct'>Previous relevant <a target=_blank title='Event Calendar Collaboration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-collaboration-tutorial\/'>Event Calendar Collaboration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Event Calendar Collaboration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month_collaboration.gif\" title=\"Event Calendar PHP Bookmark Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Event Calendar Collaboration Tutorial<\/p><\/div>\n<p>The Event Calendar web application project, of <a title='Event Calendar PHP Bookmark Tutorial' href='#ecphpbt'>Event Calendar PHP Bookmark Tutorial<\/a>, from last year is worth a revisit, the reason being &#8230;<\/p>\n<ul>\n<li>it did not have a fully fleshed out collaboration or sharing set of functionalities &#8230; at the time, probably, because &#8230;<\/li>\n<li>each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous &#8220;mailto:&#8221; or &#8220;sms:&#8221; communication conduits, back to when we first tackled this project &#8230; but now &#8230;<\/li>\n<li>hashtagging parts to the &#8220;mailto:&#8221; URLs (and maybe sometimes the &#8220;sms:&#8221; URL) might cover the data length needs<\/li>\n<\/ul>\n<p> &#8230; so that this Event Calendar could be a web application at the center of a collaboration network of people working on that event organization.  Much more useful, we figure!<\/p>\n<p>Timing became really important with this integration of &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p> &#8230; communication conduit possibilities.  With its design we have to wait until the point where the user is filling in textarea elements regarding a designated &#8230;<\/p>\n<ol>\n<li>Month<\/li>\n<li>Year<\/li>\n<\/ol>\n<p> &#8230; of relevance, before we allow the email &#128231; and SMS &#128223; emoji buttons be shown. In the code &#8230;<\/p>\n<table>\n<tr>\n<th>Amended HTML h1 element static HTML to add, later shown, perhaps, <font color=blue>email &#128231; and SMS &#128223; emoji buttons<\/font> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n&lt;h1&gt;Events in Month <font color=blue>&amp;nbsp;&amp;nbsp;&lt;button style=display:none; title='Share via Email' id=semail onclick=\"doemail('');\"&gt;&amp;#128231;&lt;\/button&gt; &lt;button style=display:none; title='Share via SMS' id=ssms onclick=dosms();&gt;&amp;#128223;&lt;\/button&gt;<\/font> &lt;\/h1&gt;<br \/>\n<\/code>\n<\/td>\n<tr>\n<tr>\n<th>New static HTML div element placed to the bottom of the body element &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n&lt;div id=divas&gt;&lt;\/div&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n  var bigbih=('' + ('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'')).split('bih=')[1] ? (decodeURIComponent(('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'')).split('bih=')[1].split('&')[0]) : '';<br \/>\n  if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) {<br \/>\n    bigbih+='&lt;a target=_blank id=xae' + 'mail style=display:none; href=\"mailto:\"&gt;&lt;\/a&gt;';<br \/>\n  }<br \/>\n  if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) {<br \/>\n    bigbih+='&lt;a target=_blank id=xas' + 'ms style=display:none; href=\"sms:\"&gt;&lt;\/a&gt;';<br \/>\n  }<br \/>\n  var viatext='', smallbih='', wes=null, sparewes=null;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>On or around document.body onload event we can analyze any such location.hash hashtagging data &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n     if (bigbih.indexOf('&lt;\/he' + 'ad&gt;') != -1 || bigbih.indexOf('&lt;b' + 'o' + 'dy') != -1 || bigbih.indexOf('&lt;h' + '1') == 0) {<br \/>\n        \/\/bigbih=bigbih.replace('\" id=\"eventcalendar\"', 'margin-top:50px;\" id=\"eventcalendar\"');<br \/>\n        viatext=' (via contact at ' + ('' + new Date()) + ')';<br \/>\n        if (bigbih.indexOf('&lt;h' + '1') == 0) {<br \/>\n        smallbih=bigbih;<br \/>\n        } else {<br \/>\n        smallbih=bigbih.split('&lt;b' + 'o' + '')[1].split('&lt;\/b' + 'o' + 'd' + 'y&gt;')[0].replace(bigbih.split('&lt;b' + 'o' + '')[1].split('&lt;\/b' + 'o' + 'd' + 'y&gt;')[0].split('&gt;')[0] + '&gt;', '');<br \/>\n        }<br \/>\n        wes=windowopen('.\/events_in_month.htm','_blank','top=40,left=40,width=800,height=800');<br \/>\n        \/\/alert(bigbih);<br \/>\n        if (wes) {<br \/>\n        setTimeout(function(){<br \/>\n        wes.document.write(bigbih);<br \/>\n        }, 3000);<br \/>\n        \/\/document.body.innerHTML=bigbih;<br \/>\n        setTimeout(function(){<br \/>\n        wes.document.getElementById('semail').style.display='inline-block';<br \/>\n        wes.document.getElementById('ssms').style.display='inline-block';<br \/>\n    wes.document.getElementsByTagName('h1')[0].style.display='none';<br \/>\n    wes.document.getElementsByTagName('h3')[0].style.display='none';<br \/>\n        \/\/wes.setviatext(viatext);<br \/>\n        \/\/wes.setphpthere(' ');<br \/>\n        \/\/wes.togglewords();<br \/>\n        }, 5000);<br \/>\n        }<br \/>\n     }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>A window.open wrapper <i>windowopen<\/i> Javascript function &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n  function windowopen(poneis, ptwois, pthreeis) {<br \/>\n    document.getElementById('divas').innerHTML='&lt;iframe name=ovif id=ovif style=\"position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;\" src=\"' + poneis + '\" onload=wopencheck(this);&gt;&lt;\/iframe&gt;';<br \/>\n    \/\/document.getElementsByTagName('h1')[0].style.opacity='0.0';<br \/>\n    \/\/document.getElementsByTagName('h3')[0].style.opacity='0.0';<br \/>\n    sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif');<br \/>\n    \/\/sparewes=window.open(poneis, 'ovif');<br \/>\n    sparewes.document.write(bigbih);<br \/>\n    setTimeout(function(){<br \/>\n        sparewes.document.getElementById('semail').style.display='inline-block';<br \/>\n        sparewes.document.getElementById('ssms').style.display='inline-block';<br \/>\n        var sdem=sparewes.document.getElementById('semail').outerHTML;<br \/>\n        var sdss=sparewes.document.getElementById('ssms').outerHTML;<br \/>\n        sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,'');<br \/>\n        sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,'');<br \/>\n    sparewes.document.getElementsByTagName('h1')[0].style.display='none';<br \/>\n    sparewes.document.getElementsByTagName('h3')[0].style.display='none';<br \/>\n    sparewes.document.getElementById('dmore').innerHTML+=('&nbsp;' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + '&nbsp;' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '&lt;br&gt;');<br \/>\n        \/\/sparewes.setviatext(viatext);<br \/>\n        \/\/sparewes.setphpthere(' ');<br \/>\n        \/\/sparewes.togglewords();<br \/>\n    }, 5000);<br \/>\n    return null;<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>Is augmented by other new Javascript functions &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n  function hfanalyze() {<br \/>\n    var fio=document.getElementById('ecform');<br \/>\n    if (forceit) { forceit=false;  return true;  }<br \/>\n    var delm='?';<br \/>\n    var fioih=fio.innerHTML;<br \/>\n    var fions=fioih.split(' name=\"');<br \/>\n    var testurl=documentURL.split('?')[0].split('#')[0];<br \/>\n    \/\/alert(fions.length);<br \/>\n    for (var ijk=1; ijk&lt;fions.length; ijk++) {<br \/>\n          testurl+=delm + fions[ijk].split('\"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('\"')[0]).value.replace(\/\\?\\&gt;\/g,'? &gt;'));<br \/>\n          delm='&';<br \/>\n    }<br \/>\n    \/\/alert(testurl.length);<br \/>\n    \/\/if (eval('' + testurl.length) &lt; 750) {  return true;  }<br \/>\n    \/\/if (lastbut.value.indexOf('New') == 0 || 11 == 11) {<br \/>\n    if (22 == 22) {<br \/>\n    \/\/wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600');<br \/>\n    \/\/wo.document.write('&lt;html&gt;&lt;head&gt;' + hih.replace(\"=docum\" + \"ent.URL\", \"='\" + testurl.replace(\/\\'\/g, \"' + String.fromCharCode(39) + '\") + \"'\") + boh + '&lt;\/html&gt;');<br \/>\n    return ('&lt;html&gt;&lt;head&gt;' + hih.replace(\"=docum\" + \"ent.URL\", \"='\" + testurl.replace(\/\\'\/g, \"' + String.fromCharCode(39) + '\") + \"'\") + boh + '&lt;\/html&gt;');<br \/>\n    } else if (phpthere != '') {<br \/>\n    if (1 == 1) {<br \/>\n    postit(fio, false, testurl);<br \/>\n    } else {<br \/>\n    fio.target='phpif';<br \/>\n    fio.method='POST';<br \/>\n    fio.action='.\/events_in_month.php';<br \/>\n    if (!document.getElementById('dmore')) {<br \/>\n    document.getElementById('ddmore').innerHTML='&lt;input type=hidden id=caltitle name=caltitle value=\"' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '\"&gt;&lt;\/input&gt;&lt;input type=hidden id=phpthere name=phpthere value=\"' + phpthere + '\"&gt;&lt;\/input&gt;&lt;input type=hidden id=bigurl name=bigurl value=\"' + testurl + '\"&gt;&lt;\/input&gt;';<br \/>\n    } else {<br \/>\n    document.getElementById('dmore').innerHTML='&lt;input type=hidden id=phpthere name=phpthere value=\"' + phpthere + '\"&gt;&lt;\/input&gt;&lt;input type=hidden id=bigurl name=bigurl value=\"' + testurl + '\"&gt;&lt;\/input&gt;';<br \/>\n    }<br \/>\n    }<br \/>\n    return 'true';<br \/>\n    }<br \/>\n    return 'false';<br \/>\n  }<br \/>\n  <br \/>\n  function doemail(inidea) {<br \/>\n  var azx=document.getElementById('xae' + 'mail');<br \/>\n  if (!azx) { azx=document.createElement(\"a\"); }<br \/>\n  \/\/if (1 == 1) {<br \/>\n  \/\/document.getElementById('divas').appendChild(azx);<br \/>\n  \/\/} else {<br \/>\n  document.body.appendChild(azx);<br \/>\n  \/\/}<br \/>\n  azx.style = \"display: none\";<br \/>\n  azx.id = 'xaem' + 'ail';<br \/>\n  azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('&lt;')[0].replace(\/\\`\/g,'').replace(\/^Events\\ in\\ \/g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); \/\/encodeURIComponent(document.URL.split('#')[0] + '&lt;h2' + document.body.innerHTML.split('&lt;h2')[1]));<br \/>\n  azx.click();<br \/>\n  return '';<br \/>\n  }<br \/>\n  <br \/>\n  function dosms() {<br \/>\n  \/\/alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length));<br \/>\n  if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) &gt;= 18000) {<br \/>\n  snum=('' + prompt('Please enter SMS number to send to.  We suspect message is too long for an SMS and if you enter an email address here instead, we will try to send an email instead.', snum)).replace(\/^null\/g,'');<br \/>\n  } else {<br \/>\n  snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(\/^null\/g,'');<br \/>\n  }<br \/>\n  if (snum.indexOf('@') != -1) {<br \/>\n    return doemail(snum);<br \/>\n  } else if (snum.trim() != '') {<br \/>\n  alert('Snum=' + snum + '?');<br \/>\n    var azx=document.getElementById('xas' + 'ms');<br \/>\n    if (azx == null) { azx=document.createElement(\"a\"); }<br \/>\n    \/\/if (1 == 1) {<br \/>\n   \/\/ document.getElementById('divas').appendChild(azx);<br \/>\n    \/\/} else {<br \/>\n    document.body.appendChild(azx);<br \/>\n   \/\/ }<br \/>\n    azx.id = 'xas' + 'ms';<br \/>\n    azx.style = \"display: none\";<br \/>\n    azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()));<br \/>\n    azx.click();<br \/>\n  }<br \/>\n  return '';<br \/>\n  }<br \/>\n  <br \/>\n  function wopencheck(iois) {<br \/>\n    var aconto = null;<br \/>\n    aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n         aconto.body.innerHTML=smallbih;<br \/>\n         aconto.setviatext(viatext);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function setviatext(towhat) {<br \/>\n    viatext=towhat;<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; to help bed down this new sharing and collaboration functionality in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html----GETME\">a changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html----GETME\">events_in_month.htm<\/a> parent of the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\">Events in Month web application<\/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\/event-calendar-collaboration-tutorial\/'>Event Calendar Collaboration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ecphpbt'>Previous relevant <a target=_blank title='Event Calendar PHP Bookmark Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-php-bookmark-tutorial\/'>Event Calendar PHP Bookmark 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\/events_in_month.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Event Calendar PHP Bookmark Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/populating_events_css.jpg\" title=\"Event Calendar PHP Bookmark Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Event Calendar PHP Bookmark Tutorial<\/p><\/div>\n<p>Client meets server today, allowing the PHP data storage talents in yesterday&#8217;s <a title='Event Calendar PHP Tutorial' href='#ecphpt'>Event Calendar PHP Tutorial<\/a>&#8216;s work to meet a &#8220;clientside&#8221; <font color=brown>way to<\/font> &#8230;<\/p>\n<p><code><br \/>\nRecord to Remember<font color=brown> via Bookmark<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; use the web browser <a target=_blank title='Bookmarks on web browser information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Bookmark_(digital)'>Bookmarks<\/a> to help you recall an Events in Month report with long entries.<\/p>\n<p>Involving a Bookmark still needs those &#8220;get&#8221; ? and &#038; arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as &#8230;<\/p>\n<p><code><br \/>\nhttps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.php?exactlabel=<font color=purple>August__2023_00000__1<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; that mapping being possible, now, making use of a <i>pseudo<\/i> hashtag arrangement &#8230; your <a target=_blank title='Claytons ... the drink you are having when you are not having a drink.' href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw'><i>Clayton<\/i><\/a>&#8216;s hashtag, if you will!<\/p>\n<p>To start to use a <i>hashtag<\/i> suits, as your hashtag navigation only makes sense in the &#8220;clientside&#8221; woooorrrrrllllddd, and even there, really using one only tries to position a webpage where an element with an ID matching the hashtag sits <font size=1>(and we are never going to have this ID element in our work)<\/font>, and in the meantime we&#8217;ve passed across from the child PHP to the parent HTML a valuable piece of information helping the link to the Bookmark system be possible.  The Javascript codeline (you may have noticed) &#8230; <\/p>\n<p><code><br \/>\n  var documentURL=<font color=blue>document.URL<\/font>;<br \/>\n<\/code><\/p>\n<p> &#8230; as stupid and simple looking as it is, is crucial for us.  We get child webpage parts (like our PHP) to change <font color=blue>document.URL<\/font> to a <i>far too long in normal circumstances address bar URL<\/i> the rest of the code feeds off.  It&#8217;s just that now, that <i>far too long in normal circumstances address bar URL<\/i> has a <i>#[hashtag]<\/i> appended such as &#8230;<\/p>\n<p><code><br \/>\n#<font color=purple>August__2023_00000__1<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; uniquifying a <i>Month, Year<\/i> Events in Month identifier part with a version of the user&#8217;s IP address (so that they only see what is relevant to them).<\/p>\n<p>Address bar URLs such as &#8220;https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.php?exactlabel=<font color=purple>August__2023_00000__1<\/font>&#8221; are Bookmark<sub>able<\/sub>, and so we allow for similar outcomes with less concern about how much data is being &#8220;recorded&#8221; and recallable (via that web browser&#8217;s Bookmark system).<\/p>\n<p>Also, today, a lot of CSS tweaks, so that the CSS styling now looks like &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n #eventcalendar {<br \/>\n   background-color: #fcfcfc;<br \/>\n }<br \/>\n<br \/>\n td {<br \/>\n   padding-top: 2px;<br \/>\n   padding-left: 2px;<br \/>\n   padding-right: 2px;<br \/>\n   padding-bottom: 12px;<br \/>\n }<br \/>\n<br \/>\n .dayb {<br \/>\n   color: white;<br \/>\n   background-color: red;<br \/>\n   padding: 5 5 5 5;<br \/>\n   border-radius: 80px;<br \/>\n   margin-bottom: 15px;<br \/>\n }<br \/>\n <br \/>\n .dow {<br \/>\n   color: purple;<br \/>\n   font-style: bold;<br \/>\n }<br \/>\n <br \/>\n .selday {<br \/>\n   margin-left: 8px;<br \/>\n   background-color: rgba(255,0,0,0.7);<br \/>\n   display: inline-block;<br \/>\n   width: 50px;<br \/>\n   border-color: transparent;<br \/>\n   text-overflow: ellipsis;<br \/>\n }<br \/>\n <br \/>\n .tablurb {<br \/>\n   background: linear-gradient(to right, white, lightpink, pink);<br \/>\n }<br \/>\n <br \/>\n input[type=\"submit\"] {<br \/>\n    margin-bottom: 3px;<br \/>\n    border-radius: 180px;<br \/>\n }<br \/>\n <br \/>\n input[type=\"number\"] {<br \/>\n    margin-left: 3px;<br \/>\n    margin-right: 3px;<br \/>\n    border-radius: 180px;<br \/>\n    background-color: #f3f3f3;<br \/>\n    padding: 2 2 2 2;<br \/>\n }<br \/>\n <br \/>\n #smonth {<br \/>\n    margin-left: 3px;<br \/>\n    margin-right: 3px;<br \/>\n    border-radius: 180px;<br \/>\n    background-color: #f9f9f9;<br \/>\n    padding: 2 2 2 2;<br \/>\n }<br \/>\n <br \/>\n .boldtitle {<br \/>\n    background-color: rgba(0, 211, 107, 0.2);<br \/>\n }<br \/>\n<br \/>\n .boldtitle + .tablurb {<br \/>\n    margin-top: 8px;<br \/>\n }<br \/>\n<br \/> <br \/>\n .selhistory {<br \/>\n    border-radius: 180px;<br \/>\n    background-color: lightpink;<br \/>\n    padding: 2 2 2 2;<br \/>\n }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and we thank <a target=_blank title='Calculate Current Week Number in Javascript' href='https:\/\/www.javatpoint.com\/calculate-current-week-number-in-javascript'>this webpage<\/a> for the heads up regarding how to calculate <i>week numbers within a year<\/i> data item displays now available in &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html---GETME\">a changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html---GETME\">events_in_month.htm<\/a> parent of the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\">Events in Month web application<\/a><\/li>\n<li>helped out by its <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.php--GETME\">changed child PHP<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.php--GETME\">events_in_month.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\/event-calendar-php-bookmark-tutorial\/'>Event Calendar PHP Bookmark Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ecphpt'>Previous relevant <a target=_blank title='Event Calendar PHP Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-php-tutorial\/'>Event Calendar PHP 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\/events_in_month.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Event Calendar PHP Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month_php.jpg\" title=\"Event Calendar PHP Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Event Calendar PHP Tutorial<\/p><\/div>\n<p>Let&#8217;s face it.  Serverside PHP is just great!  It opens up so many opportunities regarding data in your web applications.<\/p>\n<p>As such, onto yesterday&#8217;s <a title='Event Calendar New Window Tutorial' href='#ecnwt'>Event Calendar New Window Tutorial<\/a> logic we now have a &#8230;<\/p>\n<p><code><br \/>\nRecord to Remember<br \/>\n<\/code><\/p>\n<p> &#8230; form submit button <font size=1>(toggling)<\/font> value to start involving PHP with those longer datasets of Event in Month descriptions, in our most recent project.  What do we use as the data conduit?  No, not a database.  No, not a serverside flat file.  No, not clientside window.localStorage nor window.sessionStorage nor HTTP Cookies.  We store long Event in Month description data in our new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.php-GETME\">events_in_month.php<\/a> PHP itself.  And this same PHP can populate options in a new dropdown element in the parent to facilitate the recalling of any relevant &#8220;Record to Remember&#8221; recordings.<\/p>\n<p>The PHP is kind of short, so we will show it below, including one <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> example of that &#8220;self storage&#8221; &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n\/\/ events_in_month.php<br \/>\n\/\/ RJM Programming<br \/>\n\/\/ August, 2023<br \/>\n\/\/ Help out events_in_month.htm<br \/>\n<br \/>\n   $hcont=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'events_in_month.htm');<br \/>\n   $cont=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'events_in_month.php');<br \/>\n   $ipad=server_remote_addr();<br \/>\n   $ipadless=$ipad;<br \/>\n   $js='';<br \/>\n<br \/>\n  function server_remote_addr() {<br \/>\n    global $ipadless;<br \/>\n    $rma = $_SERVER['REMOTE_ADDR'];<br \/>\n    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);<br \/>\n    \/\/ you can add different browsers with the same way ..<br \/>\n    $ipadless=str_replace(\".\", \"_\", str_replace(\":\", \"_\", $rma));<br \/>\n    if(preg_match('\/(chromium)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000000'.$rma;<br \/>\n    elseif(preg_match('\/(chrome)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00000'.$rma;<br \/>\n    elseif(preg_match('\/(safari)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0000'.$rma;<br \/>\n    elseif(preg_match('\/(opera)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000'.$rma;<br \/>\n    elseif(preg_match('\/(msie)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00'.$rma;<br \/>\n    elseif(preg_match('\/(mozilla)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0'.$rma;<br \/>\n    return str_replace(\".\", \"_\", str_replace(\":\", \"_\", $rma));<br \/>\n  }<br \/>\n<br \/>\n   $itdone=false;<br \/>\n   if (isset($_GET['init'])) {<br \/>\n     if (strpos($cont, '_' . $ipad . '=') !== false) {<br \/>\n       $things=explode('_' . $ipad . '=', $cont);<br \/>\n       for ($it=1; $it&lt;sizeof($things); $it++) {<br \/>\n          if ($it == 1 && !$itdone) {<br \/>\n           $itdone=true;<br \/>\n           $js.=\"\\n parent.document.getElementById('myoldsel').style.display='inline-block'; \\n\";<br \/>\n          }<br \/>\n          $js.=\"\\n parent.document.getElementById('myoldsel').innerHTML+='&lt;option value=\\\"\" . explode(\"\\n\", $things[$it])[0] . \"\\\"&gt;\" . explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[0] . ', ' . explode('_', explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[1])[0] . \"&lt;\/option&gt;'; \\n\";<br \/>\n       }<br \/>\n     }<br \/>\n     if (strpos($cont, '0' . $ipadless . '=') !== false) {<br \/>\n       $things=explode('0' . $ipadless . '=', $cont);<br \/>\n       for ($it=1; $it&lt;sizeof($things); $it++) {<br \/>\n          if ($it == 1 && !$itdone) {<br \/>\n           $itdone=true;<br \/>\n           $js.=\"\\n parent.document.getElementById('myoldsel').style.display='inline-block'; \\n\";<br \/>\n          }<br \/>\n          $js.=\"\\n parent.document.getElementById('myoldsel').innerHTML+='&lt;option value=\\\"\" . explode(\"\\n\", $things[$it])[0] . \"\\\"&gt;\" . explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[0] . ', ' . explode('_', explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[1])[0] . \"&lt;\/option&gt;'; \\n\";<br \/>\n       }<br \/>\n     }<br \/>\n     echo \"&lt;html&gt;&lt;head&gt;&lt;script type='text\/javascript'&gt; \" . $js . \" &lt;\/script&gt;&lt;\/head&gt;&lt;body&gt;&lt;p&gt;\" . $ipad . \"&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   } else if (isset($_POST['phpthere']) && isset($_POST['bigurl']) && isset($_POST['caltitle'])) {<br \/>\n \/\/file_put_contents('xz.xz', 'l');<br \/>\n     if (strpos($cont, '\/\/   ' . str_replace(' ','_',str_replace(',','_',str_replace('+',' ',urldecode($_POST['caltitle'])))) . '_' . str_replace('+',' ',urldecode($_POST['phpthere'])) . '=' . $_POST['bigurl'] . \"\\n\") === false) {<br \/>\n \/\/file_put_contents('xz.xzz', 'l');<br \/>\n     $cont=str_replace('?' . '&gt;', '\/\/   ' . str_replace(' ','_',str_replace(',','_',str_replace('+',' ',urldecode($_POST['caltitle'])))) . '_' . str_replace('+',' ',urldecode($_POST['phpthere'])) . '=' . $_POST['bigurl'] . \"\\n\" . '?' . '&gt;', $cont);<br \/>\n     file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'events_in_month.php', $cont);<br \/>\n     }<br \/>\n     if (strpos($cont, '_' . $ipad . '=') !== false) {<br \/>\n       $things=explode('_' . $ipad . '=', $cont);<br \/>\n       for ($it=1; $it&lt;sizeof($things); $it++) {<br \/>\n          if ($it == 1 && !$itdone) {<br \/>\n           $itdone=true;<br \/>\n           $js.=\"\\n parent.document.getElementById('myoldsel').style.display='inline-block'; \\n\";<br \/>\n          }<br \/>\n          $js.=\"\\n parent.document.getElementById('myoldsel').innerHTML+='&lt;option value=\\\"\" . explode(\"\\n\", $things[$it])[0] . \"\\\"&gt;\" . explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[0] . ', ' . explode('_', explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[1])[0] . \"&lt;\/option&gt;'; \\n\";<br \/>\n       }<br \/>\n     }<br \/>\n     if (strpos($cont, '0' . $ipadless . '=') !== false) {<br \/>\n       $things=explode('0' . $ipadless . '=', $cont);<br \/>\n       for ($it=1; $it&lt;sizeof($things); $it++) {<br \/>\n          if ($it == 1 && !$itdone) {<br \/>\n           $itdone=true;<br \/>\n           $js.=\"\\n parent.document.getElementById('myoldsel').style.display='inline-block'; \\n\";<br \/>\n          }<br \/>\n          $js.=\"\\n parent.document.getElementById('myoldsel').innerHTML+='&lt;option value=\\\"\" . explode(\"\\n\", $things[$it])[0] . \"\\\"&gt;\" . explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[0] . ', ' . explode('_', explode('__', explode(' ' . ' ' . ' ', $things[-1 + $it])[-1 + sizeof(explode(' ' . ' ' . ' ', $things[-1 + $it]))])[1])[0] . \"&lt;\/option&gt;'; \\n\";<br \/>\n       }<br \/>\n     }<br \/>\n \/\/file_put_contents('xz.xzzz', \"&lt;html&gt;&lt;head&gt;&lt;script type='text\/javascript'&gt; \" . $js . \"\\n parent.checkif(parent.document.getElementById('phpif')); \\n\" . \" &lt;\/script&gt;&lt;\/head&gt;&lt;body&gt;&lt;p&gt;\" . str_replace(' ','%20',str_replace('+',' ',urldecode($_POST['bigurl']))) . \"&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\");<br \/>\n     echo \"&lt;html&gt;&lt;head&gt;&lt;script type='text\/javascript'&gt; \" . $js . \"\\n parent.checkif(parent.document.getElementById('phpif')); \\n\" . \" &lt;\/script&gt;&lt;\/head&gt;&lt;body&gt;&lt;p&gt;\" . str_replace(' ','%20',str_replace('+',' ',urldecode($_POST['bigurl']))) . \"&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   } else {<br \/>\n     echo $hcont;<br \/>\n   }<br \/>\n   exit;<br \/>\n<br \/>\n\/\/<br \/>\n\/\/<br \/>\n\/\/   January__1970_00000__1=ht<font color=black>tp<\/font>:\/\/localhost:8888\/events_in_month.htm?caltitle=January%2C%201970&i01.00=&ta01.00=kgjfjhf%20jhgfjhf%20jhkgkjhg%20jhgkjhg%20jkghhg%20jkhgkjhg%20kjhgkjhg&i02.00=&ta02.00=kjhgkjh%20kjhgkjhg%20jkhgkjhg%20kjhgkjhg%20kjhgkjhg%20jhkgkjhg%20kjgkjhg&i03.00=&ta03.00=kjhgkjhg%20kjhgkjhg%20kjhgkjhg%20kjhgkjhg%20kjhgkjhg%20jhkgkjhg&i04.00=&ta04.00=&i05.00=&ta05.00=&i06.00=&ta06.00=&i07.00=&ta07.00=&i08.00=&ta08.00=&i09.00=&ta09.00=&i10.00=&ta10.00=&i11.00=&ta11.00=&i12.00=&ta12.00=&i13.00=&ta13.00=&i14.00=&ta14.00=&i15.00=&ta15.00=&i16.00=&ta16.00=&i17.00=&ta17.00=&i18.00=&ta18.00=&i19.00=&ta19.00=&i20.00=&ta20.00=&i21.00=&ta21.00=&i22.00=&ta22.00=&i23.00=&ta23.00=&i24.00=&ta24.00=&i25.00=&ta25.00=&i26.00=&ta26.00=&i27.00=&ta27.00=&i28.00=&ta28.00=&i29.00=&ta29.00=&i30.00=&ta30.00=&i31.00=&ta31.00=<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p>Yes, the parent needed <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html--GETME\">to change<\/a> for our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html--GETME\">events_in_month.htm<\/a> parent of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\">Events in Month web application<\/a> role.<\/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\/event-calendar-php-tutorial\/'>Event Calendar PHP Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ecnwt'>Previous relevant <a target=_blank title='Event Calendar New Window Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-new-window-tutorial\/'>Event Calendar New Window 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\/events_in_month.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Event Calendar New Window Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month_new_window.jpg\" title=\"Event Calendar New Window Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Event Calendar New Window Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Event Calendar Remembered Tutorial' href='#ecrt'>Event Calendar Remembered Tutorial<\/a>&#8216;s <font size=3>&#8220;Mystery Dilemma&#8221;<\/font> &#8230;<\/p>\n<blockquote><p>\nBut, there&#8217;s an inherent weakness with the design, we&#8217;ll go into more into the future.\n<\/p><\/blockquote>\n<p> &#8230; well &#8230; it&#8217;s a perennial for us, regarding how if you stick with clientside thinking, only, web applications, when the amount of data to remember starts adding up, the &#8220;get arguments approach&#8221; ( ie. use ? and &#038; arguments at the address bar ) is restricted by length restrictions regarding URL lengths.<\/p>\n<p>Rather than jump to PHP serverside ideas just yet, we wanted to show some more ideas, staying with &#8220;clientside only thinking&#8221;, today, as well as improving the UX (<a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>user experience<\/a>) and small steps forward regarding styling.<\/p>\n<p>Okay then, regarding the idea to remember an Event in Month form, when there is a lot of data, and staying &#8220;just clientside&#8221;, we&#8217;ve coded for a &#8220;New Window&#8221; idea, albeit not as memorable as the default &#8220;Remember in Bookmark&#8221; possible for your smaller datasets.  However, in saying that, we found that within this new window, with our Google Chrome web browser, we could &#8230;<\/p>\n<ol style='text-shadow:-1px 1px 1px #ff2d95;background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL(\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month_new_window_oh.jpg);background-size:contain;'>\n<li>bring up Context Menu with a right click or two finger gesture within the popup window webpage content &#8230;<\/li>\n<li>pick Inspect option &#8230;\n<\/li>\n<li>be in Elements tab of your Web Inspector &#8230; and &#8230;\n<\/li>\n<li>highlight top &lt;html&gt; tag &#8230;\n<\/li>\n<li>Context Menu with a right click or two finger gesture &#8230;\n<\/li>\n<li>pick Copy -&gt; Copy outerHTML &#8230; so that &#8230;\n<\/li>\n<li>your Event Calendar for your Events in Month choice is in a text buffer &#8230; ready for you to &#8230;\n<\/li>\n<li>Paste into a Text Editor that Events in Month webpage to store <font size=1>(perhaps in a <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> local Apache\/PHP\/mySql web server environment, where you can further look at and develop your own ideas)<\/font>\n<p><\/li>\n<\/ol>\n<p>The user is told when the switch to &#8220;New Window&#8221; compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long &#8230;<\/p>\n<p><code><br \/>\n  function formanalyze() {<br \/>\n    var fio=document.getElementsByTagName('form')[0];<br \/>\n    var delm='?';<br \/>\n    var fioih=fio.innerHTML;<br \/>\n    var fions=fioih.split(' name=\"');<br \/>\n    var testurl=documentURL.split('?')[0].split('#')[0];<br \/>\n    for (var ijk=1; ijk&lt;fions.length; ijk++) {<br \/>\n          testurl+=delm + fions[ijk].split('\"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('\"')[0]).value);<br \/>\n          delm='&';<br \/>\n    }<br \/>\n    setTimeout(formanalyze, 3000);<br \/>\n    if (eval('' + testurl.length) &gt;= 750) {<br \/>\n      if (document.getElementById('remember')) { document.getElementById('remember').value='New window';   }<br \/>\n      if (document.getElementById('rememberme')) { document.getElementById('rememberme').value='New window';   }<br \/>\n      if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value='New window';   }<br \/>\n    } else {<br \/>\n      if (document.getElementById('remember')) { document.getElementById('remember').value=document.getElementById('remember').value.replace(\/^Remember$\/g, 'Remember via Bookmark');   }<br \/>\n      if (document.getElementById('rememberme')) { document.getElementById('rememberme').value=document.getElementById('rememberme').value.replace(\/^Remember$\/g, 'Remember via Bookmark');   }<br \/>\n      if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value=document.getElementById('remembermoi').value.replace(\/^Remember$\/g, 'Remember via Bookmark');   }<br \/>\n    }<br \/>\n    return eval('' + testurl.length);<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; the form submit buttons are reworded accordingly.<\/p>\n<p>Another idea from this blog thread&#8217;s inspiration &#8230;<\/p>\n<p><img src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.jpg' style='width:100%;'><\/img><\/p>\n<p> &#8230; we&#8217;ve now addressed in today&#8217;s &#8220;second draft&#8221; is allowing for an optional bold Event Day <font size=1>Blurb<\/font> Title, available to the user via a new dropdown &#8220;Bold Title&#8221; option.<\/p>\n<p>And, how can we do more with colour, to help the right bits stand out, and be consistent?  We thought &#8230;<\/p>\n<ul>\n<li>text shadow means by which the text of Event Calendar <font color=blue>can be more impactive<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;div style=\"text-shadow:-1px 1px 1px #ff2d95;\" id=eventcalendar&gt;&lt;\/div&gt;<br \/>\n<\/code>\n<\/li>\n<li>dropdown element <font color=purple>conditional<\/font> <font color=blue>styling<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n .dayb {<br \/>\n   color: white;<br \/>\n   background-color: red;<br \/>\n   padding: 5 5 5 5;<br \/>\n }<br \/>\n<br \/> <br \/>\n .dow {<br \/>\n   color: purple;<br \/>\n   font-style: bold;<br \/>\n }<br \/>\n <br \/>\n .selday {<br \/>\n   margin-left: 8px;<br \/>\n   <font color=blue>background-color: rgba(255,0,0,0.7);<\/font><br \/>\n   display: inline-block;<br \/>\n   width: 50px;<br \/>\n }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230;<br \/>\n<code><br \/>\n          if (thislabel.substring(0,1) == 'i') {<br \/>\n             if (thisval.trim() != '') {<br \/>\n               <font color=purple>document.getElementById(thislabel.replace('i', 'sel')).style.color='white';<br \/>\n               document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red';<\/font><br \/>\n               }<br \/>\n               document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(\/\\+\/g, ' ').replace(\/\\ \\ \\ \/g, ' + '); \/\/.replace(\/\\+$\/g, ' ');<br \/>\n               document.getElementById(thislabel).value=thisval.replace(\/\\+$\/g, ' ');<br \/>\n             } else {<br \/>\n               document.getElementById(thislabel).value=thisval.replace(\/\\+\/g, ' ').replace(\/\\ \\ \\ \/g, ' + ');<br \/>\n             }<br \/>\n          }<br \/>\n<\/code>\n<\/li>\n<li>placeholder on Blurb <font color=purple>conditional existence<\/font> &#8230;<br \/>\n<code><br \/>\n     <font color=purple>var ourdata='';<\/font><br \/>\n\/\/ ...<br \/>\n     if (documentURL.indexOf('?') != -1) {<br \/>\n       <font color=purple>if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; }<\/font><br \/>\n\/\/ ...<br \/>\n       trtemplate='&lt;tr id=tr01.00&gt;&lt;td style=width:22%;&gt;&lt;span id=sone01.00 class=dow&gt;' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&lt;span id=stwo01.00 class=dayb&gt;1&lt;span onblur=sepit(this); contenteditable=true id=sp01.00&gt;&lt;\/span&gt;&lt;input type=hidden id=i01.00 name=i01.00 value=\"\"&gt;&lt;\/input&gt;&lt;select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange=\"selit(this);\" id=sel01.00&gt;&lt;option id=opt01.00 value=\"\"&gt;&lt;\/option&gt;&lt;option title=\"All such in month (ie. weekly)\" value=\"...\"&gt;...&lt;\/option&gt;&lt;option title=\"And ...\" value=\"&...\"&gt;&&lt;\/option&gt;&lt;option value=Bold&gt;Bold Title&lt;\/option&gt;&lt;option value=Clone&gt;Clone&lt;\/option&gt;&lt;\/select&gt;&lt;\/span&gt;&lt;\/td&gt;&lt;td class=blurb title=\"What is on?\" id=tb01.00&gt;&lt;span title=\"Event title\" style=\"font-style:bold;color:blue;\" id=bd01.00&gt;&lt;\/span&gt;&lt;textarea name=ta01.00 id=ta01.00 style=\"width:100%;height=100%;\" <font color=purple>' + ourdata + '<\/font>placeholder=\"Blurb ...\" class=tablurb&gt;&lt;\/textarea&gt;&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n\/\/ ...<br \/>\n       }<br \/>\n\/\/ ...<br \/>\n     }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; for our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html-GETME\">&#8220;second draft&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html-GETME\">events_in_month.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\">Events in Month web application<\/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\/event-calendar-new-window-tutorial\/'>Event Calendar New Window Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ecrt'>Previous relevant <a target=_blank title='Event Calendar Remembered Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/event-calendar-remembered-tutorial\/'>Event Calendar Remembered 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\/events_in_month.html?old=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Event Calendar Remembered Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/event_calendar.gif\" title=\"Event Calendar Remembered Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Event Calendar Remembered Tutorial<\/p><\/div>\n<p>We were inspired by an Event Calendar pamplette we saw the other day &#8230;<\/p>\n<p><img src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.jpg' style='width:100%;'><\/img><\/p>\n<p> &#8230; to write a new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html_GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html?old=y\">Events in Month web application<\/a>, whose content can be recalled via the web browser&#8217;s Bookmark methodologies.<\/p>\n<p>We liked the ideas for day of week and\/or date of month grouping arrangements we included, being, the way we interpreted it &#8230;<\/p>\n<ul>\n<li>just on this day in this month &#8230; <i>default<\/i><\/li>\n<li>on this day of the week throughout the month in question &#8230; &#8220;<i>&#8230;<\/i>&#8220;<\/li>\n<li>on this day and some others in that month in question &#8230; &#8220;<i>&#038;<\/i>&#8221; &#8230; to start with and further amendments available via contenteditable=true span element<\/li>\n<li>&#8220;Clone&#8221; value allows for multiple separated &#8220;blurbs&#8221; for the one signature day<\/li>\n<\/ul>\n<p>But, there&#8217;s an inherent weakness with the design, we&#8217;ll go into more into the future.  For now, you can try it yourself below &#8230;<\/p>\n<p><iframe src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.html?old=y\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>This is where we get to for a &#8220;second draft&#8221; we&#8217;ll get into, further, tomorrow &#8230;<\/p>\n<p><iframe src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/events_in_month.htm\" style=\"width:100%;height:800px;\"><\/iframe><\/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='#d60392' onclick='var dv=document.getElementById(\"d60392\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/calendar\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60392' 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='#d60398' onclick='var dv=document.getElementById(\"d60398\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/window\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60398' 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='#d60433' onclick='var dv=document.getElementById(\"d60433\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60433' 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='#d60440' onclick='var dv=document.getElementById(\"d60440\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bookmark\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60440' 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='#d63049' onclick='var dv=document.getElementById(\"d63049\"); 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='d63049' 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='#d63083' onclick='var dv=document.getElementById(\"d63083\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/recipient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63083' 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='#d63092' onclick='var dv=document.getElementById(\"d63092\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/highlight\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63092' 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='#d63104' onclick='var dv=document.getElementById(\"d63104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63104' 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='#d63120' onclick='var dv=document.getElementById(\"d63120\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/selection\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63120' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Thinking about yesterday&#8217;s Find English Highlighted Words Game Primer Tutorial&#8216;s first draft of a Find the Word game web application, we found it easy to pinpoint where to improve it &#8230; better informing the user when a textarea selection event &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/find-english-highlighted-words-game-selection-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,15,37],"tags":[1885,281,385,388,400,476,1839,2349,576,652,707,4710,894,3301,997,4657,1116,4709,1212,2567,1262,1319,1453],"class_list":["post-63120","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-argument","tag-css","tag-emoji","tag-english","tag-event","tag-game","tag-genericization","tag-highlight","tag-html","tag-javascript","tag-linux","tag-listenerdictionary","tag-overlay","tag-parameterization","tag-programming","tag-regional-indicator","tag-selection","tag-selectionchange","tag-styling","tag-text-shadow","tag-textarea","tag-tutorial","tag-word-game"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63120"}],"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=63120"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63120\/revisions"}],"predecessor-version":[{"id":63144,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63120\/revisions\/63144"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=63120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=63120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=63120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}