Walking Trip …

Posted on by
Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

 📅  

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

Posted in Photography, Trips | Tagged , , | 34 Comments

HTML/Javascript Cockpit of Web Applications Feeling Lucky Tutorial

Posted on by
HTML/Javascript Cockpit of Web Applications Feeling Lucky Tutorial

HTML/Javascript Cockpit of Web Applications Feeling Lucky Tutorial

Further to yesterday’s HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial …

we’ve been restewing on cockpit_feel.html feeling lucky option in the light of yesterday’s cockpit_feel.html whole new cell content idea of blog posting dropdowns in multiple entry mode

… and, yes, a little more curry paste is required?! And doesn’t it hold up well the next day? But we digress …

We’ve come around to …

  1. not only including new “feeling lucky” logic where the web application selects nine random blog posting cell content iframes … but (and this is an advantage regarding a “revisited stewing” in “Paprika Place” perhaps) …
  2. we worked out that the PHP web application helper featuring in the recent WordPress Blog Search Title and Posting Date Expressions Tutorial could fairly easily …
    <?php

    $firstnine=false;

    if (isset($_GET['otherpm'])) { // recall scenario
    $firstnine=true;
    $pmval=@file_get_contents("http://www.rjmprogramming.com.au/Welcome.html");
    $bits=explode("id='tuts'", $pmval);
    if (sizeof($bits) > 1) {
    $ssomeof=someof(explode('</select>', $bits[1])[0], str_replace('+',' ',urldecode($_GET['otherpm'])));
    if (1 == 1) {
    echo '<html><body onload="if (window.parent) { if (parent.document.getElementById(' . "'blogp'" . ')) { parent.document.getElementById(' . "'blogp'" . ').value=' . "'" . $ssomeof . "'" . '; } }' . '"><p id=res>' . $ssomeof . '</p></body></html>';
    } else {
    $allselbits="<select" . $onclick . "'if (this.value.trim().length > 0) { if (2 == 2 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { location.href=this.value; } else { document.getElementById(\"myi\").src=this.value; } } else { var huh=prompt(\"Tutorials regarding?\",\"" . urldecode($_GET['pm']) . "\"); if (huh != null) { if (huh != \"\") { if (huh.indexOf(\".\") == 0) { huh=String.fromCharCode(92) + huh; } location.href=\"http://www.rjmprogramming.com.au/itnewblog/match/\" + encodeURIComponent(huh); } } } ' size=1 id='tuts'" . $ssomeof . '</select><br><iframe name="myi" id="myi" style="width:100%;height:1400px;" src="//www.rjmprogramming.com.au/ITblog" title="Robert James Metcalfe Blog"></iframe>';
    echo '<!doctype html><html><head><title>Robert James Metcalfe Blog - Match Blog Title via RegExp</title></head><body>' . $allselbits . '</body></html>';
    }
    }
    exit;
    } else if (isset($_POST['otherpm'])) { // recall scenario
    $firstnine=true;
    $pmval=@file_get_contents("http://www.rjmprogramming.com.au/Welcome.html");
    $bits=explode("id='tuts'", $pmval);
    if (sizeof($bits) > 1) {
    $ssomeof=someof(explode('</select>', $bits[1])[0], str_replace('+',' ',urldecode($_POST['otherpm'])));
    if (1 == 1) {
    echo '<html><body onload="if (window.parent) { if (parent.document.getElementById(' . "'blogp'" . ')) { parent.document.getElementById(' . "'blogp'" . ').value=' . "'" . $ssomeof . "'" . '; } }' . '"><p id=res>' . $ssomeof . '</p></body></html>';
    } else {
    $allselbits="<select" . $onclick . "'if (this.value.trim().length > 0) { if (2 == 2 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { location.href=this.value; } else { document.getElementById(\"myi\").src=this.value; } } else { var huh=prompt(\"Tutorials regarding?\",\"" . urldecode($_POST['pm']) . "\"); if (huh != null) { if (huh != \"\") { if (huh.indexOf(\".\") == 0) { huh=String.fromCharCode(92) + huh; } location.href=\"http://www.rjmprogramming.com.au/itnewblog/match/\" + encodeURIComponent(huh); } } } ' size=1 id='tuts'" . $ssomeof . '</select><br><iframe name="myi" id="myi" style="width:100%;height:1400px;" src="//www.rjmprogramming.com.au/ITblog" title="Robert James Metcalfe Blog"></iframe>';
    echo '<!doctype html><html><head><title>Robert James Metcalfe Blog - Match Blog Title via RegExp</title></head><body>' . $allselbits . '</body></html>';
    }
    }
    exit;
    }

    ?>
    … be repurposed in a changed mapper.php so that the logic of that new “Post RE” WordPress Blog search textbox area checkbox could also help out here by supplying a comma separated list …

    … of WordPress Blog posting IDs it sends back up to our hosting Cockpit of Web Applications web application

… as today’s “value adding” proposition in our Cockpit Feel of web applications changed cockpit_feel.html …


var sofarblogp=',';
var today=new Date();
var yyyy = today.getFullYear();
var feeling_lucky=false, doing_preg=false, minrange=20140101, maxrange=eval(eval(1 + yyyy) * 10000 + 101);
var pval=0, ourhuh='';

