Walking Trip …

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

Google Translate Landing Page Translate Updated List Tutorial

Google Translate Landing Page Translate Updated List Tutorial

Google Translate Landing Page Translate Updated List Tutorial

Yesterday’s Google Translate Landing Page Translate Update Tutorial left off with …

It’s the start that does not ingrain the webpage HTML to any great permanence, and that is for another “PHP involvement” day.

… and that new day is upon us. Whenever you combine …

  • PHP writing public HTML webpage data … with …
  • a user interface (and we’d really only like that “user set” to be an administrator of this blog)

… it’s a potential data security issue you are opening up, and yet, we do want to involve some automation of webpage code here for something that can be ascertained. So let’s try to protect ourselves (to some degree) regarding the PHP below …

<?php

if (isset($_POST['langih']) && strpos(strtolower('' . $_SERVER['HTTP_REFERER']), "rjmprogramming.com.au/about_us.html") !== false) {
$prefis="./";
$ftf=["index.htm","index.html","indexmobile.html","About_Us.html","Contact_Us.html","Guestbook.html","Link.html","Links.html","Services.html","Welcome.html","News.html","Welcome.htm","Welcomeslideshow.htm","Welcomeslideshow.html","slideshow.html"];
$lih=str_replace("+", " ", urldecode($_POST['langih']));
if (strpos("~" . strtolower($lih), "~<option") !== false) {
if (strpos(strtolower($lih) . "~", "</option>~") !== false) {
if (strpos($lih, ">Blog Language") !== false) {



for ($i=0; $i<sizeof($ftf); $i++) {
if (file_exists($prefis . $ftf[$i])) {
$cont=file_get_contents($prefis . $ftf[$i]);
if (strpos($cont, ">Blog Language") !== false) {
if (strpos(str_replace("<option","",str_replace("</option>","",strtolower($lih))), "<") === false) {
if (strlen(explode("</select>", explode(">Blog Language", $lih)[1])[0]) > strlen($wasis)) {
if (sizeof(explode(">",explode("</select>", explode(">Blog Language", $lih)[1])[0])) >= sizeof(explode(">",$wasis))) {

file_put_contents($prefis . $ftf[$i] . "_spare", $cont);
$wasis=explode("</select>", explode(">Blog Language", $cont)[1])[0];
$contnew=str_replace($wasis, explode("</select>", explode(">Blog Language", $lih)[1])[0], $cont);
file_put_contents($prefis . $ftf[$i], $contnew);
}
}
}
}
}
}


}
}
}

}
exit;

?>

… restricting calling URLs and some of the look and size and content of the posted data, and working with the “About Us” webpage “place” to automate, the idea of choosing “English” from the “Blog Language” dropdown, as per the changed Javascript and Ajax “way in”


function ChangeLcodeNow(){
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
} else if (val.value.length != 0 && val.value.indexOf('en') != (0 - 1)) {
if (ajaxitp) { ajaxitp(); }
}

}

function ajaxitp() {
var xurl = './getme.php';
var formis = new FormData();
myxhr = new XMLHttpRequest();
if (myxhr) {
formis.append('langih', document.getElementById('language').innerHTML);
myxhr.open('POST', xurl); //, true);
myxhr.send(formis);
}
}


Previous relevant Google Translate Landing Page Translate Update Tutorial is shown below.

Google Translate Landing Page Translate Update Tutorial

Google Translate Landing Page Translate Update Tutorial

The recent Google Translate Landing Page Translate Tutorial

… and so, we are here today, with our start to remedies for this (Javascript DOM, via Ajax, change below) …


var myxhr=null;

function backin() {


if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
if (myxhr.responseText) {
if (document.getElementById('language')) {
//alert(myxhr.responseText);
var mhs=myxhr.responseText.replace(/\<\/code\>\<\/td\>/g,'<>').split('><code translate="no" dir="ltr">');
if (mhs.length > 1) {
var thiscodeis='', thisdescis='';
var wasih=document.getElementById('language').innerHTML;
var outih=wasih.split('</option>')[0] + '</option>';
var origih=wasih.replace(outih, '');
for (var iuh=1; iuh<mhs.length; iuh++) {
thisdescis=mhs[eval(-1 + iuh)].split('<td>')[eval(-1 + mhs[eval(-1 + iuh)].split('<td>').length)];
//console.log('first thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
thisdescis=thisdescis.split('<')[0];
thiscodeis=mhs[iuh].split('<')[0].split('(')[0].trim();
//console.log('thiscodeis=' + thiscodeis + ' and thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
if (wasih.toLowerCase().indexOf(' value="' + thiscodeis.toLowerCase() + '"') == -1 && wasih.toLowerCase().indexOf(thisdescis.toLowerCase()) == -1) {
outih+='<option value="' + thiscodeis + '">' + thisdescis + ' &#10024;</OPTION>';
} else {
outih+='<option value="' + thiscodeis + '">' + thisdescis + '</OPTION>';
}
}
if (outih.indexOf('/OPTION') != -1 && origih.toLowerCase() != outih.toLowerCase()) {
document.getElementById('language').innerHTML=outih.replace('</option>', ' &#10024;</OPTION>');
document.getElementById('language').style.maxWidth='150px';
}
}
}
}
}
}
}

function ajaxit() {
var xurl = '//cloud.google.com/translate/docs/languages';
//alert(1);
myxhr = new XMLHttpRequest();
if (myxhr) {
//alert(2);
myxhr.onreadystatechange = backin;
myxhr.open('GET', 'getme.php?getme=' + encodeURIComponent(xurl), true);
myxhr.send(null);
}
}

function refreshl() {
if (document.getElementById('language')) {
ajaxit();
}
}

setTimeout(refreshl, 5000);

It’s the start that does not ingrain the webpage HTML to any great permanence, and that is for another “PHP involvement” day.


Previous relevant Google Translate Landing Page Translate Tutorial is shown below.

Google Translate Landing Page Translate Tutorial

Google Translate Landing Page Translate Tutorial

Yesterday’s …

  • Google Translate Webpage Translate Tutorial was the major part of RJM Programming’s Google Translate strategy change (ie. getting it working again … doh!) … but it’s not the whole story … and another part is …
  • today we extend that strategy to change the RJM Programming Landing Page Google Translate interfacing to change from a “Landing Page content” strategy to a “Navigate to WordPress Blog” strategy (feeding into yesterday’s thinking), our justification being that the better content of the RJM Programming domain sits within the WordPress Blog we support and maintain

… so there, ngarrrrgh!

But (growing up quickly) we see a better arrangement here, just adding the prefix “Blog” onto the old (just) “Language” labelled dropdown to modify the “new “Blog Language” (to end up with HTML snippet <option value=””>Blog Language</option>) dropdown’s Javascript “onchange” event logic …


