Robert James Metcalfe Blog

GeoJson World Coastlines Drag and Drop Makeover Tutorial

Posted on March 27, 2024 by admin

GeoJson World Coastlines Drag and Drop Makeover Tutorial

We’ve got a mild makeover happening with the Drag and Drop functionality related to GeoJson World Coastlines Drag and Drop Tutorial today.

At first …

we wanted the first popup window content be aligned to the top and left … and then …
we thought it would be good to also, in “Drag and Drop land”, relevant countries nearby to the user’s drop point TimeZone Places be showing below that (and it panned out the best way to show this, for us, was via an iframe pointing at another incarnation of the tz_places.php webpage, because it could have GET arguments iso, iso2, iso3 etcetera to point at ISO 2 letter country codes, which we made more readily available (via a new data-cc global data attribute applied to the select option subelements presented) for the changed external Javascript countries.js we decided should get into the mix via a new Javascript function …
function tzagain(inhtml) { var outhtml=inhtml, dccs=[], getarg='?', theone=1; if (inhtml.indexOf('left:0px;') != -1 && inhtml.indexOf(' data-cc=') != -1) { dccs=inhtml.split(' data-cc='); for (var ii=1; ii<dccs.length; ii++) { if (getarg == '?') { getarg+='iso=' + dccs[ii].substring(0,4).replace(/\'/g,'').replace(/\"/g,'').substring(0,2); theone++; } else if (getarg.indexOf('=' + dccs[ii].substring(0,4).replace(/\'/g,'').replace(/\"/g,'').substring(0,2)) == -1) { getarg+='&iso' + theone + '=' + dccs[ii].substring(0,4).replace(/\'/g,'').replace(/\"/g,'').substring(0,2); theone++; } } if (getarg != '?') { if (inhtml.indexOf('</bo' + 'ody>') != -1) { outhtml=inhtml.split('</bo' + 'dy>')[0] + '<iframe src="./tz_places.php' + getarg + '" style="position:absolute;left:0px;top:120px;width:100%;height:900px;"></iframe></body></html>'; } else { outhtml=inhtml + '<iframe src="./tz_places.php' + getarg + '" style="position:absolute;left:0px;top:120px;width:100%;height:900px;"></iframe>'; } } } return outhtml; }
)

… used by that changed TimeZone Places tz_places.php as exemplified below …

<?php
echo "<!doctype html><html><head><scr" . "ipt type='text/javascript' src='/HTMLCSS/countries.js?rand=" . rand(0,16756453) . "'></scr" . "ipt><scr" . "ipt type='text/javascript'> function lookoutfortop() { if (parent.document.getElementById('getmell')) { parent.document.getElementById('nearest').innerHTML=\"" . $pd . $retmore . "\"; } else if (top.document.getElementById('nearest')) { if (top.document.getElementById('getmell')) { top.document.getElementById('nearest').innerHTML=\"" . $pd . $retmore . "\"; } else { top.document.getElementById('nearest').innerHTML=\"" . $pd . $ret . "\"; } top.window.scrollTo(0,0); } else { if (top.document.getElementById('getmell')) { document.body.innerHTML=tzagain(\"" . $pd . $retmore . "\"); } else { document.body.innerHTML=tzagain(\"" . $pd . str_replace(':70px;',':0px;',str_replace(':350px;',':0px;',$ret)) . "\"); } } if (('' + top.document.URL).indexOf('/regions.') != -1) { if (document.getElementById('snearest')) { document.getElementById('snearest').style.left='0px'; } } } </scr" . "ipt></head><body onload=' lookoutfortop();'" . $backfullstyle . ">" . $pd . $ret . "</body></html>"; //$ret;
?>

… that superfluous looking ?rand=blah measure being pretty useful really regarding getting around the cache keeping old external Javascript in its mind after changes.

Curiously, the grandparent regions.php starting off all this needed no changing! We hope you like these tweaks!

Previous relevant GeoJson World Coastlines Drag and Drop Tutorial is shown below.

GeoJson World Coastlines Drag and Drop Tutorial

The primary aim of today’s work, onto yesterday’s GeoJson World Drag and Drop on iPad Tutorial iPad integration is to …

add similar drag and drop logic into our World Coastlines GeoJson web application … and along the way, also for the World Countries web application …
hold off involving the (pretty kludgy looking) vertical scrollbar of our drag and drop pin’s underlying HTML iframe …
<iframe scrolling=no frameborder=0 name=iftr id=iftr style=display:none; srcdoc="<body style=background-color:transparent;><p id=mg title='Wikipedia country page below via drag and drop to world map' draggable='true'>📍</p><br><br><div id=myh1></div><script type='text/javascript' src='./countries.js?rand=321156747657' defer></script></body>" data-src=></iframe>
… until the first drag operation starting, calls on …
parent.document.getElementById('iftr').scrolling='yes';
… proving a Javascript DOM control of the “scrolling” attribute works (as we weren’t sure, having never done this before)

It’s worth beavering away at a guinea pig web application until (just about complete) satisfaction (for now) before having a parallel set of code changes happening simultaneously, we’ve always found.

So, what happened in “external Javascript land”? No need for a “regions.js” here, as parent.document.URL can be scrutinised in that “external Javascript land” to discover which web application is the parent, and act accordingly. So changed were our changed external Javascript countries.js in …

Previous relevant GeoJson World Drag and Drop on iPad Tutorial is shown below.

GeoJson World Drag and Drop on iPad Tutorial

Yesterday’s GeoJson World Drag and Drop Google Tutorial had us at a very interesting position, one that we cannot recall ever happening before, that being …

our GeoJson World Countries web application Drag and Drop logic worked on an iPhone … but …
our GeoJson World Countries web application Drag and Drop logic did not work on an iPad

They’re both iOS! And usually the smaller iPhone has the problem and the larger iPad is okay when there is an odd scenario happening. So, what gives? Well, the odd thing is, it was just rearrangements of code and iframe srcdoc usage …

<iframe frameborder=0 name=iftr id=iftr style=display:none; srcdoc="<body style=background-color:transparent;><p id=mg title='Wikipedia country page below via drag and drop to world map' draggable='true'>📍</p><br><br><div id=myh1></div><script type='text/javascript' src='./countries.js?rand=321156747657' defer></script></body>" data-src=></iframe>

… that ended up helping us fix the issues. Figure this, on iPad our emoji pin could not be made visible down the bottom left of iPad screen but could be made to work in the title elements section?! Of course, we might have been having a bad day, but in our defence, even debugging in Safari via …

iPad Safari web browser invocation …
Apple white lead from iPad to MacBook Air …
MacBook Air Safari web browser Develop menu dropdown got us to debugging functionality

… showed nothing untoward, and neither did, on the iPad’s Chrome browser …

chrome://inspect

… debugging techniques.

Changed were our changed external Javascript countries.js in our changed countries.php GeoJson World Countries PHP web application in a new window. If you have any clues yourself, the comments are there?!

Previous relevant GeoJson World Drag and Drop Google Tutorial is shown below.

GeoJson World Drag and Drop Google Tutorial

We often turn to what we like to call …

“long hover” (ie. on non-mobile, wait for a long while after the onmouseover event initiation to see whether the user is still hovering) … and today, a bit like that, is the new, for us …
“long drag” (the user waits a long time between the drag initialization and the drop event)

… and because we found “dawdling” on a drag and drop fairly unnatural, we think this “long drag” idea “has legs”, in that it works well as a deliberate act made by a user, knowing at the end they benefit from their actions. For us, with our GeoJSON Map web application, yesterday, with GeoJson World Drag and Drop Pin Tutorial, the drag and drop led to …

Wikipedia country information webpage … and today, we allow a “long drag” get you to …
Google Maps drop position information webpage … if the “long drag” is for 10 or more seconds …
Google Earth drop position information webpage … if the “very long drag” is for 20 or more seconds

… arranged for via our changed external Javascript countries.js in our changed countries.php GeoJson World Countries PHP web application in a new window.

Previous relevant GeoJson World Drag and Drop Pin Tutorial is shown below.

GeoJson World Drag and Drop Pin Tutorial

Before today, with the GeoJson Countries web application from GeoJson World Colour Wheel Wikipedia Integration Tutorial we’ve mainly used …

onclick event logic … and today, we start to also include …
drag and drop event logic (like, but nuanced as explained below, the experimental drag and drop ideas included in the recent Planet Moon Game Tutorial) … the nuanced differences involving …
1. the drag part of the events occurs in an iframe (populated via small amount of srcdoc HTML and Javascript) able to reference its originator via window.parent …
2. drop part of the events occurs in that originator parent and so several Javascript function called by the child reside in the parent … and …
3. the child “drag” event controller uses the new external Javascript countries.js …
  // countries.js // July, 2023 // RJM Programming // Help out countries.html and countries.php var pos3=0, pos4=0, tdid='', poligono, punto, coone='', prectis; // var poligono = [[2,9],[8,6],[12,10],[15,2],[10,4],[5,1]]; // var punto = [6, 5]; function pointInPolygon(polygon, point) { // thanks to https://community.appinventor.mit.edu/t/geofence-check-if-a-point-is-inside-a-polygon-javascript-map/57091 var odd = false; for (var i = 0, j = polygon.length - 1; i < polygon.length; i++) { if (((polygon[i][1] > point[1]) !== (polygon[j][1] > point[1])) && (point[0] < ((polygon[j][0] - polygon[i][0]) * (point[1] - polygon[i][1]) / (polygon[j][1] - polygon[i][1]) + polygon[i][0]))) { odd = !odd; } j = i; } return odd; } function andlaterstill() { if (9 == 6) { // temporary if (tdid != '') { document.getElementById(tdid).innerHTML=document.getElementById(tdid).innerHTML.substring(0,1); } else if (document.getElementById('mytable').innerHTML.indexOf(clonedatatwo) != '') { document.getElementById('myh1').innerHTML=document.getElementById('myh1').innerHTML.split('</table>')[0] + '</table>'; } if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo) != -1) { document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo,''); } else if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo.replace('dragging','')) != -1) { document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo.replace('dragging',''),''); } else if (document.body.innerHTML.split('<table')[0].indexOf(clonedatatwo.replace('dragging','')) != -1) { document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<table')[0], document.body.innerHTML.split('<table')[0].replace(clonedatatwo.replace('dragging',''),'')); } else if (document.body.innerHTML.split('<table')[0].indexOf(clonedatatwo) != -1) { document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<table')[0], document.body.innerHTML.split('<table')[0].replace(clonedatatwo,'')); } } tdid=''; } function getprectis() { if (window.opener) { if (window.opener.document.getElementsByTagName('body')[0]) { return window.opener.document.body.getBoundingClientRect(); } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { return parent.document.body.getBoundingClientRect(); } } } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { return parent.document.body.getBoundingClientRect(); } } return null; } function wod(ididea) { if (window.opener) { if (window.opener.document.getElementsByTagName(ididea)[0]) { return window.opener.document.getElementsByTagName(ididea)[0]; } else if (window.parent) { if (parent.document.getElementsByTagName(ididea)[0]) { return parent.document.getElementsByTagName(ididea)[0]; } } } else if (window.parent) { if (parent.document.getElementsByTagName(ididea)[0]) { return parent.document.getElementsByTagName(ididea)[0]; } } return null; } function ccit() { var divs, esot=[], bodyois=null; if (window.opener) { if (window.opener.document.getElementsByTagName('body')[0]) { bodyois=window.opener.document.getElementsByTagName('body')[0]; divs=window.opener.document.getElementsByTagName('div'); } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { bodyois=parent.document.getElementsByTagName('body')[0]; divs=parent.document.getElementsByTagName('div'); } } } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { bodyois=parent.document.getElementsByTagName('body')[0]; divs=parent.document.getElementsByTagName('div'); } } for (var ii=0; ii<divs.length; ii++) { if (divs[ii].outerHTML.split('>')[0].indexOf(' title=' + String.fromCharCode(34) + coone) != -1) { divs[ii].innerHTML=divs[ii].innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(200,200,200,0.3);'); divs[ii].name='d' + tdid.replace(/\ /g, '_'); } } } function andqlater() { //alert('HeRe'); tdid=''; var ppig='[]', coo='', coos=[], ip=0; var squares; //=window.opener.document.getElementsByTagName('area'); if (window.opener) { if (window.opener.document.getElementsByTagName('body')[0]) { squares=window.opener.document.getElementsByTagName('area'); } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { squares=parent.document.getElementsByTagName('area'); } } } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { squares=parent.document.getElementsByTagName('area'); } } for (var ii=1; ii<=squares.length; ii++) { ppig='[]'; coos=squares[eval(-1 + ii)].coords.replace(/\ /g,',').split(','); ppig='[[' + coos[0] + ',' + coos[1] + ']]'; for (ip=2; ip<coos.length; ip+=2) { ppig=ppig.replace(']]', '],[' + coos[ip] + ',' + coos[eval(1 + ip)] + ']]'); poligono=eval(ppig); //alert('' + punto); if (pointInPolygon(poligono, punto)) { tdid='' + squares[eval(-1 + ii)].getAttribute('data-cname'); coone=('' + squares[eval(-1 + ii)].coords).split(' ')[0]; setTimeout(ccit, 2000); console.log('tdid=' + tdid + ' and coone=' + coone); if (window.opener) { if (window.opener.document.getElementsByTagName('body')[0]) { window.focus(); document.getElementById('myh1').innerHTML='<iframe style="width:100%;height:800px;" src="//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')) + '"></iframe>'; } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { document.getElementById('myh1').innerHTML='<iframe style="width:100%;height:800px;" src="//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')) + '"></iframe>'; window.open('//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')),'_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600'); } } } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { document.getElementById('myh1').innerHTML='<iframe style="width:100%;height:800px;" src="//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')) + '"></iframe>'; window.open('//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')),'_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600'); } } return tdid; } } } console.log('tdid=' + tdid); //setTimeout(andlaterstill, 100); return ''; } window.addEventListener("DOMContentLoaded", () => { const source = document.querySelector("#mg"); console.log('source.id=' + source.id); source.addEventListener("dragstart", (ev) => { console.log("dragStart"); // Change the source element's background color // to show that drag has started ev.currentTarget.classList.add("dragging"); // Clear the drag data cache (for all formats/types) ev.dataTransfer.clearData(); // Set the drag's format and data. // Use the event target's id for the data ev.dataTransfer.setData("text/plain", ev.target.id); //ev.dataTransfer.setData("text/html", ev.target.outerHTML); }); source.addEventListener("dragend", (ev) => ev.target.classList.remove("dragging") ); const target = wod('body'); //window.opener.document.getElementsByTagName('body')[0]; target.id='usemap'; console.log('target.id=' + target.id); target.addEventListener("dragover", (ev) => { console.log("dragOver"); ev.preventDefault(); }); target.addEventListener("drop", (ev) => { console.log("Drop"); ev.preventDefault(); // Get the data, which is the id of the source element const data = ev.dataTransfer.getData("text"); const source = document.getElementById(data); var prectis=getprectis(); console.log('' + ev.target.id); if (!document.getElementById('callback')) { if (('' + ev.target.id).substring(0,2) == 'im') { score+=eval(ev.target.innerHTML.substring(0,1)); } } else if (1 == 1) { //document.getElementById('callback')) { secs++; if (('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById('mg').getAttribute('data-answer'))) { score++; document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + ''; } else { document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + ''; alert('Correct answer was ' + document.getElementById('mg').getAttribute('data-answer')); } location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs; } if (1 == 2) { //clonedatatwo=document.getElementById('source').outerHTML; //document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, ''); //ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo; } else if ((9 == 9 || ('' + ev.target.id).substring(0,2) == 'im')) { //clonedatatwo=document.getElementById('source').outerHTML; // // andqlater(); //document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, ''); //ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo; //document.getElementById('myh1').appendChild(source); //if (('' + ev.target.id).substring(0,2) != 'im') { //document.getElementById('myh1').insertAdjacentHTML('beforeend', clonedatatwo); //} else { //ev.target.insertAdjacentHTML('beforeend', clonedatatwo); //} } else { ev.target.appendChild(source); } prectis=getprectis(); if (ev.touches) { if (ev.touches[0].pageX) { pos3 = ev.touches[0].pageX; pos4 = ev.touches[0].pageY; } else { pos3 = ev.touches[0].clientX; pos4 = ev.touches[0].clientY; } console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4); } else if (ev.clientX || ev.clientY) { pos3 = ev.clientX; pos4 = ev.clientY; console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4); } else { pos3 = ev.pageX; pos4 = ev.pageY; console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4); } //alert('[' + pos3 + ',' + pos4 + ']'); var wop=0; if (window.opener) { if (window.opener.document.getElementsByTagName('body')[0]) { window.opener.derivethislong(pos3); window.opener.derivethislat(pos4); wop=window.opener.getzoom(); } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { parent.derivethislong(pos3); parent.derivethislat(pos4); wop=parent.getzoom(); } } } else if (window.parent) { if (parent.document.getElementsByTagName('body')[0]) { parent.derivethislong(pos3); parent.derivethislat(pos4); wop=parent.getzoom(); } } //pos3+=eval(wop * prectis.left); //pos4+=eval(wop * prectis.top); var xwop='1'; console.log('prectis.left/top=' + prectis.left + '/' + prectis.top); //punto=eval('[' + eval(eval('' + pos3) / eval('' + wop)) + ',' + eval(eval('' + pos4) / eval('' + wop)) + ']'); punto=eval('[' + eval(eval(-prectis.left * eval('' + wop) + eval('' + pos3)) / eval('' + wop)) + ',' + eval(eval(-prectis.top * eval('' + wop) + eval('' + pos4)) / eval('' + wop)) + ']'); console.log(punto); andqlater(); }); //const reset = document.querySelector("#reset"); //reset.addEventListener("click", () => document.location.reload()); }); function dragorig() { if (document.getElementById('mg')) { document.getElementById('mg').draggable='true'; } else { setTimeout(dragorig, 5000); } } // setTimeout(dragorig, 5000);

… to open Wikipedia Country information webpages of dropped into user drags (on a world map), in our changed countries.php GeoJson World Countries PHP web application in a new window.

Previous relevant GeoJson World Colour Wheel Wikipedia Integration Tutorial is shown below.

GeoJson World Colour Wheel Wikipedia Integration Tutorial

Further to yesterday’s GeoJson World Coastline Quiz Deployments Tutorial, with our two …

GeoJson World Coastline … and …
GeoJson World Countries

… web applications, today we want to deepen the integration with Wikipedia on two fronts …

GeoJson World Coastline optional quiz Wikipedia webpage navigation offerings, achieved via a Javascript override initiative …
const confirm = (cblurb) => { if (cblurb.indexOf('Answer was ') != -1 && cblurb.indexOf('. ') != -1) { var resp=prompt(cblurb.replace(cblurb.split('Answer was ')[1].split('. ')[0] + '. ', cblurb.split('Answer was ')[1].split('. ')[0] + ' (answer W to see more information on Wikipedia). '), ''); if (resp != null) { if (resp.toLowerCase() == 'w') { window.open('//en.wikipedia.org/wiki/' + cblurb.split('Answer was ')[1].split('. ')[0].replace(/\ /g,'_'), '_blank', 'top=70,left=70,width=650,height=650'); return true; } return true; } else { return false; } } return window.confirm(cblurb); };
GeoJson World Countries and Coastline changed map.php Map Chart new onclick menu links to our Colour Wheel web application, and its Wikipedia images and TimeZone information

… in our changed regions.php GeoJson World Coastlines PHP web application in a new window, or you can also try below.

Previous relevant GeoJson World Coastline Quiz Deployments Tutorial is shown below.

GeoJson World Coastline Quiz Deployments Tutorial

The deployment follow up to yesterday’s GeoJson World Coastline Function Noun Naming Tutorial seems to concern mobile platform use of the new …

Rivers Quiz … and newer …
Populations Quiz (thanks to HTTP://geojson.xyz‘s GeoJson populated places, downloaded and uploaded as population.geojson)

… where heap memory concerns related to the global variables memory used in our GeoJson World Coastlines webpage could cause mobile platform usage reloads of the web application, reminiscent of the external Javascript concerns we had back at GeoJson World Countries SVG Overlay Safari Error Tutorial.

There, as for here, mobile usage got better by swapping global variable usage for HTML content static PHP …

<?php echo ”
<select id=spops style=display:none;>" . $sih . "</select> <select id=srivs style=display:none;>" . $rih . "</select>
“; ?>

… via …

<?php
$sih=''; $rih=''; function oururlencode($instuff) { $outstuff=''; $dotbits=explode('.', $instuff); if (sizeof($dotbits) > 1) { $outstuff=$instuff; for ($ii=1; $ii<sizeof($dotbits); $ii++) { if (strlen( explode(',', explode(' ', $dotbits[$ii])[0])[0] ) > 3) { $outstuff=str_replace('.' . explode(',', explode(' ', $dotbits[$ii])[0])[0], '.' . substr(explode(',', explode(' ', $dotbits[$ii])[0])[0],0,3), $outstuff); } } return urlencode($outstuff); } return urlencode($instuff); } if (file_exists('population.geojson')) { $rbits=explode(']}}', file_get_contents('./population.geojson')); for ($irr=1; $irr<(-1 + sizeof($rbits)); $irr++) { $hdrbit=explode('{"type":"Feature', $rbits[-1 + $irr])[-1 + sizeof(explode('{"type":"Feature', $rbits[-1 + $irr]))]; $hbits=explode(',"NAME":"', $hdrbit); if (sizeof($hbits) > 1) { if (strpos($sih, ' id=' . str_replace('+','%20',urlencode(explode('"', $hbits[1])[0])) . ' ') === false) { $sih.='<option id=' . str_replace('+','%20',urlencode(explode('"', $hbits[1])[0])) . ' value=' . str_replace('+','%20', str_replace('[','', str_replace(']','', str_replace('],[',',' ,explode(']}', explode(':[',$hdrbit)[1])[0])))) . '></option>'; } } } } if (file_exists('rivers.geojson')) { $rbits=explode(']]}}', file_get_contents('./rivers.geojson')); for ($irr=1; $irr<(-1 + sizeof($rbits)); $irr++) { $hdrbit=explode('{"type":"Feature', $rbits[-1 + $irr])[-1 + sizeof(explode('{"type":"Feature', $rbits[-1 + $irr]))]; $hbits=explode(',"name":"', $hdrbit); if (sizeof($hbits) > 1) { if (strpos($sih, 'id=river' . str_replace('+','%20',urlencode(explode('"', $hbits[1])[0])) . '>') === false) { $rih.='<option value=' . str_replace('+','%20', oururlencode(str_replace('[','', str_replace(']','', str_replace('],[', ',', str_replace(']],[[', ' ', explode(']]}', explode(':[[',$hdrbit)[1])[0])))))) . ' id=river' . str_replace('+','%20',urlencode(explode('"', $hbits[1])[0])) . '></option>'; } else { $rih=str_replace(' id=river' . str_replace('+','%20', oururlencode(explode('"', $hbits[1])[0])) . '>', str_replace('+','%20', urlencode(str_replace('[','', str_replace(']','', str_replace('],[', ',', str_replace(']],[[', ' ', explode(']]}', explode(':[[',$hdrbit)[1])[0])))))) . ' id=river' . str_replace('+','%20',urlencode(explode('"', $hbits[1])[0])) . '>', $rih); } } } }
?>

… code usage (ie. the HTML file ends up bigger, to help) in our changed regions.php GeoJson World Coastlines PHP web application in a new window, or you can also try below.

Previous relevant GeoJson World Coastline Function Noun Naming Tutorial is shown below.

GeoJson World Coastline Function Noun Naming Tutorial

We’re working on an extension to yesterday’s GeoJson World Coastline Rivers Quiz Tutorial‘s Rivers Quiz functionality within our GeoJson World Coastlines web application, and have …

settled on an approach … but …
not yet finished on deployment issues

… but it is this approach we wanted to talk about today.

Our approach borrows from Object Oriented Programming (OOP) the idea that …

just as with OOP thinking class names are like nouns and the methods within that class are like verbs … we, with our approach …
help readability of our non-OOP functional code by including those nouns and verbs, as well as ideas like use of plurals to indicate array involvement, with our Javascript function naming

… we can best illustrate to you via showing you new functions and variables and modified code to show you this approach in code …

… in our changed regions.php GeoJson World Coastlines PHP web application in a new window, or you can also try below.

Previous relevant GeoJson World Coastline Rivers Quiz Tutorial is shown below.

GeoJson World Coastline Rivers Quiz Tutorial

It’s time to turn our attention away from GeoJson World Countries, as talked about with yesterday’s GeoJson World Countries Plotted Ports Tutorial, and back to GeoJson World Coastline ideas. Why? We want to add a …

Rivers Quiz

… via the (generously provided) HTTP://geojson.xyz rivers lake centerlines GeoJSON data we download and then uploaded to become rivers.geojson data file. Now we were wondering out of …

use the URL to this GeoJSON file as the “src” attribute of an HTML iframe …
<iframe id=ifrivers onload=getthejson(this); style=display:none; src=./rivers.geojson></iframe>
… element (and then access the content via the onload event …
var rivers='', arivers=[], iguess=-1, isofar=' ', jscore=0, jgoes=0, elema=null, contexta=null, rectisleft=0, rectistop=0; function getthejson(iois) { var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { rivers='' + aconto.body.innerHTML; setTimeout(populaterivers, 500); } } }
… function) would suffice, or if we would end up using …
Ajax call

… to access this data, and were a bit surprised the former method was all fine. Of course there are snazzy inbuilt Javascript hierarchical calls you can make to process the data, but we find, with GeoJSON data, in the client realm (where we’re keen to stay with today’s work (though PHP serverside can, of course, be purloined to do all this work, should you have that available)), of Javascript, we just need very basic string functions …

split (versus PHP explode)
index (versus PHP strpos)
substring (versus PHP substr)
replace (versus PHP str_replace)
push (versus PHP array_push)

… to get by processing …

… the (ever so) consistent GeoJSON data!

The progress with GeoJson World Countries helped too. We knew to add another HTML canvas layer as per …

document.body ~~(now with the new onmousemove=airportplot(event); event logic)~~ lowest level …

overlayed by HTML canvas element plotted with world country linework … now including …

overlayed by HTML canvas element dedicated to nearest airport plotting …
<canvas id=myacanvas height='180' width='360' style='background-color:transparent;z-index:55;display:inline-block;position:absolute;top:0px;left:0px;'></canvas>

overlayed by HTML img (transparent image) element and its associated image map area elements … ~~and today we add into the mix …~~

~~HTML div hosting SVG elements overlay~~ing~~ initialized with “land” parts green infilled SVG at a mid range z-index (~~only~~ as well as when called upon) individual GeoJson entities overlay~~

… and to, at document.body onload logic …

// ... and extended document.body onload event logic has added, up near its top ... elema = document.getElementById('myacanvas'); contexta = elema.getContext('2d');

… and supplement with another HTML sub “emoji button” ❓ ( ❓ ) type element …

<sub style=cursor:pointer; onclick=getariver(); title='River Quiz'>❓</sub>

… allowing for …

… to work the Rivers Quiz. Finally, though, for all good practicalities we also need those zoom logics out of GeoJson World Countries logic, via “emoji button” 🔎 ( 🔎 ) …

<a style=cursor:pointer; title='Zoom In' onclick='event.stopPropagation(); event.preventDefault(); zoomin();'>🔎</a>

… calling on meta name=viewport tag for mobile …

<meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes' >

… as well as the zooming Javascript …

So feel free to try the new Rivers Quiz in our changed regions.php GeoJson World Coastlines PHP web application in a new window, or you can also try below.

Previous relevant GeoJson World Countries Plotted Ports Tutorial is shown below.

GeoJson World Countries Plotted Ports Tutorial

There are a few interesting aspects to today’s extension of functionality onto yesterday’s GeoJson World Countries Plotted Airports Tutorial‘s GeoJson World Countries web application …

where to modularise … we think “data collection” commonality is a good reason, and so we make these changes to intair.php
making an (“animated emoji”) button dual purpose on top of originally being a single purpose button …
<sub title='Show Nearby Airports' onclick='doair=how(true,this); twothousand*=2; this.title=this.title.substring(0,4) + String.fromCharCode(105) + String.fromCharCode(110) + String.fromCharCode(103) + this.title.replace(this.title.split(String.fromCharCode(32))[0] + String.fromCharCode(32), String.fromCharCode(32));' data-type=9992 style=cursor:pointer; id=portsub>✈</sub>
… working with the intairsuffix global variable that could add a new GET argument where both the “port” label in &port=[value] and that [value] can affect behaviour from the intair.php PHP helper tool above …
var intairsuffix='', zhra=null, zhrb=null, kklat=0, kklong=0, doair=false, vsll=[-999.0], answered=true; function how(atr, isub) { var curgd=isub.getAttribute('data-type'); if (('' + curgd) == '9992') { // airport if (intairsuffix != '') { intairsuffix='&port=air'; isub.title='Showing Nearby Airports and Ports'; document.getElementById('title').value='Nearby Timezone Places and Airports and Ports'; } } else if (('' + curgd) == '128674') { // port if (intairsuffix == '') { if (doair) { intairsuffix='&port=air'; isub.title='Showing Nearby Airports and Ports'; document.getElementById('title').value='Nearby Timezone Places and Airports and Ports'; } else { intairsuffix='&port=y'; isub.title='Showing Nearby Ports'; document.getElementById('title').value='Nearby Timezone Places and Ports'; } } } return true; } function feedhow() { var isub=document.getElementById('portsub'); var curgd=isub.getAttribute('data-type'); if (('' + curgd) == '9992') { // airport isub.innerHTML='🚢'; isub.setAttribute('data-type', '128674'); } else if (('' + curgd) == '128674') { // port isub.innerHTML='✈'; isub.setAttribute('data-type', '9992'); } }
Ajax asynchronous usage for second half of a synchronous previous usage …
var intairsuffix='', zhra=null, zhrb=null, kklat=0, kklong=0, doair=false, vsll=[-999.0], answered=true; function stateChangedb() { if (zhrb.readyState == 4) { if (zhrb.status == 200) { var rectis=document.body.getBoundingClientRect(); var topllong=-180.0; var topllat=90.0; var onepixelequals=izoom; var bts=zhrb.response.split('.src + ' + String.fromCharCode(39)); if (eval('' + bts.length) > 1) { for (var ijh=1; ijh<bts.length; ijh++) { var vs=eval(eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))) + eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top)))); if (!inarray(vs,vsll)) { vsll.push(vs); drawaac( eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))), eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top))) ); } } } } } } function stateChangeda() { if (zhra.readyState == 4) { if (zhra.status == 200) { var rectis=document.body.getBoundingClientRect(); var topllong=-180.0; var topllat=90.0; var onepixelequals=izoom; var bts=zhra.response.split('.src + ' + String.fromCharCode(39)); if (eval('' + bts.length) > 1) { for (var ijh=1; ijh<bts.length; ijh++) { var vs=eval(eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))) + eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top)))); if (!inarray(vs,vsll)) { vsll.push(vs); drawaac( eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))), eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top))) ); } } } if (intairsuffix.indexOf('&port=air') != -1) { zhrb = new XMLHttpRequest(); zhrb.onreadystatechange=stateChangedb; zhrb.open('get', '/HTMLCSS/intair.php?num=6&lat=' + kklat + '&long=' + kklong + '&port=y', true); zhrb.send(null); } answered=true; } } } function naira(klat, klong) { if (answered && doair) { answered=false; zhra = new XMLHttpRequest(); zhra.onreadystatechange=stateChangeda; console.log('/HTMLCSS/intair.php?num=6&lat=' + klat + '&long=' + klong + intairsuffix); if (intairsuffix.indexOf('&port=air') != -1) { kklat=klat; kklong=klong; zhra.open('get', '/HTMLCSS/intair.php?num=6&lat=' + klat + '&long=' + klong, true); } else { zhra.open('get', '/HTMLCSS/intair.php?num=6&lat=' + klat + '&long=' + klong + intairsuffix, true); } zhra.send(null); } }
… keeps a fast_ish synchronous call (that we enforce via that answered global variable) but truely invokes an asynchronous arrangement extracting Nearby Ports data to plot, as applicable