function setCookie(thisg, tn) { // thanks to JavaScript and Ajax by Tom Negrino and Dori Smith
if (nomore != 'y') {
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var huh='';
if (urls[eval(-1 + tn)] != "#nomore") {
//alert("urls[" + eval(-1 + tn) + "]=" + urls[eval(-1 + tn)]);
if (prefix != '') {
if (('' + tn) == '1') {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for just using dropdown multiple selections or OK to blank for no more now or to Feeling Lucky or some other posting criteria search string with same rules as Post RE blog checkbox (and which is not a URL)", urls[eval(-1 + tn)]);
if (huh == null || ('' + huh).toLowerCase() == 'feeling lucky' || ( ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '' && (('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf(' ') != -1 || ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf('.') == -1))) {
if (('' + huh).toLowerCase() == 'feeling lucky') {
feeling_lucky=true;
huh=null;
} else if (huh != null) {
doing_preg=true;
ourhuh=huh;
setTimeout(function(){
document.getElementById('ifbppop').src='//www.rjmprogramming.com.au/itnewblog/match/mapper.php?otherpm=' + encodeURIComponent(ourhuh);
}, 2000);
huh=null;
}
cancelps=true;
nomore='y';
document.body.style.cursor='progress';
setInterval(function(){
if (amready) {
document.getElementById('dtbl').style.width='100%';
document.getElementById('dtbl').style.height='75%';
for (var ijh=0; ijh<mapping.length; ijh++) {
document.getElementById('td' + mapping[ijh]).style.width='33%';
document.getElementById('td' + mapping[ijh]).style.height='33%';
if (feeling_lucky) {
pval='';
while ((sofarblogp + ',').indexOf(',' + pval + ',') != -1 || pval == '') {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
if (mapping[ijh] == '22') { pval=20260204; }
while (document.getElementById('dopt').innerHTML.indexOf('(' + pval + ')') == -1 || (sofarblogp + ',').indexOf(',' + pval + ',') != -1) {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
//alert('2:' + pval + ' ' + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0]);
pval=document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0];
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//setTimeout(function(){
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe id=iftd' + mapping[ijh] + ' onload="if (this.src.indexOf(' + "'About_Us'" + ') != -1) { setTimeout(function(event){ document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').src=document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').getAttribute(' + "'data-src'" + '); }, ' + eval(eval(2 + ijh) * 12000) + '); }" data-src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" src=/About_Us.html style=width:100%;height:100%;></iframe>';
//}, eval(eval('' + mapping[ijh]) * 1000));
} else {
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" style=width:100%;height:100%;></iframe>';
}
} else {
document.getElementById('td' + mapping[ijh]).innerHTML+=document.getElementById('dopt').innerHTML.replace(' multiple', ' size=9 multiple').replace(' selected=', ' id=selfirstopt selected=');
}
}
if (!doing_preg) { document.body.style.cursor='pointer'; }
if (!feeling_lucky) { setInterval(blogpandtmonitor, 15000); }
amready=false;
}
}, 5000);
}
} else {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for no more now", urls[eval(-1 + tn)]);
}
} else {
if (('' + tn) == '1') {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for just using dropdown multiple selections or OK to blank for no more now or to Feeling Lucky or some other posting criteria search string with same rules as Post RE blog checkbox (and which is not a URL)", urls[eval(-1 + tn)]);
if (huh == null || ('' + huh).toLowerCase() == 'feeling lucky' || ( ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim() != '' && (('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf(' ') != -1 || ('' + huh).replace(/^null/g,'').replace(/^undefined/g,'').trim().indexOf('.') == -1))) {
if (('' + huh).toLowerCase() == 'feeling lucky') {
feeling_lucky=true;
huh=null;
} else if (huh != null) {
doing_preg=true;
ourhuh=huh;
setTimeout(function(){
document.getElementById('ifbppop').src='//www.rjmprogramming.com.au/itnewblog/match/mapper.php?otherpm=' + encodeURIComponent(ourhuh);
}, 2000);
huh=null;
}
cancelps=true;
nomore='y';
document.body.style.cursor='progress';
setInterval(function(){
if (amready) {
document.getElementById('dtbl').style.width='100%';
document.getElementById('dtbl').style.height='75%';
for (var ijh=0; ijh<mapping.length; ijh++) {
document.getElementById('td' + mapping[ijh]).style.width='33%';
document.getElementById('td' + mapping[ijh]).style.height='33%';
if (feeling_lucky) {
pval='';
while ((sofarblogp + ',').indexOf(',' + pval + ',') != -1 || pval == '') {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
if (mapping[ijh] == '22') { pval=20260204; }
while (document.getElementById('dopt').innerHTML.indexOf('(' + pval + ')') == -1 || (sofarblogp + ',').indexOf(',' + pval + ',') != -1) {
pval=eval('' + minrange) + Math.floor(Math.random() * eval(maxrange - minrange));
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
//alert('2:' + pval + ' ' + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0]);
pval=document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=')[eval(-1 + document.getElementById('dopt').innerHTML.split('(' + pval + ')')[0].split('?p=').length)].split('&')[0].split('#')[0];
}
if (sofarblogp != ',') { sofarblogp+=','; }
sofarblogp+='' + pval;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//setTimeout(function(){
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe id=iftd' + mapping[ijh] + ' onload="if (this.src.indexOf(' + "'About_Us'" + ') != -1) { setTimeout(function(event){ document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').src=document.getElementById(' + "'iftd' + '" + mapping[ijh] + "'" + ').getAttribute(' + "'data-src'" + '); }, ' + eval(eval(2 + ijh) * 12000) + '); }" data-src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" src=/About_Us.html style=width:100%;height:100%;></iframe>';
//}, eval(eval('' + mapping[ijh]) * 1000));
} else {
document.getElementById('td' + mapping[ijh]).innerHTML='<iframe src="//www.rjmprogramming.com.au/ITblog/?p=' + pval + '&openappin=30#content" style=width:100%;height:100%;></iframe>';
}
} else {
document.getElementById('td' + mapping[ijh]).innerHTML+=document.getElementById('dopt').innerHTML.replace(' multiple', ' size=9 multiple').replace(' selected=', ' id=selfirstopt selected=');
}
}
if (!doing_preg) { document.body.style.cursor='pointer'; }
if (!feeling_lucky) { setInterval(blogpandtmonitor, 15000); }
amready=false;
}
}, 5000);
}
} else {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for no more now", urls[eval(-1 + tn)]);
}
}
} else {
//alert("Urls[" + eval(-1 + tn) + "]=" + urls[eval(-1 + tn)]);
huh='#nomore';
}
prefix="";
if (huh == null) {
huh='';
nomore='y';
} else {
if (huh.indexOf("#iframe") != -1) {
goodmodeofshowofurl="iframe";
} else {
goodmodeofshowofurl="";
}
if (huh.indexOf("#form") != -1 && urls[0] != '') {
location.href='./cockpit_feel.html?form=y';
return;
}
document.cookie = thisg + "=" + huh.replace("#form","") + ";expires=" + expireDate.toGMTString();
if (huh.indexOf("#nomore") != -1) {
nomore='y';
fixstuff(tn);
}
if (huh.indexOf("#form") != -1) {
location.href='./cockpit_feel.html?form=y';
}
}
}
}

… using the new HTML iframe …


<iframe id=ifbppop src='//www.rjmprogramming.com.au/About_Us.html' style='display:none;'></iframe>

Previous relevant HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial

HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial

We had occasion to revisit the Cockpit of Web Applications web application mentioned in HTML/Javascript Cockpit of Web Applications Home Tutorial the other day, and made the “note to self” …

cockpit_feel.html feeling lucky option

Over a few days we stewed on this, and today, came up with a better idea, we think, that goes …

cockpit_feel.html whole new cell content idea of blog posting dropdowns in multiple entry mode

Not as snappy as the first thought, but doable, and we think the quickest methodology to glean up to 9 URLs of Cut to the Chase web application with relationships to postings of this blog, in that on our Landing Page overnight crontab/curl processing ensures it has an up to date list of Blog Posting data in a dropdown. To be frank, that is a great basis to move on from that, because this is “most of the move” to our eyes!

And so, to get this achieved relied on changes to two code sources, they being …

  1. header.php of the TwentyTen WordPress theme used at this blog, with a new document.body onload event spawned Javascript function …
    <?php echo ”

    function oain() {
    var oind=30000, divsarrr=[], dfnd=false;
    if (document.URL.indexOf('openappin=') != -1) {
    var coind=decodeURIComponent(document.URL.split('openappin=')[1].split('&')[0].split('#')[0]).trim();
    if (coind != '') {
    if (coind.substring(0,1) >= '0' && coind.substring(0,1) <= '9') {
    oind=Math.round(eval(eval('' + coind) * 1000));
    }
    }
    divsarrr=document.getElementsByTagName('div');
    for (var idc=0; idc<divsarrr.length; idc++) {
    if (('' + divsarrr[idc].className) == 'entry-content' && !dfnd) {
    if (divsarrr[idc].innerHTML.indexOf(' href="') != -1 && !dfnd) {
    dfnd=true;
    defappurl=divsarrr[idc].innerHTML.split(' href="')[1].split('"')[0].replace(/^http\:/g,'').replace(/^https\:/g,'').replace(/^\/\//g,document.URL.split(':')[0] + '://');
    document.getElementById('content').setAttribute('data-donetsry', '' + eval(30 + Math.max(700,eval('' + document.getElementById('content').getBoundingClientRect().top))));
    document.getElementById('content').setAttribute('data-donet', '' + document.getElementById('content').title);
    document.getElementById('content').title='Scroll down to stay reading this blog posting else within ' + eval(oind / 1000) + ' seconds from ' + ('' + new Date()) + ' we will navigate to ' + defappurl.replace(/^\/\//g,document.URL.split(':')[0] + '://') + ' ...';
    document.body.style.cursor='progress';
    setInterval(function(){
    if (eval('0' + window.scrollY) > eval('' + document.getElementById('content').getAttribute('data-donetsry'))) {
    document.body.style.cursor='pointer';
    document.getElementById('content').setAttribute('data-donec', 'y');
    document.getElementById('content').title='' + document.getElementById('content').getAttribute('data-donet');
    }
    }, 1000);
    setTimeout(function(){ if (eval('0' + window.scrollY) <= eval('' + document.getElementById('content').getAttribute('data-donetsry'))) { location.href=defappurl.replace(/^http\:/g,'').replace(/^https\:/g,''); } }, oind);
    }
    }
    }
    }
    }

    “; ?>
  2. Cockpit Feel of web applications changed cockpit_feel.html …

    function checkw(iois) {
    if (iois != null) {
    var aconto = (iois.contentWindow || iois.contentDocument);
    if (aconto != null) {
    if (aconto.document) { aconto = aconto.document; }
    if (aconto.getElementById('tuts') != null) {
    document.getElementById('dopt').innerHTML='Blog Posting(s): ' + aconto.getElementById('tuts').outerHTML.replace(' onchange=', ' multiple onchange="document.getElementById(' + "'" + 'blogp' + "'" + ').value=andlater(this); " data-onchange=').replace(/\(show\ blog\,\ toggle\ sort\ order\)/g,'').replace(/\(show\ blog\,\ toggle\ sort\ order\,\ click\ for\ keyboard\ autocompletion\)/g,'').replace(/\(show\ blog\,\ toggle\ sort\ order\,\ click\ for\ autocompletion\ keyboard\)/g,'').replace(/\(toggle\ sort\ order\)/g,'') + '<br><br>';
    amready=true;
    }
    }
    }
    }

    function blogpandtmonitor() {
    var bpt=[], ib=0, jb=0;
    if (lastblogp != document.getElementById('blogp').value && document.getElementById('blogp').value != '') {
    lastblogp=document.getElementById('blogp').value;
    bpt=document.getElementById('blogp').value.split(',');
    document.getElementById('blogp').value='';
    for (ib=0; ib<bpt.length; ib++) {
    if (sofarblogp.indexOf(',' + bpt[ib] + ',') == -1) {
    for (jb=0; jb<mapping.length; jb++) {
    if (document.getElementById('td' + mapping[jb]).innerHTML.indexOf('<select ') != -1 && sofarblogp.indexOf(',' + bpt[ib] + ',') == -1) {
    sofarblogp+=bpt[ib] + ',';
    document.getElementById('td' + mapping[jb]).innerHTML='<iframe src="//www.rjmprogramming.com.au/ITblog/?p=' + bpt[ib] + '&openappin=30#content" style=width:100%;height:100%;></iframe>';
    }
    }
    }
    }
    }
    }

    … Javascript set into play via new HTML iframe as per …

    <iframe src='//www.rjmprogramming.com.au/Welcome.html' onload='checkw(this);' style='display:none;'></iframe>

… the user can make happen by a first prompt answer of Cancel …


if (('' + tn) == '1') {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for just using dropdown multiple selections or OK to blank for no more now", urls[eval(-1 + tn)]);
if (huh == null) {
cancelps=true;
nomore='y';
document.body.style.cursor='progress';
setInterval(function(){
if (amready) {
document.getElementById('dtbl').style.width='100%';
document.getElementById('dtbl').style.height='75%';
for (var ijh=0; ijh<mapping.length; ijh++) {
document.getElementById('td' + mapping[ijh]).style.width='33%';
document.getElementById('td' + mapping[ijh]).style.height='33%';
document.getElementById('td' + mapping[ijh]).innerHTML+=document.getElementById('dopt').innerHTML.replace(' multiple', ' size=9 multiple').replace(' selected=', ' id=selfirstopt selected=');
}
document.body.style.cursor='pointer';
setInterval(blogpandtmonitor, 15000);
amready=false;
}
}, 5000);
}
} else {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for no more now", urls[eval(-1 + tn)]);
}
} // rest of "as it used to be code here" follows

… separated off from an OK answer of blank (or some other non-blank answer) still accessing the old workflow methodologies. A cute feature (well, you had to be there) of this might be, for some users, that scrolling in Y at the blog posting cell within 30 seconds means a user can stay reading the blog posting instead (of navigating to the relevant Cut to the Chase web application), regarding the relevant one of 3×3 table cells.

Previous relevant HTML/Javascript Cockpit of Web Applications Home Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Home Tutorial

HTML/Javascript Cockpit of Web Applications Home Tutorial

Yesterday ticked all the boxes with our Cockpit Feel web application to suggest that it is now an excellent candidate to be the designated Home Page for a web browser, as it could be the tailorable “web application central” as you enter the web browser for the first time. The Home Page of a web browser can have that important reminder functionality for how you communicate, or do your work and/or collaborate, or perform tasks, or monitor goings-on.

Yesterday’s work meant that you can send a …

  • web browser address bar URL with an established list of web applications you want to open … and/or …
  • cut down web browser address URL ( ie. just http://www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html ) … and let the cookies you have previously set, or not, determine what happens … thing about this is that Safari could have a different set of web applications to Internet Explorer to Firefox to Opera to Google Chrome etcetera etcetera etcetera

The thing is, we often put our favourite Search Engine URL as our web browser’s Home Page, and am not suggesting otherwise, except that these days there are so many shortcut or menu methods of getting to your favourite Search Engine that maybe what is better to put as your web browser Home Page is something more tailored to your actual use, and in any case, one of those web applications could be that favourite Search Engine, anyway.

Today’s tutorial picture URL, for example, is http://www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html?url1=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FSunAngle%2Fsun_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23iframe&url2=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FMoonAngle%2Fmoon_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23nomore%23iframe&url3=&url4=&url5=&url6=&url7=&url8=&url9= … representing a look at Sun Angle and Moon Angle for Sydney, Australia … and you can see that if you pick a web application from this www.rjmprogramming.com.au domain, you can use the suffix #iframe to say that the web application should “live” in an HTML iframe element.

Previous relevant HTML/Javascript Cockpit of Web Applications Form Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Form Tutorial

HTML/Javascript Cockpit of Web Applications Form Tutorial

Today’s Cockpit Feel web application adds functionality along with yesterday’s pre-existing …

  • Javascript DOM document.write() method nesting …
  • Javascript prompt() window method

… way that asks for input from the user in that old interactive desktop command line application feeling kind of way, an …

… method, the more usual web application way of asking for user input.

Most websites present interactive input in an HTML form for a few reasons (we can think of) …

  • everything that will be asked can be there on the webpage (so that you know what is coming)
  • HTML form elements can direct the web traffic from one web page to the next via HTML input type=’submit’ buttons teamed with HTML form action=[Url] arrangements
  • validation of this user entered data can be validated at the one place (via the HTML form onsubmit event we’ve talked about before), and the HTML5 input element type has several self-validating types (like type=’url’ that we make use of today)
  • huge amounts of user entered data can make use of the HTML form method=’POST’ as necessary, though today we use method=’GET’ for the amounts of data we have and in order to remain with client side programming (method=’POST’ needs server side programming intervention)
  • uploading of files is possible via HTML form element

The concept today remains simple …

  1. take the same 3×3 grid (to the beach this time, because yesterday they enjoyed the zoo so much (they’d like you to know))
  2. check for cookie data and $_GET[] parameters for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …

… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.

Again, regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the great code regarding cookies.

The HTML and Javascript source code you could call cockpit_feel.html (changed for HTML form functionality in this way) for which you can use this live run link. If you want to simulate the tutorial picture “Cockpit” today try this link. We hope some/all/grid-maintenance information helps today.

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

Previous relevant HTML/Javascript Cockpit of Web Applications Primer Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Primer Tutorial

HTML/Javascript Cockpit of Web Applications Primer Tutorial

Today’s web application continues our interest in …

  • Javascript DOM document.write() method nesting …
  • Javascript prompt() window method

… to give that old interactive desktop command line application feel that many of the “senior citizens” (should we diplomatically say) of the web world, may still secretly gravitate towards?!

Okay … who are the closet interactive desktop command line application lovers out there? … Come on … you know who you are?!

But we digress … so today, we have a web application a bit like a dashboard, a bit like a cockpit (we’ve called it) … though the looks aren’t as good at this stage. Nevertheless, maybe it has a feel of a widget to it as well, because today we only use HTML, making use of cookies to do away with the need for a serverside language like PHP, which could have done the job as well. But not everybody has PHP? Right …

… left …

… Damn! Those pesky psychological tests!

The concept today is very simple …

  1. take a 3×3 grid (to the zoo would be nice)
  2. check for cookie data for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …

… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.

Regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the invaluable code regarding cookies, and an interesting sideline, which we ended up not perusing, but is active in your *._GETME file today, to show you what is possible comes from this useful website … thanks.

The (purely) HTML and Javascript source code you could call cockpit_feel.html for which you can use this live run link. If this helps then we’re happy.

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial

Posted on by
HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial

HTML/Javascript Cockpit of Web Applications Dropdown Cells Tutorial

We had occasion to revisit the Cockpit of Web Applications web application mentioned in HTML/Javascript Cockpit of Web Applications Home Tutorial the other day, and made the “note to self” …

cockpit_feel.html feeling lucky option

Over a few days we stewed on this, and today, came up with a better idea, we think, that goes …

cockpit_feel.html whole new cell content idea of blog posting dropdowns in multiple entry mode

Not as snappy as the first thought, but doable, and we think the quickest methodology to glean up to 9 URLs of Cut to the Chase web application with relationships to postings of this blog, in that on our Landing Page overnight crontab/curl processing ensures it has an up to date list of Blog Posting data in a dropdown. To be frank, that is a great basis to move on from that, because this is “most of the move” to our eyes!

And so, to get this achieved relied on changes to two code sources, they being …

  1. header.php of the TwentyTen WordPress theme used at this blog, with a new document.body onload event spawned Javascript function …
    <?php echo ”

    function oain() {
    var oind=30000, divsarrr=[], dfnd=false;
    if (document.URL.indexOf('openappin=') != -1) {
    var coind=decodeURIComponent(document.URL.split('openappin=')[1].split('&')[0].split('#')[0]).trim();
    if (coind != '') {
    if (coind.substring(0,1) >= '0' && coind.substring(0,1) <= '9') {
    oind=Math.round(eval(eval('' + coind) * 1000));
    }
    }
    divsarrr=document.getElementsByTagName('div');
    for (var idc=0; idc<divsarrr.length; idc++) {
    if (('' + divsarrr[idc].className) == 'entry-content' && !dfnd) {
    if (divsarrr[idc].innerHTML.indexOf(' href="') != -1 && !dfnd) {
    dfnd=true;
    defappurl=divsarrr[idc].innerHTML.split(' href="')[1].split('"')[0].replace(/^http\:/g,'').replace(/^https\:/g,'').replace(/^\/\//g,document.URL.split(':')[0] + '://');
    document.getElementById('content').setAttribute('data-donetsry', '' + eval(30 + Math.max(700,eval('' + document.getElementById('content').getBoundingClientRect().top))));
    document.getElementById('content').setAttribute('data-donet', '' + document.getElementById('content').title);
    document.getElementById('content').title='Scroll down to stay reading this blog posting else within ' + eval(oind / 1000) + ' seconds from ' + ('' + new Date()) + ' we will navigate to ' + defappurl.replace(/^\/\//g,document.URL.split(':')[0] + '://') + ' ...';
    document.body.style.cursor='progress';
    setInterval(function(){
    if (eval('0' + window.scrollY) > eval('' + document.getElementById('content').getAttribute('data-donetsry'))) {
    document.body.style.cursor='pointer';
    document.getElementById('content').setAttribute('data-donec', 'y');
    document.getElementById('content').title='' + document.getElementById('content').getAttribute('data-donet');
    }
    }, 1000);
    setTimeout(function(){ if (eval('0' + window.scrollY) <= eval('' + document.getElementById('content').getAttribute('data-donetsry'))) { location.href=defappurl.replace(/^http\:/g,'').replace(/^https\:/g,''); } }, oind);
    }
    }
    }
    }
    }

    “; ?>
  2. Cockpit Feel of web applications changed cockpit_feel.html …

    function checkw(iois) {
    if (iois != null) {
    var aconto = (iois.contentWindow || iois.contentDocument);
    if (aconto != null) {
    if (aconto.document) { aconto = aconto.document; }
    if (aconto.getElementById('tuts') != null) {
    document.getElementById('dopt').innerHTML='Blog Posting(s): ' + aconto.getElementById('tuts').outerHTML.replace(' onchange=', ' multiple onchange="document.getElementById(' + "'" + 'blogp' + "'" + ').value=andlater(this); " data-onchange=').replace(/\(show\ blog\,\ toggle\ sort\ order\)/g,'').replace(/\(show\ blog\,\ toggle\ sort\ order\,\ click\ for\ keyboard\ autocompletion\)/g,'').replace(/\(show\ blog\,\ toggle\ sort\ order\,\ click\ for\ autocompletion\ keyboard\)/g,'').replace(/\(toggle\ sort\ order\)/g,'') + '<br><br>';
    amready=true;
    }
    }
    }
    }

    function blogpandtmonitor() {
    var bpt=[], ib=0, jb=0;
    if (lastblogp != document.getElementById('blogp').value && document.getElementById('blogp').value != '') {
    lastblogp=document.getElementById('blogp').value;
    bpt=document.getElementById('blogp').value.split(',');
    document.getElementById('blogp').value='';
    for (ib=0; ib<bpt.length; ib++) {
    if (sofarblogp.indexOf(',' + bpt[ib] + ',') == -1) {
    for (jb=0; jb<mapping.length; jb++) {
    if (document.getElementById('td' + mapping[jb]).innerHTML.indexOf('<select ') != -1 && sofarblogp.indexOf(',' + bpt[ib] + ',') == -1) {
    sofarblogp+=bpt[ib] + ',';
    document.getElementById('td' + mapping[jb]).innerHTML='<iframe src="//www.rjmprogramming.com.au/ITblog/?p=' + bpt[ib] + '&openappin=30#content" style=width:100%;height:100%;></iframe>';
    }
    }
    }
    }
    }
    }

    … Javascript set into play via new HTML iframe as per …

    <iframe src='//www.rjmprogramming.com.au/Welcome.html' onload='checkw(this);' style='display:none;'></iframe>

… the user can make happen by a first prompt answer of Cancel …


if (('' + tn) == '1') {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for just using dropdown multiple selections or OK to blank for no more now", urls[eval(-1 + tn)]);
if (huh == null) {
cancelps=true;
nomore='y';
document.body.style.cursor='progress';
setInterval(function(){
if (amready) {
document.getElementById('dtbl').style.width='100%';
document.getElementById('dtbl').style.height='75%';
for (var ijh=0; ijh<mapping.length; ijh++) {
document.getElementById('td' + mapping[ijh]).style.width='33%';
document.getElementById('td' + mapping[ijh]).style.height='33%';
document.getElementById('td' + mapping[ijh]).innerHTML+=document.getElementById('dopt').innerHTML.replace(' multiple', ' size=9 multiple').replace(' selected=', ' id=selfirstopt selected=');
}
document.body.style.cursor='pointer';
setInterval(blogpandtmonitor, 15000);
amready=false;
}
}, 5000);
}
} else {
huh=prompt(prefix + "What is your URL (" + tn + " of up to 9) of interest ... append by #iframe if you want it to be tried in an iframe ... append by #nomore if you want this one to be last considered of up to 9 ... use Cancel for no more now", urls[eval(-1 + tn)]);
}
} // rest of "as it used to be code here" follows

… separated off from an OK answer of blank (or some other non-blank answer) still accessing the old workflow methodologies. A cute feature (well, you had to be there) of this might be, for some users, that scrolling in Y at the blog posting cell within 30 seconds means a user can stay reading the blog posting instead (of navigating to the relevant Cut to the Chase web application), regarding the relevant one of 3×3 table cells.

Previous relevant HTML/Javascript Cockpit of Web Applications Home Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Home Tutorial

HTML/Javascript Cockpit of Web Applications Home Tutorial

Yesterday ticked all the boxes with our Cockpit Feel web application to suggest that it is now an excellent candidate to be the designated Home Page for a web browser, as it could be the tailorable “web application central” as you enter the web browser for the first time. The Home Page of a web browser can have that important reminder functionality for how you communicate, or do your work and/or collaborate, or perform tasks, or monitor goings-on.

Yesterday’s work meant that you can send a …

  • web browser address bar URL with an established list of web applications you want to open … and/or …
  • cut down web browser address URL ( ie. just http://www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html ) … and let the cookies you have previously set, or not, determine what happens … thing about this is that Safari could have a different set of web applications to Internet Explorer to Firefox to Opera to Google Chrome etcetera etcetera etcetera

The thing is, we often put our favourite Search Engine URL as our web browser’s Home Page, and am not suggesting otherwise, except that these days there are so many shortcut or menu methods of getting to your favourite Search Engine that maybe what is better to put as your web browser Home Page is something more tailored to your actual use, and in any case, one of those web applications could be that favourite Search Engine, anyway.

Today’s tutorial picture URL, for example, is http://www.rjmprogramming.com.au/HTMLCSS/cockpit_feel.html?url1=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FSunAngle%2Fsun_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23iframe&url2=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FMoonAngle%2Fmoon_angle_now_at.php%3Fdone%3Dy%26nowo%3Dy%26latd%3D-33%26latm%3D52%26lats%3D0%26longd%3D151%26longm%3D12%26longs%3D0%26from%3Dfrom%26country%3DAUSTRALIA%26place%3DSydney%23nomore%23iframe&url3=&url4=&url5=&url6=&url7=&url8=&url9= … representing a look at Sun Angle and Moon Angle for Sydney, Australia … and you can see that if you pick a web application from this www.rjmprogramming.com.au domain, you can use the suffix #iframe to say that the web application should “live” in an HTML iframe element.

Previous relevant HTML/Javascript Cockpit of Web Applications Form Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Form Tutorial

HTML/Javascript Cockpit of Web Applications Form Tutorial

Today’s Cockpit Feel web application adds functionality along with yesterday’s pre-existing …

  • Javascript DOM document.write() method nesting …
  • Javascript prompt() window method

… way that asks for input from the user in that old interactive desktop command line application feeling kind of way, an …

… method, the more usual web application way of asking for user input.

Most websites present interactive input in an HTML form for a few reasons (we can think of) …

  • everything that will be asked can be there on the webpage (so that you know what is coming)
  • HTML form elements can direct the web traffic from one web page to the next via HTML input type=’submit’ buttons teamed with HTML form action=[Url] arrangements
  • validation of this user entered data can be validated at the one place (via the HTML form onsubmit event we’ve talked about before), and the HTML5 input element type has several self-validating types (like type=’url’ that we make use of today)
  • huge amounts of user entered data can make use of the HTML form method=’POST’ as necessary, though today we use method=’GET’ for the amounts of data we have and in order to remain with client side programming (method=’POST’ needs server side programming intervention)
  • uploading of files is possible via HTML form element

The concept today remains simple …

  1. take the same 3×3 grid (to the beach this time, because yesterday they enjoyed the zoo so much (they’d like you to know))
  2. check for cookie data and $_GET[] parameters for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …

… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.

Again, regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the great code regarding cookies.

The HTML and Javascript source code you could call cockpit_feel.html (changed for HTML form functionality in this way) for which you can use this live run link. If you want to simulate the tutorial picture “Cockpit” today try this link. We hope some/all/grid-maintenance information helps today.

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

Previous relevant HTML/Javascript Cockpit of Web Applications Primer Tutorial is shown below.

HTML/Javascript Cockpit of Web Applications Primer Tutorial

HTML/Javascript Cockpit of Web Applications Primer Tutorial

Today’s web application continues our interest in …

  • Javascript DOM document.write() method nesting …
  • Javascript prompt() window method

… to give that old interactive desktop command line application feel that many of the “senior citizens” (should we diplomatically say) of the web world, may still secretly gravitate towards?!

Okay … who are the closet interactive desktop command line application lovers out there? … Come on … you know who you are?!

But we digress … so today, we have a web application a bit like a dashboard, a bit like a cockpit (we’ve called it) … though the looks aren’t as good at this stage. Nevertheless, maybe it has a feel of a widget to it as well, because today we only use HTML, making use of cookies to do away with the need for a serverside language like PHP, which could have done the job as well. But not everybody has PHP? Right …

… left …

… Damn! Those pesky psychological tests!

The concept today is very simple …

  1. take a 3×3 grid (to the zoo would be nice)
  2. check for cookie data for any/all of the 3×3 and if found get (up to 9) URLs from this data, else document.write(prompt()) for the information interactively, storing good ideas in cookies for either of the two modes of display … that being …

… so that the next time the user runs the same web application, and they have not cleared their cookies out in the meantime, this same configuration of use, personalized to them and the web browser they’re using, will happen.

Regarding research and development we’d like to thank “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith for the invaluable code regarding cookies, and an interesting sideline, which we ended up not perusing, but is active in your *._GETME file today, to show you what is possible comes from this useful website … thanks.

The (purely) HTML and Javascript source code you could call cockpit_feel.html for which you can use this live run link. If this helps then we’re happy.

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Search Title and Posting Date Expressions Tutorial

Posted on by
WordPress Blog Search Title and Posting Date Checkbox Tutorial

WordPress Blog Search Title and Posting Date Expressions Tutorial

If you think of one of those “Post RE” user entries from yesterday’s WordPress Blog Search Title and Posting Date Checkbox Tutorial as an “expression” then an and/or dictionary explanation …

used as a function word to indicate that two words or expressions are to be taken together or individually

… fits in with what we are doing today to extend yesterday’s logic with ways to join “expressions” in an “and” way or “or” way.

Supposing you were to enter the “or” logic using …


Circle||Square

… then, as of today, a dropdown like would be presented to you.

Supposing you were to enter the “and” logic using …


Circle&&Mathematics

… then, as of today, a dropdown like would be presented to you.

It’s still PHP that mainly changes for this via the changed mapper.php Posting Search “Post RE” filterer web application, with rearranged …

<?php

function ourexplode($needle, $haystack) {
$backsome=-3;
$bckbit='';
$forbit='';
$isordinal=false;
$intrm=explode($needle, $haystack)[0];
if ($intrm != $haystack) {
if (strlen($intrm) >= 4) {
if (strtolower(substr($intrm,($backsome - 1),4)) == ' of ') {
if (strtolower(substr($intrm,($backsome - 2),5)) >= '0 of ' && strtolower(substr($intrm,($backsome - 2),5)) <= '9 of ') {
$isordinal=true;
$bckbit=' ';
} else {
$forbit=substr($intrm,$backsome,3);
$backsome-=3;
}
}
if (substr($intrm,($backsome - 1),1) >= '0' && substr($intrm,($backsome - 1),1) <= '9') {
if (substr($intrm,-1,1) == ' ') {
switch (strtolower(substr($intrm,$backsome,2))) {
case 'st':
case 'nd':
case 'rd':
case 'th':
$isordinal=true;
break;

default:
break;
}
}
}
}
}
if ($isordinal) {
//return str_replace($bckbit . substr($intrm,$backsome,3) . $forbit, ' ', str_replace($bckbit . substr($intrm,$backsome,3) . $forbit . $needle . ',', substr($intrm,$backsome,3) . $needle . ' ', str_replace($bckbit . substr($intrm,$backsome,3) . $forbit . $needle . ', ', substr($intrm,$backsome,3) . $needle . ' ', $haystack)));
return str_replace($bckbit . substr($intrm,$backsome,3) . $forbit, ' ', str_replace($bckbit . substr($intrm,$backsome,3) . $forbit . $needle . ',', ' ' . $needle . ' ', str_replace($bckbit . substr($intrm,$backsome,3) . $forbit . $needle . ', ', ' ' . $needle . ' ', $haystack)));
}
return $haystack;
}

function someof($sbits, $viapm) {
global $onclick;
$origviapm=$viapm;
$orthere=false;
$andthere=false;
$ors=[];
$ands=[];
$orands=[];
$previa='';
$obits="";
$befvia='';
$obits=str_replace('></option>','></OPTION>',$sbits);
$zobits=explode("</option>",$obits);
if (sizeof($zobits) > 1) {
$obits=str_replace("Tutorials (show blog, toggle sort order) ...","Tutorials about " . $viapm . " (or ask about another topic)",$zobits[0]) . "</option>";
$andors=explode('&&',str_replace('||', '&&', $viapm));
for ($ii=0; $ii<sizeof($andors); $ii++) {
$previa='';
if ($ii > 0) {
if (strpos($origviapm, '&&' . $andors[$ii]) !== false) {
array_push($ands, $orands[-1 + $ii]);
$andthere=true;
} else if (strpos($origviapm, '||' . $andors[$ii]) !== false) {
array_push($ors, $orands[-1 + $ii]);
$orthere=true;
}
}
if (sizeof($andors) > 1) {
$viapm=trim($andors[$ii]);
} else {
$viapm=$andors[$ii];
}
if ($viapm != "") {
if (strpos(strtolower(' ' . $viapm . ' '), 'january') !== false) {
$viapm=str_replace('January','01', str_replace('january','01', str_replace('JANUARY','01', $viapm)));
$viapm=ourexplode('01', $viapm);
if (substr($viapm,0,2) == '01') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'jan ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan,') !== false) {
$viapm=str_replace('Jan','01', str_replace('jan','01', str_replace('JAN','01', $viapm)));
$viapm=ourexplode('01', $viapm);
if (substr($viapm,0,2) == '01') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'february') !== false) {
$viapm=str_replace('February','02', str_replace('february','02', str_replace('FEBRUARY','02', $viapm)));
$viapm=ourexplode('02', $viapm);
if (substr($viapm,0,2) == '02') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'feb ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb,') !== false) {
$viapm=str_replace('Feb','02', str_replace('feb','02', str_replace('FEB','02', $viapm)));
$viapm=ourexplode('02', $viapm);
if (substr($viapm,0,2) == '02') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'march') !== false) {
$viapm=str_replace('March','03', str_replace('march','03', str_replace('MARCH','03', $viapm)));
$viapm=ourexplode('03', $viapm);
if (substr($viapm,0,2) == '03') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' mar ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar,') !== false) {
$viapm=str_replace('Mar','03', str_replace('mar','03', str_replace('MAR','03', $viapm)));
$viapm=ourexplode('03', $viapm);
if (substr($viapm,0,2) == '03') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'april') !== false) {
$viapm=str_replace('April','04', str_replace('april','04', str_replace('APRIL','04', $viapm)));
$viapm=ourexplode('04', $viapm);
if (substr($viapm,0,2) == '04') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' apr ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr,') !== false) {
$viapm=str_replace('Apr','04', str_replace('apr','04', str_replace('APR','04', $viapm)));
$viapm=ourexplode('04', $viapm);
if (substr($viapm,0,2) == '04') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'may') !== false) {
$viapm=str_replace('May','05', str_replace('may','05', str_replace('MAY','05', $viapm)));
$viapm=ourexplode('05', $viapm);
if (substr($viapm,0,2) == '05') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' may ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may,') !== false) {
$viapm=str_replace('May','05', str_replace('may','05', str_replace('MAY','05', $viapm)));
$viapm=ourexplode('05', $viapm);
if (substr($viapm,0,2) == '05') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'june') !== false) {
$viapm=str_replace('June','06', str_replace('june','06', str_replace('JUNE','06', $viapm)));
$viapm=ourexplode('06', $viapm);
if (substr($viapm,0,2) == '06') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' jun ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun,') !== false) {
$viapm=str_replace('Jun','06', str_replace('jun','06', str_replace('JUN','06', $viapm)));
$viapm=ourexplode('06', $viapm);
if (substr($viapm,0,2) == '06') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'july') !== false) {
$viapm=str_replace('July','07', str_replace('july','07', str_replace('JULY','07', $viapm)));
$viapm=ourexplode('07', $viapm);
if (substr($viapm,0,2) == '07') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' jul ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul,') !== false) {
$viapm=str_replace('Jul','07', str_replace('jul','07', str_replace('JUL','07', $viapm)));
$viapm=ourexplode('07', $viapm);
if (substr($viapm,0,2) == '07') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'august') !== false) {
$viapm=str_replace('August','08', str_replace('august','08', str_replace('AUGUST','08', $viapm)));
$viapm=ourexplode('08', $viapm);
if (substr($viapm,0,2) == '08') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' aug ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug,') !== false) {
$viapm=str_replace('Aug','08', str_replace('aug','08', str_replace('AUG','08', $viapm)));
$viapm=ourexplode('08', $viapm);
if (substr($viapm,0,2) == '08') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'september') !== false) {
$viapm=str_replace('September','09', str_replace('september','09', str_replace('SEPTEMBER','09', $viapm)));
$viapm=ourexplode('09', $viapm);
if (substr($viapm,0,2) == '09') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' sep ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep,') !== false) {
$viapm=str_replace('Sep','09', str_replace('sep','09', str_replace('SEP','09', $viapm)));
$viapm=ourexplode('09', $viapm);
if (substr($viapm,0,2) == '09') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'october') !== false) {
$viapm=str_replace('October','10', str_replace('october','10', str_replace('OCTOBER','10', $viapm)));
$viapm=ourexplode('10', $viapm);
if (substr($viapm,0,2) == '10') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' oct ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct,') !== false) {
$viapm=str_replace('Oct','10', str_replace('oct','10', str_replace('OCT','10', $viapm)));
$viapm=ourexplode('10', $viapm);
if (substr($viapm,0,2) == '10') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'november') !== false) {
$viapm=str_replace('November','11', str_replace('november','11', str_replace('NOVEMBER','11', $viapm)));
$viapm=ourexplode('11', $viapm);
if (substr($viapm,0,2) == '11') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' nov ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov,') !== false) {
$viapm=str_replace('Nov','11', str_replace('nov','11', str_replace('NOV','11', $viapm)));
$viapm=ourexplode('11', $viapm);
if (substr($viapm,0,2) == '11') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'december') !== false) {
$viapm=str_replace('December','12', str_replace('december','12', str_replace('DECEMBER','12', $viapm)));
$viapm=ourexplode('12', $viapm);
if (substr($viapm,0,2) == '12') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' dec ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec,') !== false) {
$viapm=str_replace('Dec','12', str_replace('dec','12', str_replace('DEC','12', $viapm)));
$viapm=ourexplode('12', $viapm);
if (substr($viapm,0,2) == '12') { $previa="([0-9]{4})"; }
}

