{"id":63981,"date":"2024-06-20T03:01:09","date_gmt":"2024-06-19T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63981"},"modified":"2024-09-21T11:20:33","modified_gmt":"2024-09-21T01:20:33","slug":"xml-lnt-validation-css-background-colour-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-lnt-validation-css-background-colour-tutorial\/","title":{"rendered":"XML Lint Validation CSS Background Colour Tutorial"},"content":{"rendered":"
\"XML<\/a>

XML Lint Validation CSS Background Colour Tutorial<\/p><\/div>\n

Onto the recent XML Lint Validation Shared Encoding Tutorial<\/a> 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.<\/p>\n

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<\/a>, and if you have a dedicated CSS styling employee, then you may roll in a different direction … though Nala and<\/a> Luna<\/a> will tell you …<\/p>\n

\nClockwise is best!\n<\/p><\/blockquote>\n

But they would say that! They’ve never travelled north of the Equator!<\/p>\n

So what CSS styling got applied?<\/p>\n

<?php echo ”
\n
\n<style>
\n
\n th[colspan]:not([colspan=\"1\"]) {
\n background-color: yellow;
\n }
\n
\n textarea:nth-child(1) {
\n background-color: silver;
\n }
\n
\n textarea#preincoming {
\n background-color: silver;
\n }
\n
\n textarea:nth-child(2) {
\n background-color: rgb(245,245,245);
\n }
\n
\n textarea#incoming {
\n background-color: rgb(245,245,245);
\n }
\n
\n textarea:nth-child(3) {
\n background-color: pink !important;
\n }
\n
\n textarea#outgoing {
\n background-color: pink !important;
\n }
\n
\n<\/style>
\n<\/code>
\n“; ?><\/p>\n

… in our changed<\/a> “sixth draft”<\/a> xmllint_validation.php<\/a> you might want to try for yourself<\/a>.<\/p>\n

\n

\n

Previous relevant XML Lint Validation Shared Encoding Tutorial<\/a> is shown below.<\/p>\n

\"XML<\/a>

XML Lint Validation Shared Encoding Tutorial<\/p><\/div>\n