… in adding …

So far, with yesterday’s GeoJson World Countries Google Directions Trip Tutorial‘s GeoJson World Countries points of interest include …

the clicked latitude and longitude … and …

three nearby TimeZone Places … and today, we offer the optional …

~~four~~six nearest Airports (via the ✈ ( ✈ ) emoji button the user clicks) and for this we need to thank, profusely, The Global Airport Database project by Arash Partow, as with HTML5 Canvas Map Clickaround Follow Up Tutorial

six nearest Ports (via the 🚢 ( 🚢 ) emoji button the user clicks) and for this we need to thank, profusely, HTTP://geojson.xyz ports project, as with Swift Playgrounds on macOS Map Emoji Tutorial

… in our changed countries.php web application you can also try below.

Previous relevant GeoJson World Countries Plotted Airports Tutorial is shown below.

GeoJson World Countries Plotted Airports Tutorial

Introducing the Map Chart recognition of nearby Airports with yesterday’s GeoJson World Countries Nearest Airports Tutorial‘s progress on our latest GeoJson World Countries PHP web application, it set us to seeing …

the combination of Google Directions‘s talents allowing you to reposition on the fly … and …
the onmousemove event, at least for our non-mobile users

… could mean that if we pre-plot airports on the world map, given that the user has clicked the ✈ ( ✈ ) “Show an Interest in Airports” emoji button, as a non-mobile user hovers over the world map, this pre-plotting might help trip planners with their travel options, should air travel be part of their interest, in the same way it is an option up at Google Directions in our changed countries.php web application you can also try below. The overlay scenario now reads …

document.body (now with the new onmousemove=airportplot(event); event logic) lowest level …

overlayed by HTML canvas element plotted with world country linework … now including …

overlayed by HTML canvas element dedicated to nearest airport plotting …
<canvas id=myacanvas height='180' width='360' style='background-color:transparent;z-index:55;display:inline-block;position:absolute;top:0px;left:0px;'></canvas>

overlayed by HTML img (transparent image) element and its associated image map area elements … ~~and today we add into the mix …~~

HTML div hosting SVG elements overlay~~ing~~ initialized with “land” parts green infilled SVG at a mid range z-index (~~only~~ as well as when called upon) individual GeoJson entities overlay

… worked by new (sometimes Ajax) Javascript code …

Previous relevant GeoJson World Countries Nearest Airports Tutorial is shown below.

GeoJson World Countries Nearest Airports Tutorial

So far, with yesterday’s GeoJson World Countries Google Directions Trip Tutorial‘s GeoJson World Countries points of interest include …

the clicked latitude and longitude … and …
three nearby TimeZone Places … and today, we offer the optional …
four nearest Airports (via the ✈ ( ✈ ) emoji button the user clicks) and for this we need to thank, profusely, The Global Airport Database project by Arash Partow, as with HTML5 Canvas Map Clickaround Follow Up Tutorial

… being as we’re into trip planning now!

… featuring Ajax Javascript code.

Try this out with our changed countries.php web application you can also try below.

Previous relevant GeoJson World Countries Google Directions Trip Tutorial is shown below.

GeoJson World Countries Google Directions Trip Tutorial

Adding to the “zoom” progress of yesterday’s GeoJson World Countries Zoom Tutorial, today, we wanted to …

add interfacing functionality to the excellent Google Directions part of Google Maps, perhaps to help with Trip planning, or even just to associate a Placename with a latitude and longitude as clicked by the user, via the very simple URL arrangement …
https://www.google.com/maps/dir/[decimalLatitudeDegrees]/[decimalLongitudeDegrees]
… helped out by new Javascript functions …
var lastlats=[], lastlongs=[], lastlat=-99.0, lastlong=-99.0, thislat=0.0, thislong=0.0; function preface(inblurb) { var extras=''; var outblurb=inblurb; if (Math.abs(eval('' + lastlat)) > 0.0 || Math.abs(eval('' + lastlong)) > 0.0) { if (Math.abs(eval('' + lastlat)) <= 90.0 && Math.abs(eval('' + lastlong)) <= 180.0) { extras=' Add G for Google Directions between (' + lastlat + ',' + lastlong + ') to (' + thislat + ',' + thislong + ') and spaces (also more trip legs) to hashtag navigate to Google Charts later. '; } } return extras + outblurb; } function alats(inlat) { if (inlat == 0 && lastlats.length == 0) { inlat=inlat; } else { lastlats.push(inlat); } return inlat; } function alongs(inlong) { if (inlong == 0 && lastlongs.length == 0) { inlong=inlong; } else { lastlongs.push(inlong); } return inlong; }
… and …
add some hashtag navigation (fairly self explanatory emoji button ⬆ ⬇ ↗) ideas now that our GeoJson world map can be zoomed in on

… in our changed countries.php web application you can also try below.

Previous relevant GeoJson World Countries Zoom Tutorial is shown below.

GeoJson World Countries Zoom Tutorial

Onto yesterday’s GeoJson World Countries TimeZone Times Tutorial GeoJson World Countries web application’s capabilities we want to add zooming, that doesn’t rely on web browser functionality (which continues to work). With that in mind we create a new emoji ( 🔎 ) 🔎 link, with this onclick event code …

… to multiply the webpage zoom factor in a programmatical way. To acheive this, we have a two way approach (as you might have surmised from above) …

for mobile, the logic is easier by introducing a new meta name=viewport …
<meta id="myviewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes" >
… tag … while …
for non-mobile we needed to realize that event.pageX and event.pageY co-ordinates grow in proportion to the zoom factor, and that better latitude and longitude determining lines of code would go …
function canvasclick(e) { var rectis=document.body.getBoundingClientRect(); var topllong=-180.0; var topllat=90.0; onepixelequals=eval(0.0 + eval(1.0 * izoom)); //document.title='canvasclick'; e = e || window.event; e.preventDefault(); if (e.touches) { if (e.touches[0].pageX) { //lastl='Longitude,Latitude coordinates are ' + eval(topllong + eval(-rectis.left + e.touches[0].pageX) * onepixelequals) + ',' + eval(topllat - eval(-rectis.top + e.touches[0].pageY) * onepixelequals); if (drawc(eval(-rectisleft + e.touches[0].pageX), eval(-rectistop + e.touches[0].pageY))) { thislat=eval(topllat - eval(-rectistop + e.touches[0].pageY) * onepixelequals); thislong=eval(topllong + eval(-rectisleft + e.touches[0].pageX) * onepixelequals); //console.log('rectistop=' + rectistop + ' and rectisleft=' + rectisleft + ' and rectisy=' + rectisy + ' and thislat=' + thislat); document.getElementById('nearestif').src='/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectistop + e.touches[0].pageY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectisleft + e.touches[0].pageX) * onepixelequals)) + '&ntztontz=y'; } } else { //lastl='Longitude,Latitude coordinates are ' + eval(topllong + eval(-rectis.left + e.touches[0].clientX) * onepixelequals) + ',' + eval(topllat - eval(-rectis.top + e.touches[0].clientY) * onepixelequals); if (drawc(eval(-rectis.left + e.touches[0].clientX), eval(-rectis.top + e.touches[0].clientY))) { thislat=eval(topllat - eval(-rectis.top + e.touches[0].clientY) * onepixelequals); thislong=eval(topllong + eval(-rectis.left + e.touches[0].clientX) * onepixelequals); //console.log('rectis.top=' + rectis.top + ' and rectis.left=' + rectis.left + ' and rectis.y=' + rectis.y + ' anD thislat=' + thislat); document.getElementById('nearestif').src='/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectis.top + e.touches[0].clientY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectis.left + e.touches[0].clientX) * onepixelequals)) + '&ntztontz=y'; } } } else if (e.pageX || e.pageY) { //lastl='Longitude,Latitude coordinates are ' + eval(topllong + e.clientX * onepixelequals) + ',' + eval(topllat - e.clientY * onepixelequals); //alert('02: ' + e.screenX + ' ' + e.pageX + ' ' + e.screenY + ' ' + e.pageY + ' ' + thislong + ' ' + thislat); if (drawc(eval(-rectisleft + e.pageX), eval(-rectistop + e.pageY))) { //thislat=eval(topllat - eval(-rectistop + e.pageY) * onepixelequals); //thislong=eval(topllong + eval(-rectisleft + e.pageX) * onepixelequals); thislat=eval(eval(eval(topllat * onepixelequals - eval(-rectistop + e.pageY) * 1)) / onepixelequals); thislong=eval(eval(eval(topllong * onepixelequals + eval(-rectisleft + e.pageX) * 1)) / onepixelequals); //alert('22: ' + e.screenX + ' ' + e.pageX + ' ' + e.screenY + ' ' + e.pageY + ' ' + thislong + ' ' + thislat); //console.log('rectistop=' + rectistop + ' and rectisleft=' + rectisleft + ' and rectisy=' + rectisy + ' aNd thislat=' + thislat + ' and e.pageY=' + e.pageY + ' and new plus idea=' + eval(topllat - eval(rectistop + e.pageY) * onepixelequals)); //document.getElementById('nearestif').src='/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectistop + e.pageY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectisleft + e.pageX) * onepixelequals)) + '&ntztontz=y'; document.getElementById('nearestif').src='/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + thislat) + '&longitude=' + encodeURIComponent('' + thislong) + '&ntztontz=y'; } } else { //lastl='Longitude,Latitude coordinates are ' + eval(topllong + eval(-rectis.left + e.pageX) * onepixelequals) + ',' + eval(topllat - eval(-rectis.top + e.pageY) * onepixelequals); if (drawc(eval(-rectis.left + e.clientX), eval(-rectis.top + e.clientY))) { thislat=eval(topllat - eval(-rectis.top + e.clientY) * onepixelequals); thislong=eval(topllong + eval(-rectis.left + e.clientX) * onepixelequals); //console.log('rectis.top=' + rectis.top + ' and rectis.left=' + rectis.left + ' and rectis.y=' + rectis.y + ' And thislat=' + thislat); document.getElementById('nearestif').src='/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectis.top + e.clientY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectis.left + e.clientX) * onepixelequals)) + '&ntztontz=y'; } } }

… in our changed countries.php web application you can also try below.

Previous relevant GeoJson World Countries TimeZone Times Tutorial is shown below.

GeoJson World Countries TimeZone Times Tutorial

Some readers might be aware of our “theory regarding adverbs” and “web applications” on the net …

the most catered for adverb relates to the “where of life” … and the second banana is …
the “when of life”

… and, further to yesterday’s GeoJson World Countries SVG Overlay Safari Error Tutorial‘s emphasis on the “where of life”, today we add in a bit of the “when of life”, something right down the line of the remit of TimeZone talents.

Seriously though, a lot of us dream of the rest of the world on a world map, and wonder what time it is in other parts of the world. Phone call to relatives? A reminder SMS call? Email a game collaboration? It could all be part of life’s rich tapestry!

The expresion of this, for us, today, improving the communications with our current GeoJsom World Countries web application, take the form of emoji clocks from the 12 hour clock example forms such as …

1 o’clock is 🕐 🕐
2 o’clock is 🕑 🕑
12 o’clock is 🕛 🕛
2:30 is 🕝 🕝
11:30 is 🕦 🕦
12:30 is 🕧 🕧

… to show in “prompt” and “confirm” popup windows, as well as Map Chart maps … via new Javascript functions …

Also, in these same places we add in Time Place country ISO-2 character code based emoji flags, adding to information and colour pizazz in the informational parts to the workings of our changed countries.php web application you can also try below.

Previous relevant GeoJson World Countries SVG Overlay Safari Error Tutorial is shown below.

GeoJson World Countries SVG Overlay Safari Error Tutorial

Mostly on smaller devices (such as an iPhone), but elsewhere as well, but less drastically, this morning, using our current Display GeoJson Countries web application we would get the Safari web browser error …

A problem repeatedly occurred with https://www.rjmprogramming.com.au/HTMLCSS/countries.php

… with web application work up to yesterday’s GeoJson World Countries SVG Overlay Colour Infill Tutorial.

On discovering our first solution theory of turning yesterday’s mapsvg.js external Javascript work into an async piece of work made no difference to this situation, we surmised that the huge amount of content held in the Javascript (ie. client side) global variable appendtoinnerHTML was causing memory issues. We couldn’t shift much to do with the overall amount of “data” needing to be handled, in order to implement country SVG colour infilling, but we could shift the data from being …

client side (external) Javascript held … to, instead, (have that data) be (determined on the) …
server side PHP filling in the contents of our (relevant) HTML div id=svgd ahead of the document.body onload event timing …
<?php
$icnt=0; function apptohtmstuff($coordsare, $origc) { global $icnt; $minl=-1; $mint=-1; $maxl=-1; $maxt=-1; $zysare=explode(',', $coordsare); $svgcis=''; for ($ij=0; $ij<sizeof($zysare); $ij+=2) { if ($minl < 0) { $minl=$zysare[$ij]; $maxl=$zysare[$ij]; $mint=$zysare[1 + $ij]; $maxt=$zysare[1 + $ij]; } else { if ($zysare[$ij] < $minl) { $minl=$zysare[$ij]; } if ($zysare[$ij] > $maxl) { $maxl=$zysare[$ij]; } if ($zysare[1 + $ij] < $mint) { $mint=$zysare[1 + $ij]; } if ($zysare[1 + $ij] > $maxt) { $maxt=$zysare[1 + $ij]; } } } for ($ij=0; $ij<sizeof($zysare); $ij+=2) { if ($svgcis == '') { $svgcis='' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint); } else { $svgcis.=' ' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint); } } $icnt++; return '<div title="' . $coordsare . '" id="dsa' . (-1 + $icnt) . '" style="position:absolute;left:' . $minl . 'px;top:' . $mint . 'px;width:' . ($maxl - $minl) . 'px;height:' . ($maxt - $mint) . ';display:BLOCK;z-index:24;"><svg height="100%" width="100%"><polygon points="' . $svgcis . '" style="fill:lime;stroke:purple;stroke-width:1"></polygon></svg></div>'; }
?>
… meaning the web application’s underlying HTML size increased at the expense of no need for external Javascript involvement any more

… in our changed countries.php web application you can also try below.

We’re not exactly sure why, but …

this improved web application stability …

…everywhere … and an idea we’d ditched yesterday of …
idea to pre-colour “land” parts of the world GeoJson map green (ahead of the document.body onload event) also came good (after causing problems yesterday)

… meaning now, “overlay” wise, we could say …

document.body lowest level …

overlayed by HTML canvas element plotted with world country linework …

overlayed by HTML img (transparent image) element and its associated image map area elements … and today we add into the mix …

HTML div hosting SVG elements overlay~~ing~~ initialized with “land” parts green infilled SVG at a mid range z-index (~~only~~ as well as when called upon) individual GeoJson entities overlay

… and we (reckon we’ve) improved the colour coding user experience at the same time.

We noticed that tweaks in the changed …

… also lessened the burden on the client side by only asking any Javascript DOM command operations act on single HTML element at a time, not a whole swathe of hosted ones, in any operation.

Previous relevant GeoJson World Countries Geo Chart Tutorial is shown below.

GeoJson World Countries Geo Chart Tutorial

There are many advantages regarding today’s task to …

Integrate Google Chart Geo Chart

… as an additional “drill down” map option, functionality adding onto the work of yesterday’s GeoJson World Countries Tutorial.

What deducible data item needs to be determined for these Geo Charts to work? We need a way to deduce ISO-2 character country codes from the ISO-3 character codes existing in the GeoJson “countries.geojson” data from yesterday’s work. We happened upon the extremely generous mapping data webpage to help with these ISO-2 character deductions …