if (preg_match('/([0-9]{4})/i', $viapm)) {
if (!preg_match('/\(([0-9]{4})/i', $viapm)) {
if (preg_match('/^([0-9]{4})/i', $viapm)) {
$previa="\\(";
}
}
if (preg_match('/([0-9]{1})\/([0-9]{2})\/([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\/([0-9]{1})\/([0-9]{4})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '/' . $dnums[1] . '/' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '/' . $dnums[1] . '/' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\-([0-9]{2})\-([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\-([0-9]{1})\-([0-9]{4})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '-' . $dnums[1] . '-' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '-' . $dnums[1] . '-' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\ ([0-9]{2})\ ([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\ ([0-9]{1})\ ([0-9]{4})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1] . ' ' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1] . ' ' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{2})\/([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\/([0-9]{4})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . '/' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else if (preg_match('/([0-9]{2})\-([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\-([0-9]{4})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . '-' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else if (preg_match('/([0-9]{2})\ ([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\ ([0-9]{4})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . ' ' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\/([0-9]{1})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '/' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '/' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\-([0-9]{1})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '-' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '-' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\ ([0-9]{1})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
}
array_push($orands, $previa . $viapm);
}
for ($j=1; $j<sizeof($zobits); $j++) {
$title=explode(">",$zobits[$j])[-1 + sizeof(explode(">",$zobits[$j]))];
//if (eregi($viapm, $title)) {
$worryaboutlast=true;
$worryless=false;
if ($andthere) {
for ($ijk=0; $ijk<sizeof($ands); $ijk++) {
if (!preg_match('/' . $ands[$ijk] . '/i', $title)) {
$worryaboutlast=false;
}
}
}
if ($orthere) {
for ($ijk=0; $ijk<sizeof($ors); $ijk++) {
if (preg_match('/' . $ors[$ijk] . '/i', $title)) {
$worryless=true;
}
}
}
if (($worryless || preg_match('/' . $previa . $viapm . '/i', $title)) && $worryaboutlast) {
$onclick=" onchange=";
$obits.=str_replace('65.254.93.32','www.rjmprogramming.com.au',str_replace('65.254.95.247','www.rjmprogramming.com.au',"\n<option " . str_replace("_blank","myi",str_replace("windowopen","window.open",explode("<option ", $zobits[$j])[-1 + sizeof(explode("<option ", $zobits[$j]))]))) . "</option>");
}
}
}
}
return $obits;
}

?>

Previous relevant WordPress Blog Search Title and Posting Date Checkbox Tutorial is shown below.

WordPress Blog Search Title and Posting Date Checkbox Tutorial

WordPress Blog Search Title and Posting Date Checkbox Tutorial

We’re back at this WordPress Blog’s Search textbox inhouse checkbox tailoring functionality today. All the user will initially see is that one checkbox that used to be labelled “Title RE” is now labelled “Post RE” because …

  • as well as the blog posting Title (optional Regular Expression means of filtering) … as of today, also, we now offer …
  • new functionality for blog posting Date of Publication filtering … examples of use being …
    1. 3/2015
    2. 23rd October,2016
    3. 23/10/2016
    4. 10/23/2016 … but this one only works because 23 is greater than 12 … we’d prefer dd/mm/yyyy user entries really
    5. 20161023

It’s PHP that mainly changes for this via the changed mapper.php Posting Search “Post RE” filterer web application, with new …

<?php

function ourexplode($needle, $haystack) {
$isordinal=false;
$intrm=explode($needle, $haystack)[0];
if ($intrm != $haystack) {
if (strlen($intrm) >= 4) {
if (substr($intrm,-4,1) >= '0' && substr($intrm,-4,1) <= '9') {
if (substr($intrm,-1,1) == ' ') {
switch (strtolower(substr($intrm,-3,2))) {
case 'st':
case 'nd':
case 'rd':
case 'th':
$isordinal=true;
break;

default:
break;
}
}
}
}
}
if ($isordinal) {
return str_replace(substr($intrm,-3,3), ' ', str_replace(substr($intrm,-3,3) . $needle . ',', substr($intrm,-3,3) . $needle . ' ', $haystack));
}
return $haystack;
}

function someof($sbits, $viapm) {
global $onclick;
$previa='';
$obits="";
$befvia='';
$obits=str_replace('></option>','></OPTION>',$sbits);
$zobits=explode("</option>",$obits);
if (sizeof($zobits) > 1) {
$obits=str_replace("Tutorials (show blog, toggle sort order) ...","Tutorials about " . $viapm . " (or ask about another topic)",$zobits[0]) . "</option>";
if ($viapm != "") {
if (strpos(strtolower(' ' . $viapm . ' '), 'january') !== false) {
$viapm=str_replace('January','01', str_replace('january','01', str_replace('JANUARY','01', $viapm)));
$viapm=ourexplode('01', $viapm);
if (substr($viapm,0,2) == '01') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'jan ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan,') !== false) {
$viapm=str_replace('Jan','01', str_replace('jan','01', str_replace('JAN','01', $viapm)));
$viapm=ourexplode('01', $viapm);
if (substr($viapm,0,2) == '01') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'february') !== false) {
$viapm=str_replace('February','02', str_replace('february','02', str_replace('FEBRUARY','02', $viapm)));
$viapm=ourexplode('02', $viapm);
if (substr($viapm,0,2) == '02') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'feb ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb,') !== false) {
$viapm=str_replace('Feb','02', str_replace('feb','02', str_replace('FEB','02', $viapm)));
$viapm=ourexplode('02', $viapm);
if (substr($viapm,0,2) == '02') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'march') !== false) {
$viapm=str_replace('March','03', str_replace('march','03', str_replace('MARCH','03', $viapm)));
$viapm=ourexplode('03', $viapm);
if (substr($viapm,0,2) == '03') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' mar ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar,') !== false) {
$viapm=str_replace('Mar','03', str_replace('mar','03', str_replace('MAR','03', $viapm)));
$viapm=ourexplode('03', $viapm);
if (substr($viapm,0,2) == '03') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'april') !== false) {
$viapm=str_replace('April','04', str_replace('april','04', str_replace('APRIL','04', $viapm)));
$viapm=ourexplode('04', $viapm);
if (substr($viapm,0,2) == '04') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' apr ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr,') !== false) {
$viapm=str_replace('Apr','04', str_replace('apr','04', str_replace('APR','04', $viapm)));
$viapm=ourexplode('04', $viapm);
if (substr($viapm,0,2) == '04') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'may') !== false) {
$viapm=str_replace('May','05', str_replace('may','05', str_replace('MAY','05', $viapm)));
$viapm=ourexplode('05', $viapm);
if (substr($viapm,0,2) == '05') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' may ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may,') !== false) {
$viapm=str_replace('May','05', str_replace('may','05', str_replace('MAY','05', $viapm)));
$viapm=ourexplode('05', $viapm);
if (substr($viapm,0,2) == '05') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'june') !== false) {
$viapm=str_replace('June','06', str_replace('june','06', str_replace('JUNE','06', $viapm)));
$viapm=ourexplode('06', $viapm);
if (substr($viapm,0,2) == '06') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' jun ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun,') !== false) {
$viapm=str_replace('Jun','06', str_replace('jun','06', str_replace('JUN','06', $viapm)));
$viapm=ourexplode('06', $viapm);
if (substr($viapm,0,2) == '06') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'july') !== false) {
$viapm=str_replace('July','07', str_replace('july','07', str_replace('JULY','07', $viapm)));
$viapm=ourexplode('07', $viapm);
if (substr($viapm,0,2) == '07') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' jul ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul,') !== false) {
$viapm=str_replace('Jul','07', str_replace('jul','07', str_replace('JUL','07', $viapm)));
$viapm=ourexplode('07', $viapm);
if (substr($viapm,0,2) == '07') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'august') !== false) {
$viapm=str_replace('August','08', str_replace('august','08', str_replace('AUGUST','08', $viapm)));
$viapm=ourexplode('08', $viapm);
if (substr($viapm,0,2) == '08') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' aug ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug,') !== false) {
$viapm=str_replace('Aug','08', str_replace('aug','08', str_replace('AUG','08', $viapm)));
$viapm=ourexplode('08', $viapm);
if (substr($viapm,0,2) == '08') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'september') !== false) {
$viapm=str_replace('September','09', str_replace('september','09', str_replace('SEPTEMBER','09', $viapm)));
$viapm=ourexplode('09', $viapm);
if (substr($viapm,0,2) == '09') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' sep ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep,') !== false) {
$viapm=str_replace('Sep','09', str_replace('sep','09', str_replace('SEP','09', $viapm)));
$viapm=ourexplode('09', $viapm);
if (substr($viapm,0,2) == '09') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'october') !== false) {
$viapm=str_replace('October','10', str_replace('october','10', str_replace('OCTOBER','10', $viapm)));
$viapm=ourexplode('10', $viapm);
if (substr($viapm,0,2) == '10') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' oct ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct,') !== false) {
$viapm=str_replace('Oct','10', str_replace('oct','10', str_replace('OCT','10', $viapm)));
$viapm=ourexplode('10', $viapm);
if (substr($viapm,0,2) == '10') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'november') !== false) {
$viapm=str_replace('November','11', str_replace('november','11', str_replace('NOVEMBER','11', $viapm)));
$viapm=ourexplode('11', $viapm);
if (substr($viapm,0,2) == '11') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' nov ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov,') !== false) {
$viapm=str_replace('Nov','11', str_replace('nov','11', str_replace('NOV','11', $viapm)));
$viapm=ourexplode('11', $viapm);
if (substr($viapm,0,2) == '11') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'december') !== false) {
$viapm=str_replace('December','12', str_replace('december','12', str_replace('DECEMBER','12', $viapm)));
$viapm=ourexplode('12', $viapm);
if (substr($viapm,0,2) == '12') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' dec ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec,') !== false) {
$viapm=str_replace('Dec','12', str_replace('dec','12', str_replace('DEC','12', $viapm)));
$viapm=ourexplode('12', $viapm);
if (substr($viapm,0,2) == '12') { $previa="([0-9]{4})"; }
}