There are a lot of web applications we’ve been involved with that …<\/p>\n

    \n
  1. try to avoid (what we are most “peeved” by, as an issue)<\/font> gobbledegook when dealing with non-ascii content we try, encoding wise, to corral towards UTF-8 encoding … and today we …<\/li>\n
  2. add sharing and collaboration functionality, via email or SMS, to our current XML Lint Validation web application<\/a> development<\/li>\n<\/ol>\n

    … hence the “Shared Encoding” curiosity in our blog posting title … well, you had to be there …<\/font> today, in the days after yesterday’s XML Lint Validation SelectionChange Tutorial<\/a> …<\/p>\n

    Fancy a pertinent riddle?<\/p>\n

    \nWhat is always coming but never arrives?\n<\/p><\/blockquote>\n

    Anyone, anyone<\/a>?<\/p>\n

    Yes, Hoagy<\/a>, do you have an answer?<\/p>\n

    \nNo Bull Cow No Bull\n<\/p><\/blockquote>\n

    Well, that’s quite rude and wise all at once, Hoagy! Anybody else? Yes, Edward<\/a>, your answer …<\/p>\n

    \nRearrange the sycophant!\n<\/p><\/blockquote>\n

    … has merit too! But wish one of you would enunciate … use your words …
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.\n<\/p>\n

    You have the answer Tatsumi<\/a>? Well …<\/p>\n

    \nToday\n<\/p><\/blockquote>\n

    … excellent try! But no, not quite. The answer is …<\/p>\n

    \nTomorrow\n<\/p><\/blockquote>\n

    But, five points to Hufflepuff, and we add today’s voucher for a cup of tea<\/sub> (no rushing please)<\/font>!<\/p>\n

    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 changed<\/a> client_browsing.htm<\/a> client side HTML and Javascript inhouse helper. We were always using readAsDataURL()<\/a> method for this URL call containing “straighttext=” argument pattern, but we found more success starting to use readAsText()<\/a> method for HTML and XML data inputs. Makes sense really! Now we go<\/font> …<\/p>\n


    \n blob.push(file.slice(start, stop + 1));
    \n if (parent.document.getElementById('txtresultout')) {
    \n reader[ij].readAsText(blob[ij]);
    \n } else {
    \n if (document.URL.indexOf('straighttext=') != -1) {
    \n if (window.parent) {
    \n if (parent.document.getElementById('result1') && parent.document.getElementById('result2')) {
    \n reader[ij].readAsText(blob[ij]);
    \n } else {
    \n reader[ij].readAsDataURL(blob[ij]);
    \n }
    \n } else {
    \n reader[ij].readAsDataURL(blob[ij]);
    \n }
    \n } else {<\/font>
    \n reader[ij].readAsDataURL(blob[ij]);
    \n }
    \n }<\/font>
    \n<\/code><\/p>\n

    … as well as<\/font> …<\/p>\n


    \n reader[ij].onloadend = (function(mfile) {
    \n return function(evt) {
    \n var dp='', ds=dssuffix, slideshowparent=false, ssuffix='0', nsuffix='2', blnks=' ', xhsf='', zhsfs=[];
    \n var tomt='video\/mp4', thext='', ithext=0;
    \n if (evt.target.readyState == FileReader.DONE) { \/\/ DONE == 2
    \n if (document.URL.indexOf('straighttext=') != -1) {
    \n if (window.parent) {
    \n if (parent.document.getElementById('result1') && parent.document.getElementById('result2')) {
    \n if (parent.document.getElementById('result1').innerHTML == '') {
    \n parent.document.getElementById('result1').innerHTML=(evt.target.result); \/\/ used to use window.atob and .replace('data:application\/octet-stream;base64,', '')
    \n } else {
    \n parent.document.getElementById('result2').innerHTML=(evt.target.result); \/\/ retest earth_scanner.html
    \n }
    \n }
    \n }
    \n }<\/font>
    \n\/\/ rest of FileReader.DONE code follows
    \n } };
    \n })(files[ij]);
    \n<\/code><\/p>\n

    … as a solution to this issue, putting a smile to many an emoji<\/a> out there.<\/p>\n

    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 …<\/p>\n

    <?php echo ”
    \n
    \n var ihemail='', ihsms='';
    \n
    \n function dohash(isfort) {
    \n \/\/alert('' + isfort);
    \n if (!isfort || 8 == 8) {
    \n var urlis=document.URL.split('?')[0].split('#')[0];
    \n if (('' + document.getElementById('myform').action).indexOf('#') != -1) {
    \n \/\/alert('#' + ('' + document.getElementById('myform').action).split('#')[1]);
    \n document.getElementById('ihid').value='' + ('' + document.getElementById('myform').action).split('#')[1];
    \n document.getElementById('ihid').name='browsecontents';
    \n urlis+='?browsecontents=' + encodeURIComponent(('' + document.getElementById('myform').action).split('#')[1]) + '&' + document.getElementById('myhxfile').name + '=' + encodeURIComponent(document.getElementById('myhxfile').value.replace(\/\\#\/g,'')) + '#' + ('' + document.getElementById('myform').action).split('#')[1] + '&contents=' + encodeURIComponent(document.getElementById('incoming').value);
    \n } else {
    \n \/\/alert('bC = ' + bc);
    \n urlis+='?' + document.getElementById('myhxfile').name + '=' + encodeURIComponent(document.getElementById('myhxfile').value.replace(\/\\#\/g,'')) + '#contents=' + encodeURIComponent(document.getElementById('incoming').value);
    \n }
    \n\/\/alert(urlis);
    \n if (!window.opener || ('' + document.referrer) == '') {
    \n \/\/alert('dref=' + document.referrer + ' urlis=' + urlis);
    \n document.body.style.cursor='progress';
    \n woois=window.open(urlis, '_blank');
    \n } \/\/else {
    \n \/\/alert('top' + document.referrer);
    \n \/\/}
    \n if (1 == 1) {
    \n document.getElementById('myform').target='myif';
    \n ihsms=document.getElementById('dsms').innerHTML;
    \n ihemail=document.getElementById('demail').innerHTML;
    \n document.getElementById('myif').style.position='absolute';
    \n document.getElementById('myif').style.top='0px';
    \n document.getElementById('myif').style.left='0px';
    \n document.getElementById('myif').style.width='100%';
    \n document.getElementById('myif').style.height='100%';
    \n document.getElementById('myif').style.zIndex='100';
    \n document.getElementById('myif').style.display='block';
    \n return true;
    \n } else {
    \n location.href=urlis;
    \n }
    \n return isfort; \/\/false;
    \n }
    \n \/\/alert(87);
    \n return true;
    \n }
    \n
    \n function doemail() {
    \n }
    \n
    \n function dosms() {
    \n if (document.getElementById('asms').href.indexOf('sms:&') != -1) {
    \n document.getElementById('asms').href=document.getElementById('asms').href.replace('sms:&', 'sms:' + ('' + prompt('Please enter SMS number', '')).replace(\/^null\/g,'') + '&');
    \n if (document.getElementById('asms').href.indexOf('sms:&') == -1) {
    \n document.getElementById('asms').click();
    \n }
    \n }
    \n }
    \n
    \n function checkmyif(iois) {
    \n if (iois != null) {
    \n paconto = (iois.contentWindow || iois.contentDocument);
    \n if (paconto != null) {
    \n if (paconto.document) { paconto = paconto.document; }
    \n if (paconto.body != null && (iois.src.indexOf('?') != -1 || iois.src.indexOf('#') != -1 || ihemail != '')) {
    \n if (('' + document.referrer) == '') {
    \n paconto.body.style.cursor='progress';
    \n }
    \n if (document.getElementById('demail')) {
    \n \/\/alert(document.getElementById('demail').innerHTML);
    \n if (('' + document.referrer) == '') {
    \n paconto.body.style.cursor='progress';
    \n }
    \n if (ihemail != '') {
    \n paconto.document.getElementById('demail').innerHTML=ihemail;
    \n } else {
    \n paconto.document.getElementById('demail').innerHTML=document.getElementById('demail').innerHTML;
    \n }
    \n paconto.document.getElementById('demail').style.display='inline-block';
    \n }
    \n if (document.getElementById('dsms')) {
    \n if (ihsms != '') {
    \n paconto.document.getElementById('demail').innerHTML=ihsms;
    \n } else {
    \n paconto.document.getElementById('dsms').innerHTML=document.getElementById('dsms').innerHTML;
    \n }
    \n paconto.document.getElementById('dsms').style.display='inline-block';
    \n }
    \n }
    \n }
    \n }
    \n }
    \n
    \n function maybeshow() {
    \n if (document.getElementById('incoming').value != '') {
    \n var wwoo=window.open('','_blank','top=50,left=50,width=900,height=900');
    \n if (document.getElementById('myhxfile').value != '') {
    \n wwoo.document.write('<html><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"><title>' + document.getElementById('myhxfile').value + '<\/title><\/head><body><textarea style=width:100%;height:100%;>' + document.getElementById('incoming').value + '<\/textarea><\/body><\/html>');
    \n } else if (document.getElementById('myhxfile').placeholder.indexOf('Please ') == -1) {
    \n wwoo.document.write('<html><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"><title>' + document.getElementById('myhxfile').placeholder + '<\/title><\/head><body><textarea style=width:100%;height:100%;>' + document.getElementById('incoming').value + '<\/textarea><\/body><\/html>');
    \n } else {
    \n wwoo.document.write('<html><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"><title>XML Lint Validation incoming XML or HTML<\/title><\/head><body><textarea style=width:100%;height:100%;>' + document.getElementById('incoming').value + '<\/textarea><\/body><\/html>');
    \n }
    \n }
    \n }
    \n<\/code>
    \n“; ?><\/p>\n

    … called into play via “a wrapped” HTML form onsubmit event call change<\/font> …<\/p>\n

    <?php
    \n
    \n<form accept-charset=\"UTF-8\" onsubmit=\" if (document.getElementById('myhxfile').value == '') { document.getElementById('myhxfile').name='xx'; } return dohash(<\/font>true)<\/font>;\" action=.\/xmllint_validation.php<?php echo $bc; ?> id=myform method=POST target=_self>
    \n<\/code>
    \n?><\/p>\n

    … in our changed<\/a> “fifth draft”<\/a> xmllint_validation.php<\/a> you might want to try for yourself<\/a>.<\/p>\n

    Happy sharing!<\/p>\n

    \n

    \n

    Previous relevant XML Lint Validation SelectionChange Tutorial<\/a> is shown below.<\/p>\n

    \"XML<\/a>

    XML Lint Validation SelectionChange Tutorial<\/p><\/div>\n

    Onto yesterday’s XML Lint Validation Onclick Tutorial<\/a>‘s …<\/p>\n