<?php
$geojsonis=file_get_contents('countries.geojson'); $parts=explode("]]", $geojsonis); $globalattr=""; $mappings=file_get_contents('http://gist.github.com/tadast/8827699'); // thanks if (strpos($mappings, '>IN</td>') !== false) { $mappings.='<td>IN</td><td>KAS</td><td>EH</td><td>SAH</td><td>SO</td><td>SOL</td><td>SS</td><td>SDS</td><td>XK</td><td>KOS</td><td>CY</td><td>CYN</td></body>'; } for ($i=0; $i<(-1 + sizeof($parts)); $i++) { if (strpos($parts[$i], '"sr_sov_a3":"') !== false) { $globalattr=' data-iso3="' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '"'; if (strpos($mappings, '>' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '</td>') !== false) { $iparts=explode('>' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '</td>', $mappings); $globalattr.=' data-iso2="' . explode('>', explode('</td>', $iparts[0])[-2 + sizeof(explode('</td>', $iparts[0]))])[-1 + sizeof(explode('>', explode('</td>', $iparts[0])[-2 + sizeof(explode('</td>', $iparts[0]))]))] . '"'; } else if (substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],-1,1) >= '0' && substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],-1,1) <= '9') { $globalattr.=' data-iso2="' . substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],0,2) . '"'; } } if (strpos($parts[$i], '"sr_subunit":"') !== false) { $globalattr.=' data-cname="' . explode('"', explode('"sr_subunit":"', $parts[$i])[1])[0] . '"'; } $coords=str_replace('[','',str_replace(']','',explode('[[' , $parts[$i])[-1 + sizeof(explode('[[' , $parts[$i]))])); $newcoords=$coords; if (!$dolatlong || 1 == 1) { $lls=explode(",", $coords); $newcoords=""; for ($j=0; $j<sizeof($lls); $j+=2) { $lls[$j]=($lls[$j] + $longoff) * $factor; $lls[$j + 1]=($lls[$j + 1] + $latoff) * $factor; if ($newcoords != "") { $newcoords.=","; $htmlis=str_replace("}", " context.lineTo(" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . "); \n}", $htmlis); } else { $htmlis=str_replace("}", " context.stroke(); \n context.beginPath(); \n context.moveTo(" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . "); \n}", $htmlis); } $newcoords.='' . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]); } } $abit.="<area" . $globalattr . " onclick=\"ouralert(this.getAttribute('data-cname'),this.getAttribute('data-iso3'),this.getAttribute('data-iso2'),'Longitude,Latitude coordinates are " . $coords . "');\" shape='poly' coords='" . $newcoords . "'></area>\n"; //echo "<area type='poly' coords='" . $newcoords . "'></area>\n"; }
?>

… in our image map area elements PHP creation code above. As you can see, extra “intelligence”, moving forward, is contained in area element global data attributes.

Which leaves us with why any of this helps functionality within our changed countries.php web application you can also try below?

Geo Chart can zoom into a country view …
Geo Chart can involve emoji (🏠 &127968;) or image (SVG) circle based symbology for the “User Clicked Place” and nearby TimeZone places respectively …
all these symbols can be clicked to open popup windows containing TimeZone Place Wikipedia webpages of relevance …
an emoji national flag (eg. Zambia “ZA” could be used to derive 🇿🇦 🇿🇦 flag emoji) derived from those ISO-2 character codes can supplement the GeoJson (more ISO-3 character based) names presented in the underlying data, in the Geo Chart title …
contextualizing the accompanying Map Chart … and …
vice versa regarding hovering over symbology (which works on Map Chart, but not Geo Chart) …
within the Map Chart iframe a “Geo” link can glean a “zoomed out” world Geo Chart view of your TimeZone places

And feel free to (re-)try our tweaked “to make thinner the coastline linework” regions.php GeoJson PHP web application in a new window, or you can also try below.

Previous relevant GeoJson World Countries Tutorial is shown below.

GeoJson World Countries Tutorial

Know your GeoJson! Yes, pretty obviously, any two GeoJson datasets might display the same in that “map plotting” sense, but one might have different and/or more “intelligence” than the other. Often, an XML has more “intelligence” than equivalent HTML (barring the use of global data attributes, that is), as today’s ~~Corolla~~corollary.

And so, moving on from yesterday’s GeoJson World Coastline TimeZone Tutorial, today, we present a new GeoJson admin 0 countries we download, and upload as “countries.geojson” data set, again via the excellent HTTP://geojson.xyz/ repository, thanks.

From it, we do get a different JSON additional “intelligence” …

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"scalerank":1,"labelrank":1,"sr_sov_a3":"ZWE","sr_adm0_a3":"ZWE","sr_gu_a3":"ZWE","sr_su_a3":"ZWE","sr_subunit":"Zimbabwe","featureclass":"Admin-0 scale ranks"},"geometry":{"type":"Polygon","coordinates":[[[31.287890625000017,-22.40205078125001],[31.197265625,-22.34492187500001],[31.07343750000001,-22.30781250000001],[30.916113281250006,-22.29072265625001],[30.71162109375001,-22.2978515625],[30.46015625000001,-22.32900390625001],[30.1904296875,-22.291113281250006],[29.90234375,-22.184179687500006],[29.6630859375,-22.146289062500003],[29.37744140625,-22.19277343750001],[29.36484375,-22.193945312500006],[29.315234375000017,-22.15771484375],[29.237207031250023,-22.07949218750001],[29.106835937500023,-22.065722656250003],[29.07148437500001,-22.047460937500006],[29.042382812500023,-22.018359375],[29.023339843750023,-21.98125],[29.01582031250001,-21.93994140625],[29.03730468750001,-21.811328125],[29.02558593750001,-21.796875],[28.99072265625,-21.78144531250001],[28.919335937500023,-21.766015625],[28.74775390625001,-21.707617187500006],[28.532031250000017,-21.65126953125001],[28.181640625,-21.58935546875],[28.04560546875001,-21.573046875],[28.014062500000023,-21.55419921875],[27.974609375,-21.50673828125001],[27.90742187500001,-21.35908203125001],[27.844140625000023,-21.261523437500003],[27.693457031250006,-21.11103515625001],[27.66943359375,-21.064257812500003],[27.67695312500001,-20.94482421875],[27.688085937500006,-20.84833984375001],[27.70429687500001,-20.76640625],[27.69697265625001,-20.689746093750003],[27.69482421875,-20.59453125],[27.699609375000023,-20.53066406250001],[27.679296875,-20.503027343750006],[27.624609375,-20.48359375000001],[27.46894531250001,-20.47480468750001],[27.28076171875,-20.47871093750001],[27.27460937500001,-20.3818359375],[27.256738281250023,-20.23203125],[27.221484375000017,-20.145800781250003],[27.17822265625,-20.10097656250001],[27.091796875,-20.05419921875],[26.91669921875001,-19.99013671875001],[26.67822265625,-19.89277343750001],[26.474609375,-19.748632812500006],[26.241015625000017,-19.5693359375],[26.168066406250006,-19.53828125000001],[26.081933593750023,-19.369921875],[25.95068359375,-19.08173828125001],[25.95917968750001,-18.985644531250003],[25.939355468750023,-18.93867187500001],[25.811914062500023,-18.79707031250001],[25.78369140625,-18.72353515625001],[25.76123046875,-18.64921875],[25.55830078125001,-18.441796875],[25.4892578125,-18.35126953125001],[25.43671875000001,-18.234960937500006],[25.384375,-18.14199218750001],[25.340234375000023,-18.1044921875],[25.28242187500001,-18.04121093750001],[25.242285156250006,-17.969042968750003],[25.224023437500023,-17.91523437500001],[25.239062500000017,-17.843066406250003],[25.2587890625,-17.793554687500006],[25.451757812500006,-17.84511718750001],[25.55712890625,-17.84951171875001],[25.6396484375,-17.82412109375001],[25.741601562500023,-17.858203125],[25.86328125,-17.951953125],[25.995898437500017,-17.969824218750006],[26.139550781250023,-17.91171875],[26.333398437500023,-17.929296875],[26.577539062500023,-18.022558593750006],[26.779882812500006,-18.04150390625],[27.020800781250017,-17.95839843750001],[27.235742187500023,-17.728320312500003],[27.437890625000023,-17.51191406250001],[27.63671875,-17.262109375],[27.75654296875001,-17.060351562500003],[27.932226562500006,-16.89619140625001],[28.16376953125001,-16.76972656250001],[28.399804687500023,-16.66279296875001],[28.760644531250023,-16.53193359375001],[28.760546875000017,-16.53212890625001],[28.83271484375001,-16.424121093750003],[28.856738281250017,-16.30615234375],[28.856738281250017,-16.14228515625001],[28.875585937500006,-16.0361328125],[28.9130859375,-15.98779296875],[28.973046875000023,-15.950097656250009],[29.050585937500017,-15.901171875],[29.287890625000017,-15.776464843750006],[29.4873046875,-15.69677734375],[29.729589843750006,-15.644628906250006],[29.994921875000017,-15.64404296875],[30.25068359375001,-15.643457031250009],[30.39609375,-15.64306640625],[30.39814453125001,-15.80078125],[30.409375,-15.978222656250011],[30.437792968750017,-15.995312500000011],[30.630175781250017,-15.999218750000011],[30.938769531250017,-16.01171875],[31.236230468750023,-16.02363281250001],[31.426171875000023,-16.15234375],[31.48984375,-16.1796875],[31.687597656250006,-16.214160156250003],[31.939843750000023,-16.428808593750006],[32.243261718750006,-16.44873046875],[32.45195312500002,-16.515722656250006],[32.635839843750006,-16.589453125],[32.741796875,-16.67763671875001],[32.81025390625001,-16.69765625],[32.902929687500006,-16.704199218750006],[32.94804687500002,-16.71230468750001],[32.93789062500002,-16.775976562500006],[32.87626953125002,-16.88359375],[32.884375,-17.03779296875001],[32.969335937500006,-17.2515625],[32.98076171875002,-17.4375],[32.9546875,-17.765429687500003],[32.95556640625,-18.08291015625001],[32.96464843750002,-18.1962890625],[32.978515625,-18.271484375],[32.99638671875002,-18.312597656250006],[32.99306640625002,-18.35957031250001],[32.942480468750006,-18.49267578125],[32.90166015625002,-18.632910156250006],[32.90029296875002,-18.6890625],[32.88457031250002,-18.728515625],[32.8544921875,-18.763671875],[32.72197265625002,-18.828417968750003],[32.69921875,-18.868457031250003],[32.69970703125,-18.94091796875],[32.71650390625001,-19.00185546875001],[32.766210937500006,-19.02431640625001],[32.826171875,-19.05878906250001],[32.84980468750001,-19.10439453125001],[32.85,-19.152441406250006],[32.83095703125002,-19.24140625000001],[32.77763671875002,-19.388769531250006],[32.83076171875001,-19.558203125],[32.89042968750002,-19.668066406250006],[32.97265625,-19.79541015625],[33.00673828125002,-19.873828125],[33.0048828125,-19.93017578125],[32.992773437500006,-19.98486328125],[32.86962890625,-20.2171875],[32.780859375,-20.36152343750001],[32.67255859375001,-20.51611328125],[32.529296875,-20.613085937500003],[32.49238281250001,-20.659765625],[32.477636718750006,-20.712988281250006],[32.48281250000002,-20.82890625],[32.476171875,-20.95009765625001],[32.353613281250006,-21.136523437500003],[32.429785156250006,-21.29707031250001],[32.41240234375002,-21.311816406250003],[32.37109375,-21.33486328125001],[32.19472656250002,-21.515429687500003],[32.01630859375001,-21.698046875],[31.88593750000001,-21.83154296875],[31.737695312500023,-21.9833984375],[31.57148437500001,-22.15351562500001],[31.429492187500017,-22.298828125],[31.287890625000017,-22.40205078125001]]]}}

… and “mapping look” because country borders are added in, and some JSON attributes we can call on to allow for …

the similar Google Chart Map Chart maps introduced yesterday into the user interaction mix … as well as …
Wikipedia, thanks, webpage lookup possibilities calling on those new GeoJson property attributes presented within the dataset above

We enable this, as we just add in some Javascript popup window type equals “prompt” to the existant “confirm” and “alert” logic of yesterday.

Feel free to try the how we got there regions.php GeoJson PHP World Countries web application in a new window, or below …

Previous relevant GeoJson World Coastline TimeZone Tutorial is shown below.

GeoJson World Coastline TimeZone Tutorial

Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance. As such, given the “purely coastline” GeoJson data involved in our fledgling PHP web application of yesterday’s GeoJson World Coastline Primer Tutorial a useful arrangement for improvement involves …

document.body onclick event co-ordinates … able to be converted to …
longitude, latitude (easily, only because of our simplistic map projection, of course) … onfed to …
our inhouse “TimeZone Places” web application PHP helper

… can have us helping out your curious web “clicking” user with the 3 nearest TimeZone places, as a reference as to where they are “clicking” in the world.

Feel free to try our improved regions.php GeoJson PHP web application in a new window, or below …

Stop Press

Our efforts in making our new tweaked regions.php GeoJson PHP web application more mobile platform user friendly reminds us about a salutary issue regarding touch gestures …

in a discrete click methodology of interest, you could adopt a non-mobile “onmousedown” logic set that does not get interfered with by a mobile “ontouchdown” logic set (perhaps leaving “onclick” event, which both non-mobile and mobile both recognise, for another event logic role) … and …
neither will interrupt the mobile gestures associated with swiping and pinching, which refer to the events “ontouchstart” and “ontouchend” at either end of their lifespan

Previous relevant GeoJson World Coastline Primer Tutorial is shown below.

GeoJson World Coastline Primer Tutorial

We’re keen to further explore the possibilities of GeoJson public data sets, further to yesterday’s Swift Playgrounds on macOS Map Emoji Tutorial.

And then we remembered some of the methodologies we used with Responsive Web Design Landing Page Image Map Tutorial, talking about image maps …

And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out … but not today?! Why not? We have a funny set of needs, they being …

our Image Map’s image will have a variable set of width x height dimensions …

our Image Map’s image will be transparent

our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working

… the first two ideas of which, along with …

canvas element where the …
GeoJson coordinates … thanks to https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_coastline.geojson via HTTP://geojson.xyz/ …
will be plotted … but the canvas element …
has a z-index set below the image and image map above … meaning …
we can add some region specific coding into the …
image map area element (shape=poly) onclick logics

… in our “early days” “proof of concept” regions.php GeoJson PHP web application.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged align, attribute, cache, coastline, country, country code, data attribute, drag, drag and drop, drop, external Javascript, function, geojson, global data attribute, IFRAME, iso code, iso country code, Javascript, map, PHP, places, position, programming, timezone, timezone places, tutorial | Leave a comment

Find English Word Game Collaboration Tutorial

Posted on March 26, 2024 by admin

Find English Word Game Collaboration Tutorial

Collaboration, regarding games, is synonymous with “level playing field”, and that is a principle upheld with today’s introduction of sharing and collaboration functionality into our Find the Word game, and further to yesterday’s Find English Mobile Clicked Word Ends Game Tutorial.

As such, we need to pick “common denominators”, so to speak, and that is, as of recent times, to encourage the use of …

tabular mode of use … when sharing via email or SMS … rather than …
textarea selectionchange event mode of use

… in the sense that we don’t know the arrangements for an email or SMS recipient as to whether they’ll be reading the communication on a mobile or non-mobile platform.

Once a communication is sent, the letters presented will match, and to get the competitive juices flowing, we add a timer aspect to the scoring. Much of the change relates to catering for email and SMS hashtagging arrangements …

… with that “midair feeling” approach to the “a” “mailto:” and/or “sms:” links used via the 📧 (email) and/or 📟 (SMS) emoji buttons now available in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Mobile Clicked Word Ends Game Tutorial is shown below.

Find English Mobile Clicked Word Ends Game Tutorial

We tried making the mobile platforms work with the selectionchange event of yesterday’s Find English Highlighted Words Game Selection Tutorial‘s Find the Word game web application, but we decided, today …

the default game operation for mobile platforms should be a new …
- overlayed
- table … based …
- cell … onclick event based …
- modus operandi … for each end of the user chosen word_s (as user clicked)
… means by which to play the game … as well as …
the default game operation for non-mobile platforms remains the old textarea selectionchange event methodology … but either above …
defaults can be overridden by a new address bar URL argument

We made the selectionchange event range.start and range.end form the suffix of those “cell” element “IDs” above within the following document.body onload event function …

And that way we hived off most of the selectionchange event logic into a global variable sensitive new Javascript function hansel called by both methodologies above …

… in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Highlighted Words Game Selection Tutorial is shown below.

Find English Highlighted Words Game Selection Tutorial

Thinking about yesterday’s Find English Highlighted Words Game Primer Tutorial‘s first draft of a Find the Word game web application, we found it easy to pinpoint where to improve it …

better informing the user when a textarea selection event detection caused an analysis of the word forwards and backwards to be analyzed … and flagging this better for them …
function preshowthesel() { if (showsel) { if (rend >= 0 && rstart >= 0) { if (!clickthere) { setTimeout(preshowthesel, 5000); return ''; } if (isd || isg0 || isg1) { if (altsel.trim() != '' && thesel != '') { //alert('here ' + document.getElementById('myta').value.indexOf(thesel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), hlem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), lem(altsel))); } else if (altsel.trim() != '' && lastsel != '') { //alert('hEre ' + document.getElementById('myta').value.indexOf(lastsel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel))); } // else { //alert('Why? ' + thesel); //} } else if (ish) { if (eval('' + rstart) > 0) { 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())); 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()); } else { 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())); 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()); } } } altsel=' '; } }
… as your starting point …
parameterizations via ? and & address bar URL arguments … pretty self explanatory via …
var minwordlength=location.search.split('min=')[1] ? Math.min(3,eval(decodeURIComponent(location.search.split('min=')[1].split('&')[0]))) : 3; var maxwordlength=location.search.split('max=')[1] ? eval(decodeURIComponent(location.search.split('max=')[1].split('&')[0])) : 15; var numlettersacross=location.search.split('across=')[1] ? eval(decodeURIComponent(location.search.split('across=')[1].split('&')[0])) : 76; var numlettersdown=location.search.split('down=')[1] ? eval(decodeURIComponent(location.search.split('down=')[1].split('&')[0])) : 40; var fontpixels=location.search.split('pixels=')[1] ? eval(decodeURIComponent(location.search.split('pixels=')[1].split('&')[0])) : 13;
regional indicator based emoji numerical display helpers for down and diagonal user guesses … in an overlayed textarea element … using …
var letteremojis=[], blankemojis=[], loweremojis=[], upperemojis=[]; var lris='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); for (var ii=0; ii<lris.length; ii++) { letteremojis.push(orflag(lris[ii])); blankemojis.push(' '); // ' '; loweremojis.push(lris[ii].toLowerCase()); // ' '; upperemojis.push(lris[ii].toUpperCase()); // ' '; } function orflag(thiscc) { var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 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']; var ccsuff='', ccchar=' ', cde=''; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase(); ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';'; cde='.'; } return ccsuff; }
… as an ascii letter to emoji mapping mechanism … or …
toggle the display text case for horizontal user guesses … in an overlayed textarea element … using …
function togglelem(insg) { var outsg=''; var inarr=insg.split(''); for (var jin=0; jin<insg.length; jin++) { 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()) { outsg+=insg.substring(jin).substring(0,1).toUpperCase(); } 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()) { outsg+=insg.substring(jin).substring(0,1).toLowerCase(); } else { outsg+=insg.substring(jin).substring(0,1) } } return outsg; }
add a very simple text CSS styling embellisher …
<style>
textarea { text-shadow: -1px 1px 1px #952dff; }
</style>
use the webpage title (on web browser tab) to allow a synopsis without resorting to right hand information, perhaps … via …
document.title='Score:' + document.getElementById('score').innerHTML.split('Score:')[1] + ' ... Find the Words Highlighting Game - RJM Programming - March, 2024';

… in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Highlighted Words Game Primer Tutorial is shown below.

Find English Highlighted Words Game Primer Tutorial

Yesterday’s Event Calendar Collaboration Textarea Highlight Linking Tutorial gave us an idea for an English Word Game based on the use of the “/usr/share/dict/words” inbuilt, in our case, English, dictionary you get to look up for free on macOS and Linux web server systems.

This highlighting within a sea of letters presented in a textarea was the framework for users to play a game highlighting …

horizontally
vertically
diagonally

… words in left to right or top to bottom order, or reversed, to score in our “Find the Words” game presented today.

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 none of the above. And we hope to help with some better display smarts with future releases.

Take a look at the crucial selectionchange event logic for today’s Find the Word game …

… in our first draft Find the Words game you can try below …

Previous relevant Event Calendar Collaboration Textarea Highlight Linking Tutorial is shown below.

Event Calendar Collaboration Textarea Highlight Linking Tutorial

For the first time we can remember, with our Events in Month web application of yesterday’s Event Calendar Collaboration Remembering Recipient Tutorial …

we’re channelling how in emails “word strings” starting with “http” become links … and so …
in our event in month “blurb” textarea elements we allow user highlighted text containing such “http” “word strings” be opened in popup windows showing the content of those URLs, as available

Here is the relevant Javascript we ended up with, for this …

Also, today, we have a few CSS tweaks in the changed events_in_month.htm parent of the Events in Month web application. Feel free to try it for yourself.

Stop Press

Just briefly, delved into the wooooorrrrllllldddd of days of the week before 1582 debate … you had to be there … and in the words of Lleyton … Come on!!!! And we came out the other side. Good times! Anyway, thanks for all the interesting discussion, which we recommend you start at with this gem. 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 … this could be needed?!

Previous relevant Event Calendar Collaboration Remembering Recipient Tutorial is shown below.

Event Calendar Collaboration Remembering Recipient Tutorial

When doing our inhouse testing for Event Calendar Collaboration Tutorial the other day, it got us “peeved”, shall we say. We wanted a mechanism, with those “a” link “mailto:” emailing arrangements, of not having to fill out the email address in the “To:” field each time. First world problem alert! Still and all …

When it comes to procedures …
Aaaaaarrrrgggghhhh …
Nuances count … regarding …
Errrrrrr …
Saving time …
Saving frustration

… resulting in the “easy to remember” acronym WANESS … we rest our cases!

What can help here? Well, it is a personalization … so … anyone, anyone? Yes, Lou, back from holidays, a month late … yes, well, okay … we can see you’ve put some thought into this … HTTP Cookies could be used. Yes, Shwetank, you’ve had your hand up some time now. We agree, Web Storage window.localStorage allows for more data, so we’ll go with that, though either style of approach would work here.

Global variables initialization …
`var defemail='', defsms=''; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); }`
Within document.body onload event logic …
if (document.getElementById('semail') && document.getElementById('ssms')) { document.getElementById('semail').oncontextmenu=function(){ emailaskit(); }; document.getElementById('semail').ontouchmove=function(){ emailaskit(); }; document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); }; document.getElementById('ssms').ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android\|BlackBerry\|iPhone\|iPad\|iPod\|Opera Mini\|IEMobile/i)) { document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes'; } else { document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes'; } }
Calling these two Javascript function helpers …
function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ' '; var emailm=prompt('Enter default email address.', defemail.trim()); if (emailm == null) { emailm=''; } if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) { defemail=emailm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', emailm.trim()); } } defemail=defemail.trim() + ' '; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ' '; var smsm=prompt('Enter default SMS number.', defsms.trim()); if (smsm == null) { smsm=''; } 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() == '') { defsms=smsm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim()); } } defsms=defsms.trim() + ' '; }
And allow control, as well, at the SMS prompt window logic …
function dosms() { if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); } //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) { 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 : '')) ); } else { 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 : ''))); } if (snum == null) { snum=''; } if (snum.indexOf('@') != -1) { if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', snum); defemail=snum; } return doemail(snum); } 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() == '') { //alert('Snum=' + snum + '?'); if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', snum); defsms=snum; } var azx=top.document.getElementById('xas' + 'ms'); if (azx == null) { azx=top.document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { top.document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.target = "_top"; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze())); azx.click(); } return ''; }

