Google Chrome Web Store Calculator Extension Tutorial
A logical place to look for those fundamental software applications you use regularly can be the web browser you might be using for day to day “surfing the net” usage. And the …
… which can look like little desktop applications accessible via a Google Chrome web browser …
Extensions icon
… leading a user to any Google Chrome Extensions installed.
We decided to make this happen for the Google Chrome Extension called “Scientific Calculator”, and were pleased with the simplicity and ease of use, after installing.
Other web browser brands will have similar arrangements to extend their web browser functionality into “extension land”.
If this was interesting you may be interested in this too.
This an Apple format not universally understood by every image editor out there. Gimp can read one but the Paintbrush all coded for macOS does not.
Anyway, the non-live Camera app image formats (and sharing a Live Format image not with AirDrop) share to *.jpeg or *.png image formats, interestingly.
Yesterday’s Camera App Photo Live Mode Primer Tutorial talked about the iOS Camera app’s Live mode functionality, creating an animated GIF type of photo that can be stored in the …
Albums -> Media Types -> Live Photos
… area. Sharing via the Mail option of the Photos app’s Sharing icon and menu lost the “animation” (for the emailee), creating a “still” (photo) as the downloaded media. But, as promised in the Stop Press yesterday, there are some sharing options that can keep that “animated” (GIF) feel …
via Messages app the shared photo will play like an animated GIF on a long touch (perhaps also on non-iOS devices (we did not test this?))
for sharing with other iOS devices within range and operating system viability you can use AirDrop
… as you can see demonstrated below …
Did you know?
In amongst the Apple “stable” this animated GIF “look and feel” is exclusively a (mobile) iOS (ie. iPhone, iPad etcetera) thing. The same SMS viewed on this macOS MacBook Pro displays as a “still” (photo), and the macOS involvement makes it a “still” even forwarding this on to iOS via the macOS Messages app.
Meanwhile, back at Apple‘s iPhone Camera App, further to Camera App Video Slow Motion Primer Tutorial, we wanted to find out more about that yellow “dart board” type “button” up the top that can be toggled between …
Basically, a Live Photo is a combination of a video clip and a still image that results in something akin to an animated GIF when long pressed. With the feature enabled, your iPhone or iPad grabs up to 1.5 seconds of video before and up to 1.5 seconds of video after you tap the shutter button.
… as a “very cute” hybrid between “photo” mode and “video” mode and “slo-mo” (video) mode. Afterwards, if your “live” mode photo is saved into Photos it will sit in …
Albums -> Media Types -> Live Photos
… and will present, initially, like a “still”, but touch (for a goodly time), will “very cutely” turn into an animation (like an animated GIF that you control).
So what happens if you share this “live photo” via email? On this MacBook Pro, it gets shared as a “still”. On an iPad (opened email) it shares as a “still”, as it does on the same iPhone device it was taken on, in that iPhone’s Mail app. But …
Touch Photos app icon -> Albums -> Media Types -> Live Photos -> Long Touch on "Live Photo" of interest
… brings the whole “back story” to light.
Stop Press
If you want to share a Live Mode iPhone Camera app photo in an SMS via Messages app or with another Apple iOS device in the same building, the sharing news is better. We’ll demonstrate tomorrow.
Yesterday’s Spinning Around Primer Tutorial changed quite a bit between 27th March 2019 06:00 and 11:20 AEST. Why? Well, our iPhone6 saves its videos (from the Camera iOS application) in *.mov format. This *.mov has an associated mimetype video/quicktime and as you may surmise from that mimetype it’s success as a video playing format depends quite a bit on the user having access to the QuickTime Player application. We say quite a bit here because you can sometimes open an *.mov based URL in a web browser of a computer without QuickTime Player installed, and believe I’ve seen the video be played that way, but with yesterday’s tutorial, we were asking the *.mov be played within an HTML video element (albeit one with no cross-domain issues). The problem here even for computers with QuickTime Player installed …
you see a blank black video screen (with controls (because we specified that with our …
<video style='width:100%;' controlshttp://www.rjmprogramming.com.au/wordpress/wp-admin/post.php?post=44345&action=editsource type='video/quicktime' src='http://www.rjmprogramming.com.au/Mac/iPhone/spinning_around.mov'http://www.rjmprogramming.com.au/wordpress/wp-admin/post.php?post=44345&action=edit/source></video>
… video element HTML above)
you click the play button and nothing happens
All a bit disappointing, but please read on.
Then we set out thinking about conversion from …
*.mov to *.m4v via older QuickTime Player Version 10.4 (894.12) (no longer available as of Version 10.5 (928.50)) … which we associated with its video element in Spinning Around Primer Tutorial
*.mov to *.mp4 via ffmpeg and help from this great link, thanks, to use on a MacBook Pro (Terminal application) command line, the command …
ffmpeg -i spinning_around.mov -vcodec h264 -acodec mp2 spinning_around.mp4
Well, yesterday’s XML Lint Validation CSS Background Colour Tutorial showcases HTML textarea talents and today’s tutorial involves a new inhouse HTML and Javascript and CSS Sentence Text Word Underlining web application showing a div element talent.
… but our web application allowing for user editing via attribute contenteditable=true needs (the [divElement].innerText help in) Javascript onblur event logic …
<script type='text/javascript'>
function checkthis(dthis) {
var delm='';
var itt=dthis.innerText;
for (var k=0; k<itt.length; k++) {
if (delm == '') {
if (itt.substring(k).substring(0,1) <= ' ' || itt.substring(k).substring(0,1) > '~') {
delm=itt.substring(k).substring(0,1);
//alert('delm=' + delm + '!');
}
} //else if (itt.substring(k).substring(0,1) <= ' ' || itt.substring(k).substring(0,1) > '~') {
//alert(itt.substring(k).substring(0,1).charCodeAt(0));
//}
}
if (delm == '') { delm=' '; }
for (var kk=0; kk<itt.length; kk++) {
//itt=itt.replace(String.fromCharCode(10), delm);
itt=itt.replace(String.fromCharCode(160), delm);
itt=itt.replace(String.fromCharCode(32), delm);
}
var words=itt.replace(/\ \;/g,delm).split(delm);
//alert(itt.replace(/\ \;/g,delm) + ' ... ' + words.length);
Thinking of some great Fred and Ginger types of web application partners we have, at the very least …
HTML and Javascript
PHP and MySql
MySql and phpMyAdmin
Ajax and FormData
Webpage and Iframe
Details and Summary
Div and Contenteditable
… and today we’ve partnered Textarea and Placeholder because we’ve discovered that Placeholder (on many browsers and platforms) can be multiline by nature. That suits our style, whereby we try not to bombard users with loads of user entries to have to worry about in web applications, where that is at all possible, but rather resort to intelligent user interaction, often based on delimiters, encouraging the one piece (or perhaps two or three pieces) of information to fill in.
replace single line input type=text element with textarea element … and …
replace single line advice in a single line placeholder attribute with a multiline placeholder “blurb” which includes an example
… and, speaking personally, the relief is incredible, as we have had to grapple with the awkwardness of user entry for days now!
We even styled the placeholder thanks to the advice at W3schools, thanks.
And then we thought we’d allow the user to set the example bit of the placeholder as a “starter” for their real entry via a “two times click on the textarea” set of (on document onload event) logic as per …
function onl(injs) {
if (document.getElementById('myinput')) {
if (document.getElementById('myinput').outerHTML.indexOf('<textarea') != -1) {
var egis=String.fromCharCode(10) + String.fromCharCode(10) + " Example (2xClick) of Einstein Wikipedia Webpage with rounded magenta images and lightblue heading ... " + String.fromCharCode(10) + String.fromCharCode(10) + "http://www.wikipedia.org/wiki/Einstein" + String.fromCharCode(10) + "` img { " + String.fromCharCode(10) + " BORDER-radius:20%; " + String.fromCharCode(10) + " border: 1px dotted magenta; " + String.fromCharCode(10) + " } `" + String.fromCharCode(10) + " function fhlb() {" + String.fromCharCode(10) + " document.getElementById(" + '"' + "firstHeading" + '"' + ").style.backgroundColor=" + '"' + "lightblue" + '"' + "; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " setTimeout(fhlb, 2000); " + String.fromCharCode(10);
document.getElementById('myinput').placeholder=document.getElementById('myinput').placeholder.replace(/\|\ /g, String.fromCharCode(10)).replace(' # or ` separate', ' # or ` or first line feed separate').replace(' # or ` and', ' # or ` or first line feed and') + egis;
document.getElementById('myinput').ondblclick = function(event){ ccnt=0; if (event.target.placeholder.indexOf('http') != -1) { event.target.value='http' + event.target.placeholder.split('http')[1]; } };
document.getElementById('myinput').onclick = function(event){ ccnt++; if (ccnt >= 2) { ccnt=0; if (event.target.placeholder.indexOf('http') != -1) { event.target.value='http' + event.target.placeholder.split('http')[1]; } } };
} else {
document.getElementById('myinput').placeholder=document.getElementById('myinput').placeholder.replace(/\|\ /g, '');
}
}
if (injs.trim() != '') {
var tag = document.createElement('script');
tag.type='text/javascript';
tag.src='data:text/javascript;base64,' + btoa(injs);
document.head.appendChild(tag);
}
}
As we so often find ourselves doing these days we use the “midair” feeling Ajax/FormData techniques to attempt to satisfy the user interactions, as per …
var wasino=null;
var absval='';
var urltosend='';
var zhr=null;
var wasplaceholder='';
function showStuff(evt) {
if (zhr.readyState == 4) {
if (zhr.status == 200) {
absval=zhr.responseText;
//alert(absval);
}
}
}
function ajaxit() {
zhr = new XMLHttpRequest();
var form=new FormData();
form.append('inurl', urltosend);
form.append('tdinto', 'divinv');
if (document.URL.indexOf('localhost:8888') != -1) {
zhr.open('post', 'http://localhost:8888/fgc/', true);
} else {
zhr.open('post', '//www.rjmprogramming.com.au/PHP/fgc/', true);
}
zhr.onreadystatechange = showStuff;
zhr.send(form);
preshowBelow();
}
function preshowBelow() {
if (absval != '') {
wasino.value=wasino.placeholder;
wasino.placeholder=wasplaceholder;
showBelow(wasino);
wasino=null;
absval='';
} else {
setTimeout(preshowBelow, 2000);
}
}
… as that “suck it and see” client approach to do some of the “if it exists try it” functionality you might think has to involve a serverside language like PHP. No, all the discussion below, ignores serverside anything, but instead dwells on …
“child” iframe (leaning towards that Client Pre-emptive Iframe) making use of the “fresh start” their “onload” event (and to a lesser extent “onerror”) provides the client (only) programmer …
initially via “src” attribute … but new to today’s work (at least for us, that we can remember) …
initially involve src=”data:text/html;base64,[base64HTMLContent]” that …
(same) “onload” code can redirect that content to another “child” iframe (leaning towards that Client Pre-emptive Iframe) “srcdoc” attribute … and yes, we were not sure until today, but yes …
“child” iframe (leaning towards that Client Pre-emptive Iframe) that gets its content via “srcdoc” attribute does pass through the “onload” event logic where the “document” object exists (a very happy discovery for us (though we’ve probably been assuming it already in projects up to now))
… this “proof of concept” experimenting being incorporated into our “Javascript document.querySelectorAll” project for scenarios …
For relative URL that is blank (ie. uses this same webpage) suffixes of two blanks refreshes and that of four blanks opens new window and that of eight blanks opens new popup window.
… to the point where you may not notice the difference between this “srcdoc” processing compared to the other (single) “src” attribute executions of the web application.
How does the client wooooooorrrrrrrllllllldddd handle base64? Well, for simple data …
Why can’t we manage this new functionality in the one pass through the “onload” event logic? Well, any self-respecting webpage content will contain both apostrophe and double quote characters (let alone line feeds and carriage returns) ( but we can if we can get to a Javascript DOM statement like document.getElementById(‘ifsd’).srcdoc=atob((” + ioissrc).split(‘;base64,’)[1]).replace(‘</bo’ + ‘dy>’, ‘ <style> ‘ + selectorplusis + ‘</style> </bo’ + ‘dy>’); ), making it hard to specify on the Javascript codeline constructing your “child” iframe but now this new functionality uses …
yesterday’s user defined selector but static styling is now opened up to user defined styling as well …
we wanted to allow a user defined CSS styling that involves the use of ” BORDER” somewhere adds border clickable elements that satisfy the selector criteria used in …
function checkif(iois) {
var ij;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (selectoris != '') {
if (selectorplusis != '') {
aconto.body.innerHTML+=' <style> ' + selectorplusis + '</style> ';
if (selectorplusis.indexOf(' BORDER') != -1) {
eles=aconto.querySelectorAll(selectoris);
for (ij=eval(-1 + eles.length); ij>=0; ij--) {
froms.push(eles[ij].outerHTML);
tos.push('<a onclick="alert(this.innerHTML);" style="cursor:pointer;text-decoration:none;" title="Border clickable">' + eles[ij].outerHTML + '</a>');
}
for (ij=0; ij<froms.length; ij++) {
aconto.body.innerHTML=aconto.body.innerHTML.replace(froms[ij], tos[ij]);
}
}
} else {
eles=aconto.querySelectorAll(selectoris);
for (ij=0; ij<eles.length; ij++) {
eles[ij].style.border='1px dashed red';
}
}
}
}
}
}
Javascript document.querySelectorAll Primer Tutorial
“Pure Javascript” versus “jQuery” is an issue for many developers of client side web application code logic. More often than not we plump for the former, though there are notable exceptions for us, such as jQuery Ajax is often of use, and we have used the very apt (for today’s topic) jQuery CSS on occasions. But for today’s proof of concept test run of …
… it’s all “Pure Javascript”. In today’s qsall.html HTML and “Pure Javascript” code you will not find the string “document.querySelectorAll” anywhere because our web application is …
just some header HTML elements and one HTML input type=text “textbox” element and one containing div element and one input type=text to avoid “tabbing out” annoyances …
“textbox” accepts a relative URL in two parts as per …
[relativeURLTo-//www.rjmprogramming.com.au/]#[CSS-selector]
that relative URL is the “src” attribute to an HTML iframe element that overlays (made to be barely visible) header HTML elements and one HTML input type=text “textbox” element … and whose …
“onload” event logic goes …
function checkif(iois) {
var ij;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (selectoris != '') {
eles=aconto.querySelectorAll(selectoris);
for (ij=0; ij<eles.length; ij++) {
eles[ij].style.border='1px dashed red';
}
}
}
}
}
… that you can try for yourself with today’s live run link.
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.
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.
Do you remember our fears, expressed at Region Picker Popup Menu Tutorial, as we were discussing (what used to be) the brilliant Google Chart Image Chart functionality …
… and we feel we might have “put the mockers” on ourselves, because, as you may have read, Geo ChartImage Chart is due for deprecation soon. In fact, the regime at the moment is fewer and fewer hours up, and we’ll have to turn our attention to alternatives. But what out there can do those regional views where the map effectively hugs the bounds of the data … brilliant, and we think hard to do with your normal Google Charts suite of software? As well as the image element result, even though we need to try out the “ready event” normal Google Charts “print” way to achieve this. So much more useful than involving Javascript. And more fun to work with too, it being a conduit to HTML canvas usage.
… regarding it’s imminent demise (and don’t you just hate the word “deprecation”)?
Well, it happened. Where does that leave our integrations regarding Google Chart Image Chart Map Chart we developed with this inhouse PHP interfacing web application? Well, lots is still showing, “hoping for redemption”, and the GeoJson button functionality is still intact. That is, barring “friendly fire”?!
fill in a comma separated list of ISO 2 character country codes into that first textbox …
click GeoJson button
… and it would keep a “cloudy woooorrrrlllllddd map”, alas. We debugged it, using Google Chrome’s web inspector, again. The error message, and here the lesson is to believe the “red squiggle underlining parts” …
for (xij=0; xij<xars.length; xij++) { areacon=''; if (maybenogood(xars[xij].outerHTML,'FR,DE,BR,CN,US,IN,ID,AU,NZ,EG,ZA',aars[Math.max(0,eval(-3 + xij))].outerHTML).indexOf( ... blahde blah ...
… in the context of the presented error …
TypeError: Cannot read properties of undefined (reading ‘outerHTML’)
… prompted us to come up with the amended codeline …
for (xij=0; xij<xars.length; xij++) { areacon=''; if (aars.length > eval(-3 + xij)) { if (maybenogood(xars[xij].outerHTML,'FR,DE,BR,CN,US,IN,ID,AU,NZ,EG,ZA',aars[Math.max(0,eval(-3 + xij))].outerHTML).indexOf( ... blahde blah ... } ...
… given what we’ve learnt regarding each of the above‘s talents, the new member of the interest group bringing regional maps into the picture better for us.
Over many years of integrating the first as the first port of call, though, has us thinking carefully of non “bull at a gate” approaches, and today, we’re only visiting the first idea of our “three point plan” (so far) …
Help itself … map.php … phase 1
Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
… asking our favourite integrator to take a hit for the good of the team. Currently map.php is stuck in the bedroom, but we fully expect they’ll be out in just a jiffy to show you a “three part” (so far) PHP code intervention sequence here …
<?php
echo ' var title = ourprompt("Enter Map Title (background image URL or image data URI ; separated (followed by ;) before title are options, and suffix by &iso=XX for XX as country code of interest and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";
Google Chart Image Chart Map Chart GeoJson Onclick Tutorial
Still on the “reconstituting” trajectory yesterday’s Google Chart Image Chart Map Chart GeoJson Iframe Tutorial had, continuing on with regarding our interfacing to the Google ChartsImage Chart Map Chart hosting of GeoJson functionality, today, we “reconstitute” some “onclick” event logics for those brown map infills that occur. Why? Well, we figure user experience wise, people often assume a deliberately colour coded situation like this means that they might glean further information by clicking on that “minority color” at the very least, especially when we are talking “maps”, here.
If you’re happy, and you know it, feel free to honk!
Okay then, what do we do with these new HTML div element “onclick” event logics. Well, so far, we’re showing a list of three nearby timezones, but the main thing is to establish the “infrastructure” to get to this event logic, and often, what you do once there, is less work. Not always, but quite often, we find.
function checkdsa(ath) {
return '';
}
function orflag(thiscc) {
var ccchar='', ccsuff='';
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'];
for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) {
ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();
ccsuff+=String.fromCodePoint(eval('' + dri[eval('' + lri.indexOf(ccchar))])); //'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
}
return ccsuff;
}
function ouralert(athis, ctyname, isothree, isotwo, inclist) {
if (isotwo == 'CH') { isotwo='CN'; }
if (goes == 0) { goes=1; answered=true; }
if (('' + isotwo).length == 2) { jtwo=isotwo; }
if (inclist.indexOf(',') != -1) {
lastflag='';
lasttwo='';
if (isotwo.trim() != '') {
lasttwo=isotwo;
lastflag=' ' + orflag(isotwo);
}
checkdsa(athis);
var cls=inclist.replace('Longitude,Latitude coordinates are ','').split(',');
longlastl=ctyname + ': ' + inclist;
//document.getElementById('ntz').value='';
if (cwo) {
if (!cwo.closed) { cwo.close(); }
}
cwo=window.open('/PHP/tz_places.php?countrycode=' + encodeURIComponent(isotwo) + '&place=' + encodeURIComponent(ctyname) + '&latitude=' + encodeURIComponent(cls[1]) + '&longitude=' + encodeURIComponent(cls[0]) + '&ntztontz=y','_blank','top=100,left=100,width=1200,height=250');
cwo.onload=function(){
cwo.document.title='' + ctyname;
};
//setTimeout(lookforntz, 1000);
}
}
Today’s work met with a previously established PHP code file, again, and so we’ve taken the opportunity, being as we tweaked above, adding new arguments, to change this tz_places.php by adding some more country specific smarts to the resultant display for the scenario where rangegeo.php is calling it.
Well, yesterday’s XML Lint Validation CSS Background Colour Tutorial showcases HTML textarea talents and today’s tutorial involves a new inhouse HTML and Javascript and CSS Sentence Text Word Underlining web application showing a div element talent.
… but our web application allowing for user editing via attribute contenteditable=true needs (the [divElement].innerText help in) Javascript onblur event logic …
<script type='text/javascript'>
function checkthis(dthis) {
var delm='';
var itt=dthis.innerText;
for (var k=0; k<itt.length; k++) {
if (delm == '') {
if (itt.substring(k).substring(0,1) <= ' ' || itt.substring(k).substring(0,1) > '~') {
delm=itt.substring(k).substring(0,1);
//alert('delm=' + delm + '!');
}
} //else if (itt.substring(k).substring(0,1) <= ' ' || itt.substring(k).substring(0,1) > '~') {
//alert(itt.substring(k).substring(0,1).charCodeAt(0));
//}
}
if (delm == '') { delm=' '; }
for (var kk=0; kk<itt.length; kk++) {
//itt=itt.replace(String.fromCharCode(10), delm);
itt=itt.replace(String.fromCharCode(160), delm);
itt=itt.replace(String.fromCharCode(32), delm);
}
var words=itt.replace(/\ \;/g,delm).split(delm);
//alert(itt.replace(/\ \;/g,delm) + ' ... ' + words.length);
Thinking of some great Fred and Ginger types of web application partners we have, at the very least …
HTML and Javascript
PHP and MySql
MySql and phpMyAdmin
Ajax and FormData
Webpage and Iframe
Details and Summary
Div and Contenteditable
… and today we’ve partnered Textarea and Placeholder because we’ve discovered that Placeholder (on many browsers and platforms) can be multiline by nature. That suits our style, whereby we try not to bombard users with loads of user entries to have to worry about in web applications, where that is at all possible, but rather resort to intelligent user interaction, often based on delimiters, encouraging the one piece (or perhaps two or three pieces) of information to fill in.
replace single line input type=text element with textarea element … and …
replace single line advice in a single line placeholder attribute with a multiline placeholder “blurb” which includes an example
… and, speaking personally, the relief is incredible, as we have had to grapple with the awkwardness of user entry for days now!
We even styled the placeholder thanks to the advice at W3schools, thanks.
And then we thought we’d allow the user to set the example bit of the placeholder as a “starter” for their real entry via a “two times click on the textarea” set of (on document onload event) logic as per …
function onl(injs) {
if (document.getElementById('myinput')) {
if (document.getElementById('myinput').outerHTML.indexOf('<textarea') != -1) {
var egis=String.fromCharCode(10) + String.fromCharCode(10) + " Example (2xClick) of Einstein Wikipedia Webpage with rounded magenta images and lightblue heading ... " + String.fromCharCode(10) + String.fromCharCode(10) + "http://www.wikipedia.org/wiki/Einstein" + String.fromCharCode(10) + "` img { " + String.fromCharCode(10) + " BORDER-radius:20%; " + String.fromCharCode(10) + " border: 1px dotted magenta; " + String.fromCharCode(10) + " } `" + String.fromCharCode(10) + " function fhlb() {" + String.fromCharCode(10) + " document.getElementById(" + '"' + "firstHeading" + '"' + ").style.backgroundColor=" + '"' + "lightblue" + '"' + "; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " setTimeout(fhlb, 2000); " + String.fromCharCode(10);
document.getElementById('myinput').placeholder=document.getElementById('myinput').placeholder.replace(/\|\ /g, String.fromCharCode(10)).replace(' # or ` separate', ' # or ` or first line feed separate').replace(' # or ` and', ' # or ` or first line feed and') + egis;
document.getElementById('myinput').ondblclick = function(event){ ccnt=0; if (event.target.placeholder.indexOf('http') != -1) { event.target.value='http' + event.target.placeholder.split('http')[1]; } };
document.getElementById('myinput').onclick = function(event){ ccnt++; if (ccnt >= 2) { ccnt=0; if (event.target.placeholder.indexOf('http') != -1) { event.target.value='http' + event.target.placeholder.split('http')[1]; } } };
} else {
document.getElementById('myinput').placeholder=document.getElementById('myinput').placeholder.replace(/\|\ /g, '');
}
}
if (injs.trim() != '') {
var tag = document.createElement('script');
tag.type='text/javascript';
tag.src='data:text/javascript;base64,' + btoa(injs);
document.head.appendChild(tag);
}
}
As we so often find ourselves doing these days we use the “midair” feeling Ajax/FormData techniques to attempt to satisfy the user interactions, as per …
var wasino=null;
var absval='';
var urltosend='';
var zhr=null;
var wasplaceholder='';
function showStuff(evt) {
if (zhr.readyState == 4) {
if (zhr.status == 200) {
absval=zhr.responseText;
//alert(absval);
}
}
}
function ajaxit() {
zhr = new XMLHttpRequest();
var form=new FormData();
form.append('inurl', urltosend);
form.append('tdinto', 'divinv');
if (document.URL.indexOf('localhost:8888') != -1) {
zhr.open('post', 'http://localhost:8888/fgc/', true);
} else {
zhr.open('post', '//www.rjmprogramming.com.au/PHP/fgc/', true);
}
zhr.onreadystatechange = showStuff;
zhr.send(form);
preshowBelow();
}
function preshowBelow() {
if (absval != '') {
wasino.value=wasino.placeholder;
wasino.placeholder=wasplaceholder;
showBelow(wasino);
wasino=null;
absval='';
} else {
setTimeout(preshowBelow, 2000);
}
}
… as that “suck it and see” client approach to do some of the “if it exists try it” functionality you might think has to involve a serverside language like PHP. No, all the discussion below, ignores serverside anything, but instead dwells on …
“child” iframe (leaning towards that Client Pre-emptive Iframe) making use of the “fresh start” their “onload” event (and to a lesser extent “onerror”) provides the client (only) programmer …
initially via “src” attribute … but new to today’s work (at least for us, that we can remember) …
initially involve src=”data:text/html;base64,[base64HTMLContent]” that …
(same) “onload” code can redirect that content to another “child” iframe (leaning towards that Client Pre-emptive Iframe) “srcdoc” attribute … and yes, we were not sure until today, but yes …
“child” iframe (leaning towards that Client Pre-emptive Iframe) that gets its content via “srcdoc” attribute does pass through the “onload” event logic where the “document” object exists (a very happy discovery for us (though we’ve probably been assuming it already in projects up to now))
… this “proof of concept” experimenting being incorporated into our “Javascript document.querySelectorAll” project for scenarios …
For relative URL that is blank (ie. uses this same webpage) suffixes of two blanks refreshes and that of four blanks opens new window and that of eight blanks opens new popup window.
… to the point where you may not notice the difference between this “srcdoc” processing compared to the other (single) “src” attribute executions of the web application.
How does the client wooooooorrrrrrrllllllldddd handle base64? Well, for simple data …
Why can’t we manage this new functionality in the one pass through the “onload” event logic? Well, any self-respecting webpage content will contain both apostrophe and double quote characters (let alone line feeds and carriage returns) ( but we can if we can get to a Javascript DOM statement like document.getElementById(‘ifsd’).srcdoc=atob((” + ioissrc).split(‘;base64,’)[1]).replace(‘</bo’ + ‘dy>’, ‘ <style> ‘ + selectorplusis + ‘</style> </bo’ + ‘dy>’); ), making it hard to specify on the Javascript codeline constructing your “child” iframe but now this new functionality uses …
yesterday’s user defined selector but static styling is now opened up to user defined styling as well …
we wanted to allow a user defined CSS styling that involves the use of ” BORDER” somewhere adds border clickable elements that satisfy the selector criteria used in …
function checkif(iois) {
var ij;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (selectoris != '') {
if (selectorplusis != '') {
aconto.body.innerHTML+=' <style> ' + selectorplusis + '</style> ';
if (selectorplusis.indexOf(' BORDER') != -1) {
eles=aconto.querySelectorAll(selectoris);
for (ij=eval(-1 + eles.length); ij>=0; ij--) {
froms.push(eles[ij].outerHTML);
tos.push('<a onclick="alert(this.innerHTML);" style="cursor:pointer;text-decoration:none;" title="Border clickable">' + eles[ij].outerHTML + '</a>');
}
for (ij=0; ij<froms.length; ij++) {
aconto.body.innerHTML=aconto.body.innerHTML.replace(froms[ij], tos[ij]);
}
}
} else {
eles=aconto.querySelectorAll(selectoris);
for (ij=0; ij<eles.length; ij++) {
eles[ij].style.border='1px dashed red';
}
}
}
}
}
}
Javascript document.querySelectorAll Primer Tutorial
“Pure Javascript” versus “jQuery” is an issue for many developers of client side web application code logic. More often than not we plump for the former, though there are notable exceptions for us, such as jQuery Ajax is often of use, and we have used the very apt (for today’s topic) jQuery CSS on occasions. But for today’s proof of concept test run of …
… it’s all “Pure Javascript”. In today’s qsall.html HTML and “Pure Javascript” code you will not find the string “document.querySelectorAll” anywhere because our web application is …
just some header HTML elements and one HTML input type=text “textbox” element and one containing div element and one input type=text to avoid “tabbing out” annoyances …
“textbox” accepts a relative URL in two parts as per …
[relativeURLTo-//www.rjmprogramming.com.au/]#[CSS-selector]
that relative URL is the “src” attribute to an HTML iframe element that overlays (made to be barely visible) header HTML elements and one HTML input type=text “textbox” element … and whose …
“onload” event logic goes …
function checkif(iois) {
var ij;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (selectoris != '') {
eles=aconto.querySelectorAll(selectoris);
for (ij=0; ij<eles.length; ij++) {
eles[ij].style.border='1px dashed red';
}
}
}
}
}
… that you can try for yourself with today’s live run link.
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.
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.
XML Lint Validation CSS Background Colour Tutorial
Onto the recent XML Lint Validation Shared Encoding Tutorial we’d say what could “cheer things up”, shall we say, is to add some colour into the look of the XML Lint Validation web application.
And to do this with inline CSS <style></style> element within the <head></head> non-body part of the webpage. We allow the webpage to keep any of its “style=” specifications within the <body></body> section too, because, personally speaking, if we thought to do it as we were coding, then the chances are, these CSS specification must hold some weight and should stay. Today’s work is an “overall makeover” layer of CSS styling “just for aesthetics”, which is more the way we tend to organize web application CSS styling aesthetics around here. It’s up to you though, obviously, and if you have a dedicated CSS styling employee, then you may roll in a different direction … though Nala andLuna will tell you …
Clockwise is best!
But they would say that! They’ve never travelled north of the Equator!
There are a lot of web applications we’ve been involved with that …
try to avoid (what we are most “peeved” by, as an issue) gobbledegook when dealing with non-ascii content we try, encoding wise, to corral towards UTF-8 encoding … and today we …
add sharing and collaboration functionality, via email or SMS, to our current XML Lint Validation web application development
… hence the “Shared Encoding” curiosity in our blog posting title … well, you had to be there … today, in the days after yesterday’s XML Lint Validation SelectionChange Tutorial …
… excellent try! But no, not quite. The answer is …
Tomorrow
But, five points to Hufflepuff, and we add today’s voucher for a cup of tea (no rushing please)!
But, back to business, as far as the encoding issue (of gobbledegook) goes, we mucked around thinking the fault lay with “meta” tags, and such, in the parent, until we relooked at the FileReader arrangements we had going back at a changedclient_browsing.htm client side HTML and Javascript inhouse helper. We were always using readAsDataURL() method for this URL call containing “straighttext=” argument pattern, but we found more success starting to use readAsText() method for HTML and XML data inputs. Makes sense really! Now we go …
reader[ij].onloadend = (function(mfile) {
return function(evt) {
var dp='', ds=dssuffix, slideshowparent=false, ssuffix='0', nsuffix='2', blnks=' ', xhsf='', zhsfs=[];
var tomt='video/mp4', thext='', ithext=0;
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
if (document.URL.indexOf('straighttext=') != -1) {
if (window.parent) {
if (parent.document.getElementById('result1') && parent.document.getElementById('result2')) {
if (parent.document.getElementById('result1').innerHTML == '') {
parent.document.getElementById('result1').innerHTML=(evt.target.result); // used to use window.atob and .replace('data:application/octet-stream;base64,', '')
} else {
parent.document.getElementById('result2').innerHTML=(evt.target.result); // retest earth_scanner.html
}
}
}
}
// rest of FileReader.DONE code follows
} };
})(files[ij]);
… as a solution to this issue, putting a smile to many an emoji out there.
And as far as our email or SMS sharing goes, we avoided any need for PHP mail ideas by starting to involve hashtagged versions of the incoming XML or HTML input to the XML Lint validator …
left hand cell hosted pair of textarea element onclick (and ondblclick) event logics … today we think a user could benefit from …
right hand cell hosted textarea element SelectionChange (keyboard related) event triggered via the user highlighting that textarea text (containing errors) of interest
… via …
<?php echo ”
var thesel='', reng='';
function prereverseengineer() {
var wasreng=reng;
reng='';
reverseengineer(wasreng);
}
function reverseengineer(what) {
var oury2=0, nexty2=0;
var theheight=eval(eval('' + s2rect.height) / rowseq);
var codelines=s2.value.split(String.fromCharCode(10));
var errdetail='', ierr=0, linenum=0, nums=[];
thergb=redrgb;
var bimg='linear-gradient(to bottom, white, '; // ' white ' + y2 + 'px, ' + thergb + ' ' + y2 + 'px, ' + thergb + ' ' + eval(y2 + eval('' + s1rect.height) / rowseq) + 'px, white ' + eval(y1 + eval('' + s1rect.height) / rowseq) + 'px, white)';
var suff=', white)';
Onto yesterday’s XML Lint Validation Browsing Tutorial XML Lint Validation web application progress, today, we start to add some onclick and ondblclick event logic to those left hand table cell pair of textarea elements …
if (('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '') {
if (document.getElementById('myhxfile').value == '') {
document.getElementById('myhxfile').placeholder=decodeURIComponent(('' + location.hash).replace(/^\#/g,''));
var tf=document.getElementById('outgoing').value;
var tfis=tf.split(':')[0];
if (tfis.trim() != '') {
while (tf.indexOf(tfis + ':') != -1) {
tf=tf.replace(tfis + ':', decodeURIComponent(('' + location.hash).replace(/^\#/g,'')) + ':');
}
document.getElementById('outgoing').value=tf;
}
}
}
}
“; ?>
… and though we usually do not associate onclick logic with textarea elements, today we’re preferring that to any alternate use of div element alternative because, today, for the first time, we’re making use of the “sharp” colour stops mentioned by linear-gradient(), thanks …
Again, we see, into another way to yesterday’s work, how useful is a textarea element, in that it can facilitate the way …
HTML and XML data can be input via populating the textarea innerHTML attribute … which flows through to a …
textarea value attribute value where any < is mapped to < and > is mapped to > … ready for …
an HTML form hosted textarea, given a filled in name attribute be able to share this data to that form’s action attributed value …
<?php
function ronecheck() {
if (document.getElementById('result1').innerHTML != '') {
document.getElementById('incoming').innerHTML=document.getElementById('result1').value;
document.getElementById('result1').innerHTML='';
document.getElementById('result1').value='';
document.getElementById('myhxfile').name='xx';
document.getElementById('mysub').click();
}
}
Do you remember when we discussed the Sanitizer API, talked about at Sanitizer API Primer Tutorial, regarding it as a web application HTML (and more) validation tool?
Well, we’ve based a new “validator” of HTML or XML using the XML Lint web application on what we did then, but this code needing to be …
under the auspices of a serverside scenario … ie. PHP … for us … calling on …
underlying operating system call such as (for HTML qsall.htm incoming data file) …
xmllint --html --valid --noout ./qsall.htm
… there’s not much left of the original HTML and Javascript!
We had a fun time with HTML textarea elements and scrolling with the resultant “first draft”xmllint_validation.phpyou might want to try for yourself supplying an HTML or XML URL of intetest. Why, in particular? Well, it was the first time that we remember trying to make practically useful …
a table cell (ie. td element) (the left of two) hosted …
two textarea element arrangement whereby, ideally. they view …
side by side
if one is scrolled the two identically scroll the same amount … (document.body outerHTML) HTML …
<?php echo ”
<body onload="s1 = document.getElementById('preincoming'); s2 = document.getElementById('incoming'); s1.addEventListener('scroll', select_scroll_1, false); s2.addEventListener('scroll', select_scroll_2, false);" data-onload='onl();'>
<h1>XML Lint Validation <!--button onclick='trythis();' title='Try your own'>Usage</button--></h1>
<h3>RJM Programming - June, 2024</h3>
<form action=./xmllint_validation.php method=POST target=_self>
<table style=width:95%; border=5>
<tr><th colspan=2 style=text-align:center;>XML Lint validation of <input style=width:70%; onblur="if (this.value.length > 0) { document.getElementById('mysub').click(); }" name=htmlfile id=myhxfile placeholder='Please enter either HTML or XML file to validate ...' value="<?php echo str_replace('>','>',str_replace('<','<',$prefn)); ?>"></input></th></tr>
<tr><th>Data to validate</th><th>XML Lint results</th></tr>
<tr><td style=vertical-align:top;><textarea style=font-size:8px;display:inline-block;overflow-x:clip;text-wrap:nowrap;text-align:right; id=preincoming><?php echo str_replace('>','>',str_replace('<','<',$precontents)); ?></textarea><textarea onblur="if (this.value.length > 0 && '<?echo $fn; ?>' == '') { document.getElementById('mysub').click(); }" style=font-size:8px;display:inline-block;overflow-x:clip;text-wrap:nowrap; name=content id=incoming><?php echo str_replace('>','>',str_replace('<','<',$contents)); ?></textarea></td><td style=vertical-align:top;><textarea id=outgoing><?php echo str_replace('>','>',str_replace('<','<',$results)); ?></textarea></td></tr>
<tr><td></td><td><input type=submit id=mysub style=display:<?php echo $vsnone; ?> value=Validate></input></td></tr>
</table>
</form>
</body>
The HTML Sanitizer API allow developers to take untrusted strings of HTML and Document or DocumentFragment objects, and sanitize them for safe insertion into a document’s DOM.
For some time now, we’ve had no Android phone to test web applications with. This can be like “flying blind” regarding a big sector of the online user cohort.
There are simulators out there, but we thought of another idea early this morning. The recent Projector Viewing Primer Tutorial talked about …
Google Play app management … under the auspices of …
Android TV … Google’s operating system for smart TVs and streaming devices
… and we thought that with that word “Android” involved, if the Google Play has an app to support a web browser accessible via the Xgimi projector, then we “might be cooking with gas”.
The second such web browser related app called “Browser”, of many, hit that nail on its head, mentioning in its credentials “Android” in amongst the …
Landing Page clicks of “those blue backgrounded” thumbnails did not succeed in opening the relevent WordPress Blog post … and …
at that relevant WordPress Blog post clicking the main blog post image failed too
We found, with Android, navigation was friendliest using …
top.location.href=[WordPressBlogPostURL];
… Javascript code arrangements, and in both cases we fell short, with existant code so that we needed to attend to …
Landing Page clicks of “those blue backgrounded” thumbnails did not succeed in opening the relevent WordPress Blog post … was fixed via …
function check_if(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
if (navigator.userAgent.match(/Android/i)) {
aconto.body.innerHTML=aconto.body.innerHTML.replace(/\=one_o_five\;\"/g, "=one_o_five; if (navigator.userAgent.match(/Android/i)) { if (parent.document.getElementById('ibelow')) { top.location.href=('' + this.parentNode.href); } }" + '"');
}
var igs=aconto.getElementsByTagName('img');
for (var jigs=0; jigs<igs.length; jigs++) {
if (igs[jigs].src.indexOf('?rand') != -1) { igs[jigs].src+='' + Math.floor(Math.random() * 456) + '&x=x'; }
}
aconto.getElementById('mytable').style.width='100%';
aconto.getElementById('mytable').style.backgroundColor='rgba(150,120,250,0.5)';
//aconto.getElementById('mytable').ondblclick=function(){ alert('navigator.userAgent=' + ('' + navigator.userAgent)); };
}
}
}
}
… and …
at that relevant WordPress Blog post clicking the main blog post image failed too … and fixed via TwentyTen theme header.php changes …
<?php echo ”
var imgi = document.getElementsByTagName('img');
for (iyt=0; iyt<imgi.length; iyt++) {
if (navigator.userAgent.match(/Android/i)) {
if (iyt == 0) {
document.getElementById('styleandroid').innerHTML='<sty' + "le> .wp-caption-text { text-decoration: underline; } .wp-caption-text::before { content: '\\01F517 '; } </sty" + 'le>';
}
if (imgi[iyt].parentElement) {
if (imgi[iyt].parentNode.href) {
imgi[iyt].parentNode.ontouchend=function(event){ top.location.href=event.target.href; };
//imgi[iyt].ontouchstart=function(evt){ top.location.href=evt.target.parentNode.href; };
}
}
}
altis = imgi[iyt].alt;
titleis = imgi[iyt].title;
if (altis == null) {
if (titleis != null) {
if (titleis != '') {
imgi[iyt].alt = titleis;
}
}
} else if (altis == '') {
if (titleis != null) {
if (titleis != '') {
imgi[iyt].alt = titleis;
}
}
}
}
“; ?>
… all possible because of this new Xgimi Google Play and Android TV app called “Browser” (you all might be able to see) on today’s animated GIF presentation showing this install process.
Are you interested in swapping out a television viewing system of watching entertainment for a projector based one?
We recently acquired an Xgimi projector, and after setting up the projector with a decent screen to project to, found the setting up of streaming applications through Google Play, via, perhaps, a Gmail account, very easy, to the point we got the usual big players there, as well as the crossover to Apple TV via the Apple ID we had, and no need for the Apple TV hardware! It’s all there ready to go with the one Xgimi projector device (and stand, we found useful).
We’re sure it’s a pros and cons decision for you going this way, or not, but we found …
people feel less guilty coming and going from the entertainment viewing when there is no one television screen present (and we saw this as a pro)
the viewing screen is naturally big, rather than “damaging to the earth” big, as plasma screens can be
there are far fewer leads involved
only one remote works everything
when not watching (and we’d say, even when watching) the projector system it is not there unnecessarily soaking up attention
like back in school, some smart Alec, or stupid Alec, or both, might get to say …
Down in front!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
There are a lot of web applications we’ve been involved with that …
try to avoid (what we are most “peeved” by, as an issue) gobbledegook when dealing with non-ascii content we try, encoding wise, to corral towards UTF-8 encoding … and today we …
add sharing and collaboration functionality, via email or SMS, to our current XML Lint Validation web application development
… hence the “Shared Encoding” curiosity in our blog posting title … well, you had to be there … today, in the days after yesterday’s XML Lint Validation SelectionChange Tutorial …
… excellent try! But no, not quite. The answer is …
Tomorrow
But, five points to Hufflepuff, and we add today’s voucher for a cup of tea (no rushing please)!
But, back to business, as far as the encoding issue (of gobbledegook) goes, we mucked around thinking the fault lay with “meta” tags, and such, in the parent, until we relooked at the FileReader arrangements we had going back at a changedclient_browsing.htm client side HTML and Javascript inhouse helper. We were always using readAsDataURL() method for this URL call containing “straighttext=” argument pattern, but we found more success starting to use readAsText() method for HTML and XML data inputs. Makes sense really! Now we go …
reader[ij].onloadend = (function(mfile) {
return function(evt) {
var dp='', ds=dssuffix, slideshowparent=false, ssuffix='0', nsuffix='2', blnks=' ', xhsf='', zhsfs=[];
var tomt='video/mp4', thext='', ithext=0;
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
if (document.URL.indexOf('straighttext=') != -1) {
if (window.parent) {
if (parent.document.getElementById('result1') && parent.document.getElementById('result2')) {
if (parent.document.getElementById('result1').innerHTML == '') {
parent.document.getElementById('result1').innerHTML=(evt.target.result); // used to use window.atob and .replace('data:application/octet-stream;base64,', '')
} else {
parent.document.getElementById('result2').innerHTML=(evt.target.result); // retest earth_scanner.html
}
}
}
}
// rest of FileReader.DONE code follows
} };
})(files[ij]);
… as a solution to this issue, putting a smile to many an emoji out there.
And as far as our email or SMS sharing goes, we avoided any need for PHP mail ideas by starting to involve hashtagged versions of the incoming XML or HTML input to the XML Lint validator …
left hand cell hosted pair of textarea element onclick (and ondblclick) event logics … today we think a user could benefit from …
right hand cell hosted textarea element SelectionChange (keyboard related) event triggered via the user highlighting that textarea text (containing errors) of interest
… via …
<?php echo ”
var thesel='', reng='';
function prereverseengineer() {
var wasreng=reng;
reng='';
reverseengineer(wasreng);
}
function reverseengineer(what) {
var oury2=0, nexty2=0;
var theheight=eval(eval('' + s2rect.height) / rowseq);
var codelines=s2.value.split(String.fromCharCode(10));
var errdetail='', ierr=0, linenum=0, nums=[];
thergb=redrgb;
var bimg='linear-gradient(to bottom, white, '; // ' white ' + y2 + 'px, ' + thergb + ' ' + y2 + 'px, ' + thergb + ' ' + eval(y2 + eval('' + s1rect.height) / rowseq) + 'px, white ' + eval(y1 + eval('' + s1rect.height) / rowseq) + 'px, white)';
var suff=', white)';
Onto yesterday’s XML Lint Validation Browsing Tutorial XML Lint Validation web application progress, today, we start to add some onclick and ondblclick event logic to those left hand table cell pair of textarea elements …
if (('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '') {
if (document.getElementById('myhxfile').value == '') {
document.getElementById('myhxfile').placeholder=decodeURIComponent(('' + location.hash).replace(/^\#/g,''));
var tf=document.getElementById('outgoing').value;
var tfis=tf.split(':')[0];
if (tfis.trim() != '') {
while (tf.indexOf(tfis + ':') != -1) {
tf=tf.replace(tfis + ':', decodeURIComponent(('' + location.hash).replace(/^\#/g,'')) + ':');
}
document.getElementById('outgoing').value=tf;
}
}
}
}
“; ?>
… and though we usually do not associate onclick logic with textarea elements, today we’re preferring that to any alternate use of div element alternative because, today, for the first time, we’re making use of the “sharp” colour stops mentioned by linear-gradient(), thanks …
Again, we see, into another way to yesterday’s work, how useful is a textarea element, in that it can facilitate the way …
HTML and XML data can be input via populating the textarea innerHTML attribute … which flows through to a …
textarea value attribute value where any < is mapped to < and > is mapped to > … ready for …
an HTML form hosted textarea, given a filled in name attribute be able to share this data to that form’s action attributed value …
<?php
function ronecheck() {
if (document.getElementById('result1').innerHTML != '') {
document.getElementById('incoming').innerHTML=document.getElementById('result1').value;
document.getElementById('result1').innerHTML='';
document.getElementById('result1').value='';
document.getElementById('myhxfile').name='xx';
document.getElementById('mysub').click();
}
}
Do you remember when we discussed the Sanitizer API, talked about at Sanitizer API Primer Tutorial, regarding it as a web application HTML (and more) validation tool?
Well, we’ve based a new “validator” of HTML or XML using the XML Lint web application on what we did then, but this code needing to be …
under the auspices of a serverside scenario … ie. PHP … for us … calling on …
underlying operating system call such as (for HTML qsall.htm incoming data file) …
xmllint --html --valid --noout ./qsall.htm
… there’s not much left of the original HTML and Javascript!
We had a fun time with HTML textarea elements and scrolling with the resultant “first draft”xmllint_validation.phpyou might want to try for yourself supplying an HTML or XML URL of intetest. Why, in particular? Well, it was the first time that we remember trying to make practically useful …
a table cell (ie. td element) (the left of two) hosted …
two textarea element arrangement whereby, ideally. they view …
side by side
if one is scrolled the two identically scroll the same amount … (document.body outerHTML) HTML …
<?php echo ”
<body onload="s1 = document.getElementById('preincoming'); s2 = document.getElementById('incoming'); s1.addEventListener('scroll', select_scroll_1, false); s2.addEventListener('scroll', select_scroll_2, false);" data-onload='onl();'>
<h1>XML Lint Validation <!--button onclick='trythis();' title='Try your own'>Usage</button--></h1>
<h3>RJM Programming - June, 2024</h3>
<form action=./xmllint_validation.php method=POST target=_self>
<table style=width:95%; border=5>
<tr><th colspan=2 style=text-align:center;>XML Lint validation of <input style=width:70%; onblur="if (this.value.length > 0) { document.getElementById('mysub').click(); }" name=htmlfile id=myhxfile placeholder='Please enter either HTML or XML file to validate ...' value="<?php echo str_replace('>','>',str_replace('<','<',$prefn)); ?>"></input></th></tr>
<tr><th>Data to validate</th><th>XML Lint results</th></tr>
<tr><td style=vertical-align:top;><textarea style=font-size:8px;display:inline-block;overflow-x:clip;text-wrap:nowrap;text-align:right; id=preincoming><?php echo str_replace('>','>',str_replace('<','<',$precontents)); ?></textarea><textarea onblur="if (this.value.length > 0 && '<?echo $fn; ?>' == '') { document.getElementById('mysub').click(); }" style=font-size:8px;display:inline-block;overflow-x:clip;text-wrap:nowrap; name=content id=incoming><?php echo str_replace('>','>',str_replace('<','<',$contents)); ?></textarea></td><td style=vertical-align:top;><textarea id=outgoing><?php echo str_replace('>','>',str_replace('<','<',$results)); ?></textarea></td></tr>
<tr><td></td><td><input type=submit id=mysub style=display:<?php echo $vsnone; ?> value=Validate></input></td></tr>
</table>
</form>
</body>
The HTML Sanitizer API allow developers to take untrusted strings of HTML and Document or DocumentFragment objects, and sanitize them for safe insertion into a document’s DOM.