// To ...
function ChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
}
//]]>
}


// ... From ...
function olderChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
windowopen('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Findex.html&tl=' + val.value, '_blank');
}
//]]>
}

Again, not too onerous!


Previous relevant Google Translate Webpage Translate Tutorial is shown below.

Google Translate Webpage Translate Tutorial

Google Translate Webpage Translate Tutorial

We really like the way Google Translate can language translate whole webpages for URLs of choice, sometimes. We use it here at this blog, but sometime into the past … we cannot recall (sorrrrrryyyyyyyyy!) … the arrangements of use of this great functionality changed, and today we want to go over what we did for this blog to fix some of this interfacing.

It was in good ol’ WordPress TwentyTen theme’s header.php we made the change to facilitate this “reconnection” to this great functionality …

<?php

function ChangeLcodeNow(){
var val = document.getElementById('language');
//alert(val.value);
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
//alert(val.value);
var pprefix = val[val.selectedIndex].id;
<?php
$p316 = "316";
$pprefix = "";
if (strpos($_SERVER['QUERY_STRING'], "p=0") !== false) {
$pprefix = "";
} else {
if (isset($_GET['p'])) {
if (strpos($_GET['p'], "304") !== false) {
$p316 = "316";
} else {
$p316 = $_GET['p'];
}
}

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
}
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
}

if (1 == 1) { // _x_tr_sl=en&_x_tr_tl=de&_x_tr_hl=en-GB&_x_tr_pto=nui
echo " window.open('//www-rjmprogramming-com-au.translate.goog/ITblog?p=' + pprefix + '&_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_top'); " . "\n";
} else {

if ($isiPad) {
//echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
} else {
//echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
}
}
}
?>
//window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress&tl=' + val.value, '_blank');
//alert("yes" + val.value);
}
}

?>

Not too bruising!

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 Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , | Leave a comment

Google Translate Landing Page Translate Update Tutorial

Google Translate Landing Page Translate Update Tutorial

Google Translate Landing Page Translate Update Tutorial

The recent Google Translate Landing Page Translate Tutorial

… and so, we are here today, with our start to remedies for this (Javascript DOM, via Ajax, change below) …


var myxhr=null;

function backin() {


if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
if (myxhr.responseText) {
if (document.getElementById('language')) {
//alert(myxhr.responseText);
var mhs=myxhr.responseText.replace(/\<\/code\>\<\/td\>/g,'<>').split('><code translate="no" dir="ltr">');
if (mhs.length > 1) {
var thiscodeis='', thisdescis='';
var wasih=document.getElementById('language').innerHTML;
var outih=wasih.split('</option>')[0] + '</option>';
var origih=wasih.replace(outih, '');
for (var iuh=1; iuh<mhs.length; iuh++) {
thisdescis=mhs[eval(-1 + iuh)].split('<td>')[eval(-1 + mhs[eval(-1 + iuh)].split('<td>').length)];
//console.log('first thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
thisdescis=thisdescis.split('<')[0];
thiscodeis=mhs[iuh].split('<')[0].split('(')[0].trim();
//console.log('thiscodeis=' + thiscodeis + ' and thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
if (wasih.toLowerCase().indexOf(' value="' + thiscodeis.toLowerCase() + '"') == -1 && wasih.toLowerCase().indexOf(thisdescis.toLowerCase()) == -1) {
outih+='<option value="' + thiscodeis + '">' + thisdescis + ' &#10024;</OPTION>';
} else {
outih+='<option value="' + thiscodeis + '">' + thisdescis + '</OPTION>';
}
}
if (outih.indexOf('/OPTION') != -1 && origih.toLowerCase() != outih.toLowerCase()) {
document.getElementById('language').innerHTML=outih.replace('</option>', ' &#10024;</OPTION>');
document.getElementById('language').style.maxWidth='150px';
}
}
}
}
}
}
}

function ajaxit() {
var xurl = '//cloud.google.com/translate/docs/languages';
//alert(1);
myxhr = new XMLHttpRequest();
if (myxhr) {
//alert(2);
myxhr.onreadystatechange = backin;
myxhr.open('GET', 'getme.php?getme=' + encodeURIComponent(xurl), true);
myxhr.send(null);
}
}

function refreshl() {
if (document.getElementById('language')) {
ajaxit();
}
}

setTimeout(refreshl, 5000);

It’s the start that does not ingrain the webpage HTML to any great permanence, and that is for another “PHP involvement” day.


Previous relevant Google Translate Landing Page Translate Tutorial is shown below.

Google Translate Landing Page Translate Tutorial

Google Translate Landing Page Translate Tutorial

Yesterday’s …

  • Google Translate Webpage Translate Tutorial was the major part of RJM Programming’s Google Translate strategy change (ie. getting it working again … doh!) … but it’s not the whole story … and another part is …
  • today we extend that strategy to change the RJM Programming Landing Page Google Translate interfacing to change from a “Landing Page content” strategy to a “Navigate to WordPress Blog” strategy (feeding into yesterday’s thinking), our justification being that the better content of the RJM Programming domain sits within the WordPress Blog we support and maintain

… so there, ngarrrrgh!

But (growing up quickly) we see a better arrangement here, just adding the prefix “Blog” onto the old (just) “Language” labelled dropdown to modify the “new “Blog Language” (to end up with HTML snippet <option value=””>Blog Language</option>) dropdown’s Javascript “onchange” event logic …


// To ...
function ChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
}
//]]>
}


// ... From ...
function olderChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
windowopen('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Findex.html&tl=' + val.value, '_blank');
}
//]]>
}

Again, not too onerous!


Previous relevant Google Translate Webpage Translate Tutorial is shown below.

Google Translate Webpage Translate Tutorial

Google Translate Webpage Translate Tutorial

We really like the way Google Translate can language translate whole webpages for URLs of choice, sometimes. We use it here at this blog, but sometime into the past … we cannot recall (sorrrrrryyyyyyyyy!) … the arrangements of use of this great functionality changed, and today we want to go over what we did for this blog to fix some of this interfacing.

It was in good ol’ WordPress TwentyTen theme’s header.php we made the change to facilitate this “reconnection” to this great functionality …

<?php

function ChangeLcodeNow(){
var val = document.getElementById('language');
//alert(val.value);
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
//alert(val.value);
var pprefix = val[val.selectedIndex].id;
<?php
$p316 = "316";
$pprefix = "";
if (strpos($_SERVER['QUERY_STRING'], "p=0") !== false) {
$pprefix = "";
} else {
if (isset($_GET['p'])) {
if (strpos($_GET['p'], "304") !== false) {
$p316 = "316";
} else {
$p316 = $_GET['p'];
}
}

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
}
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
}