if (preg_match('/([0-9]{4})/i', $viapm)) {
if (!preg_match('/\(([0-9]{4})/i', $viapm)) {
if (preg_match('/^([0-9]{4})/i', $viapm)) {
$previa="\\(";
}
}
if (preg_match('/([0-9]{1})\/([0-9]{2})\/([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\/([0-9]{1})\/([0-9]{4})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '/' . $dnums[1] . '/' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '/' . $dnums[1] . '/' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\-([0-9]{2})\-([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\-([0-9]{1})\-([0-9]{4})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '-' . $dnums[1] . '-' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '-' . $dnums[1] . '-' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\ ([0-9]{2})\ ([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\ ([0-9]{1})\ ([0-9]{4})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1] . ' ' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1] . ' ' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{2})\/([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\/([0-9]{4})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . '/' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else if (preg_match('/([0-9]{2})\-([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\-([0-9]{4})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . '-' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else if (preg_match('/([0-9]{2})\ ([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\ ([0-9]{4})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . ' ' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\/([0-9]{1})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '/' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '/' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\-([0-9]{1})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '-' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '-' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\ ([0-9]{1})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
}
for ($j=1; $j<sizeof($zobits); $j++) {
$title=explode(">",$zobits[$j])[-1 + sizeof(explode(">",$zobits[$j]))];
//if (eregi($viapm, $title)) {
if (preg_match('/' . $previa . $viapm . '/i', $title)) {
$onclick=" onchange=";
$obits.=str_replace('65.254.93.32','www.rjmprogramming.com.au',str_replace('65.254.95.247','www.rjmprogramming.com.au',"\n<option " . str_replace("_blank","myi",str_replace("windowopen","window.open",explode("<option ", $zobits[$j])[-1 + sizeof(explode("<option ", $zobits[$j]))]))) . "</option>");
}
}
}
}
return $obits;
}

?>

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

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

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

WordPress Blog Search Title and Posting Date Checkbox Tutorial

Posted on by
WordPress Blog Search Title and Posting Date Checkbox Tutorial

WordPress Blog Search Title and Posting Date Checkbox Tutorial

We’re back at this WordPress Blog’s Search textbox inhouse checkbox tailoring functionality today. All the user will initially see is that one checkbox that used to be labelled “Title RE” is now labelled “Post RE” because …

  • as well as the blog posting Title (optional Regular Expression means of filtering) … as of today, also, we now offer …
  • new functionality for blog posting Date of Publication filtering … examples of use being …
    1. 3/2015
    2. 23rd October,2016
    3. 23/10/2016
    4. 10/23/2016 … but this one only works because 23 is greater than 12 … we’d prefer dd/mm/yyyy user entries really
    5. 20161023

It’s PHP that mainly changes for this via the changed mapper.php Posting Search “Post RE” filterer web application, with new …

<?php

function ourexplode($needle, $haystack) {
$isordinal=false;
$intrm=explode($needle, $haystack)[0];
if ($intrm != $haystack) {
if (strlen($intrm) >= 4) {
if (substr($intrm,-4,1) >= '0' && substr($intrm,-4,1) <= '9') {
if (substr($intrm,-1,1) == ' ') {
switch (strtolower(substr($intrm,-3,2))) {
case 'st':
case 'nd':
case 'rd':
case 'th':
$isordinal=true;
break;

default:
break;
}
}
}
}
}
if ($isordinal) {
return str_replace(substr($intrm,-3,3), ' ', str_replace(substr($intrm,-3,3) . $needle . ',', substr($intrm,-3,3) . $needle . ' ', $haystack));
}
return $haystack;
}

function someof($sbits, $viapm) {
global $onclick;
$previa='';
$obits="";
$befvia='';
$obits=str_replace('></option>','></OPTION>',$sbits);
$zobits=explode("</option>",$obits);
if (sizeof($zobits) > 1) {
$obits=str_replace("Tutorials (show blog, toggle sort order) ...","Tutorials about " . $viapm . " (or ask about another topic)",$zobits[0]) . "</option>";
if ($viapm != "") {
if (strpos(strtolower(' ' . $viapm . ' '), 'january') !== false) {
$viapm=str_replace('January','01', str_replace('january','01', str_replace('JANUARY','01', $viapm)));
$viapm=ourexplode('01', $viapm);
if (substr($viapm,0,2) == '01') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'jan ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jan,') !== false) {
$viapm=str_replace('Jan','01', str_replace('jan','01', str_replace('JAN','01', $viapm)));
$viapm=ourexplode('01', $viapm);
if (substr($viapm,0,2) == '01') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'february') !== false) {
$viapm=str_replace('February','02', str_replace('february','02', str_replace('FEBRUARY','02', $viapm)));
$viapm=ourexplode('02', $viapm);
if (substr($viapm,0,2) == '02') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'feb ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'feb,') !== false) {
$viapm=str_replace('Feb','02', str_replace('feb','02', str_replace('FEB','02', $viapm)));
$viapm=ourexplode('02', $viapm);
if (substr($viapm,0,2) == '02') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'march') !== false) {
$viapm=str_replace('March','03', str_replace('march','03', str_replace('MARCH','03', $viapm)));
$viapm=ourexplode('03', $viapm);
if (substr($viapm,0,2) == '03') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' mar ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'mar,') !== false) {
$viapm=str_replace('Mar','03', str_replace('mar','03', str_replace('MAR','03', $viapm)));
$viapm=ourexplode('03', $viapm);
if (substr($viapm,0,2) == '03') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'april') !== false) {
$viapm=str_replace('April','04', str_replace('april','04', str_replace('APRIL','04', $viapm)));
$viapm=ourexplode('04', $viapm);
if (substr($viapm,0,2) == '04') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' apr ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'apr,') !== false) {
$viapm=str_replace('Apr','04', str_replace('apr','04', str_replace('APR','04', $viapm)));
$viapm=ourexplode('04', $viapm);
if (substr($viapm,0,2) == '04') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'may') !== false) {
$viapm=str_replace('May','05', str_replace('may','05', str_replace('MAY','05', $viapm)));
$viapm=ourexplode('05', $viapm);
if (substr($viapm,0,2) == '05') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' may ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'may,') !== false) {
$viapm=str_replace('May','05', str_replace('may','05', str_replace('MAY','05', $viapm)));
$viapm=ourexplode('05', $viapm);
if (substr($viapm,0,2) == '05') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'june') !== false) {
$viapm=str_replace('June','06', str_replace('june','06', str_replace('JUNE','06', $viapm)));
$viapm=ourexplode('06', $viapm);
if (substr($viapm,0,2) == '06') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' jun ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jun,') !== false) {
$viapm=str_replace('Jun','06', str_replace('jun','06', str_replace('JUN','06', $viapm)));
$viapm=ourexplode('06', $viapm);
if (substr($viapm,0,2) == '06') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'july') !== false) {
$viapm=str_replace('July','07', str_replace('july','07', str_replace('JULY','07', $viapm)));
$viapm=ourexplode('07', $viapm);
if (substr($viapm,0,2) == '07') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' jul ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'jul,') !== false) {
$viapm=str_replace('Jul','07', str_replace('jul','07', str_replace('JUL','07', $viapm)));
$viapm=ourexplode('07', $viapm);
if (substr($viapm,0,2) == '07') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'august') !== false) {
$viapm=str_replace('August','08', str_replace('august','08', str_replace('AUGUST','08', $viapm)));
$viapm=ourexplode('08', $viapm);
if (substr($viapm,0,2) == '08') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' aug ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'aug,') !== false) {
$viapm=str_replace('Aug','08', str_replace('aug','08', str_replace('AUG','08', $viapm)));
$viapm=ourexplode('08', $viapm);
if (substr($viapm,0,2) == '08') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'september') !== false) {
$viapm=str_replace('September','09', str_replace('september','09', str_replace('SEPTEMBER','09', $viapm)));
$viapm=ourexplode('09', $viapm);
if (substr($viapm,0,2) == '09') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' sep ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'sep,') !== false) {
$viapm=str_replace('Sep','09', str_replace('sep','09', str_replace('SEP','09', $viapm)));
$viapm=ourexplode('09', $viapm);
if (substr($viapm,0,2) == '09') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'october') !== false) {
$viapm=str_replace('October','10', str_replace('october','10', str_replace('OCTOBER','10', $viapm)));
$viapm=ourexplode('10', $viapm);
if (substr($viapm,0,2) == '10') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' oct ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'oct,') !== false) {
$viapm=str_replace('Oct','10', str_replace('oct','10', str_replace('OCT','10', $viapm)));
$viapm=ourexplode('10', $viapm);
if (substr($viapm,0,2) == '10') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'november') !== false) {
$viapm=str_replace('November','11', str_replace('november','11', str_replace('NOVEMBER','11', $viapm)));
$viapm=ourexplode('11', $viapm);
if (substr($viapm,0,2) == '11') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' nov ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'nov,') !== false) {
$viapm=str_replace('Nov','11', str_replace('nov','11', str_replace('NOV','11', $viapm)));
$viapm=ourexplode('11', $viapm);
if (substr($viapm,0,2) == '11') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), 'december') !== false) {
$viapm=str_replace('December','12', str_replace('december','12', str_replace('DECEMBER','12', $viapm)));
$viapm=ourexplode('12', $viapm);
if (substr($viapm,0,2) == '12') { $previa="\\(([0-9]{4})"; }
} else if (strpos(strtolower(' ' . $viapm . ' '), ' dec ') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec/') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec-') !== false || strpos(strtolower(' ' . $viapm . ' '), 'dec,') !== false) {
$viapm=str_replace('Dec','12', str_replace('dec','12', str_replace('DEC','12', $viapm)));
$viapm=ourexplode('12', $viapm);
if (substr($viapm,0,2) == '12') { $previa="([0-9]{4})"; }
}

if (preg_match('/([0-9]{4})/i', $viapm)) {
if (!preg_match('/\(([0-9]{4})/i', $viapm)) {
if (preg_match('/^([0-9]{4})/i', $viapm)) {
$previa="\\(";
}
}
if (preg_match('/([0-9]{1})\/([0-9]{2})\/([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\/([0-9]{1})\/([0-9]{4})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '/' . $dnums[1] . '/' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '/' . $dnums[1] . '/' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\-([0-9]{2})\-([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\-([0-9]{1})\-([0-9]{4})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '-' . $dnums[1] . '-' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '-' . $dnums[1] . '-' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\ ([0-9]{2})\ ([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\ ([0-9]{1})\ ([0-9]{4})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[2]=explode(' ', $dnums[2])[0];
$dnums[2]=explode(',', $dnums[2])[0];
if (substr(('0' . $dnums[1]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1] . ' ' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1] . ' ' . substr($dnums[2],0,4), substr($dnums[2],0,4) . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{2})\/([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\/([0-9]{4})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . '/' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else if (preg_match('/([0-9]{2})\-([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\-([0-9]{4})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . '-' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else if (preg_match('/([0-9]{2})\ ([0-9]{4})/i', $viapm) || preg_match('/([0-9]{1})\ ([0-9]{4})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
$viapm=str_replace($dnums[0] . ' ' . substr($dnums[1],0,4), substr($dnums[1],0,4) . substr(('0' . $dnums[0]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\/([0-9]{1})/i', $viapm)) {
$dnums=explode('/', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '/' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '/' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\-([0-9]{1})/i', $viapm)) {
$dnums=explode('-', $viapm);
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . '-' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . '-' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
} else if (preg_match('/([0-9]{1})\ ([0-9]{1})/i', $viapm)) {
$thiszero=-1;
for ($ik=0; $ik<strlen($viapm); $ik++) {
if ($thiszero < 0) {
if (substr(substr($viapm, $ik),0,1) >= '0' && substr(substr($viapm, $ik),0,1) <= '9') {
$thiszero=$ik;
}
}
}
$dnums=explode(' ', substr($viapm, max($thiszero,0)));
$dnums[0]=explode(',', $dnums[0])[-1 + sizeof(explode(',', $dnums[0]))];
$dnums[0]=explode(' ', $dnums[0])[-1 + sizeof(explode(' ', $dnums[0]))];
$dnums[1]=explode(' ', $dnums[1])[0];
$dnums[1]=explode(',', $dnums[1])[0];
if (substr(('0' . $dnums[0]),-2,2) > '12') {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[1]),-2,2) . substr(('0' . $dnums[0]),-2,2), $viapm);
} else {
$viapm=str_replace($dnums[0] . ' ' . $dnums[1], '([0-9]{4})' . substr(('0' . $dnums[0]),-2,2) . substr(('0' . $dnums[1]),-2,2), $viapm);
}
}
for ($j=1; $j<sizeof($zobits); $j++) {
$title=explode(">",$zobits[$j])[-1 + sizeof(explode(">",$zobits[$j]))];
//if (eregi($viapm, $title)) {
if (preg_match('/' . $previa . $viapm . '/i', $title)) {
$onclick=" onchange=";
$obits.=str_replace('65.254.93.32','www.rjmprogramming.com.au',str_replace('65.254.95.247','www.rjmprogramming.com.au',"\n<option " . str_replace("_blank","myi",str_replace("windowopen","window.open",explode("<option ", $zobits[$j])[-1 + sizeof(explode("<option ", $zobits[$j]))]))) . "</option>");
}
}
}
}
return $obits;
}

?>

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

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , | Leave a comment

Diagonal Element Rubber Banding Mobile Tutorial

Posted on by
Diagonal Element Rubber Banding Mobile Tutorial

Diagonal Element Rubber Banding Mobile Tutorial

Yesterday’s Diagonal Element Rubber Banding Tutorial saw “Rubber Banding” introduced, better for non-mobile, but today …

  • we shore up mobile “Rubber Banding” via ontouchmove introduced …

    document.body.ontouchmove=function(e){ var rectis=document.body.getBoundingClientRect(); if (e.touches[0].clientX) { ourDrawLine(eval(rectis.left + e.touches[0].clientX), eval(rectis.top + e.touches[0].clientY)); } else { ourDrawLine(eval(0 + e.touches[0].pageX), eval(0 + e.touches[0].pageY)); } };

    … logic, as well as …
  • we shore up mobile “Analogue Clock” …

    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('fiboththree').srcdoc="<head><title>" + ('' + new Date()) + "</title><style> .logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 322px; height: 322px; position: absolute; top: 48%; left: 55%; transform: translate(-50%, -50%); } </style></head><body id=xbody><div class=\"logo\"><svg class=\"logo__svg\"><circle cx=\"50%\" cy=\"50%\" r=\"160\" style=\"fill:rgba(255,0,0,1);stroke:white;stroke-width:1;\"/></svg></div></body>"; //.replace(/inline\-block\;/g, 'inline;');
    } else {
    document.getElementById('fiboththree').srcdoc="<head><title>" + ('' + new Date()) + "</title><style> .logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 312px; height: 312px; position: absolute; top: 47%; left: 49%; transform: translate(-50%, -50%); } </style></head><body id=xbody><div class=\"logo\"><svg class=\"logo__svg\"><circle cx=\"50%\" cy=\"50%\" r=\"155\" style=\"fill:rgba(255,0,0,1);stroke:white;stroke-width:1;\"/></svg></div></body>"; //.replace(/inline\-block\;/g, 'inline;');
    }

    … aesthetics … as well as …
  • “Rubber Banding” hashtag URL sharing

… in the changed fifth draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.

Previous relevant Diagonal Element Rubber Banding Tutorial is shown below.

Diagonal Element Rubber Banding Tutorial

Diagonal Element Rubber Banding Tutorial

Some days before yesterday’s Diagonal Element Square Nesting Tutorial we compared this current “nesting” diagonal element logic to …

Yes, this might be thought of as “overkill” compared to …

  • hr element rotations … and/or …
  • SVG

… and, today, yes, we bring back “hr element rotation diagonal” thinking, inspired by the work done in the days of PDF Image and Text Nodes Windows Files Tutorial, adding some “what you might hear around the traps” referred to as “Rubber Banding”. Here we “Rubber Band” …

  1. after an initial click event
  2. followed by some mousemove (like “drag”) event user actions

… as a temporary look while in “mousemove” mode, but a detected “mouseout”, in our logic, retains that last “Rubber Banding”, featuring an “hr” diagonal, and overlayed, element set.

And so, yet again, feel free to try out the changed fourth draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.

Previous relevant Diagonal Element Square Nesting Tutorial is shown below.

Diagonal Element Square Nesting Tutorial

Diagonal Element Square Nesting Tutorial

We’re adding onto the day before yesterday’s Diagonal Element Nesting Analogue Clock Tutorial some diagonal …

  • display: inline;
  • display: inline-block;

… nested diagonals across a square, testing more placement accuracy concepts …

function analyze(iois) {
var arecto=null, brecto=null, brecto=null, elesa=[], subsups=[], huh='';
if (!oktolook) { return ''; }
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
for (var ivb=0; ivb<elesa.length; ivb+=eval(elesa.length / 2)) {
arecto=elesa[ivb].getBoundingClientRect();
if (ivb == 0 && iois.id == 'ifleft') {
subsups=aconto.getElementsByTagName('sub');
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//prompt(huh,'one;' + iois.id);
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;top:' + brecto.top + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(255,0,0,0.5);"></div>';
elesa[ivb].style.left='50px';
elesa[ivb].style.marginTop='75px';
for (var iop=0; iop<15; iop++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sub>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sub>');
}
lconto=aconto;
lconto.querySelectorAll('sub').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
} else {
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
if (iois.id == 'ifright') {
elesa[ivb].style.left='50px';
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//prompt(huh,'two;' + iois.id);
}
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;bottom:' + arecto.bottom + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(0,255,0,0.5);"></div>';
if (iois.id == 'ifright') {
oktolook=false;
var xtdcrect=null;
if (document.getElementById('ifleft')) {
xtdcrect=document.getElementById('ifleft').getBoundingClientRect();
} else {
xtdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
}
iois.style.top='' + xtdcrect.top + 'px';
iois.style.left='' + xtdcrect.left + 'px';
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
arecto=elesa[ivb].getBoundingClientRect();
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//aconto.getElementById('mycontainer').style.width='' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
for (var iozp=0; iozp<15; iozp++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sup>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sup>');
}
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' x: ' + arecto.x + ' ' + brecto.x + ' ' + crecto.x + ' ' + String.fromCharCode(10);
huh+=' y: ' + arecto.y + ' ' + brecto.y + ' ' + crecto.y + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
//prompt(huh,'tWo;' + iois.id);
aconto.getElementById('xbr').style.position='absolute';
aconto.getElementById('xbr').style.left='33px';
aconto.getElementById('xbr').style.top='40px';
aconto.getElementById('xbr').style.width='276px';
aconto.getElementById('xbr').style.height='276px';
aconto.getElementById('xbr').style.backgroundColor='orange';
aconto.getElementById('xbr').title='Square 276 x 276';
rconto=aconto;
rconto.querySelectorAll('sup').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
//subsups[eval(-1 + subsups.length)].title='Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long';
//setTimeout(function(){ document.getElementById('precon').style.display='table-cell'; }, 3000);
enableScroll();
}
}
}
}
}
}

if (iois.id == 'ifright' && 5 == 7) {
var xtdcrect=parent.document.getElementById('ifleft').getBoundingClientRect();
iois.style.top='' + xrectcrect.top + 'px';
iois.style.left='' + xrectcrect.left + 'px';
}
}

