{"id":63930,"date":"2024-06-15T03:01:11","date_gmt":"2024-06-14T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63930"},"modified":"2024-06-14T22:40:50","modified_gmt":"2024-06-14T12:40:50","slug":"xml-lint-validation-onclick-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-lint-validation-onclick-tutorial\/","title":{"rendered":"XML Lint Validation Onclick Tutorial"},"content":{"rendered":"
\"XML<\/a>

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

Onto yesterday’s XML Lint Validation Browsing Tutorial<\/a> 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 …<\/p>\n

<?php echo ”
\n
\nfunction gcbr() {
\n if (rowseq != '') {
\n s1rect=s1.getBoundingClientRect();
\n s1.onclick=function(event) { s1click(event); };
\n s1.ondblclick=function(event) { alert('Line ' + s1.title + s1.getAttribute('data-status') + ':' + String.fromCharCode(10) + s2.title); };
\n s2rect=s2.getBoundingClientRect();
\n s2.onclick=function(event) { s2click(event); };
\n s2.ondblclick=function(event) { alert('Line ' + s1.title + s1.getAttribute('data-status') + ':' + String.fromCharCode(10) + s2.title); };
\n }
\n
\n if (('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim() != '') {
\n if (document.getElementById('myhxfile').value == '') {
\n document.getElementById('myhxfile').placeholder=decodeURIComponent(('' + location.hash).replace(\/^\\#\/g,''));
\n var tf=document.getElementById('outgoing').value;
\n var tfis=tf.split(':')[0];
\n if (tfis.trim() != '') {
\n while (tf.indexOf(tfis + ':') != -1) {
\n tf=tf.replace(tfis + ':', decodeURIComponent(('' + location.hash).replace(\/^\\#\/g,'')) + ':');
\n }
\n document.getElementById('outgoing').value=tf;
\n }
\n }
\n }
\n}
\n<\/code>
\n“; ?><\/p>\n

… 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 \u201csharp\u201d colour stops<\/i> mentioned by linear-gradient()<\/a>, thanks …<\/p>\n

<?php echo ”
\n
\nfunction s1click(e) {
\n var theheight=eval(eval('' + s1rect.height) \/ rowseq);
\n var codelines=s2.value.split(String.fromCharCode(10));
\n var errdetail='', ierr=0, linenum=0;
\n if (e.touches) {
\n if (e.touches[0].pageX) {
\n x1=(eval(e.touches[0].pageX + document.body.scrollLeft * 1) * 1);
\n y1=(eval(e.touches[0].pageY + eval(eval(e.touches[0].pageY % theheight) - theheight) + document.body.scrollTop * 1) * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.touches[0].pageY + document.body.scrollTop - s1rect.top) \/ theheight)));
\n } else {
\n x1=(eval(e.touches[0].clientX + document.body.scrollLeft * 1) * 1);
\n y1=(eval(e.touches[0].clientY + eval(eval(e.touches[0].clientY % theheight) - theheight) + document.body.scrollTop * 1) * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.touches[0].clientY + document.body.scrollTop - s1rect.top) \/ theheight)));
\n }
\n } else if (e.clientX || e.clientY) {
\n x1=(e.clientX + document.body.scrollLeft * 1);
\n y1=(e.clientY + eval(eval(e.clientY % theheight) - theheight) + document.body.scrollTop * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.clientY + document.body.scrollTop - s1rect.top) \/ theheight)));
\n } else {
\n x1=(e.pageX + document.body.scrollLeft * 1);
\n y1=(e.pageY + eval(eval(e.pageY % theheight) - theheight) + document.body.scrollTop * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.pageY + document.body.scrollTop - s1rect.top) \/ theheight)));
\n }
\n \/\/alert('' + linenum + ' ' + y1 + '\/' + document.body.scrollTop + ' ... ' + s1.scrollTop + ' ... ' + s1rect.top + '\/' + s1rect.y + ' +++ ' + theheight);
\n var finds=document.getElementById('outgoing').value.split(':' + linenum + ':');
\n thergb=greenrgb;
\n s1.setAttribute('data-status', '');
\n if (eval('' + finds.length) > 1) {
\n for (ierr=1; ierr<finds.length; ierr++) {
\n errdetail+=String.fromCharCode(10) + finds[eval(-1 + ierr)].split(':' + linenum + ':')[0].split(String.fromCharCode(10))[eval(-1 + finds[eval(-1 + ierr)].split(':' + linenum + ':')[0].split(String.fromCharCode(10)).length)] + ':' + linenum + ':' + finds[eval(0 + ierr)].split(String.fromCharCode(10))[0];
\n }
\n errdetail+=String.fromCharCode(10);
\n thergb=redrgb;
\n s1.setAttribute('data-status', ' (has errors ... ' + errdetail + ' ... over to the right)');
\n }
\n s1.title='' + linenum;
\n s2.title='' + codelines[eval(-1 + linenum)];
\n y1-=eval('' + s1rect.top);
\n \/\/ linear-gradient(to right, yellow, yellow 20%, #009966 20%, #009966 80%, purple 80%, purple);
\n \/\/alert('linear-gradient(to bottom, white, white ' + y1 + 'px, ' + thergb + ' ' + y1 + 'px, ' + thergb + ' ' + eval(y1 + eval('' + s2rect.height) \/ rowseq) + 'px, white ' + eval(y1 + eval('' + s2rect.height) \/ rowseq) + 'px, white)');
\n s2.style.backgroundImage='linear-gradient(to bottom, white, white ' + y1 + 'px, ' + thergb + ' ' + y1 + 'px, ' + thergb + ' ' + eval(y1 + eval('' + s2rect.height) \/ rowseq) + 'px, white ' + eval(y1 + eval('' + s2rect.height) \/ rowseq) + 'px, white)';
\n s1.style.backgroundImage='linear-gradient(to bottom, white, white ' + y1 + 'px, ' + thergb + ' ' + y1 + 'px, ' + thergb + ' ' + eval(y1 + eval('' + s2rect.height) \/ rowseq) + 'px, white ' + eval(y1 + eval('' + s2rect.height) \/ rowseq) + 'px, white)';
\n}
\n
\nfunction s2click(e) {
\n var theheight=eval(eval('' + s2rect.height) \/ rowseq);
\n var codelines=s2.value.split(String.fromCharCode(10));
\n var errdetail='', ierr=0, linenum=0;
\n if (e.touches) {
\n if (e.touches[0].pageX) {
\n x2=(eval(e.touches[0].pageX + document.body.scrollLeft * 1) * 1);
\n y2=(eval(e.touches[0].pageY + eval(eval(e.touches[0].pageY % theheight) - theheight) + document.body.scrollTop * 1) * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.touches[0].pageY + document.body.scrollTop - s2rect.top) \/ theheight)));
\n } else {
\n x2=(eval(e.touches[0].clientX + document.body.scrollLeft * 1) * 1);
\n y2=(eval(e.touches[0].clientY + eval(eval(e.touches[0].clientY % theheight) - theheight) + document.body.scrollTop * 1) * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.touches[0].clientY + document.body.scrollTop - s2rect.top) \/ theheight)));
\n }
\n } else if (e.clientX || e.clientY) {
\n x2=(e.clientX + document.body.scrollLeft * 1);
\n y2=(e.clientY + eval(eval(e.clientY % theheight) - theheight) + document.body.scrollTop * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.clientY + document.body.scrollTop - s2rect.top) \/ theheight)));
\n } else {
\n x2=(e.pageX + document.body.scrollLeft * 1);
\n y2=(e.pageY + eval(eval(e.pageY % theheight) - theheight) + document.body.scrollTop * 1);
\n linenum=Math.floor(eval(1 + eval(eval(e.pageY + document.body.scrollTop - s2rect.top) \/ theheight)));
\n }
\n var finds=document.getElementById('outgoing').value.split(':' + linenum + ':');
\n thergb=greenrgb;
\n s1.setAttribute('data-status', '');
\n if (eval('' + finds.length) > 1) {
\n for (ierr=1; ierr<finds.length; ierr++) {
\n errdetail+=String.fromCharCode(10) + finds[eval(-1 + ierr)].split(':' + linenum + ':')[0].split(String.fromCharCode(10))[eval(-1 + finds[eval(-1 + ierr)].split(':' + linenum + ':')[0].split(String.fromCharCode(10)).length)] + ':' + linenum + ':' + finds[eval(0 + ierr)].split(String.fromCharCode(10))[0];
\n }
\n errdetail+=String.fromCharCode(10);
\n thergb=redrgb;
\n s1.setAttribute('data-status', ' (has errors ... ' + errdetail + ' ... over to the right)');
\n }
\n s1.title='' + linenum;
\n s2.title='' + codelines[eval(-1 + linenum)];
\n y2-=eval('' + s2rect.top);
\n s2.style.backgroundImage='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)';
\n s1.style.backgroundImage='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)';
\n}
\n<\/code>
\n“; ?><\/p>\n

to be able to add colour coding to (the background of) HTML textarea elements.<\/p>\n

Also, a hashtagging idea is implemented to aid with bringing over a browsed for file name into the “reporting mix” in our changed<\/a> “third draft”<\/a> xmllint_validation.php<\/a> you might want to try for yourself<\/a>.<\/p>\n

\n

\n

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

\"XML<\/a>

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

Yesterday’s XML Lint Validation Tutorial<\/a> had us starting out on a discovery tour of XML Lint, yesterday …<\/p>\n