if (1 == 1) { // _x_tr_sl=en&_x_tr_tl=de&_x_tr_hl=en-GB&_x_tr_pto=nui
echo " window.open('//www-rjmprogramming-com-au.translate.goog/ITblog?p=' + pprefix + '&_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_top'); " . "\n";
} else {

if ($isiPad) {
//echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
} else {
//echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
}
}
}
?>
//window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=HTTP%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress&tl=' + val.value, '_blank');
//alert("yes" + val.value);
}
}

?>

Not too bruising!

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 Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , | Leave a comment

Australian Postcode Place Images Tutorial

Australian Postcode Place Images Tutorial

Australian Postcode Place Images Tutorial

We think, on top of the work of yesterday’s Australian Postcode Northern Territory Place Tutorial, it would be good to enhance the existant …

Australian place linked to Australian postcode linked to Australian Google Charts Geo Chart user experience

… and, today, add some Wikipedia image possibilities into the mix. How best to approach this idea, given it is an enhancement and not part of the primary workflow thinking? We think, perhaps, turn the webpage’s body element into a “screenful palette” (at least initially) and fill it with background images via the …

  • left top
  • center top
  • right top
  • right center
  • right bottom
  • center bottom
  • left bottom
  • left center

… CSS background-position positioning options as an approach to an attempt to represent an unknown number and order and quality of Wikipedia image data, displayable each time a user enters a placename or postcode that has a Wikipedia entry (that we hope is about that place, though no guarantees here). The new Javascript “function ulit” introduced yesterday is changed for today’s work as per …


var goes=0;

function ulit(ino, inpl) {
var suff='';
if (inpl == inpl.toLowerCase() || inpl == inpl.toUpperCase()) {
var outpl='', outdl='';
var wds=inpl.toLowerCase().split(' ');
for (var inb=0; inb<wds.length; inb++) {
if (wds[inb].length > 2 || outpl.replace('mt','').replace('st','') == '') {
outpl+=outdl + wds[inb].substring(0,1).toUpperCase() + (wds[inb] + ' ').substring(1).trim();
} else if (wds[inb] == 'po') {
outpl+=outdl + wds[inb].toUpperCase();
} else {
outpl+=outdl + wds[inb];
}
outdl=' ';
}
if (ino) { ino.innerHTML=outpl; }
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=outpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(outpl) + '&tznickname=' + encodeURIComponent(outpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return outpl + suff;
} else {
if (document.getElementById('imageson').checked) {
if (('' + document.getElementById('mytable').outerHTML).split('>')[0].indexOf('15') == -1) {
document.getElementById('mytable').style.marginTop='149px';
} else {
document.getElementById('myh1').style.marginLeft='265px';
document.getElementById('myh3').style.marginLeft='265px';
document.getElementById('myh4').style.marginLeft='265px';
}
document.getElementById('sdesc').innerHTML=inpl + ' ';
suff=' ';
document.getElementById('sdesc').style.backgroundColor='white';
document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(inpl) + '&tznickname=' + encodeURIComponent(inpl.replace(/_/g,' ')) + '&avaJUNKtar=multiply'; // + avatar_at;
} else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {
document.getElementById('mytable').style.marginTop='0px';
if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }
} else if (1 == 2) {
document.getElementById('sdesc').innerHTML='';
}
goes++;
if (goes == 2) {
document.getElementById('ourcanvas').style.height='100%';
}

return inpl + suff;
}
}

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Northern Territory Place Tutorial is shown below.

Australian Postcode Northern Territory Place Tutorial

Australian Postcode Northern Territory Place Tutorial

We had cause to revisit the PHP web application of Australian Postcode Place Modal Backdrop Popup Move Tutorial recently, and we were lucky (in a masochistic sense) to do a test showing an error we hadn’t detected initially, designing it.

That weakness, we had to learn, revolved around Northern Territory places in Australia. Clear thinking may have got us there earlier, but the problem “actually” was that postcodes in the Northern Territory start with “0” (ie. zero) and somewhere down the track in all the code our “mapping” of that postcode lost its leading zero, and so “refeeding” that “non-leading-zero” postcode back into the latitude and longitude lookup, the web application could fail.

But thinking outside the box, if we don’t want to wade through to the “string becomes integer” issue in the code, another fact we can “hang our hat on” is that Australian Postcodes are four characters long, and so the Javascript tweak below also fixed our issues, as per …


document.getElementById(indivo.id.replace('_01','_02')).innerHTML=('0000' + findit[eval(-1 + kk)].split(';')[eval(-1 + findit[eval(-1 + kk)].split(';').length)] + ii).slice(-4);

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Move Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Today’s extension to yesterday’s Australian Postcode Place Modal Backdrop Popup Tutorial predominantly CSS themes is the “prove to ourselves” working of …

  • window.open based Window with that 3rd argument popup positioning used …
  • Window object method moveTo … when that Window URL is …
  • cross-domain

… and me being the optimist that I am thought though our Google Directions URL involved was cross-domain we would be able to harness the cuteness of moveTo so that it could ring around the Modal Backdrop Popup over time.

Alas, no such luck, and guess there are good (web browser) security reasons here.

Instead what we did was …

  • window.open based Window with that 3rd argument popup positioning used …
  • that [last Window object].close() then another window.open based Window with that 3rd argument popup new positioning … for that Window URL that is …
  • cross-domain

Make the scenario not be cross-domain and no worries regarding Window object method moveTo method.

And so, again, feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Tutorial

Australian Postcode Place Modal Backdrop Popup Tutorial

Yesterday’s Australian Postcode Place Nearby Tutorial had us attending to an “Australian Postcode Nearby” subset of functionality in terms of the event …

  • onmouseover … or “on hover” which programmers out there will know, in “mobile land” is about as useful as a screen door on a submarine … so, today, we attend to some event logic everybody relates to, that being …
  • onclick

… and today, for an aesthetic change, we’re going to show our Google Charts Map Chart interfacing functionality in a Modal Backdrop Popup “window” (ie. not a window as such, but more an HTML nested div that acts like a “modal” (has to be attended to) popup).

Consequently, that Javascript nearestto function changed as per


function nearestto(ogset, gset) {
var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
var sofar=';', pa='';
var things=[];
ourarguments='?title=' + encodeURIComponent('Australian Postcode Places Nearby ' + ogset.innerHTML) + '&onclick=y&label=%5b%27Lat%27,&value=%27Lon%27,%20%27Name%27%5d&data=';
if (postcodea.length > 1) {
this_long=eval(gset.split(' ')[0].split(',')[1]);
this_lat=eval(gset.split(' ')[0].split(',')[0]);
for (iou=0; iou<postcodea.length; iou++) {
this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
if (this_diff < 20 && this_diff > 0.00001) {
sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' ~' + lata[iou] + '~' + longa[iou] + '~ near to ' + placea[iou] + ',' + postcodea[iou]);
if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
smallest_diff=this_diff;
smallest_num=iou;
}
if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
largest_diff=this_diff;
}
} else if (this_diff < 20 && this_diff <= 0.00001) {
ourarguments+=',%20[' + lata[iou] + ',' + longa[iou] + ',~' + encodeURIComponent(placea[iou] + ',' + postcodea[iou]) + '~]';

}
}
things.sort();
outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
ourarguments+=',%20[' + lata[smallest_num] + ',' + longa[smallest_num] + ',~' + encodeURIComponent(placea[smallest_num] + ',' + postcodea[smallest_num]) + '~]';
pa="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;

for (iou=0; iou<=15; iou++) {
if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
outset+=' and near to ' + things[iou].split(' near to ')[1];
pa+=',%20[' + things[iou].split('~')[1] + ',' + things[iou].split('~')[2] + ',~' + encodeURIComponent(things[iou].split(' near to ')[1]) + '~]';
if (pa.length < 751) { ourarguments='?' + pa.split('?')[1]; }

}
}
// Modal backdrop below ...
if (ogset.innerHTML != '') {
ogset.onclick=function() {
document.getElementById('mypopup').style.display='block';
document.getElementById('mypopup-inner').style.display='block';
if (1 == 1) {
document.getElementById('myiframe').src="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;
} else {
document.getElementById('mypopup-inner').innerHTML='<a title="Close" id="alertclose" class="popup-close" data-popup-close="popup-alert" onclick=" event.stopPropagation(); document.getElementById(' + "'" + 'mypopup' + "'" + ').style.display=' + "'" + 'none' + "'" + ';" href="#">&#10060;</a><br><iframe onclick=" event.stopPropagation(); " src="//www.rjmprogramming.com.au/PHP/Map/map.php' + ourarguments + '" id=myiframe style="width:500px;height:500px;"></iframe>';
}
};
}

}
return outset;
}

This type of “popup” should not startle the “popup blocker” horses on your modern web browsers!

Once again feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Nearby Tutorial is shown below.

Australian Postcode Place Nearby Tutorial

Australian Postcode Place Nearby Tutorial

Back in “the where of life” web application wooooooorrrrrllllldd it’s all fine and good to know “crowfly distances” as we did in Australian Postcode Place Distances Map Chart Tutorial but that level of mathematics is not everybody’s cup of tea. Often we just want to know a …

  • nearby
  • place

… and that is all fine and good using that incredible Australian Postcode resource we talked about below.

What broad brush steps were done to arrange this information be displayed hovering over an Australian Postcode Place, in addition to ideas of that previous blog post, and its predecessors?

  • a top priority in all software integration is to first protect whatever already works, and that involved the establishment of a blank ” ” delimitation rule to the “hovering over text” … it used to be latitude,longitude and this is separated by “nearby” information by a space ” ” character delimitation … and in any existing Javascript code it is a simple matter of appending …

    .split(" ")[0]

    … onto any Javascript DOM “.title” usages (as the title attribute is what is displayed when hovering)
  • add global arrays …

    var postcodea=[];
    var placea=[];
    var lata=[];
    var longa=[];

  • at document.body onload event arrange to have …

    function fillcomparray(dataarr) {
    var fldsa, ij, jk, cdelim='', thisplace='', lm=-1, xpc='';
    for (ij=1; ij<dataarr.length; ij++) {
    if ((dataarr[ij] + ' ').substring(0,1) >= '0' && (dataarr[ij] + ' ').substring(0,1) <= '9') {
    fldsa=dataarr[ij].split(',');
    //postcodea.push(fldsa[0]);
    xpc=fldsa[0];
    cdelim='';
    thisplace='';
    lm=-1;
    for (jk=1; jk<fldsa.length; jk++) {
    if ((fldsa[jk] + ' ').substring(0,1) == '-' || ((fldsa[jk] + ' ').substring(0,1) >= '0' && (fldsa[jk] + ' ').substring(0,1) <= '9')) { if (lm < 0) { lm=jk; } }
    if (lm == -1) {
    thisplace+=cdelim + fldsa[jk];
    cdelim=',';
    }
    }
    if (fldsa[lm].match(/^[0-9-.]*$/) && fldsa[eval(1 + eval('' + lm))].match(/^[0-9-.]*$/)) {
    postcodea.push(xpc);
    placea.push(thisplace);
    longa.push(fldsa[lm]);
    lm++;
    lata.push(fldsa[lm]);
    }
    }
    }
    }

    … populate those global arrays … ready for user places of interest to trigger …
  • onblur logic that when determining a “.title” attribute, now does

    document.getElementById('setofthree_' + eval(-1 + setofthree) + '_01').title=nearestto(findit[jj].split(',')[eval(4 - indivo.innerHTML.split(',').length)] + ',' + findit[jj].split(',')[eval(3 - indivo.innerHTML.split(',').length)]);

    … and within that new Javascript function …
  • Javascript array sort() method becomes a useful intervention as per

    function nearestto(gset) {
    var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
    var sofar=';';
    var things=[];
    if (postcodea.length > 1) {
    this_long=eval(gset.split(' ')[0].split(',')[1]);
    this_lat=eval(gset.split(' ')[0].split(',')[0]);
    for (iou=0; iou<postcodea.length; iou++) {
    this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
    if (this_diff < 20 && this_diff > 0.00001) {
    sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
    things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' near to ' + placea[iou] + ',' + postcodea[iou]);
    if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
    smallest_diff=this_diff;
    smallest_num=iou;
    }
    if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
    largest_diff=this_diff;
    }
    }
    }
    things.sort();
    outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
    for (iou=0; iou<=15; iou++) {
    if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
    outset+=' and near to ' + things[iou].split(' near to ')[1];
    }
    }
    }
    return outset;
    }

    … which does the job of appending 15 or so nearby Australian Postcode Places to the user entered one and displayed as the user hovers over information

Feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Distances Map Chart Tutorial is shown below.

Australian Postcode Place Distances Map Chart Tutorial

Australian Postcode Place Distances Map Chart Tutorial

Yesterday’s “where of life” themed Australian Postcode Place Distances Primer Tutorial lacked something … anyone, anyone? … yes, Anaximander … a map … and you’d like to swap my horse for one … well okay, there’s one called Ed out the back … but we digress.

Queue the great Google Charts Map Chart (which can transition very easily to Geo Chart, where “from” to “to” lines are drawn) and which can be called in an HTML iframe element to add that visual interest to our changed australia_place_crowfly_distances.php‘s live run link.

There isn’t anything much better than a map to trip plan, or study geography, in our books … but alas we ran out of pamphlettes today … sorrrrrrryyyyyy.


Previous relevant Australian Postcode Place Distances Primer Tutorial is shown below.

Australian Postcode Place Distances Primer Tutorial

Australian Postcode Place Distances Primer Tutorial

It’s time to return to a “where of life” web application tutorial. Why? No, “where”. Who’s on second. But, seriously, the reason is that we found a great Australian Postcode resource for geodata lookups of these Australian placenames or postcodes … thanks.

Combine this …

  • Australian postcode (or placename) latitude and longitude … with …
  • another Australian postcode (or placename) latitude and longitude … and we can …
  • show the user a great circle distance between the two places … as well as a link to …
  • Google Maps Directions map between the two places … and there you can imagine we have a bit of a …
  • trip planner

… on our hands.

We can add our own client geographical position into the mix via …


function getLocation() {
if (navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(showPosition);
setTimeout(later, 2000);
} catch(err) {
setTimeout(later, 2000);
}
} else {
document.getElementById('you').innerHTML='(0,0)';
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}


function showPosition(position) {
if (userlatitude == 0.0 && userlongitude == 0.0) {
userlatitude=eval('' + position.coords.latitude);
userlongitude=eval('' + position.coords.longitude);
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}

… that you can see involved in the PHP australia_place_crowfly_distances.php‘s live run link, for your perusal.

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, Photography, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Australian Postcode Northern Territory Place Tutorial

Australian Postcode Northern Territory Place Tutorial

Australian Postcode Northern Territory Place Tutorial

We had cause to revisit the PHP web application of Australian Postcode Place Modal Backdrop Popup Move Tutorial recently, and we were lucky (in a masochistic sense) to do a test showing an error we hadn’t detected initially, designing it.

That weakness, we had to learn, revolved around Northern Territory places in Australia. Clear thinking may have got us there earlier, but the problem “actually” was that postcodes in the Northern Territory start with “0” (ie. zero) and somewhere down the track in all the code our “mapping” of that postcode lost its leading zero, and so “refeeding” that “non-leading-zero” postcode back into the latitude and longitude lookup, the web application could fail.

But thinking outside the box, if we don’t want to wade through to the “string becomes integer” issue in the code, another fact we can “hang our hat on” is that Australian Postcodes are four characters long, and so the Javascript tweak below also fixed our issues, as per …


document.getElementById(indivo.id.replace('_01','_02')).innerHTML=('0000' + findit[eval(-1 + kk)].split(';')[eval(-1 + findit[eval(-1 + kk)].split(';').length)] + ii).slice(-4);

… in the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Move Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Australian Postcode Place Modal Backdrop Popup Move Tutorial

Today’s extension to yesterday’s Australian Postcode Place Modal Backdrop Popup Tutorial predominantly CSS themes is the “prove to ourselves” working of …

  • window.open based Window with that 3rd argument popup positioning used …
  • Window object method moveTo … when that Window URL is …
  • cross-domain

… and me being the optimist that I am thought though our Google Directions URL involved was cross-domain we would be able to harness the cuteness of moveTo so that it could ring around the Modal Backdrop Popup over time.

Alas, no such luck, and guess there are good (web browser) security reasons here.

Instead what we did was …

  • window.open based Window with that 3rd argument popup positioning used …
  • that [last Window object].close() then another window.open based Window with that 3rd argument popup new positioning … for that Window URL that is …
  • cross-domain

Make the scenario not be cross-domain and no worries regarding Window object method moveTo method.

And so, again, feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Modal Backdrop Popup Tutorial is shown below.

Australian Postcode Place Modal Backdrop Popup Tutorial

Australian Postcode Place Modal Backdrop Popup Tutorial

Yesterday’s Australian Postcode Place Nearby Tutorial had us attending to an “Australian Postcode Nearby” subset of functionality in terms of the event …

  • onmouseover … or “on hover” which programmers out there will know, in “mobile land” is about as useful as a screen door on a submarine … so, today, we attend to some event logic everybody relates to, that being …
  • onclick

… and today, for an aesthetic change, we’re going to show our Google Charts Map Chart interfacing functionality in a Modal Backdrop Popup “window” (ie. not a window as such, but more an HTML nested div that acts like a “modal” (has to be attended to) popup).

Consequently, that Javascript nearestto function changed as per


function nearestto(ogset, gset) {
var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
var sofar=';', pa='';
var things=[];
ourarguments='?title=' + encodeURIComponent('Australian Postcode Places Nearby ' + ogset.innerHTML) + '&onclick=y&label=%5b%27Lat%27,&value=%27Lon%27,%20%27Name%27%5d&data=';
if (postcodea.length > 1) {
this_long=eval(gset.split(' ')[0].split(',')[1]);
this_lat=eval(gset.split(' ')[0].split(',')[0]);
for (iou=0; iou<postcodea.length; iou++) {
this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
if (this_diff < 20 && this_diff > 0.00001) {
sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' ~' + lata[iou] + '~' + longa[iou] + '~ near to ' + placea[iou] + ',' + postcodea[iou]);
if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
smallest_diff=this_diff;
smallest_num=iou;
}
if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
largest_diff=this_diff;
}
} else if (this_diff < 20 && this_diff <= 0.00001) {
ourarguments+=',%20[' + lata[iou] + ',' + longa[iou] + ',~' + encodeURIComponent(placea[iou] + ',' + postcodea[iou]) + '~]';

}
}
things.sort();
outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
ourarguments+=',%20[' + lata[smallest_num] + ',' + longa[smallest_num] + ',~' + encodeURIComponent(placea[smallest_num] + ',' + postcodea[smallest_num]) + '~]';
pa="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;

for (iou=0; iou<=15; iou++) {
if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
outset+=' and near to ' + things[iou].split(' near to ')[1];
pa+=',%20[' + things[iou].split('~')[1] + ',' + things[iou].split('~')[2] + ',~' + encodeURIComponent(things[iou].split(' near to ')[1]) + '~]';
if (pa.length < 751) { ourarguments='?' + pa.split('?')[1]; }

}
}
// Modal backdrop below ...
if (ogset.innerHTML != '') {
ogset.onclick=function() {
document.getElementById('mypopup').style.display='block';
document.getElementById('mypopup-inner').style.display='block';
if (1 == 1) {
document.getElementById('myiframe').src="//www.rjmprogramming.com.au/PHP/Map/map.php" + ourarguments;
} else {
document.getElementById('mypopup-inner').innerHTML='<a title="Close" id="alertclose" class="popup-close" data-popup-close="popup-alert" onclick=" event.stopPropagation(); document.getElementById(' + "'" + 'mypopup' + "'" + ').style.display=' + "'" + 'none' + "'" + ';" href="#">&#10060;</a><br><iframe onclick=" event.stopPropagation(); " src="//www.rjmprogramming.com.au/PHP/Map/map.php' + ourarguments + '" id=myiframe style="width:500px;height:500px;"></iframe>';
}
};
}

}
return outset;
}

This type of “popup” should not startle the “popup blocker” horses on your modern web browsers!

Once again feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Nearby Tutorial is shown below.

Australian Postcode Place Nearby Tutorial

Australian Postcode Place Nearby Tutorial

Back in “the where of life” web application wooooooorrrrrllllldd it’s all fine and good to know “crowfly distances” as we did in Australian Postcode Place Distances Map Chart Tutorial but that level of mathematics is not everybody’s cup of tea. Often we just want to know a …

  • nearby
  • place

… and that is all fine and good using that incredible Australian Postcode resource we talked about below.

What broad brush steps were done to arrange this information be displayed hovering over an Australian Postcode Place, in addition to ideas of that previous blog post, and its predecessors?

  • a top priority in all software integration is to first protect whatever already works, and that involved the establishment of a blank ” ” delimitation rule to the “hovering over text” … it used to be latitude,longitude and this is separated by “nearby” information by a space ” ” character delimitation … and in any existing Javascript code it is a simple matter of appending …

    .split(" ")[0]

    … onto any Javascript DOM “.title” usages (as the title attribute is what is displayed when hovering)
  • add global arrays …

    var postcodea=[];
    var placea=[];
    var lata=[];
    var longa=[];

  • at document.body onload event arrange to have …

    function fillcomparray(dataarr) {
    var fldsa, ij, jk, cdelim='', thisplace='', lm=-1, xpc='';
    for (ij=1; ij<dataarr.length; ij++) {
    if ((dataarr[ij] + ' ').substring(0,1) >= '0' && (dataarr[ij] + ' ').substring(0,1) <= '9') {
    fldsa=dataarr[ij].split(',');
    //postcodea.push(fldsa[0]);
    xpc=fldsa[0];
    cdelim='';
    thisplace='';
    lm=-1;
    for (jk=1; jk<fldsa.length; jk++) {
    if ((fldsa[jk] + ' ').substring(0,1) == '-' || ((fldsa[jk] + ' ').substring(0,1) >= '0' && (fldsa[jk] + ' ').substring(0,1) <= '9')) { if (lm < 0) { lm=jk; } }
    if (lm == -1) {
    thisplace+=cdelim + fldsa[jk];
    cdelim=',';
    }
    }
    if (fldsa[lm].match(/^[0-9-.]*$/) && fldsa[eval(1 + eval('' + lm))].match(/^[0-9-.]*$/)) {
    postcodea.push(xpc);
    placea.push(thisplace);
    longa.push(fldsa[lm]);
    lm++;
    lata.push(fldsa[lm]);
    }
    }
    }
    }

    … populate those global arrays … ready for user places of interest to trigger …
  • onblur logic that when determining a “.title” attribute, now does

    document.getElementById('setofthree_' + eval(-1 + setofthree) + '_01').title=nearestto(findit[jj].split(',')[eval(4 - indivo.innerHTML.split(',').length)] + ',' + findit[jj].split(',')[eval(3 - indivo.innerHTML.split(',').length)]);

    … and within that new Javascript function …
  • Javascript array sort() method becomes a useful intervention as per

    function nearestto(gset) {
    var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;
    var sofar=';';
    var things=[];
    if (postcodea.length > 1) {
    this_long=eval(gset.split(' ')[0].split(',')[1]);
    this_lat=eval(gset.split(' ')[0].split(',')[0]);
    for (iou=0; iou<postcodea.length; iou++) {
    this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));
    if (this_diff < 20 && this_diff > 0.00001) {
    sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';
    things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' near to ' + placea[iou] + ',' + postcodea[iou]);
    if (smallest_diff < 0.0 || eval('' + this_diff) < eval('' + smallest_diff)) {
    smallest_diff=this_diff;
    smallest_num=iou;
    }
    if (largest_diff < 0.0 || eval('' + this_diff) > eval('' + largest_diff)) {
    largest_diff=this_diff;
    }
    }
    }
    things.sort();
    outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];
    for (iou=0; iou<=15; iou++) {
    if (things.length > iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {
    outset+=' and near to ' + things[iou].split(' near to ')[1];
    }
    }
    }
    return outset;
    }

    … which does the job of appending 15 or so nearby Australian Postcode Places to the user entered one and displayed as the user hovers over information

Feel free to try the changed australia_place_crowfly_distances.php‘s live run link.


Previous relevant Australian Postcode Place Distances Map Chart Tutorial is shown below.

Australian Postcode Place Distances Map Chart Tutorial

Australian Postcode Place Distances Map Chart Tutorial

Yesterday’s “where of life” themed Australian Postcode Place Distances Primer Tutorial lacked something … anyone, anyone? … yes, Anaximander … a map … and you’d like to swap my horse for one … well okay, there’s one called Ed out the back … but we digress.

Queue the great Google Charts Map Chart (which can transition very easily to Geo Chart, where “from” to “to” lines are drawn) and which can be called in an HTML iframe element to add that visual interest to our changed australia_place_crowfly_distances.php‘s live run link.

There isn’t anything much better than a map to trip plan, or study geography, in our books … but alas we ran out of pamphlettes today … sorrrrrrryyyyyy.


Previous relevant Australian Postcode Place Distances Primer Tutorial is shown below.

Australian Postcode Place Distances Primer Tutorial

Australian Postcode Place Distances Primer Tutorial

It’s time to return to a “where of life” web application tutorial. Why? No, “where”. Who’s on second. But, seriously, the reason is that we found a great Australian Postcode resource for geodata lookups of these Australian placenames or postcodes … thanks.

Combine this …

  • Australian postcode (or placename) latitude and longitude … with …
  • another Australian postcode (or placename) latitude and longitude … and we can …
  • show the user a great circle distance between the two places … as well as a link to …
  • Google Maps Directions map between the two places … and there you can imagine we have a bit of a …
  • trip planner

… on our hands.

We can add our own client geographical position into the mix via …


function getLocation() {
if (navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(showPosition);
setTimeout(later, 2000);
} catch(err) {
setTimeout(later, 2000);
}
} else {
document.getElementById('you').innerHTML='(0,0)';
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}


function showPosition(position) {
if (userlatitude == 0.0 && userlongitude == 0.0) {
userlatitude=eval('' + position.coords.latitude);
userlongitude=eval('' + position.coords.longitude);
if (document.getElementById('inlat') && document.getElementById('inlong')) {
document.getElementById('inlat').value=userlatitude;
document.getElementById('inlong').value=userlongitude;
}
if (document.getElementById('ipostcode')) {
document.getElementById('ipostcode').click();
newthree();
}
}
}

… that you can see involved in the PHP australia_place_crowfly_distances.php‘s live run link, for your perusal.

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

Javascript Incrementing and Decrementing Suffix Tutorial

Javascript Incrementing and Decrementing Suffix Tutorial

Javascript Incrementing and Decrementing Suffix Tutorial

The recent Javascript Incrementing and Decrementing Primer Tutorial broached …

  • prefix syntactical Javascript Incrementing and Decrementing of variables … and, today, we extend that to …
  • suffix syntactical Javascript Incrementing and Decrementing of variables … and to …
  • both

… but in adding that new functionality, we baulked that little bit because in order to do this in most of the scenarios of our changed plus_avoids_zero.html‘s web application live run link, it required multiple Javascript commands per single HTML button element click/tap. We figure you’ll forgive us in the sense that our semicolon (“;”) based delimited set of commands could be fed through a Javascript eval (though we don’t) to achieve the single button click/tap per single (eval) act, anyway.

As well, in executing the web application here and now look, the HTML button “looks” (helped out by yesterday’s HTML Button Element Whitespace Primer Tutorial) we hope the patterns help you out with the way this Incrementing and Decrementing can work in Javascript.


Previous relevant Javascript Incrementing and Decrementing Primer Tutorial is shown below.

Javascript Incrementing and Decrementing Primer Tutorial

Javascript Incrementing and Decrementing Primer Tutorial

Sometimes writing Javascript code we’ve let code like …


<script type='text/javascript'>
var counter=null;


function initializeCounter() {
counter=0;
}


function incrementCounter() {
if (counter == null) {
counter=0;
}
++counter;
}


if (eval(Math.floor(Math.random() * 1746765765) % 2) == 1) {
initializeCounter();
} else {
incrementCounter(); // if called first, is interesting
}
</script>

… go through to the keeper. There’s nothing intrinsically wrong with it. But the other day, thanks to Device Orientation ‘alpha’
Calibration … World-based calibration on iOS
, we learnt that the “if” bracketing above can be superfluous in the sense that that same code above could be written …


<script type='text/javascript'>
var counter=null;


function initializeCounter() {
counter=0;
}


function incrementCounter() {
++(+counter); // ... more succinctly
}


if (eval(Math.floor(Math.random() * 1746765765) % 2) == 1) {
initializeCounter();
} else {
incrementCounter(); // if called first, is interesting
}
</script>

And so, we thought we’d write today’s proof of concept plus_avoids_zero.html‘s live run link in order for a user to try out some “Prefix style” incrementing and decrementing of Javascript variables

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 Button Element Whitespace Primer Tutorial

HTML Button Element Whitespace Primer Tutorial

HTML Button Element Whitespace Primer Tutorial

The topic of “whitespace” in webpages is a very big subject for something a lot of us may think of as “the things that aren’t the things”, if you know what I mean? We talked about it a little with HTML Whitespace Primer Tutorial, in the past.

Those HTML elements that have a defined “innerHTML” attribute, rather than a defined “value” attribute or no content type of attribute, are more interesting to us regarding whitespace usage (and yes, the considered usage of whitespace can “save the aesthetics day”), and the best element type we can think of in this respect is the HTML button element, because it is interesting to compare (and/or contrast) it to the HTML input type=button element, as we did at Button Versus Input Type Equals Button Primer Tutorial.

It is interesting to “fuse” the CSS “white-space” property with various ways to define “vertical whitespace” and even (tab) “horizontal whitespace” regarding the “button” element “look”. Thanks to some ideas here from The white-space CSS property.

And so we are here presenting a proof of concept (button_element_linefeed_whitespace.html) “button element whitespace” web application for you to peruse, below …


Previous relevant HTML Whitespace Primer Tutorial is shown below.

HTML Whitespace Primer Tutorial

HTML Whitespace Primer Tutorial

Whitespace in HTML can be a very confusing area for web developers, especially when HTML elements float. Even though there are lots of facilities in CSS to overcome the whitespace issues to do with margin, padding and even border (in a less direct way), lots of times we like the more direct ideas of WYSIWYG and try to fix issues just using HTML methods, and this sounds fair enough to me … but consider the Good Look Vs Bad Look (of HTML Canvas Golf Accuracy Game Primer Tutorial) below …

——————- Good Look below ————————-

The HTML Canvas element is great for games where you draw your own graphics based on interaction from the user … a great tool to have in your GUI toolbox …

you download an app and start playing.

A lot of the logic of these games stem from when a user clicks on the canvas element … translation:
 

don’t read any rules of the game and just start clicking away man … person.

Lots of these games are based on sport … translation:
 
 
 
 

doh! show me the ball! show me the ball!

And quite often that sport is golf … translation:
 
 
 

pass me the plus fours man … person … and forget the rules … show me the ball! show me the ball!

Today, if you’d like to play, we get the user to click twice to simulate the start and end position of their golf shot, the direction and size of which is predetermined, and shown to them … translation:
 

what?! no ball … well then, show me the wrestler.

Today we don’t show a ball, as such … it’s too small … translation:
 
 

we need this room for another meeting.
 

Hope you enjoy playing the game derived from golfshotcanvas.html … you start with score of 3000 and excel by how many goes you survive with a score … translation:

bye.
 
turn out the lights as you go.

If you’re looking for grass man … person … the free background image came from //all-free-download.com/free-photos/ and then was modified for use here via Gimp (good old Gimp … reduction in Opacity to 40%) … thanks … translation:

There are night golf ranges you know!!!!

——————- Bad Look below ————————–

The HTML Canvas element is great for games where you draw your own graphics based on interaction from the user … a great tool to have in your GUI toolbox …

you download an app and start playing.

A lot of the logic of these games stem from when a user clicks on the canvas element … translation:

don’t read any rules of the game and just start clicking away man … person.

Lots of these games are based on sport … translation:

doh! show me the ball! show me the ball!

And quite often that sport is golf … translation:

pass me the plus fours man … person … and forget the rules … show me the ball! show me the ball!

Today, if you’d like to play, we get the user to click twice to simulate the start and end position of their golf shot, the direction and size of which is predetermined, and shown to them … translation:

what?! no ball … well then, show me the wrestler.

Today we don’t show a ball, as such … it’s too small … translation:

we need this room for another meeting.

Hope you enjoy playing the game derived from golfshotcanvas.html … you start with score of 3000 and excel by how many goes you survive with a score … translation:

bye.

turn out the lights as you go.

If you’re looking for grass man … person … the free background image came from //all-free-download.com/free-photos/ and then was modified for use here via Gimp (good old Gimp … reduction in Opacity to 40%) … thanks … translation:

There are night golf ranges you know!!!!

 
 
 
——————— HTML Code Looks Like ——————————-

Good Look of Code Bad Look of Code

<p>Lots of these games are based on sport ... translation:
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<blockquote class="rightbq">
doh! show me the ball! show me the ball!
</blockquote>
</p>

<p>Lots of these games are based on sport ... translation:
 
 
 
 
<blockquote class="rightbq">
doh! show me the ball! show me the ball!
</blockquote>
</p>

The only difference between these looks is to do with the use (or not) of non-breaking space (functionality) via the (use of) HTML entity &nbsp; in the “Good Look” version, only … without resorting to CSS (and only using HTML) and coming across the need to insert a blank line (that takes up space), with the current rendering rules of the web browsers, this is the solution to the problem of lack of whitespace when you need it … and you guess that if &nbsp; has been used a lot and you want less whitespace about, it may be that to substitute the “&nbsp;” for “” solves your problem.

Here is a Wikipedia list of XML and HTML entities, and we talked a bit about all this with HTML Entities Primer Tutorial.

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, Tutorials | Tagged , , , , , , , | Leave a comment

Javascript Incrementing and Decrementing Primer Tutorial

Javascript Incrementing and Decrementing Primer Tutorial

Javascript Incrementing and Decrementing Primer Tutorial

Sometimes writing Javascript code we’ve let code like …


<script type='text/javascript'>
var counter=null;


function initializeCounter() {
counter=0;
}


function incrementCounter() {
if (counter == null) {
counter=0;
}
++counter;
}


if (eval(Math.floor(Math.random() * 1746765765) % 2) == 1) {
initializeCounter();
} else {
incrementCounter(); // if called first, is interesting
}
</script>

… go through to the keeper. There’s nothing intrinsically wrong with it. But the other day, thanks to Device Orientation ‘alpha’
Calibration … World-based calibration on iOS
, we learnt that the “if” bracketing above can be superfluous in the sense that that same code above could be written …


<script type='text/javascript'>
var counter=null;


function initializeCounter() {
counter=0;
}


function incrementCounter() {
++(+counter); // ... more succinctly
}


if (eval(Math.floor(Math.random() * 1746765765) % 2) == 1) {
initializeCounter();
} else {
incrementCounter(); // if called first, is interesting
}
</script>

And so, we thought we’d write today’s proof of concept plus_avoids_zero.html‘s live run link in order for a user to try out some “Prefix style” incrementing and decrementing of Javascript variables

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

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

MacOS and iOS Photos Storage Maintainence Tutorial

MacOS and iOS Photos Storage Maintainence Tutorial

MacOS and iOS Photos Storage Maintainence Tutorial

Since the days of Mac iPhoto Primer Tutorial the Apple photograph storage wooooorrrrllllddd has coalesced into the Photos app on both MacOS and iOS.

In this Apple environment photos can be shared in iCloud

The best place for all your photos, files and more.
iCloud is built into every Apple device. That means all your stuff — photos, files, notes and more — is safe, up to date and available wherever you are. Everyone gets 5GB of free iCloud storage to start. And you can upgrade to iCloud+1 at any time for powerful new features and more storage.

This is great for storing across Apple devices. It can also mean a device out and about, rarely, can discombobulate another user working a device sharing the same iCloud storage albums, and a “Your iCloud storage is full” scenario might start happening for no apparent reason. You might work your device doing the “double shuffle” …

  1. in your local device Photos albums Select one or more photos and click/tap the Rubbish Bin icon (to delete) … and remember to then …
  2. in your local device Photos “Recently Deleted” album Select all the photos and click/tap the Delete link to really delete the photos to release storage

… but that may not relieve your issue, with copies of these photos, perhaps, existing on other devices sharing the same iCloud area of storage. Is there a place to attempt photo (and video, by the way) deletes across all the relevant devices sharing this same iCloud storage area? Yes, there is, logging into …


https://icloud.com

… via your Apple ID (the key to any individual iCloud device group of Photos app photograph and video media storage area) is that place.

Once there, and we assume you know about this “double shuffle” Photos app business, leaving it out of today’s animated GIF presentation, follow the same steps as above (after you click/tap iCloud.com’s “Photos” main menu button), except under the iCloud auspices to be seeing the whole picture here (ie. all relevant devices are managed in this one session), relevant to scenarios involving several Apple devices using Photos app storage areas referencing the one Apple ID.


Previous relevant Mac iPhoto Primer Tutorial is shown below.

Mac iPhoto Primer Tutorial

Mac iPhoto Primer Tutorial

The Mac OS X iPhoto application does a great job of storing your photographs (on the Mac laptop’s hard disk) that are:

  • created on your laptop
  • importable via removable CDs/DVDs/USBs or others
  • importable via digital cameras (with inbuilt memory card) with cable
  • importable via USB card reader with a memory card from a digital camera or somewhere else
  • importable via iCloud
  • importable via a DropBox

It blows my mind enough just to think of the great way it imports from the options that involve a memory card. The blowing mainly derives from its organizational “smarts” if you have been one of those brilliantly organized people who accurately set the date and time on their digital camera. This allows iPhoto’s functionality to compartmentalize the photos by date as one of its “Events” and this is a really helpful feature. So today’s tutorial shows the ease with which a choc-a-block memory card can be very quickly imported into iPhoto within minutes.

The Mac iPhoto application can create slideshows and shares with iCloud, email, messages, social media and Flickr. Let’s see what Wikipedia says about this wonderful application.

iPhoto is a digital photograph manipulation software application developed by Apple Inc. and which used to be included with every Macintosh personal computer as part of the iLife suite of digital media management applications. First released in 2002, iPhoto can import, organize, edit, print and share digital photos. In Mavericks, rather than being included in OS X, iPhoto is available from the Mac App Store.

iPhoto is often compared to Google’s Picasa, CyberLink’s MediaShow, Adobe’s Photoshop Album, Phase One’s Media Pro and Microsoft’s Windows Photo Gallery. iPhoto ’11 (9.5), the latest version of the software, was released as part of the iLife ’11 suite on October 20, 2010.

On March 7, 2012, Apple CEO Tim Cook announced a new, iOS-native version of iPhoto alongside the third-generation iPad.[2]

Here is a link to iPhoto information from Apple.

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, iOS, Operating System, Photography, Tutorials | Tagged , , , , , , , , , , , , , , , , , | Leave a comment