function jccheck() {
if (document.URL.indexOf('justclock=') != -1) {
setTimeout(function() { document.getElementById('fibothone').scrollIntoView(); }, 15000);
}
if (document.URL.indexOf('justsquare=') != -1) {
setTimeout(function() { document.getElementById('prerrow').scrollIntoView(); }, 15000);
}


setTimeout(function(){
if (document.getElementById('taecll0001') && document.getElementById('taecll0002')) {
//alert(document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;'));
document.getElementById('mycontainer').innerHTML=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=tl class="') + document.getElementById('taecll0002').value.replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="');
var rectbr=document.getElementById('br').getBoundingClientRect();
document.getElementById('mycontainer').style.width='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
document.getElementById('mycontainer').style.height='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
sd=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=tl class="rotated-text-tl-to-br ');
sd=sd +'</div>' + document.getElementById('taecll0001').value.replace(' style="margin-left:40px;',' style="').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=xtl class="rotated-text-tl-to-br ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace(' style="', ' style="padding-top:20px;opacity:0.2;color:transparent;');
sdtwo=document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="rotated-text-bl-to-tr ');
sdtwo=sdtwo + '</div>' + document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=xbr class="rotated-text-bl-to-tr ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace('color:blue;','').replace(' style="', ' style="margin-top:-256px;opacity:0.3;color:transparent;'); // used to be -520
setTimeout(function(){
var tdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
document.getElementById('tdcontainer').innerHTML='<iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe>';
//document.getElementById('rrow0001').innerHTML='<td id=tdcontainer colspan=2 style=text-align:center;><iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe></td>';
}, 2000);
}
}, 2000);
}

Yet again, feel free to try out the changed third draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.

Previous relevant Diagonal Element Nesting Tutorial is shown below.

Diagonal Element Nesting Tutorial

Diagonal Element Nesting Tutorial

A variation on yesterday’s Nesting Primer Tutorial, as well as being inspired by that work is today’s …

  1. diagonal element … via …
  2. nested …
    • display: inline;
    • display: inline-block;

    …

    • sub topleft to bottomright diagonal componentry element look
    • sup bottomleft to topright diagonal componentry element look

    … we noticed working (ie. achieving nested “diagonality“) yesterday

… functionality. Yes, this might be thought of as “overkill” compared to …

  • hr element rotations … and/or …
  • SVG

… arguably easier means to achieve a “diagonal element” look. Nevertheless, the more ways to achieve an objective up your sleeve, the better, we reckon!

Again, feel free to try out this proof of concept Nested Diagonal Elements web application below …

Previous relevant Nesting Primer Tutorial is shown below.

Nesting Primer Tutorial

Nesting Primer Tutorial

The text (which can include emojis) …

  • display: inline;
  • display: inline-block;

… HTML elements are endlessly fascinating in our eyes, regarding the “nesting” of elements.

You can read all you like about this at a website like W3schools but we find endless surprises, so we decided to code for a web application with scope within a table cell “parent” element …

  • reinitialize (ie. append) span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element to the end of table cell content
  • nest span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element onto the end of the most outer table cell element’s content within the table cell content, or a clicked element flagged with a pink background

We find it interesting changing up the choice above and font-size and new element content textbox settings and seeing what happens. You see the resultant HTML innards below in a textarea element which changes to are reflected above (and in this way, you can pick an element type not listed above, if you like), as are changes to second and on table cell content’s on the top row.

Feel free to try out this proof of concept Nesting web application below …

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.

Posted in eLearning, Event-Driven Programming, iOS, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Diagonal Element Rubber Banding Tutorial

Posted on by
Diagonal Element Rubber Banding Tutorial

Diagonal Element Rubber Banding Tutorial

Some days before yesterday’s Diagonal Element Square Nesting Tutorial we compared this current “nesting” diagonal element logic to …

Yes, this might be thought of as “overkill” compared to …

  • hr element rotations … and/or …
  • SVG

… and, today, yes, we bring back “hr element rotation diagonal” thinking, inspired by the work done in the days of PDF Image and Text Nodes Windows Files Tutorial, adding some “what you might hear around the traps” referred to as “Rubber Banding”. Here we “Rubber Band” …

  1. after an initial click event
  2. followed by some mousemove (like “drag”) event user actions

… as a temporary look while in “mousemove” mode, but a detected “mouseout”, in our logic, retains that last “Rubber Banding”, featuring an “hr” diagonal, and overlayed, element set.

And so, yet again, feel free to try out the changed fourth draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.

Previous relevant Diagonal Element Square Nesting Tutorial is shown below.

Diagonal Element Square Nesting Tutorial

Diagonal Element Square Nesting Tutorial

We’re adding onto the day before yesterday’s Diagonal Element Nesting Analogue Clock Tutorial some diagonal …

  • display: inline;
  • display: inline-block;

… nested diagonals across a square, testing more placement accuracy concepts …

function analyze(iois) {
var arecto=null, brecto=null, brecto=null, elesa=[], subsups=[], huh='';
if (!oktolook) { return ''; }
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
for (var ivb=0; ivb<elesa.length; ivb+=eval(elesa.length / 2)) {
arecto=elesa[ivb].getBoundingClientRect();
if (ivb == 0 && iois.id == 'ifleft') {
subsups=aconto.getElementsByTagName('sub');
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//prompt(huh,'one;' + iois.id);
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;top:' + brecto.top + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(255,0,0,0.5);"></div>';
elesa[ivb].style.left='50px';
elesa[ivb].style.marginTop='75px';
for (var iop=0; iop<15; iop++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sub>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sub>');
}
lconto=aconto;
lconto.querySelectorAll('sub').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
} else {
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
if (iois.id == 'ifright') {
elesa[ivb].style.left='50px';
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//prompt(huh,'two;' + iois.id);
}
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;bottom:' + arecto.bottom + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(0,255,0,0.5);"></div>';
if (iois.id == 'ifright') {
oktolook=false;
var xtdcrect=null;
if (document.getElementById('ifleft')) {
xtdcrect=document.getElementById('ifleft').getBoundingClientRect();
} else {
xtdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
}
iois.style.top='' + xtdcrect.top + 'px';
iois.style.left='' + xtdcrect.left + 'px';
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
arecto=elesa[ivb].getBoundingClientRect();
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//aconto.getElementById('mycontainer').style.width='' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
for (var iozp=0; iozp<15; iozp++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sup>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sup>');
}
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' x: ' + arecto.x + ' ' + brecto.x + ' ' + crecto.x + ' ' + String.fromCharCode(10);
huh+=' y: ' + arecto.y + ' ' + brecto.y + ' ' + crecto.y + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
//prompt(huh,'tWo;' + iois.id);
aconto.getElementById('xbr').style.position='absolute';
aconto.getElementById('xbr').style.left='33px';
aconto.getElementById('xbr').style.top='40px';
aconto.getElementById('xbr').style.width='276px';
aconto.getElementById('xbr').style.height='276px';
aconto.getElementById('xbr').style.backgroundColor='orange';
aconto.getElementById('xbr').title='Square 276 x 276';
rconto=aconto;
rconto.querySelectorAll('sup').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
//subsups[eval(-1 + subsups.length)].title='Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long';
//setTimeout(function(){ document.getElementById('precon').style.display='table-cell'; }, 3000);
enableScroll();
}
}
}
}
}
}

if (iois.id == 'ifright' && 5 == 7) {
var xtdcrect=parent.document.getElementById('ifleft').getBoundingClientRect();
iois.style.top='' + xrectcrect.top + 'px';
iois.style.left='' + xrectcrect.left + 'px';
}
}

function jccheck() {
if (document.URL.indexOf('justclock=') != -1) {
setTimeout(function() { document.getElementById('fibothone').scrollIntoView(); }, 15000);
}
if (document.URL.indexOf('justsquare=') != -1) {
setTimeout(function() { document.getElementById('prerrow').scrollIntoView(); }, 15000);
}


setTimeout(function(){
if (document.getElementById('taecll0001') && document.getElementById('taecll0002')) {
//alert(document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;'));
document.getElementById('mycontainer').innerHTML=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=tl class="') + document.getElementById('taecll0002').value.replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="');
var rectbr=document.getElementById('br').getBoundingClientRect();
document.getElementById('mycontainer').style.width='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
document.getElementById('mycontainer').style.height='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
sd=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=tl class="rotated-text-tl-to-br ');
sd=sd +'</div>' + document.getElementById('taecll0001').value.replace(' style="margin-left:40px;',' style="').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=xtl class="rotated-text-tl-to-br ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace(' style="', ' style="padding-top:20px;opacity:0.2;color:transparent;');
sdtwo=document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="rotated-text-bl-to-tr ');
sdtwo=sdtwo + '</div>' + document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=xbr class="rotated-text-bl-to-tr ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace('color:blue;','').replace(' style="', ' style="margin-top:-256px;opacity:0.3;color:transparent;'); // used to be -520
setTimeout(function(){
var tdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
document.getElementById('tdcontainer').innerHTML='<iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe>';
//document.getElementById('rrow0001').innerHTML='<td id=tdcontainer colspan=2 style=text-align:center;><iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe></td>';
}, 2000);
}
}, 2000);
}

Yet again, feel free to try out the changed third draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.

Previous relevant Diagonal Element Nesting Tutorial is shown below.

Diagonal Element Nesting Tutorial

Diagonal Element Nesting Tutorial

A variation on yesterday’s Nesting Primer Tutorial, as well as being inspired by that work is today’s …

  1. diagonal element … via …
  2. nested …
    • display: inline;
    • display: inline-block;

    …

    • sub topleft to bottomright diagonal componentry element look
    • sup bottomleft to topright diagonal componentry element look

    … we noticed working (ie. achieving nested “diagonality“) yesterday

… functionality. Yes, this might be thought of as “overkill” compared to …

  • hr element rotations … and/or …
  • SVG

… arguably easier means to achieve a “diagonal element” look. Nevertheless, the more ways to achieve an objective up your sleeve, the better, we reckon!

Again, feel free to try out this proof of concept Nested Diagonal Elements web application below …

Previous relevant Nesting Primer Tutorial is shown below.

Nesting Primer Tutorial

Nesting Primer Tutorial

The text (which can include emojis) …

  • display: inline;
  • display: inline-block;

… HTML elements are endlessly fascinating in our eyes, regarding the “nesting” of elements.

You can read all you like about this at a website like W3schools but we find endless surprises, so we decided to code for a web application with scope within a table cell “parent” element …

  • reinitialize (ie. append) span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element to the end of table cell content
  • nest span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element onto the end of the most outer table cell element’s content within the table cell content, or a clicked element flagged with a pink background

We find it interesting changing up the choice above and font-size and new element content textbox settings and seeing what happens. You see the resultant HTML innards below in a textarea element which changes to are reflected above (and in this way, you can pick an element type not listed above, if you like), as are changes to second and on table cell content’s on the top row.

Feel free to try out this proof of concept Nesting web application below …

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Diagonal Element Square Nesting Tutorial

Posted on by
Diagonal Element Square Nesting Tutorial

Diagonal Element Square Nesting Tutorial

We’re adding onto the day before yesterday’s Diagonal Element Nesting Analogue Clock Tutorial some diagonal …

  • display: inline;
  • display: inline-block;

… nested diagonals across a square, testing more placement accuracy concepts …

function analyze(iois) {
var arecto=null, brecto=null, brecto=null, elesa=[], subsups=[], huh='';
if (!oktolook) { return ''; }
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
for (var ivb=0; ivb<elesa.length; ivb+=eval(elesa.length / 2)) {
arecto=elesa[ivb].getBoundingClientRect();
if (ivb == 0 && iois.id == 'ifleft') {
subsups=aconto.getElementsByTagName('sub');
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//prompt(huh,'one;' + iois.id);
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;top:' + brecto.top + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(255,0,0,0.5);"></div>';
elesa[ivb].style.left='50px';
elesa[ivb].style.marginTop='75px';
for (var iop=0; iop<15; iop++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sub>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sub>');
}
lconto=aconto;
lconto.querySelectorAll('sub').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
} else {
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
if (iois.id == 'ifright') {
elesa[ivb].style.left='50px';
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//prompt(huh,'two;' + iois.id);
}
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;bottom:' + arecto.bottom + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(0,255,0,0.5);"></div>';
if (iois.id == 'ifright') {
oktolook=false;
var xtdcrect=null;
if (document.getElementById('ifleft')) {
xtdcrect=document.getElementById('ifleft').getBoundingClientRect();
} else {
xtdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
}
iois.style.top='' + xtdcrect.top + 'px';
iois.style.left='' + xtdcrect.left + 'px';
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
arecto=elesa[ivb].getBoundingClientRect();
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//aconto.getElementById('mycontainer').style.width='' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
for (var iozp=0; iozp<15; iozp++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sup>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sup>');
}
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' x: ' + arecto.x + ' ' + brecto.x + ' ' + crecto.x + ' ' + String.fromCharCode(10);
huh+=' y: ' + arecto.y + ' ' + brecto.y + ' ' + crecto.y + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
//prompt(huh,'tWo;' + iois.id);
aconto.getElementById('xbr').style.position='absolute';
aconto.getElementById('xbr').style.left='33px';
aconto.getElementById('xbr').style.top='40px';
aconto.getElementById('xbr').style.width='276px';
aconto.getElementById('xbr').style.height='276px';
aconto.getElementById('xbr').style.backgroundColor='orange';
aconto.getElementById('xbr').title='Square 276 x 276';
rconto=aconto;
rconto.querySelectorAll('sup').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
//subsups[eval(-1 + subsups.length)].title='Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long';
//setTimeout(function(){ document.getElementById('precon').style.display='table-cell'; }, 3000);
enableScroll();
}
}
}
}
}
}

if (iois.id == 'ifright' && 5 == 7) {
var xtdcrect=parent.document.getElementById('ifleft').getBoundingClientRect();
iois.style.top='' + xrectcrect.top + 'px';
iois.style.left='' + xrectcrect.left + 'px';
}
}

function jccheck() {
if (document.URL.indexOf('justclock=') != -1) {
setTimeout(function() { document.getElementById('fibothone').scrollIntoView(); }, 15000);
}
if (document.URL.indexOf('justsquare=') != -1) {
setTimeout(function() { document.getElementById('prerrow').scrollIntoView(); }, 15000);
}


setTimeout(function(){
if (document.getElementById('taecll0001') && document.getElementById('taecll0002')) {
//alert(document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;'));
document.getElementById('mycontainer').innerHTML=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=tl class="') + document.getElementById('taecll0002').value.replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="');
var rectbr=document.getElementById('br').getBoundingClientRect();
document.getElementById('mycontainer').style.width='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
document.getElementById('mycontainer').style.height='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
sd=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=tl class="rotated-text-tl-to-br ');
sd=sd +'</div>' + document.getElementById('taecll0001').value.replace(' style="margin-left:40px;',' style="').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=xtl class="rotated-text-tl-to-br ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace(' style="', ' style="padding-top:20px;opacity:0.2;color:transparent;');
sdtwo=document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="rotated-text-bl-to-tr ');
sdtwo=sdtwo + '</div>' + document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=xbr class="rotated-text-bl-to-tr ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace('color:blue;','').replace(' style="', ' style="margin-top:-256px;opacity:0.3;color:transparent;'); // used to be -520
setTimeout(function(){
var tdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
document.getElementById('tdcontainer').innerHTML='<iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe>';
//document.getElementById('rrow0001').innerHTML='<td id=tdcontainer colspan=2 style=text-align:center;><iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe></td>';
}, 2000);
}
}, 2000);
}

Yet again, feel free to try out the changed third draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below.

Previous relevant Diagonal Element Nesting Tutorial is shown below.

Diagonal Element Nesting Tutorial

Diagonal Element Nesting Tutorial