Also, today, we battled the logic to allow the textarea element onblur events also open the door to emailing and SMS “work in progress”. Believe it or not, this timing change was quite difficult in the changed events_in_month.htm parent of the Events in Month web application. Never a dull moment in web application I.T. we’d say!

Previous relevant Event Calendar Collaboration Tutorial is shown below.

Event Calendar Collaboration Tutorial

The Event Calendar web application project, of Event Calendar PHP Bookmark Tutorial, from last year is worth a revisit, the reason being …

it did not have a fully fleshed out collaboration or sharing set of functionalities … at the time, probably, because …
each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous “mailto:” or “sms:” communication conduits, back to when we first tackled this project … but now …
hashtagging parts to the “mailto:” URLs (and maybe sometimes the “sms:” URL) might cover the data length needs

… 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!

Timing became really important with this integration of …

… communication conduit possibilities. With its design we have to wait until the point where the user is filling in textarea elements regarding a designated …

Month
Year

… of relevance, before we allow the email 📧 and SMS 📟 emoji buttons be shown. In the code …

Amended HTML h1 element static HTML to add, later shown, perhaps, email 📧 and SMS 📟 emoji buttons …
`<h1>Events in Month   <button style=display:none; title='Share via Email' id=semail onclick="doemail('');">📧</button> <button style=display:none; title='Share via SMS' id=ssms onclick=dosms();>📟</button> </h1>`
New static HTML div element placed to the bottom of the body element …
`<div id=divas></div>`
New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) …
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]) : ''; if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) { bigbih+='<a target=_blank id=xae' + 'mail style=display:none; href="mailto:"></a>'; } if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) { bigbih+='<a target=_blank id=xas' + 'ms style=display:none; href="sms:"></a>'; } var viatext='', smallbih='', wes=null, sparewes=null;
On or around document.body onload event we can analyze any such location.hash hashtagging data …
if (bigbih.indexOf('</he' + 'ad>') != -1 \|\| bigbih.indexOf('<b' + 'o' + 'dy') != -1 \|\| bigbih.indexOf('<h' + '1') == 0) { //bigbih=bigbih.replace('" id="eventcalendar"', 'margin-top:50px;" id="eventcalendar"'); viatext=' (via contact at ' + ('' + new Date()) + ')'; if (bigbih.indexOf('<h' + '1') == 0) { smallbih=bigbih; } else { smallbih=bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].replace(bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].split('>')[0] + '>', ''); } wes=windowopen('./events_in_month.htm','_blank','top=40,left=40,width=800,height=800'); //alert(bigbih); if (wes) { setTimeout(function(){ wes.document.write(bigbih); }, 3000); //document.body.innerHTML=bigbih; setTimeout(function(){ wes.document.getElementById('semail').style.display='inline-block'; wes.document.getElementById('ssms').style.display='inline-block'; wes.document.getElementsByTagName('h1')[0].style.display='none'; wes.document.getElementsByTagName('h3')[0].style.display='none'; //wes.setviatext(viatext); //wes.setphpthere(' '); //wes.togglewords(); }, 5000); } }
A window.open wrapper windowopen Javascript function …
function windowopen(poneis, ptwois, pthreeis) { document.getElementById('divas').innerHTML='<iframe name=ovif id=ovif style="position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;" src="' + poneis + '" onload=wopencheck(this);></iframe>'; //document.getElementsByTagName('h1')[0].style.opacity='0.0'; //document.getElementsByTagName('h3')[0].style.opacity='0.0'; sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif'); //sparewes=window.open(poneis, 'ovif'); sparewes.document.write(bigbih); setTimeout(function(){ sparewes.document.getElementById('semail').style.display='inline-block'; sparewes.document.getElementById('ssms').style.display='inline-block'; var sdem=sparewes.document.getElementById('semail').outerHTML; var sdss=sparewes.document.getElementById('ssms').outerHTML; sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,''); sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,''); sparewes.document.getElementsByTagName('h1')[0].style.display='none'; sparewes.document.getElementsByTagName('h3')[0].style.display='none'; sparewes.document.getElementById('dmore').innerHTML+=(' ' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + ' ' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '<br>'); //sparewes.setviatext(viatext); //sparewes.setphpthere(' '); //sparewes.togglewords(); }, 5000); return null; }
Is augmented by other new Javascript functions …
function hfanalyze() { var fio=document.getElementById('ecform'); if (forceit) { forceit=false; return true; } var delm='?'; var fioih=fio.innerHTML; var fions=fioih.split(' name="'); var testurl=documentURL.split('?')[0].split('#')[0]; //alert(fions.length); for (var ijk=1; ijk<fions.length; ijk++) { testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value.replace(/\?\>/g,'? >')); delm='&'; } //alert(testurl.length); //if (eval('' + testurl.length) < 750) { return true; } //if (lastbut.value.indexOf('New') == 0 \|\| 11 == 11) { if (22 == 22) { //wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600'); //wo.document.write('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); return ('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); } else if (phpthere != '') { if (1 == 1) { postit(fio, false, testurl); } else { fio.target='phpif'; fio.method='POST'; fio.action='./events_in_month.php'; if (!document.getElementById('dmore')) { document.getElementById('ddmore').innerHTML='<input type=hidden id=caltitle name=caltitle value="' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '"></input><input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } else { document.getElementById('dmore').innerHTML='<input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } } return 'true'; } return 'false'; } function doemail(inidea) { var azx=document.getElementById('xae' + 'mail'); if (!azx) { azx=document.createElement("a"); } //if (1 == 1) { //document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); //} azx.style = "display: none"; azx.id = 'xaem' + 'ail'; azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('<')[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] + '<h2' + document.body.innerHTML.split('<h2')[1])); azx.click(); return ''; } function dosms() { //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) >= 18000) { 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,''); } else { snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(/^null/g,''); } if (snum.indexOf('@') != -1) { return doemail(snum); } else if (snum.trim() != '') { alert('Snum=' + snum + '?'); var azx=document.getElementById('xas' + 'ms'); if (azx == null) { azx=document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); azx.click(); } return ''; } function wopencheck(iois) { var aconto = null; aconto = (iois.contentWindow \|\| iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=smallbih; aconto.setviatext(viatext); } } } function setviatext(towhat) { viatext=towhat; }

… to help bed down this new sharing and collaboration functionality in a changed events_in_month.htm parent of the Events in Month web application.

Previous relevant Event Calendar PHP Bookmark Tutorial is shown below.

Event Calendar PHP Bookmark Tutorial

Client meets server today, allowing the PHP data storage talents in yesterday’s Event Calendar PHP Tutorial‘s work to meet a “clientside” way to …

Record to Remember via Bookmark

… use the web browser Bookmarks to help you recall an Events in Month report with long entries.

Involving a Bookmark still needs those “get” ? and & arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as …

https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1

… that mapping being possible, now, making use of a pseudo hashtag arrangement … your Clayton‘s hashtag, if you will!

To start to use a hashtag suits, as your hashtag navigation only makes sense in the “clientside” woooorrrrrllllddd, and even there, really using one only tries to position a webpage where an element with an ID matching the hashtag sits (and we are never going to have this ID element in our work), and in the meantime we’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) …

var documentURL=document.URL;

… as stupid and simple looking as it is, is crucial for us. We get child webpage parts (like our PHP) to change document.URL to a far too long in normal circumstances address bar URL the rest of the code feeds off. It’s just that now, that far too long in normal circumstances address bar URL has a #[hashtag] appended such as …

#August__2023_00000__1

… uniquifying a Month, Year Events in Month identifier part with a version of the user’s IP address (so that they only see what is relevant to them).

Address bar URLs such as “https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1” are Bookmark_able, and so we allow for similar outcomes with less concern about how much data is being “recorded” and recallable (via that web browser’s Bookmark system).

Also, today, a lot of CSS tweaks, so that the CSS styling now looks like …

… and we thank this webpage for the heads up regarding how to calculate week numbers within a year data item displays now available in …

a changed events_in_month.htm parent of the Events in Month web application
helped out by its changed child PHP events_in_month.php

Previous relevant Event Calendar PHP Tutorial is shown below.

Event Calendar PHP Tutorial

Let’s face it. Serverside PHP is just great! It opens up so many opportunities regarding data in your web applications.

As such, onto yesterday’s Event Calendar New Window Tutorial logic we now have a …

Record to Remember

… form submit button (toggling) 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 events_in_month.php PHP itself. And this same PHP can populate options in a new dropdown element in the parent to facilitate the recalling of any relevant “Record to Remember” recordings.

The PHP is kind of short, so we will show it below, including one MAMP example of that “self storage” …

<?php // events_in_month.php // RJM Programming // August, 2023 // Help out events_in_month.htm $hcont=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'events_in_month.htm'); $cont=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'events_in_month.php'); $ipad=server_remote_addr(); $ipadless=$ipad; $js=''; function server_remote_addr() { global $ipadless; $rma = $_SERVER['REMOTE_ADDR']; $ua = strtolower($_SERVER['HTTP_USER_AGENT']); // you can add different browsers with the same way .. $ipadless=str_replace(".", "_", str_replace(":", "_", $rma)); if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua)) $rma = '000000'.$rma; elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua)) $rma = '00000'.$rma; elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua)) $rma = '0000'.$rma; elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua)) $rma = '000'.$rma; elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua)) $rma = '00'.$rma; elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua)) $rma = '0'.$rma; return str_replace(".", "_", str_replace(":", "_", $rma)); } $itdone=false; if (isset($_GET['init'])) { if (strpos($cont, '_' . $ipad . '=') !== false) { $things=explode('_' . $ipad . '=', $cont); for ($it=1; $it<sizeof($things); $it++) { if ($it == 1 && !$itdone) { $itdone=true; $js.="\n parent.document.getElementById('myoldsel').style.display='inline-block'; \n"; } $js.="\n parent.document.getElementById('myoldsel').innerHTML+='<option value=\"" . explode("\n", $things[$it])[0] . "\">" . 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] . "</option>'; \n"; } } if (strpos($cont, '0' . $ipadless . '=') !== false) { $things=explode('0' . $ipadless . '=', $cont); for ($it=1; $it<sizeof($things); $it++) { if ($it == 1 && !$itdone) { $itdone=true; $js.="\n parent.document.getElementById('myoldsel').style.display='inline-block'; \n"; } $js.="\n parent.document.getElementById('myoldsel').innerHTML+='<option value=\"" . explode("\n", $things[$it])[0] . "\">" . 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] . "</option>'; \n"; } } echo "<html><head><script type='text/javascript'> " . $js . " </script></head><body><p>" . $ipad . "</p></body></html>"; } else if (isset($_POST['phpthere']) && isset($_POST['bigurl']) && isset($_POST['caltitle'])) { //file_put_contents('xz.xz', 'l'); if (strpos($cont, '// ' . str_replace(' ','_',str_replace(',','_',str_replace('+',' ',urldecode($_POST['caltitle'])))) . '_' . str_replace('+',' ',urldecode($_POST['phpthere'])) . '=' . $_POST['bigurl'] . "\n") === false) { //file_put_contents('xz.xzz', 'l'); $cont=str_replace('?' . '>', '// ' . str_replace(' ','_',str_replace(',','_',str_replace('+',' ',urldecode($_POST['caltitle'])))) . '_' . str_replace('+',' ',urldecode($_POST['phpthere'])) . '=' . $_POST['bigurl'] . "\n" . '?' . '>', $cont); file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'events_in_month.php', $cont); } if (strpos($cont, '_' . $ipad . '=') !== false) { $things=explode('_' . $ipad . '=', $cont); for ($it=1; $it<sizeof($things); $it++) { if ($it == 1 && !$itdone) { $itdone=true; $js.="\n parent.document.getElementById('myoldsel').style.display='inline-block'; \n"; } $js.="\n parent.document.getElementById('myoldsel').innerHTML+='<option value=\"" . explode("\n", $things[$it])[0] . "\">" . 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] . "</option>'; \n"; } } if (strpos($cont, '0' . $ipadless . '=') !== false) { $things=explode('0' . $ipadless . '=', $cont); for ($it=1; $it<sizeof($things); $it++) { if ($it == 1 && !$itdone) { $itdone=true; $js.="\n parent.document.getElementById('myoldsel').style.display='inline-block'; \n"; } $js.="\n parent.document.getElementById('myoldsel').innerHTML+='<option value=\"" . explode("\n", $things[$it])[0] . "\">" . 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] . "</option>'; \n"; } } //file_put_contents('xz.xzzz', "<html><head><script type='text/javascript'> " . $js . "\n parent.checkif(parent.document.getElementById('phpif')); \n" . " </script></head><body><p>" . str_replace(' ','%20',str_replace('+',' ',urldecode($_POST['bigurl']))) . "</p></body></html>"); echo "<html><head><script type='text/javascript'> " . $js . "\n parent.checkif(parent.document.getElementById('phpif')); \n" . " </script></head><body><p>" . str_replace(' ','%20',str_replace('+',' ',urldecode($_POST['bigurl']))) . "</p></body></html>"; } else { echo $hcont; } exit; // // // January__1970_00000__1=http://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= ?>

Yes, the parent needed to change for our events_in_month.htm parent of Events in Month web application role.

Previous relevant Event Calendar New Window Tutorial is shown below.

Event Calendar New Window Tutorial

Onto yesterday’s Event Calendar Remembered Tutorial‘s “Mystery Dilemma” …

But, there’s an inherent weakness with the design, we’ll go into more into the future.

… well … it’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 “get arguments approach” ( ie. use ? and & arguments at the address bar ) is restricted by length restrictions regarding URL lengths.

Rather than jump to PHP serverside ideas just yet, we wanted to show some more ideas, staying with “clientside only thinking”, today, as well as improving the UX (user experience) and small steps forward regarding styling.

Okay then, regarding the idea to remember an Event in Month form, when there is a lot of data, and staying “just clientside”, we’ve coded for a “New Window” idea, albeit not as memorable as the default “Remember in Bookmark” possible for your smaller datasets. However, in saying that, we found that within this new window, with our Google Chrome web browser, we could …

bring up Context Menu with a right click or two finger gesture within the popup window webpage content …
pick Inspect option …
be in Elements tab of your Web Inspector … and …
highlight top <html> tag …
Context Menu with a right click or two finger gesture …
pick Copy -> Copy outerHTML … so that …
your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …
Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP local Apache/PHP/mySql web server environment, where you can further look at and develop your own ideas)

The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …

… the form submit buttons are reworded accordingly.

Another idea from this blog thread’s inspiration …

… we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb Title, available to the user via a new dropdown “Bold Title” option.

And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …

text shadow means by which the text of Event Calendar can be more impactive …
<div style="text-shadow:-1px 1px 1px #ff2d95;" id=eventcalendar></div>
dropdown element conditional styling …
<style> .dayb { color: white; background-color: red; padding: 5 5 5 5; } .dow { color: purple; font-style: bold; } .selday { margin-left: 8px; background-color: rgba(255,0,0,0.7); display: inline-block; width: 50px; } </style>
…
if (thislabel.substring(0,1) == 'i') { if (thisval.trim() != '') { document.getElementById(thislabel.replace('i', 'sel')).style.color='white'; document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red'; } document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); //.replace(/\+$/g, ' '); document.getElementById(thislabel).value=thisval.replace(/\+$/g, ' '); } else { document.getElementById(thislabel).value=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); } }
placeholder on Blurb conditional existence …
var ourdata=''; // ... if (documentURL.indexOf('?') != -1) { if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; } // ... trtemplate='<tr id=tr01.00><td style=width:22%;><span id=sone01.00 class=dow>' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '</span><br><br><span id=stwo01.00 class=dayb>1<span onblur=sepit(this); contenteditable=true id=sp01.00></span><input type=hidden id=i01.00 name=i01.00 value=""></input><select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange="selit(this);" id=sel01.00><option id=opt01.00 value=""></option><option title="All such in month (ie. weekly)" value="...">...</option><option title="And ..." value="&...">&</option><option value=Bold>Bold Title</option><option value=Clone>Clone</option></select></span></td><td class=blurb title="What is on?" id=tb01.00><span title="Event title" style="font-style:bold;color:blue;" id=bd01.00></span><textarea name=ta01.00 id=ta01.00 style="width:100%;height=100%;" ' + ourdata + 'placeholder="Blurb ..." class=tablurb></textarea></td></tr>'; // ... } // ... }

… for our “second draft” events_in_month.htm Events in Month web application.

Previous relevant Event Calendar Remembered Tutorial is shown below.

Event Calendar Remembered Tutorial

We were inspired by an Event Calendar pamplette we saw the other day …

… to write a new “proof of concept” Events in Month web application, whose content can be recalled via the web browser’s Bookmark methodologies.

We liked the ideas for day of week and/or date of month grouping arrangements we included, being, the way we interpreted it …

just on this day in this month … default
on this day of the week throughout the month in question … “…“
on this day and some others in that month in question … “&” … to start with and further amendments available via contenteditable=true span element
“Clone” value allows for multiple separated “blurbs” for the one signature day

But, there’s an inherent weakness with the design, we’ll go into more into the future. For now, you can try it yourself below …

Stop Press

This is where we get to for a “second draft” we’ll get into, further, tomorrow …

If this was interesting you may be interested in this too.

Posted in Ajax, eLearning, Event-Driven Programming, Games, Tutorials | Tagged argument, cell, click, collaboration, connective, CSS, dictionary, email, emoji, English, event, first name, game, genericization, highlight, HTML, Javascript, Linux, listenerdictionary, mobile, mode, mode of use, name, onclick, overlay, parameterization, programming, regional indicator, selection, selectionchange, share, sharing, SMS, styling, table, table cell, text shadow, textarea, timer, tutorial, word, word game | Leave a comment

Find English Word Game Modes Tutorial

Posted on March 25, 2024 by admin

Find English Word Game Modes Tutorial

Further to yesterday’s Find English Mobile Clicked Word Ends Game Tutorial and back to the original “/usr/share/dict/” Linux or macOS dictionary ideas started with “/usr/share/dict/words” ideas from Find English Highlighted Words Game Primer Tutorial …

in that oldest Find the Word incarnation English “Words” were the basis of “/usr/share/dict/words” dictionary usage in the game’s original mode of use … but there is also available in the Linux and macOS versions around us …
“/usr/share/dict/propernames” incarnation has English “Names” we could start allowing into the “mode of use” mix for the game … and …
“/usr/share/dict/connectives” incarnation has English “Connectives” (those small but useful English words) we could start allowing into the “mode of use” mix for the game … and …
“/usr/share/dict/web2a” incarnation has English “Phrases” we cannot envisage how to use, at least in the version we’re presenting today

We found the inclusion of these new Javascript functions useful to allow this integration to take place …

… in the changed textarea_find_words.html Find the Words game smoothed this out for us, and hopefully for you, (re-)trying it yourself.

Previous relevant Find English Mobile Clicked Word Ends Game Tutorial is shown below.

Find English Mobile Clicked Word Ends Game Tutorial

the default game operation for mobile platforms should be a new …
- overlayed
- table … based …
- cell … onclick event based …
- modus operandi … for each end of the user chosen word_s (as user clicked)
… means by which to play the game … as well as …
the default game operation for non-mobile platforms remains the old textarea selectionchange event methodology … but either above …
defaults can be overridden by a new address bar URL argument

We made the selectionchange event range.start and range.end form the suffix of those “cell” element “IDs” above within the following document.body onload event function …

And that way we hived off most of the selectionchange event logic into a global variable sensitive new Javascript function hansel called by both methodologies above …

… in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Highlighted Words Game Selection Tutorial is shown below.

Find English Highlighted Words Game Selection Tutorial

Thinking about yesterday’s Find English Highlighted Words Game Primer Tutorial‘s first draft of a Find the Word game web application, we found it easy to pinpoint where to improve it …

better informing the user when a textarea selection event detection caused an analysis of the word forwards and backwards to be analyzed … and flagging this better for them …
function preshowthesel() { if (showsel) { if (rend >= 0 && rstart >= 0) { if (!clickthere) { setTimeout(preshowthesel, 5000); return ''; } if (isd || isg0 || isg1) { if (altsel.trim() != '' && thesel != '') { //alert('here ' + document.getElementById('myta').value.indexOf(thesel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), hlem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), lem(altsel))); } else if (altsel.trim() != '' && lastsel != '') { //alert('hEre ' + document.getElementById('myta').value.indexOf(lastsel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel))); } // else { //alert('Why? ' + thesel); //} } else if (ish) { if (eval('' + rstart) > 0) { 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())); 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()); } else { 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())); 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()); } } } altsel=' '; } }
… as your starting point …
parameterizations via ? and & address bar URL arguments … pretty self explanatory via …
var minwordlength=location.search.split('min=')[1] ? Math.min(3,eval(decodeURIComponent(location.search.split('min=')[1].split('&')[0]))) : 3; var maxwordlength=location.search.split('max=')[1] ? eval(decodeURIComponent(location.search.split('max=')[1].split('&')[0])) : 15; var numlettersacross=location.search.split('across=')[1] ? eval(decodeURIComponent(location.search.split('across=')[1].split('&')[0])) : 76; var numlettersdown=location.search.split('down=')[1] ? eval(decodeURIComponent(location.search.split('down=')[1].split('&')[0])) : 40; var fontpixels=location.search.split('pixels=')[1] ? eval(decodeURIComponent(location.search.split('pixels=')[1].split('&')[0])) : 13;
regional indicator based emoji numerical display helpers for down and diagonal user guesses … in an overlayed textarea element … using …
var letteremojis=[], blankemojis=[], loweremojis=[], upperemojis=[]; var lris='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); for (var ii=0; ii<lris.length; ii++) { letteremojis.push(orflag(lris[ii])); blankemojis.push(' '); // ' '; loweremojis.push(lris[ii].toLowerCase()); // ' '; upperemojis.push(lris[ii].toUpperCase()); // ' '; } function orflag(thiscc) { var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 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']; var ccsuff='', ccchar=' ', cde=''; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase(); ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';'; cde='.'; } return ccsuff; }
… as an ascii letter to emoji mapping mechanism … or …
toggle the display text case for horizontal user guesses … in an overlayed textarea element … using …
function togglelem(insg) { var outsg=''; var inarr=insg.split(''); for (var jin=0; jin<insg.length; jin++) { 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()) { outsg+=insg.substring(jin).substring(0,1).toUpperCase(); } 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()) { outsg+=insg.substring(jin).substring(0,1).toLowerCase(); } else { outsg+=insg.substring(jin).substring(0,1) } } return outsg; }
add a very simple text CSS styling embellisher …
<style>
textarea { text-shadow: -1px 1px 1px #952dff; }
</style>
use the webpage title (on web browser tab) to allow a synopsis without resorting to right hand information, perhaps … via …
document.title='Score:' + document.getElementById('score').innerHTML.split('Score:')[1] + ' ... Find the Words Highlighting Game - RJM Programming - March, 2024';

… in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Highlighted Words Game Primer Tutorial is shown below.

Find English Highlighted Words Game Primer Tutorial

This highlighting within a sea of letters presented in a textarea was the framework for users to play a game highlighting …

horizontally
vertically
diagonally

… words in left to right or top to bottom order, or reversed, to score in our “Find the Words” game presented today.

Take a look at the crucial selectionchange event logic for today’s Find the Word game …

… in our first draft Find the Words game you can try below …

Previous relevant Event Calendar Collaboration Textarea Highlight Linking Tutorial is shown below.

Event Calendar Collaboration Textarea Highlight Linking Tutorial

For the first time we can remember, with our Events in Month web application of yesterday’s Event Calendar Collaboration Remembering Recipient Tutorial …

we’re channelling how in emails “word strings” starting with “http” become links … and so …
in our event in month “blurb” textarea elements we allow user highlighted text containing such “http” “word strings” be opened in popup windows showing the content of those URLs, as available

Here is the relevant Javascript we ended up with, for this …

Also, today, we have a few CSS tweaks in the changed events_in_month.htm parent of the Events in Month web application. Feel free to try it for yourself.

Stop Press

Previous relevant Event Calendar Collaboration Remembering Recipient Tutorial is shown below.

Event Calendar Collaboration Remembering Recipient Tutorial

When it comes to procedures …
Aaaaaarrrrgggghhhh …
Nuances count … regarding …
Errrrrrr …
Saving time …
Saving frustration

… resulting in the “easy to remember” acronym WANESS … we rest our cases!

Global variables initialization …
`var defemail='', defsms=''; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); }`
Within document.body onload event logic …
if (document.getElementById('semail') && document.getElementById('ssms')) { document.getElementById('semail').oncontextmenu=function(){ emailaskit(); }; document.getElementById('semail').ontouchmove=function(){ emailaskit(); }; document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); }; document.getElementById('ssms').ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android\|BlackBerry\|iPhone\|iPad\|iPod\|Opera Mini\|IEMobile/i)) { document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes'; } else { document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes'; } }
Calling these two Javascript function helpers …
function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ' '; var emailm=prompt('Enter default email address.', defemail.trim()); if (emailm == null) { emailm=''; } if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) { defemail=emailm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', emailm.trim()); } } defemail=defemail.trim() + ' '; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ' '; var smsm=prompt('Enter default SMS number.', defsms.trim()); if (smsm == null) { smsm=''; } 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() == '') { defsms=smsm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim()); } } defsms=defsms.trim() + ' '; }
And allow control, as well, at the SMS prompt window logic …
function dosms() { if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); } //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) { 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 : '')) ); } else { 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 : ''))); } if (snum == null) { snum=''; } if (snum.indexOf('@') != -1) { if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', snum); defemail=snum; } return doemail(snum); } 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() == '') { //alert('Snum=' + snum + '?'); if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', snum); defsms=snum; } var azx=top.document.getElementById('xas' + 'ms'); if (azx == null) { azx=top.document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { top.document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.target = "_top"; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze())); azx.click(); } return ''; }

Previous relevant Event Calendar Collaboration Tutorial is shown below.

Event Calendar Collaboration Tutorial

The Event Calendar web application project, of Event Calendar PHP Bookmark Tutorial, from last year is worth a revisit, the reason being …

it did not have a fully fleshed out collaboration or sharing set of functionalities … at the time, probably, because …
each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous “mailto:” or “sms:” communication conduits, back to when we first tackled this project … but now …
hashtagging parts to the “mailto:” URLs (and maybe sometimes the “sms:” URL) might cover the data length needs

… 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!

Timing became really important with this integration of …

… communication conduit possibilities. With its design we have to wait until the point where the user is filling in textarea elements regarding a designated …

Month
Year

… of relevance, before we allow the email 📧 and SMS 📟 emoji buttons be shown. In the code …

Amended HTML h1 element static HTML to add, later shown, perhaps, email 📧 and SMS 📟 emoji buttons …
`<h1>Events in Month   <button style=display:none; title='Share via Email' id=semail onclick="doemail('');">📧</button> <button style=display:none; title='Share via SMS' id=ssms onclick=dosms();>📟</button> </h1>`
New static HTML div element placed to the bottom of the body element …
`<div id=divas></div>`
New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) …
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]) : ''; if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) { bigbih+='<a target=_blank id=xae' + 'mail style=display:none; href="mailto:"></a>'; } if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) { bigbih+='<a target=_blank id=xas' + 'ms style=display:none; href="sms:"></a>'; } var viatext='', smallbih='', wes=null, sparewes=null;
On or around document.body onload event we can analyze any such location.hash hashtagging data …
if (bigbih.indexOf('</he' + 'ad>') != -1 \|\| bigbih.indexOf('<b' + 'o' + 'dy') != -1 \|\| bigbih.indexOf('<h' + '1') == 0) { //bigbih=bigbih.replace('" id="eventcalendar"', 'margin-top:50px;" id="eventcalendar"'); viatext=' (via contact at ' + ('' + new Date()) + ')'; if (bigbih.indexOf('<h' + '1') == 0) { smallbih=bigbih; } else { smallbih=bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].replace(bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].split('>')[0] + '>', ''); } wes=windowopen('./events_in_month.htm','_blank','top=40,left=40,width=800,height=800'); //alert(bigbih); if (wes) { setTimeout(function(){ wes.document.write(bigbih); }, 3000); //document.body.innerHTML=bigbih; setTimeout(function(){ wes.document.getElementById('semail').style.display='inline-block'; wes.document.getElementById('ssms').style.display='inline-block'; wes.document.getElementsByTagName('h1')[0].style.display='none'; wes.document.getElementsByTagName('h3')[0].style.display='none'; //wes.setviatext(viatext); //wes.setphpthere(' '); //wes.togglewords(); }, 5000); } }
A window.open wrapper windowopen Javascript function …
function windowopen(poneis, ptwois, pthreeis) { document.getElementById('divas').innerHTML='<iframe name=ovif id=ovif style="position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;" src="' + poneis + '" onload=wopencheck(this);></iframe>'; //document.getElementsByTagName('h1')[0].style.opacity='0.0'; //document.getElementsByTagName('h3')[0].style.opacity='0.0'; sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif'); //sparewes=window.open(poneis, 'ovif'); sparewes.document.write(bigbih); setTimeout(function(){ sparewes.document.getElementById('semail').style.display='inline-block'; sparewes.document.getElementById('ssms').style.display='inline-block'; var sdem=sparewes.document.getElementById('semail').outerHTML; var sdss=sparewes.document.getElementById('ssms').outerHTML; sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,''); sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,''); sparewes.document.getElementsByTagName('h1')[0].style.display='none'; sparewes.document.getElementsByTagName('h3')[0].style.display='none'; sparewes.document.getElementById('dmore').innerHTML+=(' ' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + ' ' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '<br>'); //sparewes.setviatext(viatext); //sparewes.setphpthere(' '); //sparewes.togglewords(); }, 5000); return null; }
Is augmented by other new Javascript functions …
function hfanalyze() { var fio=document.getElementById('ecform'); if (forceit) { forceit=false; return true; } var delm='?'; var fioih=fio.innerHTML; var fions=fioih.split(' name="'); var testurl=documentURL.split('?')[0].split('#')[0]; //alert(fions.length); for (var ijk=1; ijk<fions.length; ijk++) { testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value.replace(/\?\>/g,'? >')); delm='&'; } //alert(testurl.length); //if (eval('' + testurl.length) < 750) { return true; } //if (lastbut.value.indexOf('New') == 0 \|\| 11 == 11) { if (22 == 22) { //wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600'); //wo.document.write('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); return ('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); } else if (phpthere != '') { if (1 == 1) { postit(fio, false, testurl); } else { fio.target='phpif'; fio.method='POST'; fio.action='./events_in_month.php'; if (!document.getElementById('dmore')) { document.getElementById('ddmore').innerHTML='<input type=hidden id=caltitle name=caltitle value="' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '"></input><input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } else { document.getElementById('dmore').innerHTML='<input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } } return 'true'; } return 'false'; } function doemail(inidea) { var azx=document.getElementById('xae' + 'mail'); if (!azx) { azx=document.createElement("a"); } //if (1 == 1) { //document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); //} azx.style = "display: none"; azx.id = 'xaem' + 'ail'; azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('<')[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] + '<h2' + document.body.innerHTML.split('<h2')[1])); azx.click(); return ''; } function dosms() { //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) >= 18000) { 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,''); } else { snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(/^null/g,''); } if (snum.indexOf('@') != -1) { return doemail(snum); } else if (snum.trim() != '') { alert('Snum=' + snum + '?'); var azx=document.getElementById('xas' + 'ms'); if (azx == null) { azx=document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); azx.click(); } return ''; } function wopencheck(iois) { var aconto = null; aconto = (iois.contentWindow \|\| iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=smallbih; aconto.setviatext(viatext); } } } function setviatext(towhat) { viatext=towhat; }

… to help bed down this new sharing and collaboration functionality in a changed events_in_month.htm parent of the Events in Month web application.

Previous relevant Event Calendar PHP Bookmark Tutorial is shown below.

Event Calendar PHP Bookmark Tutorial

Client meets server today, allowing the PHP data storage talents in yesterday’s Event Calendar PHP Tutorial‘s work to meet a “clientside” way to …

Record to Remember via Bookmark

… use the web browser Bookmarks to help you recall an Events in Month report with long entries.

Involving a Bookmark still needs those “get” ? and & arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as …

https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1

… that mapping being possible, now, making use of a pseudo hashtag arrangement … your Clayton‘s hashtag, if you will!

var documentURL=document.URL;

#August__2023_00000__1

… uniquifying a Month, Year Events in Month identifier part with a version of the user’s IP address (so that they only see what is relevant to them).

Also, today, a lot of CSS tweaks, so that the CSS styling now looks like …

… and we thank this webpage for the heads up regarding how to calculate week numbers within a year data item displays now available in …

a changed events_in_month.htm parent of the Events in Month web application
helped out by its changed child PHP events_in_month.php

Previous relevant Event Calendar PHP Tutorial is shown below.

Event Calendar PHP Tutorial

Let’s face it. Serverside PHP is just great! It opens up so many opportunities regarding data in your web applications.

As such, onto yesterday’s Event Calendar New Window Tutorial logic we now have a …

Record to Remember

The PHP is kind of short, so we will show it below, including one MAMP example of that “self storage” …

Yes, the parent needed to change for our events_in_month.htm parent of Events in Month web application role.

Previous relevant Event Calendar New Window Tutorial is shown below.

Event Calendar New Window Tutorial

Onto yesterday’s Event Calendar Remembered Tutorial‘s “Mystery Dilemma” …

But, there’s an inherent weakness with the design, we’ll go into more into the future.

bring up Context Menu with a right click or two finger gesture within the popup window webpage content …
pick Inspect option …
be in Elements tab of your Web Inspector … and …
highlight top <html> tag …
Context Menu with a right click or two finger gesture …
pick Copy -> Copy outerHTML … so that …
your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …
Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP local Apache/PHP/mySql web server environment, where you can further look at and develop your own ideas)

The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …

… the form submit buttons are reworded accordingly.

Another idea from this blog thread’s inspiration …

… we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb Title, available to the user via a new dropdown “Bold Title” option.

And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …

text shadow means by which the text of Event Calendar can be more impactive …
<div style="text-shadow:-1px 1px 1px #ff2d95;" id=eventcalendar></div>
dropdown element conditional styling …
<style> .dayb { color: white; background-color: red; padding: 5 5 5 5; } .dow { color: purple; font-style: bold; } .selday { margin-left: 8px; background-color: rgba(255,0,0,0.7); display: inline-block; width: 50px; } </style>
…
if (thislabel.substring(0,1) == 'i') { if (thisval.trim() != '') { document.getElementById(thislabel.replace('i', 'sel')).style.color='white'; document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red'; } document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); //.replace(/\+$/g, ' '); document.getElementById(thislabel).value=thisval.replace(/\+$/g, ' '); } else { document.getElementById(thislabel).value=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); } }
placeholder on Blurb conditional existence …
var ourdata=''; // ... if (documentURL.indexOf('?') != -1) { if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; } // ... trtemplate='<tr id=tr01.00><td style=width:22%;><span id=sone01.00 class=dow>' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '</span><br><br><span id=stwo01.00 class=dayb>1<span onblur=sepit(this); contenteditable=true id=sp01.00></span><input type=hidden id=i01.00 name=i01.00 value=""></input><select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange="selit(this);" id=sel01.00><option id=opt01.00 value=""></option><option title="All such in month (ie. weekly)" value="...">...</option><option title="And ..." value="&...">&</option><option value=Bold>Bold Title</option><option value=Clone>Clone</option></select></span></td><td class=blurb title="What is on?" id=tb01.00><span title="Event title" style="font-style:bold;color:blue;" id=bd01.00></span><textarea name=ta01.00 id=ta01.00 style="width:100%;height=100%;" ' + ourdata + 'placeholder="Blurb ..." class=tablurb></textarea></td></tr>'; // ... } // ... }

… for our “second draft” events_in_month.htm Events in Month web application.

Previous relevant Event Calendar Remembered Tutorial is shown below.

Event Calendar Remembered Tutorial

We were inspired by an Event Calendar pamplette we saw the other day …

… to write a new “proof of concept” Events in Month web application, whose content can be recalled via the web browser’s Bookmark methodologies.

We liked the ideas for day of week and/or date of month grouping arrangements we included, being, the way we interpreted it …

just on this day in this month … default
on this day of the week throughout the month in question … “…“
on this day and some others in that month in question … “&” … to start with and further amendments available via contenteditable=true span element
“Clone” value allows for multiple separated “blurbs” for the one signature day

But, there’s an inherent weakness with the design, we’ll go into more into the future. For now, you can try it yourself below …

Stop Press

This is where we get to for a “second draft” we’ll get into, further, tomorrow …

If this was interesting you may be interested in this too.

Posted in Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged argument, cell, click, connective, CSS, dictionary, emoji, English, event, first name, game, genericization, highlight, HTML, Javascript, Linux, listenerdictionary, mobile, mode, mode of use, name, onclick, overlay, parameterization, programming, regional indicator, selection, selectionchange, styling, table, table cell, text shadow, textarea, tutorial, word, word game | Leave a comment

Find English Mobile Clicked Word Ends Game Tutorial

Posted on March 24, 2024 by admin

Find English Mobile Clicked Word Ends Game Tutorial

the default game operation for mobile platforms should be a new …
- overlayed
- table … based …
- cell … onclick event based …
- modus operandi … for each end of the user chosen word_s (as user clicked)
… means by which to play the game … as well as …
the default game operation for non-mobile platforms remains the old textarea selectionchange event methodology … but either above …
defaults can be overridden by a new address bar URL argument

We made the selectionchange event range.start and range.end form the suffix of those “cell” element “IDs” above within the following document.body onload event function …

And that way we hived off most of the selectionchange event logic into a global variable sensitive new Javascript function hansel called by both methodologies above …

… in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Highlighted Words Game Selection Tutorial is shown below.

Find English Highlighted Words Game Selection Tutorial

Thinking about yesterday’s Find English Highlighted Words Game Primer Tutorial‘s first draft of a Find the Word game web application, we found it easy to pinpoint where to improve it …

better informing the user when a textarea selection event detection caused an analysis of the word forwards and backwards to be analyzed … and flagging this better for them …
function preshowthesel() { if (showsel) { if (rend >= 0 && rstart >= 0) { if (!clickthere) { setTimeout(preshowthesel, 5000); return ''; } if (isd || isg0 || isg1) { if (altsel.trim() != '' && thesel != '') { //alert('here ' + document.getElementById('myta').value.indexOf(thesel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), hlem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), lem(altsel))); } else if (altsel.trim() != '' && lastsel != '') { //alert('hEre ' + document.getElementById('myta').value.indexOf(lastsel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel))); } // else { //alert('Why? ' + thesel); //} } else if (ish) { if (eval('' + rstart) > 0) { 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())); 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()); } else { 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())); 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()); } } } altsel=' '; } }
… as your starting point …
parameterizations via ? and & address bar URL arguments … pretty self explanatory via …
var minwordlength=location.search.split('min=')[1] ? Math.min(3,eval(decodeURIComponent(location.search.split('min=')[1].split('&')[0]))) : 3; var maxwordlength=location.search.split('max=')[1] ? eval(decodeURIComponent(location.search.split('max=')[1].split('&')[0])) : 15; var numlettersacross=location.search.split('across=')[1] ? eval(decodeURIComponent(location.search.split('across=')[1].split('&')[0])) : 76; var numlettersdown=location.search.split('down=')[1] ? eval(decodeURIComponent(location.search.split('down=')[1].split('&')[0])) : 40; var fontpixels=location.search.split('pixels=')[1] ? eval(decodeURIComponent(location.search.split('pixels=')[1].split('&')[0])) : 13;
regional indicator based emoji numerical display helpers for down and diagonal user guesses … in an overlayed textarea element … using …
var letteremojis=[], blankemojis=[], loweremojis=[], upperemojis=[]; var lris='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); for (var ii=0; ii<lris.length; ii++) { letteremojis.push(orflag(lris[ii])); blankemojis.push(' '); // ' '; loweremojis.push(lris[ii].toLowerCase()); // ' '; upperemojis.push(lris[ii].toUpperCase()); // ' '; } function orflag(thiscc) { var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 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']; var ccsuff='', ccchar=' ', cde=''; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase(); ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';'; cde='.'; } return ccsuff; }
… as an ascii letter to emoji mapping mechanism … or …
toggle the display text case for horizontal user guesses … in an overlayed textarea element … using …
function togglelem(insg) { var outsg=''; var inarr=insg.split(''); for (var jin=0; jin<insg.length; jin++) { 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()) { outsg+=insg.substring(jin).substring(0,1).toUpperCase(); } 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()) { outsg+=insg.substring(jin).substring(0,1).toLowerCase(); } else { outsg+=insg.substring(jin).substring(0,1) } } return outsg; }
add a very simple text CSS styling embellisher …
<style>
textarea { text-shadow: -1px 1px 1px #952dff; }
</style>
use the webpage title (on web browser tab) to allow a synopsis without resorting to right hand information, perhaps … via …
document.title='Score:' + document.getElementById('score').innerHTML.split('Score:')[1] + ' ... Find the Words Highlighting Game - RJM Programming - March, 2024';

… in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Highlighted Words Game Primer Tutorial is shown below.

Find English Highlighted Words Game Primer Tutorial

This highlighting within a sea of letters presented in a textarea was the framework for users to play a game highlighting …

horizontally
vertically
diagonally

… words in left to right or top to bottom order, or reversed, to score in our “Find the Words” game presented today.

Take a look at the crucial selectionchange event logic for today’s Find the Word game …

… in our first draft Find the Words game you can try below …

Previous relevant Event Calendar Collaboration Textarea Highlight Linking Tutorial is shown below.

Event Calendar Collaboration Textarea Highlight Linking Tutorial

For the first time we can remember, with our Events in Month web application of yesterday’s Event Calendar Collaboration Remembering Recipient Tutorial …

we’re channelling how in emails “word strings” starting with “http” become links … and so …
in our event in month “blurb” textarea elements we allow user highlighted text containing such “http” “word strings” be opened in popup windows showing the content of those URLs, as available

Here is the relevant Javascript we ended up with, for this …

Also, today, we have a few CSS tweaks in the changed events_in_month.htm parent of the Events in Month web application. Feel free to try it for yourself.

Stop Press

Previous relevant Event Calendar Collaboration Remembering Recipient Tutorial is shown below.

Event Calendar Collaboration Remembering Recipient Tutorial

When it comes to procedures …
Aaaaaarrrrgggghhhh …
Nuances count … regarding …
Errrrrrr …
Saving time …
Saving frustration

… resulting in the “easy to remember” acronym WANESS … we rest our cases!

Global variables initialization …
`var defemail='', defsms=''; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); }`
Within document.body onload event logic …
if (document.getElementById('semail') && document.getElementById('ssms')) { document.getElementById('semail').oncontextmenu=function(){ emailaskit(); }; document.getElementById('semail').ontouchmove=function(){ emailaskit(); }; document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); }; document.getElementById('ssms').ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android\|BlackBerry\|iPhone\|iPad\|iPod\|Opera Mini\|IEMobile/i)) { document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes'; } else { document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes'; } }
Calling these two Javascript function helpers …
function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ' '; var emailm=prompt('Enter default email address.', defemail.trim()); if (emailm == null) { emailm=''; } if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) { defemail=emailm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', emailm.trim()); } } defemail=defemail.trim() + ' '; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ' '; var smsm=prompt('Enter default SMS number.', defsms.trim()); if (smsm == null) { smsm=''; } 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() == '') { defsms=smsm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim()); } } defsms=defsms.trim() + ' '; }
And allow control, as well, at the SMS prompt window logic …
function dosms() { if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); } //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) { 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 : '')) ); } else { 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 : ''))); } if (snum == null) { snum=''; } if (snum.indexOf('@') != -1) { if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', snum); defemail=snum; } return doemail(snum); } 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() == '') { //alert('Snum=' + snum + '?'); if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', snum); defsms=snum; } var azx=top.document.getElementById('xas' + 'ms'); if (azx == null) { azx=top.document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { top.document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.target = "_top"; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze())); azx.click(); } return ''; }

Previous relevant Event Calendar Collaboration Tutorial is shown below.

Event Calendar Collaboration Tutorial

The Event Calendar web application project, of Event Calendar PHP Bookmark Tutorial, from last year is worth a revisit, the reason being …

it did not have a fully fleshed out collaboration or sharing set of functionalities … at the time, probably, because …
each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous “mailto:” or “sms:” communication conduits, back to when we first tackled this project … but now …
hashtagging parts to the “mailto:” URLs (and maybe sometimes the “sms:” URL) might cover the data length needs

… 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!

Timing became really important with this integration of …

… communication conduit possibilities. With its design we have to wait until the point where the user is filling in textarea elements regarding a designated …

Month
Year

… of relevance, before we allow the email 📧 and SMS 📟 emoji buttons be shown. In the code …

Amended HTML h1 element static HTML to add, later shown, perhaps, email 📧 and SMS 📟 emoji buttons …
`<h1>Events in Month   <button style=display:none; title='Share via Email' id=semail onclick="doemail('');">📧</button> <button style=display:none; title='Share via SMS' id=ssms onclick=dosms();>📟</button> </h1>`
New static HTML div element placed to the bottom of the body element …
`<div id=divas></div>`
New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) …
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]) : ''; if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) { bigbih+='<a target=_blank id=xae' + 'mail style=display:none; href="mailto:"></a>'; } if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) { bigbih+='<a target=_blank id=xas' + 'ms style=display:none; href="sms:"></a>'; } var viatext='', smallbih='', wes=null, sparewes=null;
On or around document.body onload event we can analyze any such location.hash hashtagging data …
if (bigbih.indexOf('</he' + 'ad>') != -1 \|\| bigbih.indexOf('<b' + 'o' + 'dy') != -1 \|\| bigbih.indexOf('<h' + '1') == 0) { //bigbih=bigbih.replace('" id="eventcalendar"', 'margin-top:50px;" id="eventcalendar"'); viatext=' (via contact at ' + ('' + new Date()) + ')'; if (bigbih.indexOf('<h' + '1') == 0) { smallbih=bigbih; } else { smallbih=bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].replace(bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].split('>')[0] + '>', ''); } wes=windowopen('./events_in_month.htm','_blank','top=40,left=40,width=800,height=800'); //alert(bigbih); if (wes) { setTimeout(function(){ wes.document.write(bigbih); }, 3000); //document.body.innerHTML=bigbih; setTimeout(function(){ wes.document.getElementById('semail').style.display='inline-block'; wes.document.getElementById('ssms').style.display='inline-block'; wes.document.getElementsByTagName('h1')[0].style.display='none'; wes.document.getElementsByTagName('h3')[0].style.display='none'; //wes.setviatext(viatext); //wes.setphpthere(' '); //wes.togglewords(); }, 5000); } }
A window.open wrapper windowopen Javascript function …
function windowopen(poneis, ptwois, pthreeis) { document.getElementById('divas').innerHTML='<iframe name=ovif id=ovif style="position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;" src="' + poneis + '" onload=wopencheck(this);></iframe>'; //document.getElementsByTagName('h1')[0].style.opacity='0.0'; //document.getElementsByTagName('h3')[0].style.opacity='0.0'; sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif'); //sparewes=window.open(poneis, 'ovif'); sparewes.document.write(bigbih); setTimeout(function(){ sparewes.document.getElementById('semail').style.display='inline-block'; sparewes.document.getElementById('ssms').style.display='inline-block'; var sdem=sparewes.document.getElementById('semail').outerHTML; var sdss=sparewes.document.getElementById('ssms').outerHTML; sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,''); sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,''); sparewes.document.getElementsByTagName('h1')[0].style.display='none'; sparewes.document.getElementsByTagName('h3')[0].style.display='none'; sparewes.document.getElementById('dmore').innerHTML+=(' ' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + ' ' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '<br>'); //sparewes.setviatext(viatext); //sparewes.setphpthere(' '); //sparewes.togglewords(); }, 5000); return null; }
Is augmented by other new Javascript functions …
function hfanalyze() { var fio=document.getElementById('ecform'); if (forceit) { forceit=false; return true; } var delm='?'; var fioih=fio.innerHTML; var fions=fioih.split(' name="'); var testurl=documentURL.split('?')[0].split('#')[0]; //alert(fions.length); for (var ijk=1; ijk<fions.length; ijk++) { testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value.replace(/\?\>/g,'? >')); delm='&'; } //alert(testurl.length); //if (eval('' + testurl.length) < 750) { return true; } //if (lastbut.value.indexOf('New') == 0 \|\| 11 == 11) { if (22 == 22) { //wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600'); //wo.document.write('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); return ('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); } else if (phpthere != '') { if (1 == 1) { postit(fio, false, testurl); } else { fio.target='phpif'; fio.method='POST'; fio.action='./events_in_month.php'; if (!document.getElementById('dmore')) { document.getElementById('ddmore').innerHTML='<input type=hidden id=caltitle name=caltitle value="' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '"></input><input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } else { document.getElementById('dmore').innerHTML='<input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } } return 'true'; } return 'false'; } function doemail(inidea) { var azx=document.getElementById('xae' + 'mail'); if (!azx) { azx=document.createElement("a"); } //if (1 == 1) { //document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); //} azx.style = "display: none"; azx.id = 'xaem' + 'ail'; azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('<')[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] + '<h2' + document.body.innerHTML.split('<h2')[1])); azx.click(); return ''; } function dosms() { //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) >= 18000) { 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,''); } else { snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(/^null/g,''); } if (snum.indexOf('@') != -1) { return doemail(snum); } else if (snum.trim() != '') { alert('Snum=' + snum + '?'); var azx=document.getElementById('xas' + 'ms'); if (azx == null) { azx=document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); azx.click(); } return ''; } function wopencheck(iois) { var aconto = null; aconto = (iois.contentWindow \|\| iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=smallbih; aconto.setviatext(viatext); } } } function setviatext(towhat) { viatext=towhat; }

… to help bed down this new sharing and collaboration functionality in a changed events_in_month.htm parent of the Events in Month web application.

Previous relevant Event Calendar PHP Bookmark Tutorial is shown below.

Event Calendar PHP Bookmark Tutorial

Client meets server today, allowing the PHP data storage talents in yesterday’s Event Calendar PHP Tutorial‘s work to meet a “clientside” way to …

Record to Remember via Bookmark

… use the web browser Bookmarks to help you recall an Events in Month report with long entries.

Involving a Bookmark still needs those “get” ? and & arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as …

https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1

… that mapping being possible, now, making use of a pseudo hashtag arrangement … your Clayton‘s hashtag, if you will!

var documentURL=document.URL;

#August__2023_00000__1

… uniquifying a Month, Year Events in Month identifier part with a version of the user’s IP address (so that they only see what is relevant to them).

Also, today, a lot of CSS tweaks, so that the CSS styling now looks like …

… and we thank this webpage for the heads up regarding how to calculate week numbers within a year data item displays now available in …

a changed events_in_month.htm parent of the Events in Month web application
helped out by its changed child PHP events_in_month.php

Previous relevant Event Calendar PHP Tutorial is shown below.

Event Calendar PHP Tutorial

Let’s face it. Serverside PHP is just great! It opens up so many opportunities regarding data in your web applications.

As such, onto yesterday’s Event Calendar New Window Tutorial logic we now have a …

Record to Remember

The PHP is kind of short, so we will show it below, including one MAMP example of that “self storage” …

Yes, the parent needed to change for our events_in_month.htm parent of Events in Month web application role.

Previous relevant Event Calendar New Window Tutorial is shown below.

Event Calendar New Window Tutorial

Onto yesterday’s Event Calendar Remembered Tutorial‘s “Mystery Dilemma” …

But, there’s an inherent weakness with the design, we’ll go into more into the future.

bring up Context Menu with a right click or two finger gesture within the popup window webpage content …
pick Inspect option …
be in Elements tab of your Web Inspector … and …
highlight top <html> tag …
Context Menu with a right click or two finger gesture …
pick Copy -> Copy outerHTML … so that …
your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …
Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP local Apache/PHP/mySql web server environment, where you can further look at and develop your own ideas)

The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …

… the form submit buttons are reworded accordingly.

Another idea from this blog thread’s inspiration …

… we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb Title, available to the user via a new dropdown “Bold Title” option.

And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …

text shadow means by which the text of Event Calendar can be more impactive …
<div style="text-shadow:-1px 1px 1px #ff2d95;" id=eventcalendar></div>
dropdown element conditional styling …
<style> .dayb { color: white; background-color: red; padding: 5 5 5 5; } .dow { color: purple; font-style: bold; } .selday { margin-left: 8px; background-color: rgba(255,0,0,0.7); display: inline-block; width: 50px; } </style>
…
if (thislabel.substring(0,1) == 'i') { if (thisval.trim() != '') { document.getElementById(thislabel.replace('i', 'sel')).style.color='white'; document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red'; } document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); //.replace(/\+$/g, ' '); document.getElementById(thislabel).value=thisval.replace(/\+$/g, ' '); } else { document.getElementById(thislabel).value=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); } }
placeholder on Blurb conditional existence …
var ourdata=''; // ... if (documentURL.indexOf('?') != -1) { if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; } // ... trtemplate='<tr id=tr01.00><td style=width:22%;><span id=sone01.00 class=dow>' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '</span><br><br><span id=stwo01.00 class=dayb>1<span onblur=sepit(this); contenteditable=true id=sp01.00></span><input type=hidden id=i01.00 name=i01.00 value=""></input><select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange="selit(this);" id=sel01.00><option id=opt01.00 value=""></option><option title="All such in month (ie. weekly)" value="...">...</option><option title="And ..." value="&...">&</option><option value=Bold>Bold Title</option><option value=Clone>Clone</option></select></span></td><td class=blurb title="What is on?" id=tb01.00><span title="Event title" style="font-style:bold;color:blue;" id=bd01.00></span><textarea name=ta01.00 id=ta01.00 style="width:100%;height=100%;" ' + ourdata + 'placeholder="Blurb ..." class=tablurb></textarea></td></tr>'; // ... } // ... }

… for our “second draft” events_in_month.htm Events in Month web application.

Previous relevant Event Calendar Remembered Tutorial is shown below.

Event Calendar Remembered Tutorial

We were inspired by an Event Calendar pamplette we saw the other day …

… to write a new “proof of concept” Events in Month web application, whose content can be recalled via the web browser’s Bookmark methodologies.

We liked the ideas for day of week and/or date of month grouping arrangements we included, being, the way we interpreted it …

just on this day in this month … default
on this day of the week throughout the month in question … “…“
on this day and some others in that month in question … “&” … to start with and further amendments available via contenteditable=true span element
“Clone” value allows for multiple separated “blurbs” for the one signature day

But, there’s an inherent weakness with the design, we’ll go into more into the future. For now, you can try it yourself below …

Stop Press

This is where we get to for a “second draft” we’ll get into, further, tomorrow …

If this was interesting you may be interested in this too.

Posted in Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged argument, cell, click, CSS, emoji, English, event, game, genericization, highlight, HTML, Javascript, Linux, listenerdictionary, mobile, onclick, overlay, parameterization, programming, regional indicator, selection, selectionchange, styling, table, table cell, text shadow, textarea, tutorial, word, word game | Leave a comment

Find English Highlighted Words Game Selection Tutorial

Posted on March 23, 2024 by admin

Find English Highlighted Words Game Selection Tutorial

Thinking about yesterday’s Find English Highlighted Words Game Primer Tutorial‘s first draft of a Find the Word game web application, we found it easy to pinpoint where to improve it …

better informing the user when a textarea selection event detection caused an analysis of the word forwards and backwards to be analyzed … and flagging this better for them …
function preshowthesel() { if (showsel) { if (rend >= 0 && rstart >= 0) { if (!clickthere) { setTimeout(preshowthesel, 5000); return ''; } if (isd || isg0 || isg1) { if (altsel.trim() != '' && thesel != '') { //alert('here ' + document.getElementById('myta').value.indexOf(thesel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), hlem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(thesel.substring(0,eval('' + altsel.length)), lem(altsel))); } else if (altsel.trim() != '' && lastsel != '') { //alert('hEre ' + document.getElementById('myta').value.indexOf(lastsel) + ' ... ' + altsel) document.getElementById('myta').setAttribute('data-alt', encodeURIComponent(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel)))); document.getElementById('myta').value=ovlem(document.getElementById('myta').value.replace(lastsel.substring(0,eval('' + altsel.length)), lem(altsel))); } // else { //alert('Why? ' + thesel); //} } else if (ish) { if (eval('' + rstart) > 0) { 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())); 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()); } else { 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())); 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()); } } } altsel=' '; } }
… as your starting point …
parameterizations via ? and & address bar URL arguments … pretty self explanatory via …
var minwordlength=location.search.split('min=')[1] ? Math.min(3,eval(decodeURIComponent(location.search.split('min=')[1].split('&')[0]))) : 3; var maxwordlength=location.search.split('max=')[1] ? eval(decodeURIComponent(location.search.split('max=')[1].split('&')[0])) : 15; var numlettersacross=location.search.split('across=')[1] ? eval(decodeURIComponent(location.search.split('across=')[1].split('&')[0])) : 76; var numlettersdown=location.search.split('down=')[1] ? eval(decodeURIComponent(location.search.split('down=')[1].split('&')[0])) : 40; var fontpixels=location.search.split('pixels=')[1] ? eval(decodeURIComponent(location.search.split('pixels=')[1].split('&')[0])) : 13;
regional indicator based emoji numerical display helpers for down and diagonal user guesses … in an overlayed textarea element … using …
var letteremojis=[], blankemojis=[], loweremojis=[], upperemojis=[]; var lris='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); for (var ii=0; ii<lris.length; ii++) { letteremojis.push(orflag(lris[ii])); blankemojis.push(' '); // ' '; loweremojis.push(lris[ii].toLowerCase()); // ' '; upperemojis.push(lris[ii].toUpperCase()); // ' '; } function orflag(thiscc) { var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 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']; var ccsuff='', ccchar=' ', cde=''; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase(); ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';'; cde='.'; } return ccsuff; }
… as an ascii letter to emoji mapping mechanism … or …
toggle the display text case for horizontal user guesses … in an overlayed textarea element … using …
function togglelem(insg) { var outsg=''; var inarr=insg.split(''); for (var jin=0; jin<insg.length; jin++) { 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()) { outsg+=insg.substring(jin).substring(0,1).toUpperCase(); } 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()) { outsg+=insg.substring(jin).substring(0,1).toLowerCase(); } else { outsg+=insg.substring(jin).substring(0,1) } } return outsg; }
add a very simple text CSS styling embellisher …
<style>
textarea { text-shadow: -1px 1px 1px #952dff; }
</style>
use the webpage title (on web browser tab) to allow a synopsis without resorting to right hand information, perhaps … via …
document.title='Score:' + document.getElementById('score').innerHTML.split('Score:')[1] + ' ... Find the Words Highlighting Game - RJM Programming - March, 2024';

… in the changed textarea_find_words.html Find the Words game.

Previous relevant Find English Highlighted Words Game Primer Tutorial is shown below.

Find English Highlighted Words Game Primer Tutorial

This highlighting within a sea of letters presented in a textarea was the framework for users to play a game highlighting …

horizontally
vertically
diagonally

… words in left to right or top to bottom order, or reversed, to score in our “Find the Words” game presented today.

Take a look at the crucial selectionchange event logic for today’s Find the Word game …

… in our first draft Find the Words game you can try below …

Previous relevant Event Calendar Collaboration Textarea Highlight Linking Tutorial is shown below.

Event Calendar Collaboration Textarea Highlight Linking Tutorial

For the first time we can remember, with our Events in Month web application of yesterday’s Event Calendar Collaboration Remembering Recipient Tutorial …

we’re channelling how in emails “word strings” starting with “http” become links … and so …
in our event in month “blurb” textarea elements we allow user highlighted text containing such “http” “word strings” be opened in popup windows showing the content of those URLs, as available

Here is the relevant Javascript we ended up with, for this …

Also, today, we have a few CSS tweaks in the changed events_in_month.htm parent of the Events in Month web application. Feel free to try it for yourself.

Stop Press

Previous relevant Event Calendar Collaboration Remembering Recipient Tutorial is shown below.

Event Calendar Collaboration Remembering Recipient Tutorial

When it comes to procedures …
Aaaaaarrrrgggghhhh …
Nuances count … regarding …
Errrrrrr …
Saving time …
Saving frustration

… resulting in the “easy to remember” acronym WANESS … we rest our cases!

Global variables initialization …
`var defemail='', defsms=''; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); }`
Within document.body onload event logic …
if (document.getElementById('semail') && document.getElementById('ssms')) { document.getElementById('semail').oncontextmenu=function(){ emailaskit(); }; document.getElementById('semail').ontouchmove=function(){ emailaskit(); }; document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); }; document.getElementById('ssms').ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android\|BlackBerry\|iPhone\|iPad\|iPod\|Opera Mini\|IEMobile/i)) { document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes'; } else { document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes'; } }
Calling these two Javascript function helpers …
function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ' '; var emailm=prompt('Enter default email address.', defemail.trim()); if (emailm == null) { emailm=''; } if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) { defemail=emailm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', emailm.trim()); } } defemail=defemail.trim() + ' '; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ' '; var smsm=prompt('Enter default SMS number.', defsms.trim()); if (smsm == null) { smsm=''; } 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() == '') { defsms=smsm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim()); } } defsms=defsms.trim() + ' '; }
And allow control, as well, at the SMS prompt window logic …
function dosms() { if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); } //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) { 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 : '')) ); } else { 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 : ''))); } if (snum == null) { snum=''; } if (snum.indexOf('@') != -1) { if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', snum); defemail=snum; } return doemail(snum); } 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() == '') { //alert('Snum=' + snum + '?'); if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', snum); defsms=snum; } var azx=top.document.getElementById('xas' + 'ms'); if (azx == null) { azx=top.document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { top.document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.target = "_top"; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze())); azx.click(); } return ''; }

Previous relevant Event Calendar Collaboration Tutorial is shown below.

Event Calendar Collaboration Tutorial

The Event Calendar web application project, of Event Calendar PHP Bookmark Tutorial, from last year is worth a revisit, the reason being …

it did not have a fully fleshed out collaboration or sharing set of functionalities … at the time, probably, because …
each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous “mailto:” or “sms:” communication conduits, back to when we first tackled this project … but now …
hashtagging parts to the “mailto:” URLs (and maybe sometimes the “sms:” URL) might cover the data length needs

… 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!

Timing became really important with this integration of …

… communication conduit possibilities. With its design we have to wait until the point where the user is filling in textarea elements regarding a designated …

Month
Year

… of relevance, before we allow the email 📧 and SMS 📟 emoji buttons be shown. In the code …

Amended HTML h1 element static HTML to add, later shown, perhaps, email 📧 and SMS 📟 emoji buttons …
`<h1>Events in Month   <button style=display:none; title='Share via Email' id=semail onclick="doemail('');">📧</button> <button style=display:none; title='Share via SMS' id=ssms onclick=dosms();>📟</button> </h1>`
New static HTML div element placed to the bottom of the body element …
`<div id=divas></div>`
New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) …
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]) : ''; if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) { bigbih+='<a target=_blank id=xae' + 'mail style=display:none; href="mailto:"></a>'; } if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) { bigbih+='<a target=_blank id=xas' + 'ms style=display:none; href="sms:"></a>'; } var viatext='', smallbih='', wes=null, sparewes=null;
On or around document.body onload event we can analyze any such location.hash hashtagging data …
if (bigbih.indexOf('</he' + 'ad>') != -1 \|\| bigbih.indexOf('<b' + 'o' + 'dy') != -1 \|\| bigbih.indexOf('<h' + '1') == 0) { //bigbih=bigbih.replace('" id="eventcalendar"', 'margin-top:50px;" id="eventcalendar"'); viatext=' (via contact at ' + ('' + new Date()) + ')'; if (bigbih.indexOf('<h' + '1') == 0) { smallbih=bigbih; } else { smallbih=bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].replace(bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].split('>')[0] + '>', ''); } wes=windowopen('./events_in_month.htm','_blank','top=40,left=40,width=800,height=800'); //alert(bigbih); if (wes) { setTimeout(function(){ wes.document.write(bigbih); }, 3000); //document.body.innerHTML=bigbih; setTimeout(function(){ wes.document.getElementById('semail').style.display='inline-block'; wes.document.getElementById('ssms').style.display='inline-block'; wes.document.getElementsByTagName('h1')[0].style.display='none'; wes.document.getElementsByTagName('h3')[0].style.display='none'; //wes.setviatext(viatext); //wes.setphpthere(' '); //wes.togglewords(); }, 5000); } }
A window.open wrapper windowopen Javascript function …
function windowopen(poneis, ptwois, pthreeis) { document.getElementById('divas').innerHTML='<iframe name=ovif id=ovif style="position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;" src="' + poneis + '" onload=wopencheck(this);></iframe>'; //document.getElementsByTagName('h1')[0].style.opacity='0.0'; //document.getElementsByTagName('h3')[0].style.opacity='0.0'; sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif'); //sparewes=window.open(poneis, 'ovif'); sparewes.document.write(bigbih); setTimeout(function(){ sparewes.document.getElementById('semail').style.display='inline-block'; sparewes.document.getElementById('ssms').style.display='inline-block'; var sdem=sparewes.document.getElementById('semail').outerHTML; var sdss=sparewes.document.getElementById('ssms').outerHTML; sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,''); sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,''); sparewes.document.getElementsByTagName('h1')[0].style.display='none'; sparewes.document.getElementsByTagName('h3')[0].style.display='none'; sparewes.document.getElementById('dmore').innerHTML+=(' ' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + ' ' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '<br>'); //sparewes.setviatext(viatext); //sparewes.setphpthere(' '); //sparewes.togglewords(); }, 5000); return null; }
Is augmented by other new Javascript functions …
function hfanalyze() { var fio=document.getElementById('ecform'); if (forceit) { forceit=false; return true; } var delm='?'; var fioih=fio.innerHTML; var fions=fioih.split(' name="'); var testurl=documentURL.split('?')[0].split('#')[0]; //alert(fions.length); for (var ijk=1; ijk<fions.length; ijk++) { testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value.replace(/\?\>/g,'? >')); delm='&'; } //alert(testurl.length); //if (eval('' + testurl.length) < 750) { return true; } //if (lastbut.value.indexOf('New') == 0 \|\| 11 == 11) { if (22 == 22) { //wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600'); //wo.document.write('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); return ('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); } else if (phpthere != '') { if (1 == 1) { postit(fio, false, testurl); } else { fio.target='phpif'; fio.method='POST'; fio.action='./events_in_month.php'; if (!document.getElementById('dmore')) { document.getElementById('ddmore').innerHTML='<input type=hidden id=caltitle name=caltitle value="' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '"></input><input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } else { document.getElementById('dmore').innerHTML='<input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } } return 'true'; } return 'false'; } function doemail(inidea) { var azx=document.getElementById('xae' + 'mail'); if (!azx) { azx=document.createElement("a"); } //if (1 == 1) { //document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); //} azx.style = "display: none"; azx.id = 'xaem' + 'ail'; azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('<')[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] + '<h2' + document.body.innerHTML.split('<h2')[1])); azx.click(); return ''; } function dosms() { //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) >= 18000) { 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,''); } else { snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(/^null/g,''); } if (snum.indexOf('@') != -1) { return doemail(snum); } else if (snum.trim() != '') { alert('Snum=' + snum + '?'); var azx=document.getElementById('xas' + 'ms'); if (azx == null) { azx=document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); azx.click(); } return ''; } function wopencheck(iois) { var aconto = null; aconto = (iois.contentWindow \|\| iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=smallbih; aconto.setviatext(viatext); } } } function setviatext(towhat) { viatext=towhat; }

… to help bed down this new sharing and collaboration functionality in a changed events_in_month.htm parent of the Events in Month web application.

Previous relevant Event Calendar PHP Bookmark Tutorial is shown below.

Event Calendar PHP Bookmark Tutorial

Client meets server today, allowing the PHP data storage talents in yesterday’s Event Calendar PHP Tutorial‘s work to meet a “clientside” way to …

Record to Remember via Bookmark

… use the web browser Bookmarks to help you recall an Events in Month report with long entries.

Involving a Bookmark still needs those “get” ? and & arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as …

https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1

… that mapping being possible, now, making use of a pseudo hashtag arrangement … your Clayton‘s hashtag, if you will!

var documentURL=document.URL;

#August__2023_00000__1

… uniquifying a Month, Year Events in Month identifier part with a version of the user’s IP address (so that they only see what is relevant to them).

Also, today, a lot of CSS tweaks, so that the CSS styling now looks like …

… and we thank this webpage for the heads up regarding how to calculate week numbers within a year data item displays now available in …

a changed events_in_month.htm parent of the Events in Month web application
helped out by its changed child PHP events_in_month.php

Previous relevant Event Calendar PHP Tutorial is shown below.

Event Calendar PHP Tutorial

Let’s face it. Serverside PHP is just great! It opens up so many opportunities regarding data in your web applications.

As such, onto yesterday’s Event Calendar New Window Tutorial logic we now have a …

Record to Remember

The PHP is kind of short, so we will show it below, including one MAMP example of that “self storage” …

Yes, the parent needed to change for our events_in_month.htm parent of Events in Month web application role.

Previous relevant Event Calendar New Window Tutorial is shown below.

Event Calendar New Window Tutorial

Onto yesterday’s Event Calendar Remembered Tutorial‘s “Mystery Dilemma” …

But, there’s an inherent weakness with the design, we’ll go into more into the future.

bring up Context Menu with a right click or two finger gesture within the popup window webpage content …
pick Inspect option …
be in Elements tab of your Web Inspector … and …
highlight top <html> tag …
Context Menu with a right click or two finger gesture …
pick Copy -> Copy outerHTML … so that …
your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …
Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP local Apache/PHP/mySql web server environment, where you can further look at and develop your own ideas)

The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …

… the form submit buttons are reworded accordingly.

Another idea from this blog thread’s inspiration …

… we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb Title, available to the user via a new dropdown “Bold Title” option.

And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …

text shadow means by which the text of Event Calendar can be more impactive …
<div style="text-shadow:-1px 1px 1px #ff2d95;" id=eventcalendar></div>
dropdown element conditional styling …
<style> .dayb { color: white; background-color: red; padding: 5 5 5 5; } .dow { color: purple; font-style: bold; } .selday { margin-left: 8px; background-color: rgba(255,0,0,0.7); display: inline-block; width: 50px; } </style>
…
if (thislabel.substring(0,1) == 'i') { if (thisval.trim() != '') { document.getElementById(thislabel.replace('i', 'sel')).style.color='white'; document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red'; } document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); //.replace(/\+$/g, ' '); document.getElementById(thislabel).value=thisval.replace(/\+$/g, ' '); } else { document.getElementById(thislabel).value=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); } }
placeholder on Blurb conditional existence …
var ourdata=''; // ... if (documentURL.indexOf('?') != -1) { if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; } // ... trtemplate='<tr id=tr01.00><td style=width:22%;><span id=sone01.00 class=dow>' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '</span><br><br><span id=stwo01.00 class=dayb>1<span onblur=sepit(this); contenteditable=true id=sp01.00></span><input type=hidden id=i01.00 name=i01.00 value=""></input><select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange="selit(this);" id=sel01.00><option id=opt01.00 value=""></option><option title="All such in month (ie. weekly)" value="...">...</option><option title="And ..." value="&...">&</option><option value=Bold>Bold Title</option><option value=Clone>Clone</option></select></span></td><td class=blurb title="What is on?" id=tb01.00><span title="Event title" style="font-style:bold;color:blue;" id=bd01.00></span><textarea name=ta01.00 id=ta01.00 style="width:100%;height=100%;" ' + ourdata + 'placeholder="Blurb ..." class=tablurb></textarea></td></tr>'; // ... } // ... }

… for our “second draft” events_in_month.htm Events in Month web application.

Previous relevant Event Calendar Remembered Tutorial is shown below.

Event Calendar Remembered Tutorial

We were inspired by an Event Calendar pamplette we saw the other day …

… to write a new “proof of concept” Events in Month web application, whose content can be recalled via the web browser’s Bookmark methodologies.

We liked the ideas for day of week and/or date of month grouping arrangements we included, being, the way we interpreted it …

just on this day in this month … default
on this day of the week throughout the month in question … “…“
on this day and some others in that month in question … “&” … to start with and further amendments available via contenteditable=true span element
“Clone” value allows for multiple separated “blurbs” for the one signature day

But, there’s an inherent weakness with the design, we’ll go into more into the future. For now, you can try it yourself below …

Stop Press

This is where we get to for a “second draft” we’ll get into, further, tomorrow …

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged argument, CSS, emoji, English, event, game, genericization, highlight, HTML, Javascript, Linux, listenerdictionary, overlay, parameterization, programming, regional indicator, selection, selectionchange, styling, text shadow, textarea, tutorial, word game | Leave a comment

Find English Highlighted Words Game Primer Tutorial

Posted on March 22, 2024 by admin

Find English Highlighted Words Game Primer Tutorial

This highlighting within a sea of letters presented in a textarea was the framework for users to play a game highlighting …

horizontally
vertically
diagonally

… words in left to right or top to bottom order, or reversed, to score in our “Find the Words” game presented today.

Take a look at the crucial selectionchange event logic for today’s Find the Word game …

… in our first draft Find the Words game you can try below …

Previous relevant Event Calendar Collaboration Textarea Highlight Linking Tutorial is shown below.

Event Calendar Collaboration Textarea Highlight Linking Tutorial

For the first time we can remember, with our Events in Month web application of yesterday’s Event Calendar Collaboration Remembering Recipient Tutorial …

we’re channelling how in emails “word strings” starting with “http” become links … and so …
in our event in month “blurb” textarea elements we allow user highlighted text containing such “http” “word strings” be opened in popup windows showing the content of those URLs, as available

Here is the relevant Javascript we ended up with, for this …

Also, today, we have a few CSS tweaks in the changed events_in_month.htm parent of the Events in Month web application. Feel free to try it for yourself.

Stop Press

Previous relevant Event Calendar Collaboration Remembering Recipient Tutorial is shown below.

Event Calendar Collaboration Remembering Recipient Tutorial

When it comes to procedures …
Aaaaaarrrrgggghhhh …
Nuances count … regarding …
Errrrrrr …
Saving time …
Saving frustration

… resulting in the “easy to remember” acronym WANESS … we rest our cases!

Global variables initialization …
`var defemail='', defsms=''; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); }`
Within document.body onload event logic …
if (document.getElementById('semail') && document.getElementById('ssms')) { document.getElementById('semail').oncontextmenu=function(){ emailaskit(); }; document.getElementById('semail').ontouchmove=function(){ emailaskit(); }; document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); }; document.getElementById('ssms').ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android\|BlackBerry\|iPhone\|iPad\|iPod\|Opera Mini\|IEMobile/i)) { document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes'; } else { document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes'; } }
Calling these two Javascript function helpers …
function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ' '; var emailm=prompt('Enter default email address.', defemail.trim()); if (emailm == null) { emailm=''; } if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) { defemail=emailm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', emailm.trim()); } } defemail=defemail.trim() + ' '; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ' '; var smsm=prompt('Enter default SMS number.', defsms.trim()); if (smsm == null) { smsm=''; } 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() == '') { defsms=smsm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim()); } } defsms=defsms.trim() + ' '; }
And allow control, as well, at the SMS prompt window logic …
function dosms() { if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); } //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) { 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 : '')) ); } else { 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 : ''))); } if (snum == null) { snum=''; } if (snum.indexOf('@') != -1) { if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', snum); defemail=snum; } return doemail(snum); } 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() == '') { //alert('Snum=' + snum + '?'); if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', snum); defsms=snum; } var azx=top.document.getElementById('xas' + 'ms'); if (azx == null) { azx=top.document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { top.document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.target = "_top"; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze())); azx.click(); } return ''; }

Previous relevant Event Calendar Collaboration Tutorial is shown below.

Event Calendar Collaboration Tutorial

The Event Calendar web application project, of Event Calendar PHP Bookmark Tutorial, from last year is worth a revisit, the reason being …

it did not have a fully fleshed out collaboration or sharing set of functionalities … at the time, probably, because …
each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous “mailto:” or “sms:” communication conduits, back to when we first tackled this project … but now …
hashtagging parts to the “mailto:” URLs (and maybe sometimes the “sms:” URL) might cover the data length needs

… 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!

Timing became really important with this integration of …

… communication conduit possibilities. With its design we have to wait until the point where the user is filling in textarea elements regarding a designated …

Month
Year

… of relevance, before we allow the email 📧 and SMS 📟 emoji buttons be shown. In the code …

Amended HTML h1 element static HTML to add, later shown, perhaps, email 📧 and SMS 📟 emoji buttons …
`<h1>Events in Month   <button style=display:none; title='Share via Email' id=semail onclick="doemail('');">📧</button> <button style=display:none; title='Share via SMS' id=ssms onclick=dosms();>📟</button> </h1>`
New static HTML div element placed to the bottom of the body element …
`<div id=divas></div>`
New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) …
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]) : ''; if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) { bigbih+='<a target=_blank id=xae' + 'mail style=display:none; href="mailto:"></a>'; } if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) { bigbih+='<a target=_blank id=xas' + 'ms style=display:none; href="sms:"></a>'; } var viatext='', smallbih='', wes=null, sparewes=null;
On or around document.body onload event we can analyze any such location.hash hashtagging data …
if (bigbih.indexOf('</he' + 'ad>') != -1 \|\| bigbih.indexOf('<b' + 'o' + 'dy') != -1 \|\| bigbih.indexOf('<h' + '1') == 0) { //bigbih=bigbih.replace('" id="eventcalendar"', 'margin-top:50px;" id="eventcalendar"'); viatext=' (via contact at ' + ('' + new Date()) + ')'; if (bigbih.indexOf('<h' + '1') == 0) { smallbih=bigbih; } else { smallbih=bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].replace(bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].split('>')[0] + '>', ''); } wes=windowopen('./events_in_month.htm','_blank','top=40,left=40,width=800,height=800'); //alert(bigbih); if (wes) { setTimeout(function(){ wes.document.write(bigbih); }, 3000); //document.body.innerHTML=bigbih; setTimeout(function(){ wes.document.getElementById('semail').style.display='inline-block'; wes.document.getElementById('ssms').style.display='inline-block'; wes.document.getElementsByTagName('h1')[0].style.display='none'; wes.document.getElementsByTagName('h3')[0].style.display='none'; //wes.setviatext(viatext); //wes.setphpthere(' '); //wes.togglewords(); }, 5000); } }
A window.open wrapper windowopen Javascript function …
function windowopen(poneis, ptwois, pthreeis) { document.getElementById('divas').innerHTML='<iframe name=ovif id=ovif style="position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;" src="' + poneis + '" onload=wopencheck(this);></iframe>'; //document.getElementsByTagName('h1')[0].style.opacity='0.0'; //document.getElementsByTagName('h3')[0].style.opacity='0.0'; sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif'); //sparewes=window.open(poneis, 'ovif'); sparewes.document.write(bigbih); setTimeout(function(){ sparewes.document.getElementById('semail').style.display='inline-block'; sparewes.document.getElementById('ssms').style.display='inline-block'; var sdem=sparewes.document.getElementById('semail').outerHTML; var sdss=sparewes.document.getElementById('ssms').outerHTML; sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,''); sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,''); sparewes.document.getElementsByTagName('h1')[0].style.display='none'; sparewes.document.getElementsByTagName('h3')[0].style.display='none'; sparewes.document.getElementById('dmore').innerHTML+=(' ' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + ' ' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '<br>'); //sparewes.setviatext(viatext); //sparewes.setphpthere(' '); //sparewes.togglewords(); }, 5000); return null; }
Is augmented by other new Javascript functions …
function hfanalyze() { var fio=document.getElementById('ecform'); if (forceit) { forceit=false; return true; } var delm='?'; var fioih=fio.innerHTML; var fions=fioih.split(' name="'); var testurl=documentURL.split('?')[0].split('#')[0]; //alert(fions.length); for (var ijk=1; ijk<fions.length; ijk++) { testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value.replace(/\?\>/g,'? >')); delm='&'; } //alert(testurl.length); //if (eval('' + testurl.length) < 750) { return true; } //if (lastbut.value.indexOf('New') == 0 \|\| 11 == 11) { if (22 == 22) { //wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600'); //wo.document.write('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); return ('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); } else if (phpthere != '') { if (1 == 1) { postit(fio, false, testurl); } else { fio.target='phpif'; fio.method='POST'; fio.action='./events_in_month.php'; if (!document.getElementById('dmore')) { document.getElementById('ddmore').innerHTML='<input type=hidden id=caltitle name=caltitle value="' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '"></input><input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } else { document.getElementById('dmore').innerHTML='<input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } } return 'true'; } return 'false'; } function doemail(inidea) { var azx=document.getElementById('xae' + 'mail'); if (!azx) { azx=document.createElement("a"); } //if (1 == 1) { //document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); //} azx.style = "display: none"; azx.id = 'xaem' + 'ail'; azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('<')[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] + '<h2' + document.body.innerHTML.split('<h2')[1])); azx.click(); return ''; } function dosms() { //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) >= 18000) { 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,''); } else { snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(/^null/g,''); } if (snum.indexOf('@') != -1) { return doemail(snum); } else if (snum.trim() != '') { alert('Snum=' + snum + '?'); var azx=document.getElementById('xas' + 'ms'); if (azx == null) { azx=document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); azx.click(); } return ''; } function wopencheck(iois) { var aconto = null; aconto = (iois.contentWindow \|\| iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=smallbih; aconto.setviatext(viatext); } } } function setviatext(towhat) { viatext=towhat; }

… to help bed down this new sharing and collaboration functionality in a changed events_in_month.htm parent of the Events in Month web application.

Previous relevant Event Calendar PHP Bookmark Tutorial is shown below.

Event Calendar PHP Bookmark Tutorial

Client meets server today, allowing the PHP data storage talents in yesterday’s Event Calendar PHP Tutorial‘s work to meet a “clientside” way to …

Record to Remember via Bookmark

… use the web browser Bookmarks to help you recall an Events in Month report with long entries.

Involving a Bookmark still needs those “get” ? and & arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as …

https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1

… that mapping being possible, now, making use of a pseudo hashtag arrangement … your Clayton‘s hashtag, if you will!

var documentURL=document.URL;

#August__2023_00000__1

… uniquifying a Month, Year Events in Month identifier part with a version of the user’s IP address (so that they only see what is relevant to them).

Also, today, a lot of CSS tweaks, so that the CSS styling now looks like …

… and we thank this webpage for the heads up regarding how to calculate week numbers within a year data item displays now available in …

a changed events_in_month.htm parent of the Events in Month web application
helped out by its changed child PHP events_in_month.php

Previous relevant Event Calendar PHP Tutorial is shown below.

Event Calendar PHP Tutorial

Let’s face it. Serverside PHP is just great! It opens up so many opportunities regarding data in your web applications.

As such, onto yesterday’s Event Calendar New Window Tutorial logic we now have a …

Record to Remember

The PHP is kind of short, so we will show it below, including one MAMP example of that “self storage” …

Yes, the parent needed to change for our events_in_month.htm parent of Events in Month web application role.

Previous relevant Event Calendar New Window Tutorial is shown below.

Event Calendar New Window Tutorial

Onto yesterday’s Event Calendar Remembered Tutorial‘s “Mystery Dilemma” …

But, there’s an inherent weakness with the design, we’ll go into more into the future.

bring up Context Menu with a right click or two finger gesture within the popup window webpage content …
pick Inspect option …
be in Elements tab of your Web Inspector … and …
highlight top <html> tag …
Context Menu with a right click or two finger gesture …
pick Copy -> Copy outerHTML … so that …
your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …
Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP local Apache/PHP/mySql web server environment, where you can further look at and develop your own ideas)

The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …

… the form submit buttons are reworded accordingly.

Another idea from this blog thread’s inspiration …

… we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb Title, available to the user via a new dropdown “Bold Title” option.

And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …

text shadow means by which the text of Event Calendar can be more impactive …
<div style="text-shadow:-1px 1px 1px #ff2d95;" id=eventcalendar></div>
dropdown element conditional styling …
<style> .dayb { color: white; background-color: red; padding: 5 5 5 5; } .dow { color: purple; font-style: bold; } .selday { margin-left: 8px; background-color: rgba(255,0,0,0.7); display: inline-block; width: 50px; } </style>
…
if (thislabel.substring(0,1) == 'i') { if (thisval.trim() != '') { document.getElementById(thislabel.replace('i', 'sel')).style.color='white'; document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red'; } document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); //.replace(/\+$/g, ' '); document.getElementById(thislabel).value=thisval.replace(/\+$/g, ' '); } else { document.getElementById(thislabel).value=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); } }
placeholder on Blurb conditional existence …
var ourdata=''; // ... if (documentURL.indexOf('?') != -1) { if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; } // ... trtemplate='<tr id=tr01.00><td style=width:22%;><span id=sone01.00 class=dow>' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '</span><br><br><span id=stwo01.00 class=dayb>1<span onblur=sepit(this); contenteditable=true id=sp01.00></span><input type=hidden id=i01.00 name=i01.00 value=""></input><select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange="selit(this);" id=sel01.00><option id=opt01.00 value=""></option><option title="All such in month (ie. weekly)" value="...">...</option><option title="And ..." value="&...">&</option><option value=Bold>Bold Title</option><option value=Clone>Clone</option></select></span></td><td class=blurb title="What is on?" id=tb01.00><span title="Event title" style="font-style:bold;color:blue;" id=bd01.00></span><textarea name=ta01.00 id=ta01.00 style="width:100%;height=100%;" ' + ourdata + 'placeholder="Blurb ..." class=tablurb></textarea></td></tr>'; // ... } // ... }

… for our “second draft” events_in_month.htm Events in Month web application.

Previous relevant Event Calendar Remembered Tutorial is shown below.

Event Calendar Remembered Tutorial

We were inspired by an Event Calendar pamplette we saw the other day …

… to write a new “proof of concept” Events in Month web application, whose content can be recalled via the web browser’s Bookmark methodologies.

We liked the ideas for day of week and/or date of month grouping arrangements we included, being, the way we interpreted it …

just on this day in this month … default
on this day of the week throughout the month in question … “…“
on this day and some others in that month in question … “&” … to start with and further amendments available via contenteditable=true span element
“Clone” value allows for multiple separated “blurbs” for the one signature day

But, there’s an inherent weakness with the design, we’ll go into more into the future. For now, you can try it yourself below …

Stop Press

This is where we get to for a “second draft” we’ll get into, further, tomorrow …

If this was interesting you may be interested in this too.

Posted in Ajax, eLearning, Event-Driven Programming, Games, Operating System, Tutorials | Tagged English, event, game, highlight, HTML, Javascript, Linux, listenerdictionary, programming, selectionchange, textarea, tutorial, word game | Leave a comment

Event Calendar Collaboration Textarea Highlight Linking Tutorial

Posted on March 21, 2024 by admin

Event Calendar Collaboration Textarea Highlight Linking Tutorial

For the first time we can remember, with our Events in Month web application of yesterday’s Event Calendar Collaboration Remembering Recipient Tutorial …

we’re channelling how in emails “word strings” starting with “http” become links … and so …
in our event in month “blurb” textarea elements we allow user highlighted text containing such “http” “word strings” be opened in popup windows showing the content of those URLs, as available

Here is the relevant Javascript we ended up with, for this …

Also, today, we have a few CSS tweaks in the changed events_in_month.htm parent of the Events in Month web application. Feel free to try it for yourself.

Stop Press

Previous relevant Event Calendar Collaboration Remembering Recipient Tutorial is shown below.

Event Calendar Collaboration Remembering Recipient Tutorial

When it comes to procedures …
Aaaaaarrrrgggghhhh …
Nuances count … regarding …
Errrrrrr …
Saving time …
Saving frustration

… resulting in the “easy to remember” acronym WANESS … we rest our cases!

Global variables initialization …
`var defemail='', defsms=''; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); }`
Within document.body onload event logic …
if (document.getElementById('semail') && document.getElementById('ssms')) { document.getElementById('semail').oncontextmenu=function(){ emailaskit(); }; document.getElementById('semail').ontouchmove=function(){ emailaskit(); }; document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); }; document.getElementById('ssms').ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android\|BlackBerry\|iPhone\|iPad\|iPod\|Opera Mini\|IEMobile/i)) { document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes'; } else { document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes'; } }
Calling these two Javascript function helpers …
function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ' '; var emailm=prompt('Enter default email address.', defemail.trim()); if (emailm == null) { emailm=''; } if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) { defemail=emailm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', emailm.trim()); } } defemail=defemail.trim() + ' '; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ' '; var smsm=prompt('Enter default SMS number.', defsms.trim()); if (smsm == null) { smsm=''; } 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() == '') { defsms=smsm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim()); } } defsms=defsms.trim() + ' '; }
And allow control, as well, at the SMS prompt window logic …
function dosms() { if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); } //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) { 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 : '')) ); } else { 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 : ''))); } if (snum == null) { snum=''; } if (snum.indexOf('@') != -1) { if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', snum); defemail=snum; } return doemail(snum); } 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() == '') { //alert('Snum=' + snum + '?'); if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', snum); defsms=snum; } var azx=top.document.getElementById('xas' + 'ms'); if (azx == null) { azx=top.document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { top.document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.target = "_top"; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze())); azx.click(); } return ''; }

Previous relevant Event Calendar Collaboration Tutorial is shown below.

Event Calendar Collaboration Tutorial

The Event Calendar web application project, of Event Calendar PHP Bookmark Tutorial, from last year is worth a revisit, the reason being …

it did not have a fully fleshed out collaboration or sharing set of functionalities … at the time, probably, because …
each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous “mailto:” or “sms:” communication conduits, back to when we first tackled this project … but now …
hashtagging parts to the “mailto:” URLs (and maybe sometimes the “sms:” URL) might cover the data length needs

… 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!

Timing became really important with this integration of …

… communication conduit possibilities. With its design we have to wait until the point where the user is filling in textarea elements regarding a designated …

Month
Year

… of relevance, before we allow the email 📧 and SMS 📟 emoji buttons be shown. In the code …

Amended HTML h1 element static HTML to add, later shown, perhaps, email 📧 and SMS 📟 emoji buttons …
`<h1>Events in Month   <button style=display:none; title='Share via Email' id=semail onclick="doemail('');">📧</button> <button style=display:none; title='Share via SMS' id=ssms onclick=dosms();>📟</button> </h1>`
New static HTML div element placed to the bottom of the body element …
`<div id=divas></div>`
New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) …
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]) : ''; if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) { bigbih+='<a target=_blank id=xae' + 'mail style=display:none; href="mailto:"></a>'; } if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) { bigbih+='<a target=_blank id=xas' + 'ms style=display:none; href="sms:"></a>'; } var viatext='', smallbih='', wes=null, sparewes=null;
On or around document.body onload event we can analyze any such location.hash hashtagging data …
if (bigbih.indexOf('</he' + 'ad>') != -1 \|\| bigbih.indexOf('<b' + 'o' + 'dy') != -1 \|\| bigbih.indexOf('<h' + '1') == 0) { //bigbih=bigbih.replace('" id="eventcalendar"', 'margin-top:50px;" id="eventcalendar"'); viatext=' (via contact at ' + ('' + new Date()) + ')'; if (bigbih.indexOf('<h' + '1') == 0) { smallbih=bigbih; } else { smallbih=bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].replace(bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].split('>')[0] + '>', ''); } wes=windowopen('./events_in_month.htm','_blank','top=40,left=40,width=800,height=800'); //alert(bigbih); if (wes) { setTimeout(function(){ wes.document.write(bigbih); }, 3000); //document.body.innerHTML=bigbih; setTimeout(function(){ wes.document.getElementById('semail').style.display='inline-block'; wes.document.getElementById('ssms').style.display='inline-block'; wes.document.getElementsByTagName('h1')[0].style.display='none'; wes.document.getElementsByTagName('h3')[0].style.display='none'; //wes.setviatext(viatext); //wes.setphpthere(' '); //wes.togglewords(); }, 5000); } }
A window.open wrapper windowopen Javascript function …
function windowopen(poneis, ptwois, pthreeis) { document.getElementById('divas').innerHTML='<iframe name=ovif id=ovif style="position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;" src="' + poneis + '" onload=wopencheck(this);></iframe>'; //document.getElementsByTagName('h1')[0].style.opacity='0.0'; //document.getElementsByTagName('h3')[0].style.opacity='0.0'; sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif'); //sparewes=window.open(poneis, 'ovif'); sparewes.document.write(bigbih); setTimeout(function(){ sparewes.document.getElementById('semail').style.display='inline-block'; sparewes.document.getElementById('ssms').style.display='inline-block'; var sdem=sparewes.document.getElementById('semail').outerHTML; var sdss=sparewes.document.getElementById('ssms').outerHTML; sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,''); sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,''); sparewes.document.getElementsByTagName('h1')[0].style.display='none'; sparewes.document.getElementsByTagName('h3')[0].style.display='none'; sparewes.document.getElementById('dmore').innerHTML+=(' ' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + ' ' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '<br>'); //sparewes.setviatext(viatext); //sparewes.setphpthere(' '); //sparewes.togglewords(); }, 5000); return null; }
Is augmented by other new Javascript functions …
function hfanalyze() { var fio=document.getElementById('ecform'); if (forceit) { forceit=false; return true; } var delm='?'; var fioih=fio.innerHTML; var fions=fioih.split(' name="'); var testurl=documentURL.split('?')[0].split('#')[0]; //alert(fions.length); for (var ijk=1; ijk<fions.length; ijk++) { testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value.replace(/\?\>/g,'? >')); delm='&'; } //alert(testurl.length); //if (eval('' + testurl.length) < 750) { return true; } //if (lastbut.value.indexOf('New') == 0 \|\| 11 == 11) { if (22 == 22) { //wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600'); //wo.document.write('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); return ('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); } else if (phpthere != '') { if (1 == 1) { postit(fio, false, testurl); } else { fio.target='phpif'; fio.method='POST'; fio.action='./events_in_month.php'; if (!document.getElementById('dmore')) { document.getElementById('ddmore').innerHTML='<input type=hidden id=caltitle name=caltitle value="' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '"></input><input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } else { document.getElementById('dmore').innerHTML='<input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } } return 'true'; } return 'false'; } function doemail(inidea) { var azx=document.getElementById('xae' + 'mail'); if (!azx) { azx=document.createElement("a"); } //if (1 == 1) { //document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); //} azx.style = "display: none"; azx.id = 'xaem' + 'ail'; azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('<')[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] + '<h2' + document.body.innerHTML.split('<h2')[1])); azx.click(); return ''; } function dosms() { //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) >= 18000) { 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,''); } else { snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(/^null/g,''); } if (snum.indexOf('@') != -1) { return doemail(snum); } else if (snum.trim() != '') { alert('Snum=' + snum + '?'); var azx=document.getElementById('xas' + 'ms'); if (azx == null) { azx=document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); azx.click(); } return ''; } function wopencheck(iois) { var aconto = null; aconto = (iois.contentWindow \|\| iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=smallbih; aconto.setviatext(viatext); } } } function setviatext(towhat) { viatext=towhat; }

… to help bed down this new sharing and collaboration functionality in a changed events_in_month.htm parent of the Events in Month web application.

Previous relevant Event Calendar PHP Bookmark Tutorial is shown below.

Event Calendar PHP Bookmark Tutorial

Client meets server today, allowing the PHP data storage talents in yesterday’s Event Calendar PHP Tutorial‘s work to meet a “clientside” way to …

Record to Remember via Bookmark

… use the web browser Bookmarks to help you recall an Events in Month report with long entries.

Involving a Bookmark still needs those “get” ? and & arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as …

https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1

… that mapping being possible, now, making use of a pseudo hashtag arrangement … your Clayton‘s hashtag, if you will!

var documentURL=document.URL;

#August__2023_00000__1

… uniquifying a Month, Year Events in Month identifier part with a version of the user’s IP address (so that they only see what is relevant to them).

Also, today, a lot of CSS tweaks, so that the CSS styling now looks like …

… and we thank this webpage for the heads up regarding how to calculate week numbers within a year data item displays now available in …

a changed events_in_month.htm parent of the Events in Month web application
helped out by its changed child PHP events_in_month.php

Previous relevant Event Calendar PHP Tutorial is shown below.

Event Calendar PHP Tutorial

Let’s face it. Serverside PHP is just great! It opens up so many opportunities regarding data in your web applications.

As such, onto yesterday’s Event Calendar New Window Tutorial logic we now have a …

Record to Remember

The PHP is kind of short, so we will show it below, including one MAMP example of that “self storage” …

Yes, the parent needed to change for our events_in_month.htm parent of Events in Month web application role.

Previous relevant Event Calendar New Window Tutorial is shown below.

Event Calendar New Window Tutorial

Onto yesterday’s Event Calendar Remembered Tutorial‘s “Mystery Dilemma” …

But, there’s an inherent weakness with the design, we’ll go into more into the future.

bring up Context Menu with a right click or two finger gesture within the popup window webpage content …
pick Inspect option …
be in Elements tab of your Web Inspector … and …
highlight top <html> tag …
Context Menu with a right click or two finger gesture …
pick Copy -> Copy outerHTML … so that …
your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …
Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP local Apache/PHP/mySql web server environment, where you can further look at and develop your own ideas)

The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …

… the form submit buttons are reworded accordingly.

Another idea from this blog thread’s inspiration …

… we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb Title, available to the user via a new dropdown “Bold Title” option.

And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …

text shadow means by which the text of Event Calendar can be more impactive …
<div style="text-shadow:-1px 1px 1px #ff2d95;" id=eventcalendar></div>
dropdown element conditional styling …
<style> .dayb { color: white; background-color: red; padding: 5 5 5 5; } .dow { color: purple; font-style: bold; } .selday { margin-left: 8px; background-color: rgba(255,0,0,0.7); display: inline-block; width: 50px; } </style>
…
if (thislabel.substring(0,1) == 'i') { if (thisval.trim() != '') { document.getElementById(thislabel.replace('i', 'sel')).style.color='white'; document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red'; } document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); //.replace(/\+$/g, ' '); document.getElementById(thislabel).value=thisval.replace(/\+$/g, ' '); } else { document.getElementById(thislabel).value=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); } }
placeholder on Blurb conditional existence …
var ourdata=''; // ... if (documentURL.indexOf('?') != -1) { if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; } // ... trtemplate='<tr id=tr01.00><td style=width:22%;><span id=sone01.00 class=dow>' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '</span><br><br><span id=stwo01.00 class=dayb>1<span onblur=sepit(this); contenteditable=true id=sp01.00></span><input type=hidden id=i01.00 name=i01.00 value=""></input><select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange="selit(this);" id=sel01.00><option id=opt01.00 value=""></option><option title="All such in month (ie. weekly)" value="...">...</option><option title="And ..." value="&...">&</option><option value=Bold>Bold Title</option><option value=Clone>Clone</option></select></span></td><td class=blurb title="What is on?" id=tb01.00><span title="Event title" style="font-style:bold;color:blue;" id=bd01.00></span><textarea name=ta01.00 id=ta01.00 style="width:100%;height=100%;" ' + ourdata + 'placeholder="Blurb ..." class=tablurb></textarea></td></tr>'; // ... } // ... }

… for our “second draft” events_in_month.htm Events in Month web application.

Previous relevant Event Calendar Remembered Tutorial is shown below.

Event Calendar Remembered Tutorial

We were inspired by an Event Calendar pamplette we saw the other day …

… to write a new “proof of concept” Events in Month web application, whose content can be recalled via the web browser’s Bookmark methodologies.

We liked the ideas for day of week and/or date of month grouping arrangements we included, being, the way we interpreted it …

just on this day in this month … default
on this day of the week throughout the month in question … “…“
on this day and some others in that month in question … “&” … to start with and further amendments available via contenteditable=true span element
“Clone” value allows for multiple separated “blurbs” for the one signature day

But, there’s an inherent weakness with the design, we’ll go into more into the future. For now, you can try it yourself below …

Stop Press

This is where we get to for a “second draft” we’ll get into, further, tomorrow …

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged absolute URL, address bar, address URL, argument, arguments, bold, bookmark, button, calendar, collaboration.share, colour, communication, conduit, CSS, data, date, day, day of week, dropdown, emoji, emoji button, event, file_get_contents, get, hashtag, hashtagging, highlight, highlighting, HTML, IP address, Javascript, label, linear gradient, link, localStorage, mailto, MAMP, month, onblur, PHP, placeholder, popup, popup window, programming, recipient, select, selector, sharing, SMS, span, stop press, style, styling, table, text, text shadow, textarea, timing, title, tutorial, uniquifier, url, user experience, UX, value, window.email, window.localStorage, word | Leave a comment

Event Calendar Collaboration Remembering Recipient Tutorial

Posted on March 20, 2024 by admin

Event Calendar Collaboration Remembering Recipient Tutorial

When it comes to procedures …
Aaaaaarrrrgggghhhh …
Nuances count … regarding …
Errrrrrr …
Saving time …
Saving frustration

… resulting in the “easy to remember” acronym WANESS … we rest our cases!

Global variables initialization …
`var defemail='', defsms=''; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); }`
Within document.body onload event logic …
if (document.getElementById('semail') && document.getElementById('ssms')) { document.getElementById('semail').oncontextmenu=function(){ emailaskit(); }; document.getElementById('semail').ontouchmove=function(){ emailaskit(); }; document.getElementById('ssms').oncontextmenu=function(){ smsaskit(); }; document.getElementById('ssms').ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android\|BlackBerry\|iPhone\|iPad\|iPod\|Opera Mini\|IEMobile/i)) { document.getElementById('semail').title+=' Move gesture here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Move gesture here can ask for new default remembered SMS number for collaboration purposes'; } else { document.getElementById('semail').title+=' Right click here can ask for new default remembered email address for collaboration purposes'; document.getElementById('ssms').title+=' Right click here can ask for new default remembered SMS number for collaboration purposes'; } }
Calling these two Javascript function helpers …
function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ' '; var emailm=prompt('Enter default email address.', defemail.trim()); if (emailm == null) { emailm=''; } if (emailm.trim() != '' && emailm.trim().indexOf('@') != -1) { defemail=emailm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', emailm.trim()); } } defemail=defemail.trim() + ' '; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ' '; var smsm=prompt('Enter default SMS number.', defsms.trim()); if (smsm == null) { smsm=''; } 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() == '') { defsms=smsm.trim() + ' '; if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', smsm.trim()); } } defsms=defsms.trim() + ' '; }
And allow control, as well, at the SMS prompt window logic …
function dosms() { if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defemail=window.localStorage.getItem('eventcollaboratoremailee'); } if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { defsms=window.localStorage.removeItem('eventcollaboratorsmsno'); } //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) { 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 : '')) ); } else { 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 : ''))); } if (snum == null) { snum=''; } if (snum.indexOf('@') != -1) { if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratoremailee'); } window.localStorage.setItem('eventcollaboratoremailee', snum); defemail=snum; } return doemail(snum); } 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() == '') { //alert('Snum=' + snum + '?'); if (snum.trim() != snum) { snum=snum.trim(); if (('' + window.localStorage.getItem('eventcollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') { window.localStorage.removeItem('eventcollaboratorsmsno'); } window.localStorage.setItem('eventcollaboratorsmsno', snum); defsms=snum; } var azx=top.document.getElementById('xas' + 'ms'); if (azx == null) { azx=top.document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { top.document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.target = "_top"; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(parent.hfanalyze())); azx.click(); } return ''; }

Previous relevant Event Calendar Collaboration Tutorial is shown below.

Event Calendar Collaboration Tutorial

The Event Calendar web application project, of Event Calendar PHP Bookmark Tutorial, from last year is worth a revisit, the reason being …

it did not have a fully fleshed out collaboration or sharing set of functionalities … at the time, probably, because …
each Monthly calendar filled out, and wanting to be saved, could involve much more than the 850 characters available to previous “mailto:” or “sms:” communication conduits, back to when we first tackled this project … but now …
hashtagging parts to the “mailto:” URLs (and maybe sometimes the “sms:” URL) might cover the data length needs

… 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!

Timing became really important with this integration of …

… communication conduit possibilities. With its design we have to wait until the point where the user is filling in textarea elements regarding a designated …

Month
Year

… of relevance, before we allow the email 📧 and SMS 📟 emoji buttons be shown. In the code …

Amended HTML h1 element static HTML to add, later shown, perhaps, email 📧 and SMS 📟 emoji buttons …
`<h1>Events in Month   <button style=display:none; title='Share via Email' id=semail onclick="doemail('');">📧</button> <button style=display:none; title='Share via SMS' id=ssms onclick=dosms();>📟</button> </h1>`
New static HTML div element placed to the bottom of the body element …
`<div id=divas></div>`
New Javascript global variables (picking up hashtagging parts of the address bar URL, perhaps linked off an email or SMS link clicked) …
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]) : ''; if (bigbih != '' && bigbih.indexOf('xae' + 'mail') == -1) { bigbih+='<a target=_blank id=xae' + 'mail style=display:none; href="mailto:"></a>'; } if (bigbih != '' && bigbih.indexOf('xas' + 'ms') == -1) { bigbih+='<a target=_blank id=xas' + 'ms style=display:none; href="sms:"></a>'; } var viatext='', smallbih='', wes=null, sparewes=null;
On or around document.body onload event we can analyze any such location.hash hashtagging data …
if (bigbih.indexOf('</he' + 'ad>') != -1 \|\| bigbih.indexOf('<b' + 'o' + 'dy') != -1 \|\| bigbih.indexOf('<h' + '1') == 0) { //bigbih=bigbih.replace('" id="eventcalendar"', 'margin-top:50px;" id="eventcalendar"'); viatext=' (via contact at ' + ('' + new Date()) + ')'; if (bigbih.indexOf('<h' + '1') == 0) { smallbih=bigbih; } else { smallbih=bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].replace(bigbih.split('<b' + 'o' + '')[1].split('</b' + 'o' + 'd' + 'y>')[0].split('>')[0] + '>', ''); } wes=windowopen('./events_in_month.htm','_blank','top=40,left=40,width=800,height=800'); //alert(bigbih); if (wes) { setTimeout(function(){ wes.document.write(bigbih); }, 3000); //document.body.innerHTML=bigbih; setTimeout(function(){ wes.document.getElementById('semail').style.display='inline-block'; wes.document.getElementById('ssms').style.display='inline-block'; wes.document.getElementsByTagName('h1')[0].style.display='none'; wes.document.getElementsByTagName('h3')[0].style.display='none'; //wes.setviatext(viatext); //wes.setphpthere(' '); //wes.togglewords(); }, 5000); } }
A window.open wrapper windowopen Javascript function …
function windowopen(poneis, ptwois, pthreeis) { document.getElementById('divas').innerHTML='<iframe name=ovif id=ovif style="position:absolute;top:140px;left:0px;width:100%;height:100%;z-index:99;" src="' + poneis + '" onload=wopencheck(this);></iframe>'; //document.getElementsByTagName('h1')[0].style.opacity='0.0'; //document.getElementsByTagName('h3')[0].style.opacity='0.0'; sparewes=window.open(poneis.split('.htm')[0] + '.php', 'ovif'); //sparewes=window.open(poneis, 'ovif'); sparewes.document.write(bigbih); setTimeout(function(){ sparewes.document.getElementById('semail').style.display='inline-block'; sparewes.document.getElementById('ssms').style.display='inline-block'; var sdem=sparewes.document.getElementById('semail').outerHTML; var sdss=sparewes.document.getElementById('ssms').outerHTML; sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdss,''); sparewes.document.getElementsByTagName('h1')[0].innerHTML=sparewes.document.getElementsByTagName('h1')[0].innerHTML.replace(sdem,''); sparewes.document.getElementsByTagName('h1')[0].style.display='none'; sparewes.document.getElementsByTagName('h3')[0].style.display='none'; sparewes.document.getElementById('dmore').innerHTML+=(' ' + sdem.replace('doeJUNKmail(', 'parent.doe' + 'mail(') + ' ' + sdss.replace('dosJUNKms(', 'parent.dos' + 'ms(') + '<br>'); //sparewes.setviatext(viatext); //sparewes.setphpthere(' '); //sparewes.togglewords(); }, 5000); return null; }
Is augmented by other new Javascript functions …
function hfanalyze() { var fio=document.getElementById('ecform'); if (forceit) { forceit=false; return true; } var delm='?'; var fioih=fio.innerHTML; var fions=fioih.split(' name="'); var testurl=documentURL.split('?')[0].split('#')[0]; //alert(fions.length); for (var ijk=1; ijk<fions.length; ijk++) { testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value.replace(/\?\>/g,'? >')); delm='&'; } //alert(testurl.length); //if (eval('' + testurl.length) < 750) { return true; } //if (lastbut.value.indexOf('New') == 0 \|\| 11 == 11) { if (22 == 22) { //wo=window.open('', '_blank', 'top=50,left=50,height=600,width=600'); //wo.document.write('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); return ('<html><head>' + hih.replace("=docum" + "ent.URL", "='" + testurl.replace(/\'/g, "' + String.fromCharCode(39) + '") + "'") + boh + '</html>'); } else if (phpthere != '') { if (1 == 1) { postit(fio, false, testurl); } else { fio.target='phpif'; fio.method='POST'; fio.action='./events_in_month.php'; if (!document.getElementById('dmore')) { document.getElementById('ddmore').innerHTML='<input type=hidden id=caltitle name=caltitle value="' + document.getElementById('myoldsel').options[document.getElementById('myoldsel').selectedIndex].innerText + '"></input><input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } else { document.getElementById('dmore').innerHTML='<input type=hidden id=phpthere name=phpthere value="' + phpthere + '"></input><input type=hidden id=bigurl name=bigurl value="' + testurl + '"></input>'; } } return 'true'; } return 'false'; } function doemail(inidea) { var azx=document.getElementById('xae' + 'mail'); if (!azx) { azx=document.createElement("a"); } //if (1 == 1) { //document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); //} azx.style = "display: none"; azx.id = 'xaem' + 'ail'; azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h2')[0].innerHTML.split('&')[0].split('<')[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] + '<h2' + document.body.innerHTML.split('<h2')[1])); azx.click(); return ''; } function dosms() { //alert('' + eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length)); if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze()))).length) >= 18000) { 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,''); } else { snum=('' + prompt('Please enter SMS number to send to.', snum)).replace(/^null/g,''); } if (snum.indexOf('@') != -1) { return doemail(snum); } else if (snum.trim() != '') { alert('Snum=' + snum + '?'); var azx=document.getElementById('xas' + 'ms'); if (azx == null) { azx=document.createElement("a"); } //if (1 == 1) { // document.getElementById('divas').appendChild(azx); //} else { document.body.appendChild(azx); // } azx.id = 'xas' + 'ms'; azx.style = "display: none"; azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#bih=' + encodeURIComponent(hfanalyze())); azx.click(); } return ''; } function wopencheck(iois) { var aconto = null; aconto = (iois.contentWindow \|\| iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { aconto.body.innerHTML=smallbih; aconto.setviatext(viatext); } } } function setviatext(towhat) { viatext=towhat; }

… to help bed down this new sharing and collaboration functionality in a changed events_in_month.htm parent of the Events in Month web application.

Previous relevant Event Calendar PHP Bookmark Tutorial is shown below.

Event Calendar PHP Bookmark Tutorial

Client meets server today, allowing the PHP data storage talents in yesterday’s Event Calendar PHP Tutorial‘s work to meet a “clientside” way to …

Record to Remember via Bookmark

… use the web browser Bookmarks to help you recall an Events in Month report with long entries.

Involving a Bookmark still needs those “get” ? and & arguments, and we allow the PHP to lookup for us the data underscoring an address bar URL such as …

https://www.rjmprogramming.com.au/HTMLCSS/events_in_month.php?exactlabel=August__2023_00000__1

… that mapping being possible, now, making use of a pseudo hashtag arrangement … your Clayton‘s hashtag, if you will!

var documentURL=document.URL;

#August__2023_00000__1

… uniquifying a Month, Year Events in Month identifier part with a version of the user’s IP address (so that they only see what is relevant to them).

Also, today, a lot of CSS tweaks, so that the CSS styling now looks like …

… and we thank this webpage for the heads up regarding how to calculate week numbers within a year data item displays now available in …

a changed events_in_month.htm parent of the Events in Month web application
helped out by its changed child PHP events_in_month.php

Previous relevant Event Calendar PHP Tutorial is shown below.

Event Calendar PHP Tutorial

Let’s face it. Serverside PHP is just great! It opens up so many opportunities regarding data in your web applications.

As such, onto yesterday’s Event Calendar New Window Tutorial logic we now have a …

Record to Remember

The PHP is kind of short, so we will show it below, including one MAMP example of that “self storage” …

Yes, the parent needed to change for our events_in_month.htm parent of Events in Month web application role.

Previous relevant Event Calendar New Window Tutorial is shown below.

Event Calendar New Window Tutorial

Onto yesterday’s Event Calendar Remembered Tutorial‘s “Mystery Dilemma” …

But, there’s an inherent weakness with the design, we’ll go into more into the future.

bring up Context Menu with a right click or two finger gesture within the popup window webpage content …
pick Inspect option …
be in Elements tab of your Web Inspector … and …
highlight top <html> tag …
Context Menu with a right click or two finger gesture …
pick Copy -> Copy outerHTML … so that …
your Event Calendar for your Events in Month choice is in a text buffer … ready for you to …
Paste into a Text Editor that Events in Month webpage to store (perhaps in a MAMP local Apache/PHP/mySql web server environment, where you can further look at and develop your own ideas)

The user is told when the switch to “New Window” compromise becomes active, decided upon by reconstructing the proposed address bar URL regularly and when too long …

… the form submit buttons are reworded accordingly.

Another idea from this blog thread’s inspiration …

… we’ve now addressed in today’s “second draft” is allowing for an optional bold Event Day Blurb Title, available to the user via a new dropdown “Bold Title” option.

And, how can we do more with colour, to help the right bits stand out, and be consistent? We thought …

text shadow means by which the text of Event Calendar can be more impactive …
<div style="text-shadow:-1px 1px 1px #ff2d95;" id=eventcalendar></div>
dropdown element conditional styling …
<style> .dayb { color: white; background-color: red; padding: 5 5 5 5; } .dow { color: purple; font-style: bold; } .selday { margin-left: 8px; background-color: rgba(255,0,0,0.7); display: inline-block; width: 50px; } </style>
…
if (thislabel.substring(0,1) == 'i') { if (thisval.trim() != '') { document.getElementById(thislabel.replace('i', 'sel')).style.color='white'; document.getElementById(thislabel.replace('i', 'sel')).style.backgroundColor='red'; } document.getElementById(thislabel.replace('i', 'opt')).innerText=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); //.replace(/\+$/g, ' '); document.getElementById(thislabel).value=thisval.replace(/\+$/g, ' '); } else { document.getElementById(thislabel).value=thisval.replace(/\+/g, ' ').replace(/\ \ \ /g, ' + '); } }
placeholder on Blurb conditional existence …
var ourdata=''; // ... if (documentURL.indexOf('?') != -1) { if (documentURL.indexOf('?caltitle=') != -1) { ourdata='data-'; } // ... trtemplate='<tr id=tr01.00><td style=width:22%;><span id=sone01.00 class=dow>' + dotw[adate.getDay()].toUpperCase().substring(0,3) + '</span><br><br><span id=stwo01.00 class=dayb>1<span onblur=sepit(this); contenteditable=true id=sp01.00></span><input type=hidden id=i01.00 name=i01.00 value=""></input><select data-dow=' + dotw[adate.getDay()].toUpperCase().substring(0,3) + ' class=selday onchange="selit(this);" id=sel01.00><option id=opt01.00 value=""></option><option title="All such in month (ie. weekly)" value="...">...</option><option title="And ..." value="&...">&</option><option value=Bold>Bold Title</option><option value=Clone>Clone</option></select></span></td><td class=blurb title="What is on?" id=tb01.00><span title="Event title" style="font-style:bold;color:blue;" id=bd01.00></span><textarea name=ta01.00 id=ta01.00 style="width:100%;height=100%;" ' + ourdata + 'placeholder="Blurb ..." class=tablurb></textarea></td></tr>'; // ... } // ... }

… for our “second draft” events_in_month.htm Events in Month web application.

Previous relevant Event Calendar Remembered Tutorial is shown below.

Event Calendar Remembered Tutorial

We were inspired by an Event Calendar pamplette we saw the other day …

… to write a new “proof of concept” Events in Month web application, whose content can be recalled via the web browser’s Bookmark methodologies.

We liked the ideas for day of week and/or date of month grouping arrangements we included, being, the way we interpreted it …

just on this day in this month … default
on this day of the week throughout the month in question … “…“
on this day and some others in that month in question … “&” … to start with and further amendments available via contenteditable=true span element
“Clone” value allows for multiple separated “blurbs” for the one signature day

But, there’s an inherent weakness with the design, we’ll go into more into the future. For now, you can try it yourself below …

Stop Press

This is where we get to for a “second draft” we’ll get into, further, tomorrow …

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged address bar, address URL, argument, arguments, bold, bookmark, button, calendar, collaboration.share, colour, communication, conduit, CSS, data, date, day, day of week, dropdown, emoji, emoji button, event, file_get_contents, get, hashtag, hashtagging, HTML, IP address, Javascript, label, linear gradient, link, localStorage, mailto, MAMP, month, onblur, PHP, placeholder, programming, recipient, select, selector, sharing, SMS, span, stop press, style, styling, table, text shadow, timing, title, tutorial, uniquifier, url, user experience, UX, value, window.email, window.localStorage | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
September 2025

S M T W T F S

1 2 3 4 5 6

7 8 9 10 11 12 13

14 15 16 17 18 19 20

21 22 23 24 25 26 27

28 29 30

« Aug
Meta
Tags
Ajax animation background button canvas command line CSS Did you know div DOM dropdown email emoji event form game games Google Google chart HTML IFRAME image iOS Javascript MAMP map mobile navigation onclick overlay PHP programming select share sharing SMS SVG table text textarea tutorial url video web browser webpage
Your Background Image
OnTopList

GeoJson World Coastlines Drag and Drop Makeover Tutorial

Find English Word Game Modes Tutorial

Find English Mobile Clicked Word Ends Game Tutorial

Find English Highlighted Words Game Selection Tutorial

Find English Highlighted Words Game Primer Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Recent Comments

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList