Mobile Paperless Meets Table Discussion Paper Tutorial
The online world has got us going paperless for more and more of the things we want to achieve. But what about where our mobile device communications meet with the requirement for a round table discussion and the subject matter is graphical and complex by nature, such as with CAD architectural drawings? You might want the paper (or “hardcopy”) to re-enter the scene, unless you have a brilliant 3D brain, that is!
The other day such a scenario involved …
incoming email …
containing a link to …
website …
PDF document containing 16 pages … of which …
only page 10 was relevant and interesting, at the time … and needed …
regarding a round table decision making discussion
Well, it’s not much talked about, but hardcopy (paper) sophisticated functionality is still out there, not surprisingly! Today, we stop and wonder at how good “Print Preview” screens, on mobile and/or non-mobile, can be.
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 …
… 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 Bookmarkable, 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 …
… 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
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 …
function formanalyze() {
var fio=document.getElementsByTagName('form')[0];
var delm='?';
var fioih=fio.innerHTML;
var fions=fioih.split(' name="');
var testurl=documentURL.split('?')[0].split('#')[0];
for (var ijk=1; ijk<fions.length; ijk++) {
testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value);
delm='&';
}
setTimeout(formanalyze, 3000);
if (eval('' + testurl.length) >= 750) {
if (document.getElementById('remember')) { document.getElementById('remember').value='New window'; }
if (document.getElementById('rememberme')) { document.getElementById('rememberme').value='New window'; }
if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value='New window'; }
} else {
if (document.getElementById('remember')) { document.getElementById('remember').value=document.getElementById('remember').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
if (document.getElementById('rememberme')) { document.getElementById('rememberme').value=document.getElementById('rememberme').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value=document.getElementById('remembermoi').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
}
return eval('' + testurl.length);
}
… 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>
… 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
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 …
function formanalyze() {
var fio=document.getElementsByTagName('form')[0];
var delm='?';
var fioih=fio.innerHTML;
var fions=fioih.split(' name="');
var testurl=documentURL.split('?')[0].split('#')[0];
for (var ijk=1; ijk<fions.length; ijk++) {
testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value);
delm='&';
}
setTimeout(formanalyze, 3000);
if (eval('' + testurl.length) >= 750) {
if (document.getElementById('remember')) { document.getElementById('remember').value='New window'; }
if (document.getElementById('rememberme')) { document.getElementById('rememberme').value='New window'; }
if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value='New window'; }
} else {
if (document.getElementById('remember')) { document.getElementById('remember').value=document.getElementById('remember').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
if (document.getElementById('rememberme')) { document.getElementById('rememberme').value=document.getElementById('rememberme').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value=document.getElementById('remembermoi').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
}
return eval('' + testurl.length);
}
… 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>
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 …
function formanalyze() {
var fio=document.getElementsByTagName('form')[0];
var delm='?';
var fioih=fio.innerHTML;
var fions=fioih.split(' name="');
var testurl=documentURL.split('?')[0].split('#')[0];
for (var ijk=1; ijk<fions.length; ijk++) {
testurl+=delm + fions[ijk].split('"')[0] + '=' + encodeURIComponent(document.getElementById(fions[ijk].split('"')[0]).value);
delm='&';
}
setTimeout(formanalyze, 3000);
if (eval('' + testurl.length) >= 750) {
if (document.getElementById('remember')) { document.getElementById('remember').value='New window'; }
if (document.getElementById('rememberme')) { document.getElementById('rememberme').value='New window'; }
if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value='New window'; }
} else {
if (document.getElementById('remember')) { document.getElementById('remember').value=document.getElementById('remember').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
if (document.getElementById('rememberme')) { document.getElementById('rememberme').value=document.getElementById('rememberme').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
if (document.getElementById('remembermoi')) { document.getElementById('remembermoi').value=document.getElementById('remembermoi').value.replace(/^Remember$/g, 'Remember via Bookmark'); }
}
return eval('' + testurl.length);
}
… 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>
write their own HTML (and derived Javascript) via a textarea element with initial template HTML code
construct a personalized HTML webpage after the light green submit button press … so that …
downloading the HTML is possible via “View Page Source” (context option) and Copy/Paste into a text editor (and then, perhaps, onto local system web server environment development via an Apache/PHP/MySql local web server product such as MAMP)
… in its middle phase that if you …
clicked into that middle phase‘s HTML textarea element … the logic was the same as the …
function doit(what) {
if (viaej) { eval(what); }
}
… but we really only want that HTML textarea element (id=’textareaaction’) onclick logic …
<textarea style=background-color:silver; ontouchdown='viaej=false; event.stopPropagation();' onmousedown='viaej=false; event.stopPropagation();' onclick=doit(this.value); data-onblur=doit(this.value); rows=5 cols=80 placeholder='Please place your drop action to do Javascript here below ...' id=textareaaction>
alert('You just dropped off');
</textarea>
… to happen in the second scenario, but not the first (which is really just a mechanism to give the textarea element the webpage focus). How can we differentiate? Well, there are probably a lot of ways, but our preferred way is to involve a new global variable …
var viaej=false;
… which our external Javascript can reference, usefully, via code like …
function dolaterwo() {
window.opener.viaej=false;
}
function dolaternonwo() {
parent.viaej=false;
}
if (typeof(parent.viaej) !== 'undefined') {
parent.viaej=true;
}
parent.document.getElementById('textareaaction').click();
if (typeof(parent.viaej) !== 'undefined') {
setTimeout(dolaternonwo, 3000); //parent.viaej=false;
}
… so that an onclick event’s click or touch into the textarea element equates to global variable viaej having value false (because onmousedown or ontouchdown (yayyyy!!!) events precede onclick event) and for the external Javascript parent.document.getElementById(‘textareaaction’).click() call equates to a timing where global variable viaej having value true (and the function doit’s eval logic is executed).
Drag and Drop via Hotlinked External Javascript Tutorial
There are three very useful “hotwiring” ideas that usually work with your web applications …
via absolute image URLs
via absolute stylesheet URLs
via absolute external Javascript URLs
… and that last one is what we want to hone in regarding, with an idea we had to allow a user to …
write their own HTML (and derived Javascript) via a textarea element with initial template HTML code
construct a personalized HTML webpage after the light green submit button press … so that …
downloading the HTML is possible via “View Page Source” (context option) and Copy/Paste into a text editor (and then, perhaps, onto local system web server environment development via an Apache/PHP/MySql local web server product such as MAMP)
So far with our latest Drag and Drop work, further to that of Drag and Drop via Hotlinked External Javascript Tutorial below, we’ve concentrated on Javascript. So, you’d think it would be CSS’s time for attention?! Well, sort of. We like to do a lot of CSS styling via Javascript DOM like (today’s simple intervention to add a Three Dimensional look to our drag via CSS property text-shadow) …
window.addEventListener("DOMContentLoaded", () => {
gelo=wod('body');
const source = document.querySelector("#mg");
if (source.title.indexOf('ong drag') == -1 && !classo) {
source.title+=' ... long drag (eg. more than 10 seconds) also opens a Google Maps webpage ... very long drag (eg. more than 20 seconds) also opens a Google Earth webpage';
}
if (source) {
if (source.outerHTML.indexOf('text-shadow:') == -1) {
source.style.textShadow='-1px 1px 3px #952dff';
}
}
if (noyes == noyes.toUpperCase()) {
source.style.border='1px dashed pink';
}
console.log('source.id=' + source.id);
source.addEventListener("dragstart", (ev) => {
var elo=null;
dragdt=(new Date());
// more code follows
});
source.addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging")
);
That’s it! Guess this is the joy of involving genericized external Javascript, because this simple change to our external Javascript countries.js “Drag and Drop specialist” has affected (the look of) about five web applications, so far, calling it … one per codeline!
Drag and Drop via Hotlinked External Javascript Tutorial
There are three very useful “hotwiring” ideas that usually work with your web applications …
via absolute image URLs
via absolute stylesheet URLs
via absolute external Javascript URLs
… and that last one is what we want to hone in regarding, with an idea we had to allow a user to …
write their own HTML (and derived Javascript) via a textarea element with initial template HTML code
construct a personalized HTML webpage after the light green submit button press … so that …
downloading the HTML is possible via “View Page Source” (context option) and Copy/Paste into a text editor (and then, perhaps, onto local system web server environment development via an Apache/PHP/MySql local web server product such as MAMP)
Yesterday’s Tic Tac Toe Game Drag and Drop Tutorial‘s Tic Tac Toe game had an annoyance. You, as the interactive player, playing the Computer, had to imagine how the Computer won, should it do so. How come? Well, when writing …
Javascript … especially …
DOM style … you need to look out for the combination of …
Javascript DOM that crucially affects the look of the visible webpage … followed by …
a modalpopup window such as alert or confirm or prompt … followed by a …
webpage reload
… because …
if step 2 above immediately follows step 1 it can be that the user never sees that Javascript DOM code’s visible webpage effects … we believe, because, Javascript DOM (maybe sometimes) needs some “flush” (no … not … to da loo) time before any modal Javascript windows appear, demanding attention.
We have almost answered our own question about how to resolve this issue where we say above “if step 2 above immediately follows step 1”. Can you think how? Anyone, anyone?! Yes, Brendan, we can embed a static Javascript snippet of code ( eg. alert(‘Some blurb’); ) into a …
… delayed ( eg. by 3 seconds ) setTimeout timed function type of scenario, as above. In that 3 seconds, Javascript DOM’s work can have time to complete.
And regarding how our step 3 is described by webpage reload above, that equates to newgame(); in our Tic Tac Toe game code, it needs to be in the delayed sequence of events ( the purple snippets representing the basis for a 2 second delay solution to this timing issue ) …
The Tic Tac Toe game talked about in Apache PHP Code Control Tutorial already has a variety of inputs such as mouse and touch and email and SMS possibilities, and so to also allow drag and drop as an alternative does not sound like too much of a stretch for our extremely able and perspicacious audience!
Again, “click” or “touch” reigns supreme here, but because the user is being asked to fill a (3×3 grid) square with their (usually “X”) answer of “X” or “O” a drag and drop paradigm can well suit the player’s thinking.
It might be tempting to ask, after the event, with web application code on an Apache web server, can controlling code be added to an existing web application codeset, that does not rely on changes to any existent code? The answer is yes, with a lot of provisos …
it’s not a great idea, as much to do with causing confusion as to do with security looseness … but, nonetheless, depending on other php.ini configurations you might be able to add …
into Apache domain’s php.ini configuration file …
; Automatically add files before or after any PHP document.
auto_prepend_file = somestartingphp.php
auto_append_file = someendingphp.php
within a folder of Apache web server directory structure via an Apache .htaccess file mention, such as …
php_value auto_prepend_file ../../ncmailxitin.php
php_value auto_append_file ../../ncmailxitout.php
… the exact contents of our MAMP Apache .htaccess for HTTP://localhost:8888/Games/Noughtsandcrosses/ in explanation below
We were kind of sad and relieved at the same time seeing that to apply this .htaccess approach of allowing for introductory Notification welcome messages up at the RJM Programming domain’s Noughts and Crosses web application we tried it on, but it did not work, whereas trying to apply it to our Apache MAMP (local web server) environment via …
downloaded existing code to MAMP place in Games/Noughtsandcrosses off the MAMP Document Root folder …
tweaked the changedtictactoe.js … in a way that suited allowing new introductory Notifications welcoming players in both MAMP and RJM Programming domain brands of Apache web servers, but in different ways … please note that this change to existent code would not have been needed had the RJM Programming domain accepted the .htaccess methodologies, and we were not wanting the same Noughts and Crosses codeset suiting both Apache environments …
renamed the Games/Noughtsandcrosses index.html (default web application filename) to index.php … to allow for an Apache .htaccess methodology to possibly work (but only does, for us, at MAMP) … it’s only noticed when PHP code is involved (even if there are no starting <?php and ending ?> delimitations in the code, as in our, what was, index.html case) …
created a 644 permissions .htaccess in Games/Noughtsandcrosses off the MAMP Document Root folder …
php_value auto_prepend_file ../../ncmailxitin.php
php_value auto_append_file ../../ncmailxitout.php
… but this didn’t work as an RJM Programming website filename. Rather than make it work, we compromised, and called it (the final) are_you_happy_with_my_or_do_you_think_my_derriere_needs_work.html it ended up as. But this didn’t stop us wondering about all this language and the relationship of these language characters and where and how you can or can’t use those characters outside those usual US-keyboard type characters.
And that brings us to the great MAMP local Apache/PHP/MySql web server product, as a place to experiment, comforted in the knowledge that the Mac OS X Terminal application …
ls -li
… and knowledge of inodes (all the way to their “extreme case Linux system file removal talents) you can read about at Linux Inode File Removal Tutorial would probably protect me from home grown stupidities.
So what followed for me was a quick look at MAMP’s relevant php.ini file and its httpd.conf configuration files to see that the web server default “goto look for” file list for the web server directory can be altered by a change of …
DirectoryIndex index.html index.php
… to something else in httpd.conf Apache configuration file. But nothing to easily reinvent the US-keyboard feeling file extensions .htm and .html and .php that was apparent to me. And noting to change that …
[protocol]://localhost:[localHostPortNumber]/
… US-keyboard feeling prefix to a URL, such as our http://localhost:8888/ prefix to a MAMP local Apache/PHP/MySql URL we created a Simplified Chinese character set “Hello World” folder scenario (and thank Google Translate for translation help today) …
Within the php.ini configuration file we found interesting, in particular …
; Automatically add files before or after any PHP document.
auto_prepend_file =
auto_append_file =
; PHP's built-in default is text/html
default_mimetype = "text/html"
; Whether to allow the treatment of URLs (like http:// or ftp://) as files.
allow_url_fopen = On
… the last of which, if set to Off could set up for the scenario of setting up a web server full of index.html and index.php code in web server folders that could include non US-keyboard characters, and so you could have within the code of …
Am sure you can feel yourself, there is so much more to explore in this topic area, and we’ll be returning soon to this neck of the woods soon, we hope. In the meantime, take a look at our tutorial picture for a bit of what we did on MAMP with some of these concepts not changing any configuration files at all.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