A variation on yesterday’s Nesting Primer Tutorial, as well as being inspired by that work is today’s …

  1. diagonal element … via …
  2. nested …
    • display: inline;
    • display: inline-block;

    …

    • sub topleft to bottomright diagonal componentry element look
    • sup bottomleft to topright diagonal componentry element look

    … we noticed working (ie. achieving nested “diagonality“) yesterday

… functionality. Yes, this might be thought of as “overkill” compared to …

  • hr element rotations … and/or …
  • SVG

… arguably easier means to achieve a “diagonal element” look. Nevertheless, the more ways to achieve an objective up your sleeve, the better, we reckon!

Again, feel free to try out this proof of concept Nested Diagonal Elements web application below …

Previous relevant Nesting Primer Tutorial is shown below.

Nesting Primer Tutorial

Nesting Primer Tutorial

The text (which can include emojis) …

  • display: inline;
  • display: inline-block;

… HTML elements are endlessly fascinating in our eyes, regarding the “nesting” of elements.

You can read all you like about this at a website like W3schools but we find endless surprises, so we decided to code for a web application with scope within a table cell “parent” element …

  • reinitialize (ie. append) span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element to the end of table cell content
  • nest span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element onto the end of the most outer table cell element’s content within the table cell content, or a clicked element flagged with a pink background

We find it interesting changing up the choice above and font-size and new element content textbox settings and seeing what happens. You see the resultant HTML innards below in a textarea element which changes to are reflected above (and in this way, you can pick an element type not listed above, if you like), as are changes to second and on table cell content’s on the top row.

Feel free to try out this proof of concept Nesting web application below …

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Circle Terminology in Mathematics Jitters Tutorial

Posted on by
Circle Terminology in Mathematics Jitters Tutorial

Circle Terminology in Mathematics Jitters Tutorial

Before today’s work the blog posting Circle Terminology in Mathematics Tutorial below would annoy because of a “soon after page load” navigation to an iframe way below.

We’ve seen problems like that before, and it’s normally been due to (where the Stop Press below explains the more robust solution ended up with) …

  • [element].focus() call
  • [element].scrollIntoView() call
  • location.href=’#[idOfAnElement]’;
  • iframe src attribute with a URL involving a real iframe document element ID hashtag navigatable to

… but it was not immediately obvious examining code in and around the blog posting content where the usual causes above fitted in. But the end reason did fit in with the problem idea cause list above, but because in the PHP or HTML of the recipient web application associated with the HTML iframe navigated to, it had a textbox with ID equals s and because the TwentyTen themed WordPress blog you are currently reading IDs it’s search textbox s as well.

  1. a changed circular_text.html inhouse Circular Text HTML assistant
  2. a changed circular_text.php inhouse Circular Text PHP assistant

We decided that the PHP or HTML of the recipient web application associated with the HTML iframe navigated to should give way here, and ID it’s textbox to be canbechilds instead so that the lack of “jittery navigation” means you’re reading this calmly ahead of a reread of that tutorial below.

Stop Press

Sure, we feel better doing the code steps above, but that was insufficient to solve the problem, but here on 01/02/2026 … welcome, February … we think we have a solution now! As intimated above, also a problem we discovered involved …


iframe src attribute with a URL involving a real iframe document element ID hashtag navigatable to

Rather than change WordPress Blog content we made the Analogue Clock and it’s “hosting friends” acknowledge any top window URLs pointing to this WordPress Blog, and “reflag them” if you will, via “hosting friends” doing code such as …


var egtextis=location.search.split('text=')[1] ? (location.search.split('text=')[1].split('&')[0]).replace(/\+/g, ' ') : '';

if (('' + top.document.URL).toLowerCase().indexOf('rjmprogramming.com.au/itblog') != -1 || document.URL.indexOf('nowayjose=') != -1) {
if (egtextis.indexOf('%23xbody') != -1) {
egtextis=egtextis.replace('%23xbody','%3fxbody');
} else if (egtextis.indexOf('#xbody') != -1) {
egtextis=egtextis.replace('#xbody','?xbody');
}
}

… while the Analogue Clock HTML code itself should …


cdone=false, vsonet=20000;

function checktwnonz() {
if (eval('' + window.top.scrollY) < vsonet) {
document.getElementById('lbit').style.display='none';
setTimeout(checktwnonz, 3000);
} else {
document.getElementById('lbit').style.display='none';
document.getElementById('xbody').scrollIntoView(); //location.href='#xbody';
}
}

function onl() {
var tx="50%";
var ty="100%";
var stx=1.0, sty=1.0;
var hands=["", "m", "s"];
var shands=[0.9, 1.0, 0.95];
var ourbrg=0.0;

if (('' + top.document.URL).toLowerCase().indexOf('rjmprogramming.com.au/itblog') != -1 && document.URL.indexOf('?xbody') != -1 && !cdone) {
if (('' + typeof window.parent.getcbcry) == 'function' && top.document.body.innerHTML.indexOf('%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E') != -1) {
var thinga=top.document.body.innerHTML.split('%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E');
var paridifis=top.document.body.innerHTML.split('%3Bheight%3A400px%3B%27%20src%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E')[eval(-2 + eval('' + thinga.length))].split('<iframe')[eval(-1 + top.document.body.innerHTML.split('%3Bheight%3A400px%3B%27%20src%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E')[eval(-2 + eval('' + thinga.length))].split('<iframe').length)].split(' id="')[1].split('"')[0];
vsonet=window.parent.getcbcry(paridifis);
}
setTimeout(checktwnonz, 3000);
}
cdone=true;

getgmt();
// rest of this document.body onload called function onl) would follow ...
}

</script>
</head>
<body id='xbody' onload="onl(); postonl(); if (('' + location.hash).indexOf('lightgraycircle') == -1 && ('' + document.URL).indexOf('?xbody') == -1 && ('' + location.hash).indexOf('xbody') == -1) { document.getElementById('difbit').innerHTML='<ifr' + 'ame id=ifbit style=z-index:1;position:absolute;top:150px;left:0px;height:800px;width:100%; src=//www.rjmprogramming.com.au/HTMLCSS/daylight_saving_time.html title=DaylightSavinginformation></ifr' + 'ame>'; } " style='background-color:#c0d0f0;'>
// rest of document.body would follow ...
</body>

… in …

  1. a changed …


    function getcbcry(anid) {
    var anidy='';
    if (window.parent) {
    if (parent.document.getElementById(anid)) {
    if (('' + typeof window.parent.get_cbcry) == 'function') {
    anidy='' + window.parent.get_cbcry(anid);
    document.getElementById('anid').innerHTML=anidy;
    } else {
    anidy=('' + parent.document.getElementById(anid).getBoundingClientRect().y).replace(/^null/g,'').replace(/^undefined/g,'');
    if (anidy.trim() != '') {
    document.getElementById('anid').innerHTML=anidy;
    return eval('' + anidy);
    }
    }
    }
    }
    return 20000;
    }


    … circular_text.html inhouse Circular Text HTML assistant
  2. a changed circular_text.php inhouse Circular Text PHP assistant
  3. a changed analogue_clock.htm inhouse Analogue Clock

Previous relevant Circle Terminology in Mathematics Tutorial is shown below.

Circle Terminology in Mathematics Tutorial

Circle Terminology in Mathematics Tutorial

We’ve got another style of usage to make of “Circular Text” ideas today, presenting a “Circle Terminology in Mathematics” quiz, further to yesterday’s Circular Text Button Solar System Statistics Tutorial.

This time we are asking our circular_text.html “hosted in an iframe” tool to change, because we want to cater for another way to express aspects about the ‘atend’ element background look. You might (or you mightn’t) recall that so far we allow for the “innards” of the ‘atend’ element to contain …

  • inner text only
  • inner text and a relative or absolute image URL (which we were happy to discover yesterday could be an animated GIF)
  • relative or absolute image URL … and today we add onto that list …
  • no inner text but a data URI “svg+xml” protocol SVG data background content

… which we use in our “Circle Terminology in Mathematics” (or perhaps Circle Terminology in Geometry) quiz.

This new “proof of concept” circle_terminology.html HTML and Javascript quiz web application, you can also try below, incorporates that Javascript logic passed through to the iframe idea, as a way that the child iframe changed circular_text.html “Circular Text” helper tool performs the user interaction, and via parent.document style looking back at parent score and goes elements, controls the quiz scoring …


var egtextis=location.search.split('text=')[1] ? (location.search.split('text=')[1].split('&')[0]).replace(/\+/g, ' ') : '';
var qans=location.search.split('answer=')[1] ? decodeURIComponent(location.search.split('answer=')[1]).split('&')[0].replace(/\+/g,' ') : '';
var parid=location.search.split('id=')[1] ? decodeURIComponent(location.search.split('id=')[1]).split('&')[0].replace(/\+/g,' ') : '';

function qask() {
var qqans='';
if (qans != '') {
qqans=prompt('What is your answer? Cannot stand it anymore, and need you to tell me the answer, you should enter a question mark.', '');
if (qqans != null) {
if (qqans == '?') {
alert(qans.substring(0,1).toUpperCase() + qans.substring(1).toLowerCase());
qqans=null;
}
}
if (qqans == null) {
qqans='';
} else if (qqans.toLowerCase() == qans.toLowerCase()) {
if (parid != '') {
if (parent.document.getElementById(parid)) {
parent.document.getElementById(parid).src=parent.document.getElementById(parid).src.replace(egtextis, encodeURIComponent(qqans.substring(0,1).toUpperCase() + qqans.substring(1).toLowerCase())).replace(/\%22red\%22/g, '%22green%22').replace(/\%22blue\%22/g, '%22purple%22');
if (parent.document.getElementById('score') && parent.document.getElementById('goes')) {
parent.document.getElementById('score').innerHTML='' + eval(1 + eval('' + parent.document.getElementById('score').innerHTML));
parent.document.getElementById('goes').innerHTML='' + eval(1 + eval('' + parent.document.getElementById('goes').innerHTML));
} else {
alert('Well done!');
}
} else {
alert('Well done!');
}
} else {
alert('Well done!');
}
} else {
if (parid != '') {
if (parent.document.getElementById(parid)) {
if (parent.document.getElementById('goes')) {
parent.document.getElementById('goes').innerHTML='' + eval(1 + eval('' + parent.document.getElementById('goes').innerHTML));
} else {
alert('Bad luck.');
}
} else {
alert('Bad luck.');
}
} else {
alert('Bad luck.');
}
}
}
}

On the way into the iframe, question mark characters replace the answers, and when a correct answer happens they are replaced by the correct answer, along with some SVG element colour changes.

Previous relevant Circular Text Button Solar System Statistics Tutorial is shown below.

Circular Text Button Solar System Statistics Tutorial

Circular Text Button Solar System Statistics Tutorial

There were a couple of issues we wanted to address, today, to do towards extending the progress of yesterday’s Circular Text Button Solar System Tutorial “Solar System” web application …

  • the one we were sure we could make happen, scouring NASA further, regarding statistics and presenting that via displays interfacing to Google Charts Bar Charts functioning via a new dropdown, and its Javascript onchange event …

    var pandsnames=['Sun','Mercury','Venus','Earth','Mars','Jupiter','Saturn','Uranus','Neptune'];
    var pandsradis=[69634,244,605,637,339,6991,5823,1576,1530];

    var ds=[0,58000000,108000000,150000000,228000000,779000000,1400000000,2900000000,4500000000];
    // Thanks to http://hyperphysics.phy-astr.gsu.edu/hbase/Solar/soldata2.html
    var omax=[0,69800000,108900000,152100000,249100000,815700000,1503000000,3003000000,4546000000];
    var omin=[0,46000000,107500000,147100000,138200000,495100000,1348000000,2739000000,4456000000];
    var yedop=[0,88,225,365,687,4333,10759,30687,60190];
    var dedop=[0,1408,5832,24,25,10,11,17,16];

    var bc='https://www.rjmprogramming.com.au/PHP/BarChart/bar_chart.php?title=Sun&onclick=y&label=Planet&value=One&data=,%20[~Mercury~,23]%20,%20[~Venus~,45]';

    function changeit(osel) {
    var ij=0, ourbc='', dprefix='';
    if (osel.value == 't') {
    ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Distance to Sun in Millions of Kilometers')).replace('=One', '=' + encodeURIComponent('Distance to Sun (million kilometers)')) + '&data=';
    for (ij=1; ij<pandsnames.length; ij++) {
    ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + eval(ds[ij] / 1000000) + ']';
    dprefix='%20';
    }
    document.getElementById('tdt').innerHTML='';
    document.getElementById('tdo').innerHTML='';
    document.getElementById('tdy').innerHTML='';
    document.getElementById('tdd').innerHTML='';
    document.getElementById('tdr').innerHTML='';
    document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Distance to Sun ...';
    document.getElementById('dsmall').style.display='block';
    document.getElementById('dsmall').open=true;
    document.getElementById('td' + osel.value).innerHTML='<iframe name=stat style=width:800px;height:500px; src="' + ourbc + '" title="Distancce to Sun"></iframe>';
    window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');
    } else if (osel.value == 'r') {
    ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Radius Relative to Sun (km)')).replace('=One', '=' + encodeURIComponent('Radius Planet,Radius Sun')) + '&data=';
    for (ij=1; ij<pandsnames.length; ij++) {
    ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + eval(10 * pandsradis[ij]) + ',696340]';
    dprefix='%20';
    }
    document.getElementById('tdt').innerHTML='';
    document.getElementById('tdo').innerHTML='';
    document.getElementById('tdy').innerHTML='';
    document.getElementById('tdd').innerHTML='';
    document.getElementById('tdr').innerHTML='';
    document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Radius Relative to Sun ...';
    document.getElementById('dsmall').style.display='block';
    document.getElementById('dsmall').open=true;
    document.getElementById('td' + osel.value).innerHTML='<iframe name=stat style=width:800px;height:500px; src="' + ourbc + '" title="Radius Relative to Sun"></iframe>';
    window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');
    } else if (osel.value == 'o') {
    ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Orbit around the Sun (km)')).replace('=One', '=' + encodeURIComponent('Orbit Minimum Distance,Orbit Maximum Distance')) + '&data=';
    for (ij=1; ij<pandsnames.length; ij++) {
    ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + eval(1 * omin[ij]) + ',' + eval(1 * omax[ij]) + ']';
    dprefix='%20';
    }
    document.getElementById('tdt').innerHTML='';
    document.getElementById('tdo').innerHTML='';
    document.getElementById('tdy').innerHTML='';
    document.getElementById('tdd').innerHTML='';
    document.getElementById('tdr').innerHTML='';
    document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Orbit Around the Sun ...';
    document.getElementById('dsmall').style.display='block';
    document.getElementById('dsmall').open=true;
    document.getElementById('td' + osel.value).innerHTML='<iframe name=stat style=width:800px;height:500px; src="' + ourbc + '" title="Orbit Around the Sun"></iframe>';
    window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');
    } else if (osel.value == 'y') {
    ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Planet Year Earth Days')).replace('=One', '=' + encodeURIComponent('Planet Year Earth Days')) + '&data=';
    for (ij=1; ij<pandsnames.length; ij++) {
    ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + yedop[ij] + ']';
    dprefix='%20';
    }
    document.getElementById('tdt').innerHTML='';
    document.getElementById('tdo').innerHTML='';
    document.getElementById('tdy').innerHTML='';
    document.getElementById('tdd').innerHTML='';
    document.getElementById('tdr').innerHTML='';
    document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Planet Year around Sun Earth Days ...';
    document.getElementById('dsmall').style.display='block';
    document.getElementById('dsmall').open=true;
    document.getElementById('td' + osel.value).innerHTML='<iframe name=stat style=width:800px;height:500px; src="' + ourbc + '" title="Planet Year around Sun Earth Days"></iframe>';
    window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');
    } else if (osel.value == 'd') {
    ourbc=bc.split('&data=')[0].replace('=Sun', '=' + encodeURIComponent('Planet Day Earth Hours')).replace('=One', '=' + encodeURIComponent('Planet Year Earth Hours')) + '&data=';
    for (ij=1; ij<pandsnames.length; ij++) {
    ourbc+=dprefix + ',%20[~' + pandsnames[ij] + '~,' + dedop[ij] + ']';
    dprefix='%20';
    }
    document.getElementById('tdt').innerHTML='';
    document.getElementById('tdo').innerHTML='';
    document.getElementById('tdy').innerHTML='';
    document.getElementById('tdd').innerHTML='';
    document.getElementById('tdr').innerHTML='';
    document.getElementById('ssmall').innerHTML='Not to Scale Animated GIF and Planet Day Earth Hours ...';
    document.getElementById('dsmall').style.display='block';
    document.getElementById('dsmall').open=true;
    document.getElementById('td' + osel.value).innerHTML='<iframe name=stat style=width:800px;height:500px; src="' + ourbc + '" title="Planet Day Earth Hours"></iframe>';
    window.open(ourbc, 'stat', 'top=50,left=50,width=800,height=600');
    }
    }

    … logic and …
  • the one we were happily surprised was not needing underlying circular_text.html changes, was to have as an underlying background image, an animated GIF (but we did need to remember some very nuanced inhouse watermark animated GIF creation rules)

The day started wanting and wondering about what we often think is the extension thought to involving images in a piece of functionality, that of animation (and/or other visual media) ideas that can be supported. However, the trick here, with circular text and default watermark usage thoughts, was that we had to “middle” the inner text if it is vital, else the border radius applied to the circular text element will “curl” that watermark out of view. But we eventually used a …


#(150,150)

… in the “Tutorial Slideshow Title” textbox to plot our watermark at … you guessed it … 150px 150px (left top) within the animated GIF slide image we access using our inhouse Animated GIF Creator helper PHP web application.

Feel free to (re-)try the second draft solar_system_planets_and_sun.html Solar System web application, or try below.

Previous relevant Circular Text Button Solar System Tutorial is shown below.

Circular Text Button Solar System Tutorial

Circular Text Button Solar System Tutorial

A web application we wanted to try incorporating our latest “Circular Text Buttons” onto yesterday’s Circular Text Button Nuance Tutorial start is a …

Solar System Planets and Sun to Scale

… web application. That “to Scale” bit above will jar with the astronomers out there, that this will be very hard to achieve. True, and we give over to “learnings” rather than “aesthetics” and “display” keeping the “to Scale” going, but aspects to this project in its favour are …

  • planets are circular (when displayed in 2D) …
  • lots of planets have an associated emoji (because of zodiac signs, for instance) that we can (quite forlornly) display as the circular text …
  • Mercury fits

… and that last item above led us to involving “details/summary” reveal arrangements that start as closed except for Mercury’s one. Others like Venus and Earth and Mars also fit within a laptop screen, but we’ll grant you the others are “off the charts”, so to speak!

Regarding the getting of information here, we were not surprised that NASA turned out to be our primary source of great reliable information, so, thanks.

Getting a perspective on life can be got, perhaps, thinking about how small and fragile Earth is, even, around here, looking at some of our mountains around here, scary but puny by world standards, let alone the ones on Mars … amazing!

So, to see what we mean, feel free to try the first draft web application (helped out by the changed circular_text.html) you can also try below …

Previous relevant Circular Text Button Nuance Tutorial is shown below.

Circular Text Button Nuance Tutorial

Circular Text Button Nuance Tutorial

There is little doubt that an objective look at a project the day after an initial “proof of concept” phase can be worth it. It can be our …

Nuance Day

… but hopefully not a “Throw Out Day” when the realities of data meet the HTML and Javascript and CSS (and PHP or other serverside code) design you have. Yesterday’s Circular Text Button Tutorial‘s “Circular Text Buttons” (the concept, and its associated web application conduit) have been improved, we hope, by a series of nuanced changes …

  • as far as inner text goes, encase this in a “p” element so that we can now go …

    if (atendih != '') { document.getElementById('atend').innerHTML='<br>' + '<p style=text-align:center;vertical-align:middle;>' + atendih + '</p>'; }

    … allowing for better control of inner text justification (thanks, useful nesting advice regarding text justification webpage) … and in the same line of thinking regarding that struck out kludge above …
  • we keep a textbox for entry purposes (because all this button stuff is optional, after all) but allow the user their own control over vertical positioning via the new placeholder advice …

    this text is in a circle &#x1f34d; &#x1f34c; (Optionally | separate words (++ is line feed) & image URL & onclick URL or Javascript)

    … secondary kludge initiative to save the user the boredom of entering any <br> linefeeds themselves … heaven forebid!

  • and did you notice, above, the quietly mentioned last optional field idea that on top of …
    1. onclick URL (yesterday’s assumption) … today we code for …
    2. your own onclick Javascript as a choice to ponder

    … as per …

    if (atendiu != '') {
    if (atendiu.substring(0,2) == '//') {
    atendiu=document.URL.split('//')[0] + atendiu;
    } else if (atendiu.substring(0,1) == '/') {
    atendiu=document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + atendiu;
    } else if (atendiu.substring(0,4) == 'www.') {
    atendiu=document.URL.split('//')[0] + '//' + atendiu;
    }
    document.getElementById('atend').title = 'Click for ' + atendiu;
    document.getElementById('atend').style.cursor='pointer';
    document.getElementById('atend').setAttribute('data-url', atendiu);
    var valid = /^(ftp|http|https):\/\/[^ "]+$/.test(atendiu); // thanks to https://stackoverflow.com/questions/1410311/regular-expression-for-url-validation-in-javascript
    if (valid) {
    document.getElementById('atend').addEventListener('click', function(evt) { window.open(evt.target.getAttribute('data-url'), '_blank', 'top=50,left=50,width=600,height=600'); });
    } else {
    document.getElementById('atend').addEventListener('click', function(event) { eval(event.target.getAttribute('data-url')); });
    }
    }

    … an example of which you can try below …

  • just as we allowed the new details/summary reveal arrangement to start as not there for a button but there for everything else at the start, and as of yesterday for the button scenario we catered for the user toggling the visibility of the details/summary elements (by adjusting CSS margin-top of element atend), today we return the compliment for the Analogue Clock and Roulette Wheel and Periodic Table Quiz parts of the web application functionality
  • we add an “a” “-” link to start again with the default Circular Text, as default, webpage look

… in today’s changed Javascript circular_text.html‘s live run link for you to try this new so yesterday circular text button creating logic.

Previous relevant Circular Text Button Tutorial is shown below.

Circular Text Button Tutorial

Circular Text Button Tutorial

At the end of March we made functionality extensions to our Circular Text web application featuring in Chemistry Wonder Periodic Table Quiz Tutorial, but concerning today’s idea we wanted to explore, it comes more in line with the idea of …


web application tool

… involving the idea of incorporating circular text in the design and creation of a button.

Getting this going, we could imagine uses straight from today’s amended code ideas, but the original thought for all this stemmed from another integration idea that we’ll see what happens about into the near future.

We need to facilite additional optional pieces of information in addition to the already asked for …

  • font size (in px)
  • radius (in px)
  • arc (in degrees)
  • circular text … but, today, into that same “circular text” textbox (with the new placeholder advice) …

    this text is in a circle &#x1f34d; &#x1f34c; (Optionally | separate words and image URL and onclick URL)

    … allowing for new optional …

  • inner text (of the div element the circular text surrounds)
  • background image URL (background-repeat:no-repeat; and background-size:cover;)
  • onclick URL to navigate to

… to open up the possibility of showing a user constructed button with a look that can resemble a button and onclick logic that can help this button be useful to a user, in a dynamic way, as you can see with today’s animated GIF presentation, creating a button shown here or here or

Let’s see how the onload event logic changed below …


function onl() {
var factor=1.0;
var stt=0, stl=0;
var crad=location.search.split('radius=')[1] ? decodeURIComponent(location.search.split('radius=')[1].split('&')[0]) : '' + rad;
if (atendih != '' || atendim != '' || atendiu != '') {
//document.title='' + eval(eval(-0.5 * screen.width) + eval(crad / 2.0) - 30) + 'px';
//document.getElementById('mycontainer').style.marginLeft='' + eval(eval(-0.5 * screen.width) + eval(crad / 2.0) - 30) + 'px';
//document.title='' + eval(eval(-0.5 * window.innerWidth) + eval(crad / 2.0) - 30) + 'px';
var recta=document.getElementById('mycontainer').getBoundingClientRect();
if (1 == 1) {
//alert('' + recta.left);
document.getElementById('mycontainer').style.marginLeft='' + eval(eval(-0.5 * recta.width) + eval(crad * 1.0) - 30) + 'px';
} else {
document.getElementById('mycontainer').style.marginLeft='' + eval(eval(-0.5 * window.innerWidth) + eval(crad / 2.0) - 220) + 'px';
}
document.getElementById('mycontainer').style.marginTop='-40px';
if (atendih != '') { document.getElementById('atend').innerHTML='<br>' + atendih; }
if (atendim != '') {
//alert(atendim);
if (atendih.trim() != '') {
document.getElementById('atend').style.background="linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),URL('" + atendim + "')";
} else {
document.getElementById('atend').style.background="URL('" + atendim + "')";
}
document.getElementById('atend').style.backgroundRepeat="no-repeat";
document.getElementById('atend').style.backgroundSize="cover";
}
if (atendiu != '') {
document.getElementById('atend').title = 'Click for ' + atendiu;
document.getElementById('atend').onclick = function() { window.open(atendiu, '_blank', 'top=50,left=50,width=600,height=600'); };
}
setTimeout(detvis, 5000);
} else {
document.getElementById('mydetails').open=true;
}

var notr=location.search.split('notr=')[1] ? (' ' + decodeURIComponent(location.search.split('notr=')[1].split('&')[0])) : '';
var textis=location.search.split('text=')[1] ? decodeURIComponent(location.search.split('text=')[1].split('&')[0]) : '';
if (textis == rw) { if (notr == '') { isRoulette=true; } else { isThirtySeven=true; } preitc=oncr + " class=\"roulettered\""; }
deg=location.search.split('degrees=')[1] ? eval(decodeURIComponent(location.search.split('degrees=')[1].split('&')[0])) : deg;
fs=location.search.split('fontsize=')[1] ? decodeURIComponent(location.search.split('fontsize=')[1].split('&')[0]) : fs;
if (crad != ('' + rad)) {
if (crad.indexOf('.') != -1) {
deg=eval(crad.split('.')[1]);
rad=eval(crad.split('.')[0]);
} else if (rad.indexOf('.') != -1) {
deg=eval(rad.split('.')[1]);
rad=eval(rad.split('.')[0]);
} else {
rad=eval(crad);
}
}
document.getElementById('iself').value='' + fs;
//alert(1);
if (('' + rad) != '100' || ('' + deg) != '360') { radbit='radius=' + encodeURIComponent('' + rad + '.' + deg) + '&'; document.getElementById('irad').value=('' + rad).split('.')[0]; document.getElementById('ideg').value='' + deg; }
if (textis == '') {
//alert(11);
circularText("this text is in a circle &#x1f34d; &#x1f34c; (Optionally | separate words and image URL and onclick URL)", rad, deg);
} else {
//document.getElementById('inp').value=textis; //.replace(/\&\#/g,'&#');
//alert(textis);
//alert(111);
circularText(textis, rad, deg);
document.getElementById('inp').value=textis.replace(/\&\#/g,'&#');
}
var rect=document.getElementById('test').getBoundingClientRect();
var twenty=20, thirtyeight=38, thirtyeight=38, twentyeight=28, four=4;
//alert(1111);
if (isRoulette || isThirtySeven) {
//alert('here');
twenty=-15;
thirtyeight=-30;
twentyeight=0;
four=-14;
} else if (window.self !== window.top && (atendih != '' || atendim != '' || atendiu != '')) {
//alert(11111);
twenty=25;
} //else {
//alert(98);
//}
//alert('' + rect.left + ',' + rect.top + ' ... ' + rect.width + ',' + rect.height);
document.getElementById('atend').style.position='absolute';
document.getElementById('atend').style.left=eval(factor * eval(-rad + (eval('' + twenty)) + rect.left)) + 'px';
stl=eval(factor * eval(-rad + (eval('' + twenty)) + rect.left));
//document.getElementById('atend').style.top=eval(38 + rect.top) + 'px';
//document.getElementById('atend').style.top=eval(98 + rect.top) + 'px'; // 14.34 32.? 54.98
document.getElementById('atend').style.top=eval(factor * eval(eval('' + fs) * 2 + (eval('' + four)) + eval('' + rect.top))) + 'px';
stt=eval(factor * eval(eval('' + fs) * 2 + (eval('' + four)) + eval('' + rect.top)));

document.getElementById('atend').style.width=eval(2 * rad - (eval('' + thirtyeight))) + 'px';
document.getElementById('atend').style.height=eval(2 * rad - (eval('' + thirtyeight))) + 'px';
//document.getElementById('atend').innerHTML='X';
document.getElementById('atend').style.borderRadius=eval(2 * rad - twentyeight) + 'px';
//if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.backgroundColor='#c0d0f0'; } //'transparent';
if (document.getElementById('atend').innerHTML != '' && atendim == '') {
document.getElementById('atend').style.background='radial-gradient(circle,#c0d0f0,#c3d3f3)';
} else if (isThirtySeven) {
document.getElementById('atend').style.backgroundColor='rgba(165,265,0,0.3)';
document.getElementById('atend').innerHTML='<p id=pscore>Score: ' + score + '/' + goes + '</p>Pick Your <br>Periodic Table <br>Symbol<br><i><b><div contenteditable=true onblur=huhd(this.innerHTML); onchange=huhd(this.innerHTML); id=mynum>?</div></b></i>';
//alert(76);
} else if (isRoulette) {
document.getElementById('atend').style.backgroundColor='rgba(265,165,0,0.3)';
document.getElementById('atend').innerHTML='Score: ' + score + '/' + goes + '<br>Pick Your Number<br><i><b><div contenteditable=true onblur=huhd(this.innerHTML); onchange=huhd(this.innerHTML); id=mynum>?</div></b></i>';
var ccl=Math.floor(eval(eval(-rad + (eval('' + twenty)) + rect.left) + eval(eval(2 * rad - (eval('' + thirtyeight))) / 2)));
var cct=Math.floor(eval(eval(eval('' + fs) * 2 + (eval('' + four)) + eval('' + rect.top)) + eval(eval(2 * rad - (eval('' + thirtyeight))) / 2)));
lasta=document.getElementById('myballdivtwo');
animateonorbit('myballdivtwo', ccl, cct, 150, 6);
var toccl=eval(180 + ccl);
var tocct=eval(180 + cct);
lasta=document.getElementById('myballdiv');
//animateonline('myballdiv', ccl, cct, toccl, tocct, 6);

} //#c0d0f0'; } //'transparent';
//document.getElementById('atend').style.display='none';
atendih='';
atendiu='';
atendim='';
}

… in today’s changed Javascript circular_text.html‘s live run link for you to try this new circular text button creating logic.

Previous relevant Chemistry Wonder Periodic Table Quiz Tutorial is shown below.

Chemistry Wonder Periodic Table Quiz Tutorial

Chemistry Wonder Periodic Table Quiz Tutorial

We had occasion to revisit Circular Text or Emoji Periodic Table Quiz Tutorial and it set us to wondering if you can just feed a chemical equation or formula into the Google search engine and …

  • find out good chemistry based information … Spoiler Alert: yes
  • even be set right that an inputted formula is probably inaccurate and a “nearby” known compound equation or formula is such and such … Spoiler Alert: yes

And so we added “dead end” but “non interfering” Javascript code, such code often working off window.prompt user interactive entry functionality, to add this feature into the existant “Periodic Table Quiz” functionality, as per …


function huhd(dv) {
var formula='', nonformula='', wds=[], prevanswer='';
var answer='',ans='',wasih='';
if (isThirtySeven) {
if (dv.trim().length <= 2 && dv.indexOf('/') == -1) {
answer=prompt('What is the name of the element in the Period Table with the symbol ' + dv.trim() + '? To just find out, but not score, enter a question mark. Append on numbers and symbology to name a compound we can look up for you as you please.', '');
if (answer == null) { answer='' }
goes++;
wds=answer.split(' ');
prevanswer=answer;
answer=answer.replace(wds[eval(-1 + wds.length)], dv.trim() + wds[eval(-1 + wds.length)]).replace(/NaCl$/g, 'NaCl()').replace(/KBr$/g, 'KBr()').replace(/CsF$/g, 'CsF()').replace(/CdS$/g, 'CdS()').replace(/Nacl$/g, 'Nacl()').replace(/Kbr$/g, 'Kbr()').replace(/Csf$/g, 'Csf()').replace(/Cds$/g, 'Cds()').replace(/NaCL$/g, 'NaCL()').replace(/KBR$/g, 'KBR()').replace(dv.trim() + wds[eval(-1 + wds.length)], wds[eval(-1 + wds.length)]);
//alert(answer);
if (answer.replace('?','').trim() != '' && answer.replace('(','').replace(')','').replace('0','').replace('1','').replace('2','').replace('3','').replace('4','').replace('5','').replace('6','').replace('7','').replace('8','').replace('9','') != answer) {
nonformula=answer.split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0].split('()')[0];
//alert('nonformula=' + nonformula + ' dv=' + dv.trim());
if (prevanswer != answer || 8 == 8) {
formula=dv.trim() + answer.split(' ')[eval(-1 + answer.split(' ').length)]; //.split('()')[0];
answer=answer.replace(answer.split(' ')[eval(-1 + answer.split(' ').length)], '');
formula=formula.split('()')[0];
} else {
formula=dv.trim() + answer.substring(nonformula.length).split('()')[0];
answer=nonformula.trim();
}
//alert('formula=' + formula + ' dv=' + dv.trim());
window.open('//www.google.com/search?q=' + encodeURIComponent(formula), '_blank', 'top=50,left=50,width=600,height=600');
}
if (answer.trim() == '?') {
goes--;
answer='';
ans=document.head.innerHTML.replace(/\"/g,"'").split("'" + dv.trim() + ":")[1].split("'")[0];
}
if (document.head.innerHTML.toLowerCase().replace(/\"/g,"'").indexOf("'" + dv.trim().toLowerCase() + ":" + (answer + ans).toLowerCase() + "'") != -1) {
if (answer.trim() != '') { score++; }
wasih=lastois.innerHTML;
lastois.innerHTML='<font size=1><a title="Click here for Google search" target=_blank style="color:white;text-decoration:none;cursor:pointer;" href="https://www.google.com/search?q=' + encodeURIComponent(answer + ans) + '">' + answer + ans + '</a></font><br>' + wasih;
}
document.getElementById('pscore').innerHTML='Score: ' + score + '/' + goes;
document.getElementById('p36').innerHTML='' + score + '/' + goes;
}
userpicked='';
} else {
if (dv.trim() == '') {
if (userpicked != '') {
document.getElementById('mynum').innerHTML=userpicked;
} else {
document.getElementById('mynum').innerHTML='?';
}
} else if (dv.toLowerCase() == 'red' || dv.toLowerCase() == 'green' || dv.toLowerCase() == 'black') {
userpicked=dv.toLowerCase();
} else if (dv.substring(0,1) >= '0' && dv.substring(0,1) <= '9') {
var huhi=eval('' + dv);
if (huhi >= 0 && huhi <= 36) {
userpicked=dv;
document.getElementById('mynum').innerHTML=userpicked;
} else {
if (userpicked != '') {
document.getElementById('mynum').innerHTML=userpicked;
} else {
document.getElementById('mynum').innerHTML='?';
}
}
} else {
if (userpicked != '') {
document.getElementById('mynum').innerHTML=userpicked;
} else {
document.getElementById('mynum').innerHTML='?';
}
}
}
}

… in today’s changed Javascript circular_text.html‘s Periodic Table Quiz live run link for you to try the Periodic Table Quiz (now featuring new improved “Chemistry Compound Formula Wonder” prompting) part of the functionality yourself at a link up the top of the webpage.

Previous relevant Circular Text or Emoji Periodic Table Quiz Tutorial is shown below.

Circular Text or Emoji Periodic Table Quiz Tutorial

Circular Text or Emoji Periodic Table Quiz Tutorial

Meanwhile, back at Circular Text ideas we were wondering if we could add more interest to a quiz by making the circular ends to a similar wheel as the roulette wheel (as discussed with Circular Text or Emoji Roulette Animation Tutorial) be clickable as the user’s way to learn about some Periodic Table symbols and correspondent names.

We are forever wondering about ways to hide answers from users, for quizzes and games. Well, at least for those users not venturing to any Webpage -> View Source ideas, that is. Today’s sort of clunky, yet satisfying, way is to hide the Periodic Table element names, along with their symbols, in a single dimension array. Then we use that, scouring the whole <head> </head> using the DOM document.head.innerHTML reference approach, in the way below (and we warn that if you do not want help with the game avert your gaze below 1.734523417cm down the webpage) …


var pts=['H:Hydrogen','He:Helium','Li:Lithium','Be:Beryllium','B:Boron','C:Carbon','N:Nitrogen','O:Oxygen','F:Fluorine','Ne:Neon','Na:Sodium','Mg:Magnesium','Al:Aluminium','Si:Silicon','P:Phosphorus','S:Sulphur','Cl:Chlorine','Ar:Argon','K:Potassium','Ca:Calcium','Sc:Scandium','Ti:Titanium','V:Vanadium','Cr:Chromium','Mn:Manganese','Fe:Iron','Co:Cobalt','Ni:Nickel','Cu:Copper','Zn:Zinc','Ga:Gallium','Ge:Germanium','As:Arsenic','Se:Selenium','Br:Bromine','Kr:Krypton'];

function huhd(dv) {
var answer='',ans='',wasih='';
if (isThirtySeven) { // Periodic Table Quiz logic
if (dv.trim().length <= 2 && dv.indexOf('/') == -1) {
answer=prompt('What is the name of the element in the Period Table with the symbol ' + dv.trim() + '? To just find out, but not score, enter a question mark.', '');
if (answer == null) { answer='' }
goes++;
if (answer == '?') {
answer='';
ans=document.head.innerHTML.replace(/\"/g,"'").split("'" + dv.trim() + ":")[1].split("'")[0];
}
if (document.head.innerHTML.toLowerCase().replace(/\"/g,"'").indexOf("'" + dv.trim().toLowerCase() + ":" + (answer + ans).toLowerCase() + "'") != -1) {
if (answer != '') { score++; }
wasih=lastois.innerHTML;
lastois.innerHTML='<font size=1><a title="Click here for Google search" target=_blank style="color:white;text-decoration:none;cursor:pointer;" href="https://www.google.com/search?q=' + encodeURIComponent(answer + ans) + '">' + answer + ans + '</a></font><br>' + wasih;
}
document.getElementById('pscore').innerHTML='Score: ' + score + '/' + goes;
document.getElementById('p36').innerHTML='' + score + '/' + goes;
}
userpicked='';
}
// rest for Roulette logic
}

… and the other way this array is used is to populate the content of the wheel outer rim, starting with the Roulette Wheel content as a template, via …


function reworked(intis) { // RE: pts array Period Table symbol/name quiz
// 3<span>2</span>1<span>5</span>1<span>9</span>42<span>1</span>22<span>5</span>1<span>7</span>3<span>4</span>62<span>7</span>1<span>3</span>3<span>6</span>1<span>1</span>3<span>0</span>82<span>3</span>1<span>0</span>52<span>4</span>1<span>6</span>3<span>3</span>12<span>0</span>1<span>4</span>3<span>1</span>92<span>2</span>1<span>8</span>2<span>9</span>72<span>8</span>1<span>2</span>3<span>5</span>32<span>6</span>0
var okayis=false, outtis=intis + '<span>/0</span>', sofar=',', iso=-1;
var outtisa='3<span>2</span>;1<span>5</span>;1<span>9</span>;4;2<span>1</span>;2;2<span>5</span>;1<span>7</span>;3<span>4</span>;6;2<span>7</span>;1<span>3</span>;3<span>6</span>;1<span>1</span>;3<span>0</span>;8;2<span>3</span>;1<span>0</span>;5;2<span>4</span>;1<span>6</span>;3<span>3</span>;1;2<span>0</span>;1<span>4</span>;3<span>1</span>;9;2<span>2</span>;1<span>8</span>;2<span>9</span>;7;2<span>8</span>;1<span>2</span>;3<span>5</span>;3;2<span>6</span>'.split(';'); //;0<span>/0</span>';
for (var i=0; i<pts.length; i++) {
okayis=false;
while (!okayis) {
iso=Math.floor(Math.random() * pts.length);
if (sofar.indexOf(',' + iso + ',') == -1) { okayis=true; sofar+='' + iso + ','; }
}
if (pts[iso].split(':')[0].length == 1) {
outtis=outtis.replace(outtisa[i], pts[iso].split(':')[0]);
} else {
outtis=outtis.replace(outtisa[i], pts[iso].split(':')[0].substring(0,1) + '<span>' + pts[iso].split(':')[0].substring(1) + '</span>');
}
}
return outtis;
}

… also illustrating our sofar variable oft used technique of appending to a delimited single string that is “indexOf”ed against to determine if an action has previously been taken, and, in this case here, not do it more than once.

Today’s changed HTML and CSS circular_text.html‘s live run link for you to try the Periodic Table Quiz part of the functionality yourself at a link up the top of the webpage.

Previous relevant Circular Text or Emoji Roulette Animation Tutorial is shown below.

Circular Text or Emoji Roulette Animation Tutorial

Circular Text or Emoji Roulette Animation Tutorial

As we left off with the recent Circular Text or Emoji Roulette Game Tutorial we wanted to improve on the animation aspects to representing the roulette wheel ball, but still only involve …

… and it was this in orbit bit that daunted us most. That is, until we …

  • read the great advice of this link, thanks … and enjoyed the wonder of …
  • how dynamic and easy dynamic CSS styling can be simply by adding <style> </style> encased styling to the end of document.body.innerHTML … via …

    function animateonorbit(bid, ccl, cct, anrad, fhl) { // thanks to https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
    var dba='<style> #' + bid + ' { display:block; top:' + cct + 'px; ';
    dba+=' left:' + ccl + 'px; position:absolute; -moz-border-radius: 12px; border-radius: 12px; ';
    dba+=' filter: alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; transform: rotate(45deg) translateX(' + anrad + 'px) rotate(-45deg); ';
    dba+=' animation:animateonorbit ' + fhl + 's linear infinite; -webkit-animation:animateonorbit ' + fhl + 's linear infinite; z-index:79; } ';
    dba+=' @keyframes animateonorbit { from { transform: rotate(0deg) translateX(' + anrad + 'px) rotate(0deg); } ';
    dba+=' to { transform: rotate(360deg) translateX(' + anrad + 'px) rotate(-360deg); } ';
    dba+=' @-webkit-keyframes animateonorbit { from { -webkit-transform: rotate(0deg) translateX(' + anrad + 'px) rotate(0deg); } ';
    dba+=' to { -webkit-transform: rotate(360deg) translateX(' + anrad + 'px) rotate(-360deg); } </style> ';
    document.body.innerHTML+=dba;
    lasto=document.getElementById(bid);
    document.getElementById(bid).style.display='block';
    }

Today’s changed HTML and CSS circular_text.html‘s live run link for you to try the Roulette Wheel (and its animated ball) part of the functionality yourself at a link up the top of the webpage.

Previous relevant Circular Text or Emoji Roulette Game Tutorial is shown below.

Circular Text or Emoji Roulette Game Tutorial

Circular Text or Emoji Roulette Game Tutorial

Extending the recent Circular Text or Emoji Onclick Tutorial circular text ideas, today we are starting out on a game that uses a Roulette Wheel as its basic web page component. To all those “graphically challenged” users, like me, we do not use any homegrown imagery of any sort, instead just use …

  • HTML basis of design …
  • CSS as …
    1. <head> </head> styling …

      <style>
      .roulettered { color:white; background:linear-gradient(to top,orange 92%,red 8%); }
      .rouletteblack { color:white; background:linear-gradient(to top,orange 92%,black 8%); }
      .roulettegreen { color:white; background:linear-gradient(to top,orange 92%,green 8%); }
      </style>
    2. inline HTML styling
  • Javascript DOM dynamic styling and animation (the roulette wheel is sent spinning via setTimeout Javascript timer logic)

… involving our original …

  • “circular text” as the numbers near the outer rim of the roulette wheel
  • background border-radius parts in the middle (‘atend’ element) as the ribbing bits that form the rest of the roulette wheel

… and, so far, the one ball emoji at the end of a user turn. This last bit is where we feel we shall work at more improvement.

Today’s changed HTML circular_text.html‘s live run link for you to try the Roulette Wheel part of the functionality yourself at a link up the top of the webpage. You can guess a number or red or black or green colours, and odds based scoring is applied.

Previous relevant Circular Text or Emoji Onclick Tutorial is shown below.

Circular Text or Emoji Onclick Tutorial

Circular Text or Emoji Onclick Tutorial

In this increasingly connected online world, it can be surprising when an image looking part of a webpage cannot be linked to. The unusual thing about emojis is their way to …

  • be part of the textual web armoury … yet …
  • look like an image

… and, as such, it would definitely not offend, maybe even “tickle pink” the user to have an emoji be linked to further information. In the case of the emojis featuring in yesterday’s Circular Text or Emojis Genericity Tutorial which are country flags (that are compound emojis) you can query the Google search engine with the contents of the Iemoji website webpages (such as Japan’s flag emoji one) with the right column data next to the “Decimal HTML Entity” left column. In fact, as we often urge our students, just copy this Decimal HTML Entity value straight up into the address bar, and your favourite search engine is likely to come up with a (in my case Google) search engine URL like …


https://www.google.com/search?client=firefox-b-ab&q=%26%23127471%3B+%26%23127477%3B

… getting you (emoji onclick event) links to some pretty pertinent information about Japan within seconds, let alone what you might find under the Images and/or Videos menu subsearches. Notice how integrated this is with the Google search engine webpages …

The Flag: Japan emoji is a sequence of the 🇯 Regional Indicator Symbol Letter J and 🇵 Regional Indicator Symbol Letter P emojis. These display as a single emoji on supported platforms.

… showing you how ISO 2-letter codes are linked to emoji country flag Decimal HTML Entity creation construction rules.

Today’s changed HTML circular_text.html‘s live run link for you to try yourself (or try the changed PHP circular_text.php‘s live run), then, features …

  • changed emoji linking, the one thing left to say about this being, that the “missing link” between text and link HTML elements can be that elements that start as text can be made to act like linked elements (later) via (definitely the first, and sometimes, but not today, the second) CSS styling (via inline HTML CSS style=””) …
    1. cursor:pointer;
    2. text-decoration:underline;

    … we make happen within the webpage’s Javascript (DOM) code

  • functionality to be able to increase or decease the circular text’s font size (that being the way to control an emoji size as well, that reminds you that emojis are text, just not that very small part of the text world with ascii codes less than 256)
  • a very subtle radial gradient background replaces the single colour background colour for the HTML ‘atend’ div element within the circular text as per …

    if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.background='radial-gradient(circle,#c0d0f0,#c3d3f3)'; } //#c0d0f0'; } //'transparent';

Previous relevant Circular Text or Emojis Genericity Tutorial is shown below.

Circular Text or Emojis Genericity Tutorial

Circular Text or Emojis Genericity Tutorial

A major consideration in any “genericity” drive you have for your web applications is to allow for a large amount of user entered data, perhaps a surprising amount. If you offer a textbox to enter data, then a user may enter a hugely long, and perhaps valid, field. If we’d left it at the scenario of yesterday’s Circular Text or Emojis Analogue Clock Tutorial, though, we’d have been restricted to a textbox entry of about 800 characters for the rjmprogramming.com.au domain. In the first of the improvements below, then, we try to cater for this via …

  • for textbox entries that are long we now populate an HTML form method=POST action=circular_text.php where we intervene at appropriate places with the large data items … and today we also …
  • make sure compound emojis like the country flags work (where the great Iemoji website webpages such as Japan’s flag emoji one, become so useful) … and we test that out with a …
  • Google Chart Pie Chart content inside the circular text

… and an interesting thing happened with the “getting to work” of today’s textbox entry (for a radius value of 570) you can try …


                        &#127464;&#127475;                        &#127470;&#127475;       &#127482;&#127480;     &#127470;&#127465;     &#127463;&#127479;    &#127477;&#127472;    &#127475;&#127468;    &#127463;&#127465;    &#127479;&#127482;   &#127471;&#127477;   &#127474;&#127485;   &#127477;&#127469;  &#127483;&#127475;  &#127466;&#127481;  &#127465;&#127466;  &#127466;&#127468; &#127470;&#127479; &#127481;&#127479; &#127481;&#127469; &#127464;&#127465; &#127467;&#127479; &#127468;&#127463; &#127470;&#127481;<iframe frameborder=0 style=border-radius:600px;width:900px;height:600px;z-index:23;margin-left:87px;margin-top:270px; src=https://www.rjmprogramming.com.au/PHP/PieChart/pie_chart.php?title=%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0Country%20Populations&onclick=y&task=Country&desc=Populations&data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]#bitsatend></iframe>

… where the use of %c2%a0 creates whitespace but isn’t cleared by your normal trim functions, which is how we managed to get our Pie Chart title centralized enough not to be cut off by the HTML iframe border-radius applied to it. Cute, huh?!

Here is today’s changed circular_text.html‘s live run link for you to try yourself.

Previous relevant Circular Text or Emojis Analogue Clock Tutorial is shown below.

Circular Text or Emojis Analogue Clock Tutorial

Circular Text or Emojis Analogue Clock Tutorial

Often a good way to proceed to challenge genericity issues with a web application you think has potential to be more than it appears is to make it be the missing piece to another web application and interface to it. This is the scenario, today, putting together yesterday’s …

This interfacing match is great, as it fills in a gap, but there are a couple of things to overcome, those being …

  1. allow for a circular text component consist of more than one character, and here we allow the user to put …

    1<span>2</span>

    … to show “12” for example
  2. allow for an element like the HTML iframe “child” element be the contents within a newly introduced HTML div element for today’s changed circular_text.html‘s live run placed into the … anyone, anyone? … yes, Franklin D. Roosevelt, that would be in the circle the circular text goes around, and we do that stylewise via (on the fly Javascript) code making use of the centrally justified circular text element (curiously causing rect.width and rect.height below to be zero) …


    var rect=document.getElementById('test').getBoundingClientRect();
    document.getElementById('atend').style.position='absolute';
    document.getElementById('atend').style.left=eval(-rad + 20 + rect.left) + 'px';
    document.getElementById('atend').style.top=eval(38 + rect.top) + 'px';
    document.getElementById('atend').style.width=eval(2 * rad - 38) + 'px';
    document.getElementById('atend').style.height=eval(2 * rad - 38) + 'px';
    document.getElementById('atend').style.borderRadius=eval(2 * rad - 28) + 'px';
    if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.backgroundColor='#c0d0f0'; } //'transparent';

    … and ahead of this our user entered data needed for the Analogue Clock has an HTML (child) iframe element part …


    1<span>2</span>1234567891<span>0</span>1<span>1</span><iframe scrolling=no frameborder=0 style='z-index:23;margin-left:127px;margin-top:130px;height:400px;' src=analogue_clock.htm#xbody></iframe>

    … that we figure, because it is HTML containing spaces in its non-innerHTML parts, is meant as content for that new ‘atend’ HTML div element located in the middle of the circular text, and created via the codeline reached in this scenario …


    function justinnertextish(intx, within) {
    var sone=1, tagis='', iit=0, less=false, ioffset=0;
    outx=intx;
    it=[];
    if (intx.indexOf('</') != -1) {
    outx="";
    for (iit=0; iit<intx.length; iit+=sone) {
    if (intx.substring(iit, eval(1 + iit)) == '<') {
    tagis=intx.substring(iit).substring(1).split('>')[0];
    less=false;
    if (tagis.indexOf(' ') != -1 || within) {
    less=true;
    document.getElementById('atend').innerHTML='<' + tagis + '>' + intx.substring(eval(iit + 2 + tagis.length)).split('>')[0] + '>';

    // etcetera etcetera etcetera

Got the time?

Previous relevant Circular Text or Emojis Primer Tutorial is shown below.

Circular Text or Emojis Primer Tutorial

Circular Text or Emojis Primer Tutorial

We’ve got a “proof of concept” tutorial for you today, because we got put onto an idea for something by How to Make Circular/Curved Text with JavaScript, thanks. We wanted to extend the logic of that …

  • ascii codes (of characters) less than 256, text handling … to, now, be able to handle …
  • emoji data (or that’s what we like to “nickname” it … sorry if this annoys, but it really concerns UTF-8 characters really

We resisted the Sushi Train Circuit Game Tutorial ideas, because it isn’t lunchtime, and opted to allow the user to enter their own text (including any emojis (available via Command-Control-Space menu here at Mac OS X) or via &#[CodePoint]; HTML Entity (decimal or hexidecimal (CodePoint)) entries (where we’d like you to put &amp; rather than just & if you are going to do this, and if you want to do this, but need tips on how you might approach this, please consult our previous Karaoke via YouTube API in Iframe Emoji Tutorial where we often start at good ol’ emojipedia).

Maybe there will be some sequels, but for the meantime you can examine the HTML and Javascript circular_text.html code (including more thank you links), that you can try for yourself at this live run link.

With that in mind, take a look at us creeping through the text characters you enter, and notice how an emoji will have two bytes in a row with ascii code greater than 255 …


var etxt=intxt.replace(/\&amp\;/g,'&').replace(/\;\&\#/g,',').split('&#'); // intxt is your text
var txt=[], zero=0; // changed elsewhere as well

var one=1;
for (kk=zero; kk<etxt[k].length; kk+=one) {
if (etxt[k].substring(kk, eval(1 + kk)).charCodeAt(0) > 255) { // emoji found
txt.push(String.fromCodePoint(eval('' + etxt[k].substring(kk).charCodeAt(0)),eval('' + etxt[k].substring(kk).substring(1).charCodeAt(0)) ));
one=2;
} else { // normal ascii text
txt.push(etxt[k].substring(kk, eval(1 + kk)));
one=1;
}
}
}
one=1;
zero=0;

You can also see this play out at WordPress 4.1.1’s Circular Text or Emojis Primer Tutorial.

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.

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment