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 Maps Measure Crowfly Distance Tutorial

Google Maps Measure Crowfly Distance Tutorial

Google Maps Measure Crowfly Distance Tutorial

Ever since we saw the movie Tracks and did a bit of research with Tracks Solo Trek Across 1700 Miles of Australian Outback by Robyn Davidson Tutorial regarding Robyn’s incredible and unbelievable trek, and reading Tim Winton books, we’ve gravitated towards those turquoise waters on the other side of Australia, to us here, on the east coast.

Robyn Davidson ended that trek in an area of Western Australia, that even viewed on a map, is interesting looking, if you are into geography, let alone interesting looking seeing Google and Google Maps images we arrived at, after reading this interesting article from the Sydney Morning Herald here this Sunday, 01 June 2025, about a trip “up the road” to the Ningaloo Reef area Tim Winton describes as …

one of the last intact wild places on the planet

Most such geographical research off most articles, these days, will end at Google Maps, and we’re not here to tell you today that anything else happened for us, and we did this on a MacBook Air via Google Chrome version of Google Maps webpages within today’s animated GIF presentation. We were surprised via a right click (ie. webpage oncontextmenu onclick event) menu …

… that we got presented with. Many options were new to us, and the “Measure distance” one …

… is very cute. Once selected the user can hop from place to place on the Google Map and receive useful crowfly distances for your “dream” trips?!


Previous relevant Tracks Solo Trek Across 1700 Miles of Australian Outback by Robyn Davidson Tutorial is shown below.

Tracks Solo Trek Across 1700 Miles of Australian Outback by Robyn Davidson Tutorial

Tracks Solo Trek Across 1700 Miles of Australian Outback by Robyn Davidson Tutorial

We had the honour of watching a great movie last weekend called “Tracks” which was based on a Solo Trek Across 1700 Miles of Australian Outback by Robyn Davidson (played by Mia Wasikowska) from 8/4/1977 to 20/10/1977, and which you can see the route taken in an interactive map below by clicking this link.

If you’ve opened the map above (potentially), and you know a bit about Australian geography, and this is all new to you, you probably now have a mix of questions and emotions …

  • Why? … perhaps read the book and/or see the movie
  • How … incredible grit, resourcefulness and determination, accompanied by 1 dog (Diggity) and 3 camels (which needed 2 years of research to be able to handle, three intense months of which were with an excellent Afghan camel expert Sallay) and very occasional National Geographic photography meetings with Rick Smolan (as well as financial support from them too), and three weeks with Mr Eddie, a Pitjantjatjara elder and tracker, and people like the Glen-Ayle Homestead owners
  • Where … Australia’s outback in parts of Northern Territory, South Australia and Western Australia, mainly in desert areas such as the Gibson Desert
  • When … 8/4/1977 to 20/10/1977 … avoiding summer

Apart from thanks to Robyn Davidson for inspiration here, a big thanks today go to najhaus.files.wordpress.com regarding the map image and Google search engine and Wikipedia online encyclopaedia and the brilliant Bonzle Digital Atlas of Australia at the very least.

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

Audio Stream of YouTube Video Play Safari Title Tutorial

Audio Stream of YouTube Video Play Safari Title Tutorial

Audio Stream of YouTube Video Play Safari Title Tutorial

The day after yesterday’s Audio Stream of YouTube Video Play Safari Error Tutorial was (not only today, but) a chance to retest the …

  • Safari web browser … on …
  • iPhone but not iPad, gobsmackingly (of devices that we know of)

… problem at issue, from yesterday’s timing approach, and discovered two things, with fresh eyes (and nose, or has Nala just releasedNala!!)

  1. minutes down the line, the problem could still occur … maybe we were just pushing the problem just further into the future … and …
  2. we noticed this weird thing where, rather than crash with the error …

    A problem repeatedly occurred with …

    … sometimes, instead, the WordPress blog webpage would redirect to a whole lot of YouTube windows derived from stop_start_youtube.html (our inhouse YouTube Embedded iframe API interfacer) means by which it opens YouTube videos, briefly, to determine their duration

… and then it tweaked with us, looking at (the “grandchild” level of hierarchy) stop_start_youtube.html code afresh (just with the eyes, that is?!) that regarding the …

[windowObject].document.URL

… attribute, we’d had to change from top.document.URL thinking to parent.parent.document.URL thinking. What if the same reasoning is sometimes needed because there is a conflict of interest when using …

[windowObject].document.title

… attribute (which, in terms of top.document.title have found immensely useful, in the past, as a repository to place information that can be shared by all hierarchical levels of a web application project, and used a lot, here), up at wherever top (as a [windowObject]) points at? And so we started, conditionally, via …


var ttt=document; //sometimes we will use parent.parent.document.title to write to rather than top.document.title
if (window.top) {
ttt=top.document;
if (('' + ttt.title).indexOf('External Javascript ') == 0 || ('' + ttt.URL).replace('/wordpress', '/ITblog').toLowerCase().indexOf('/itblog') != -1) {
ttt=parent.parent.document;
}
}

… starting to refer to what was top.document.title as ttt.title in the reworked stop_start_youtube.html inhouse YouTube API interfacer code.

Implementing this, improved matters a lot! Yay!!!


Previous relevant Audio Stream of YouTube Video Play Safari Error Tutorial is shown below.

Audio Stream of YouTube Video Play Safari Error Tutorial

Audio Stream of YouTube Video Play Safari Error Tutorial

Like with GeoJson World Countries SVG Overlay Safari Error Tutorial we have another incarnation of the …

A problem repeatedly occurred with …

… style of erroneous webpage scenario hosting an iframe using that Audio Stream of YouTube Video Play web application logic within some of this WordPress blog’s postings, but very specifically only using …

  • Safari web browser … on …
  • iPhone but not iPad, gobsmackingly (of devices that we know of)

… as we tested (and you should do as many tests as you can over browsers and platforms when you get this error in particular).

We think, this way, as with the situation below, you can get these errors to do with memory issues when using the browser/platform combination where it happens.

However, as a programmer you should be curious enough to test and debug for memory leaks, at the very least, in your own code, and any setInterval or setTimeout related abnormalities that may be causing the error. Luckily, if you have access to …

  • iPhone Safari web browser …
  • macOS Safari web browser with Developer debugging capabilities …
  • Apple white lead that connect these two

… then you can …

  • be in Safari web browser at new tabs in both iPhone and macOS (eg. MacAir) …
  • connect the two devices with Apple White Lead
  • on iPhone Safari type in and go to URL where problem is known
  • on macOS Safari click Developer menu to reach and select the session with offending URL
  • debug via the Console and Network and Errors and whatever else helps to try to track down issues with the web application, in this environment

We think us changing external Javascript ytaudioonly.js this way


var oktocheck=true;

function audioytlook() {
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (navigator.userAgent.match(/iPhone/i) && oktocheck && isSafari) {
if (('' + top.document.URL).indexOf('/external-javascript-') != -1 && ('' + top.document.URL).indexOf('andabit=') != -1) {
if (document.URL.indexOf('/karaoke_') == -1) {
oktocheck=false;
setTimeout(audioytlook, 180000);
return '';
}
} else if (('' + top.document.URL).indexOf('/external-javascript-') != -1) {
if (document.URL.indexOf('/karaoke_') == -1) {
oktocheck=false;
setTimeout(audioytlook, 180000);
return '';
}
}
}
oktocheck=false;

/* Rest of function audioytlook is as is, below ... */
}

… having helped here shows, again, that timing can be the issue with this error. But to know where to time things better will probably be the result of doing this Safari iPhone debugging via macOS Safari web browser Developer menu.


Previous relevant GeoJson World Countries SVG Overlay Safari Error Tutorial is shown below.

GeoJson World Countries SVG Overlay Safari Error Tutorial

GeoJson World Countries SVG Overlay Safari Error Tutorial

Mostly on smaller devices (such as an iPhone), but elsewhere as well, but less drastically, this morning, using our current Display GeoJson Countries web application we would get the Safari web browser error …

A problem repeatedly occurred with https://www.rjmprogramming.com.au/HTMLCSS/countries.php

… with web application work up to yesterday’s GeoJson World Countries SVG Overlay Colour Infill Tutorial.

On discovering our first solution theory of turning yesterday’s mapsvg.js external Javascript work into an async piece of work made no difference to this situation, we surmised that the huge amount of content held in the Javascript (ie. client side) global variable appendtoinnerHTML was causing memory issues. We couldn’t shift much to do with the overall amount of “data” needing to be handled, in order to implement country SVG colour infilling, but we could shift the data from being …

  • client side (external) Javascript held … to, instead, (have that data) be (determined on the) …
  • server side PHP filling in the contents of our (relevant) HTML div id=svgd ahead of the document.body onload event timing …
    <?php

    $icnt=0;

    function apptohtmstuff($coordsare, $origc) {
    global $icnt;
    $minl=-1;
    $mint=-1;
    $maxl=-1;
    $maxt=-1;
    $zysare=explode(',', $coordsare);
    $svgcis='';
    for ($ij=0; $ij<sizeof($zysare); $ij+=2) {
    if ($minl < 0) {
    $minl=$zysare[$ij];
    $maxl=$zysare[$ij];
    $mint=$zysare[1 + $ij];
    $maxt=$zysare[1 + $ij];
    } else {
    if ($zysare[$ij] < $minl) { $minl=$zysare[$ij]; }
    if ($zysare[$ij] > $maxl) { $maxl=$zysare[$ij]; }
    if ($zysare[1 + $ij] < $mint) { $mint=$zysare[1 + $ij]; }
    if ($zysare[1 + $ij] > $maxt) { $maxt=$zysare[1 + $ij]; }
    }
    }

    for ($ij=0; $ij<sizeof($zysare); $ij+=2) {
    if ($svgcis == '') {
    $svgcis='' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);
    } else {
    $svgcis.=' ' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);
    }
    }

    $icnt++;
    return '<div title="' . $coordsare . '" id="dsa' . (-1 + $icnt) . '" style="position:absolute;left:' . $minl . 'px;top:' . $mint . 'px;width:' . ($maxl - $minl) . 'px;height:' . ($maxt - $mint) . ';display:BLOCK;z-index:24;"><svg height="100%" width="100%"><polygon points="' . $svgcis . '" style="fill:lime;stroke:purple;stroke-width:1"></polygon></svg></div>';
    }

    ?>
    … meaning the web application’s underlying HTML size increased at the expense of no need for external Javascript involvement any more

… in our changed countries.php web application you can also try below.

We’re not exactly sure why, but …

  • this improved web application stability …

    …everywhere … and an idea we’d ditched yesterday of …
  • idea to pre-colour “land” parts of the world GeoJson map green (ahead of the document.body onload event) also came good (after causing problems yesterday)

… meaning now, “overlay” wise, we could say

  • document.body lowest level …
  • overlayed by HTML canvas element plotted with world country linework …
  • overlayed by HTML img (transparent image) element and its associated image map area elements … and today we add into the mix …
  • HTML div hosting SVG elements overlaying initialized with “land” parts green infilled SVG at a mid range z-index (only as well as when called upon) individual GeoJson entities overlay

… and we (reckon we’ve) improved the colour coding user experience at the same time.

We noticed that tweaks in the changed …


var lastflagged='', appendtoinnerHTML='', waitplease=false; // used to make sure "area" element onclick code precedes any document.body onmousedown or ontouchdown code

function checkdsa(ath) {
waitplease=true;
var wasih='';
var athcoords=('' + ath.coords); //.substring(0, Math.floor(eval(0.1 * ('' + ath.coords).length)));
if (document.getElementById('svgd').innerHTML.indexOf(('' + athcoords)) != -1) {
wasih='<div title=' + String.fromCharCode(34) + '' + ath.coords + document.getElementById('svgd').innerHTML.split(ath.coords)[1].split('<div ')[0];
if (lastflagged == '') {
if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }
} else {
document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace(/rgba\(255\,87\,51\,0.5\)/g, 'rgba(200,200,200,0.3)');
if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }
}
if (lastflagged != '') {
document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');
document.getElementById(lastflagged).title=ath.title;
} else {
document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(wasih, '<div title=' + String.fromCharCode(34) + '' + ath.title + wasih.split(ath.coords)[1].split('<div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);'));
}
} else if (('' + appendtoinnerHTML).indexOf(('' + athcoords)) != -1) {
if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {
document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(/rgba\(255\,87\,51\,0.5\)/g, 'rgba(200,200,200,0.3)');
document.getElementById('svgd').innerHTML+='<div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('<div ')[0].replace('none;', 'block;z-index:123;').replace(/\ id\=/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');
} else {
document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(/rgba\(255\,87\,51\,0.5\)/g, 'rgba(200,200,200,0.3)');
document.getElementById('svgd').innerHTML+='<div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('<div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');
}
}
waitplease=false;
return '';
}

… also lessened the burden on the client side by only asking any Javascript DOM command operations act on single HTML element at a time, not a whole swathe of hosted ones, in any operation.


Previous relevant GeoJson World Countries Geo Chart Tutorial is shown below.

GeoJson World Countries Geo Chart Tutorial

GeoJson World Countries Geo Chart Tutorial

There are many advantages regarding today’s task to …

Integrate Google Chart Geo Chart

… as an additional “drill down” map option, functionality adding onto the work of yesterday’s GeoJson World Countries Tutorial.

What deducible data item needs to be determined for these Geo Charts to work? We need a way to deduce ISO-2 character country codes from the ISO-3 character codes existing in the GeoJson “countries.geojson” data from yesterday’s work. We happened upon the extremely generous mapping data webpage to help with these ISO-2 character deductions

<?php

$geojsonis=file_get_contents('countries.geojson');
$parts=explode("]]", $geojsonis);
$globalattr="";
$mappings=file_get_contents('http://gist.github.com/tadast/8827699'); // thanks
if (strpos($mappings, '>IN</td>') !== false) {
$mappings.='<td>IN</td><td>KAS</td><td>EH</td><td>SAH</td><td>SO</td><td>SOL</td><td>SS</td><td>SDS</td><td>XK</td><td>KOS</td><td>CY</td><td>CYN</td></body>';
}


for ($i=0; $i<(-1 + sizeof($parts)); $i++) {
if (strpos($parts[$i], '"sr_sov_a3":"') !== false) {
$globalattr=' data-iso3="' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '"';
if (strpos($mappings, '>' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '</td>') !== false) {
$iparts=explode('>' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '</td>', $mappings);
$globalattr.=' data-iso2="' . explode('>', explode('</td>', $iparts[0])[-2 + sizeof(explode('</td>', $iparts[0]))])[-1 + sizeof(explode('>', explode('</td>', $iparts[0])[-2 + sizeof(explode('</td>', $iparts[0]))]))] . '"';
} else if (substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],-1,1) >= '0' && substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],-1,1) <= '9') {
$globalattr.=' data-iso2="' . substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],0,2) . '"';
}
}
if (strpos($parts[$i], '"sr_subunit":"') !== false) {
$globalattr.=' data-cname="' . explode('"', explode('"sr_subunit":"', $parts[$i])[1])[0] . '"';
}
$coords=str_replace('[','',str_replace(']','',explode('[[' , $parts[$i])[-1 + sizeof(explode('[[' , $parts[$i]))]));
$newcoords=$coords;
if (!$dolatlong || 1 == 1) {
$lls=explode(",", $coords);
$newcoords="";
for ($j=0; $j<sizeof($lls); $j+=2) {
$lls[$j]=($lls[$j] + $longoff) * $factor;
$lls[$j + 1]=($lls[$j + 1] + $latoff) * $factor;
if ($newcoords != "") { $newcoords.=","; $htmlis=str_replace("}", " context.lineTo(" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . "); \n}", $htmlis); } else { $htmlis=str_replace("}", " context.stroke(); \n context.beginPath(); \n context.moveTo(" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . "); \n}", $htmlis); }
$newcoords.='' . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]);
}
}
$abit.="<area" . $globalattr . " onclick=\"ouralert(this.getAttribute('data-cname'),this.getAttribute('data-iso3'),this.getAttribute('data-iso2'),'Longitude,Latitude coordinates are " . $coords . "');\" shape='poly' coords='" . $newcoords . "'></area>\n";
//echo "<area type='poly' coords='" . $newcoords . "'></area>\n";
}

?>

… in our image map area elements PHP creation code above. As you can see, extra “intelligence”, moving forward, is contained in area element global data attributes.

Which leaves us with why any of this helps functionality within our changed countries.php web application you can also try below?

  • Geo Chart can zoom into a country view …
  • Geo Chart can involve emoji (🏠 &127968;) or image (SVG) circle based symbology for the “User Clicked Place” and nearby TimeZone places respectively …
  • all these symbols can be clicked to open popup windows containing TimeZone Place Wikipedia webpages of relevance …
  • an emoji national flag (eg. Zambia “ZA” could be used to derive &#127487;&#127462; 🇿🇦 flag emoji) derived from those ISO-2 character codes can supplement the GeoJson (more ISO-3 character based) names presented in the underlying data, in the Geo Chart title …
  • contextualizing the accompanying Map Chart … and …
  • vice versa regarding hovering over symbology (which works on Map Chart, but not Geo Chart) …
  • within the Map Chart iframe a “Geo” link can glean a “zoomed out” world Geo Chart view of your TimeZone places

And feel free to (re-)try our tweaked “to make thinner the coastline linework” regions.php GeoJson PHP web application in a new window, or you can also try below.


Previous relevant GeoJson World Countries Tutorial is shown below.

GeoJson World Countries Tutorial

GeoJson World Countries Tutorial

Know your GeoJson! Yes, pretty obviously, any two GeoJson datasets might display the same in that “map plotting” sense, but one might have different and/or more “intelligence” than the other. Often, an XML has more “intelligence” than equivalent HTML (barring the use of global data attributes, that is), as today’s Corollacorollary.

And so, moving on from yesterday’s GeoJson World Coastline TimeZone Tutorial, today, we present a new GeoJson admin 0 countries we download, and upload as “countries.geojson” data set, again via the excellent HTTP://geojson.xyz/ repository, thanks.

From it, we do get a different JSON additional “intelligence”


{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"scalerank":1,"labelrank":1,"sr_sov_a3":"ZWE","sr_adm0_a3":"ZWE","sr_gu_a3":"ZWE","sr_su_a3":"ZWE","sr_subunit":"Zimbabwe","featureclass":"Admin-0 scale ranks"},"geometry":{"type":"Polygon","coordinates":[[[31.287890625000017,-22.40205078125001],[31.197265625,-22.34492187500001],[31.07343750000001,-22.30781250000001],[30.916113281250006,-22.29072265625001],[30.71162109375001,-22.2978515625],[30.46015625000001,-22.32900390625001],[30.1904296875,-22.291113281250006],[29.90234375,-22.184179687500006],[29.6630859375,-22.146289062500003],[29.37744140625,-22.19277343750001],[29.36484375,-22.193945312500006],[29.315234375000017,-22.15771484375],[29.237207031250023,-22.07949218750001],[29.106835937500023,-22.065722656250003],[29.07148437500001,-22.047460937500006],[29.042382812500023,-22.018359375],[29.023339843750023,-21.98125],[29.01582031250001,-21.93994140625],[29.03730468750001,-21.811328125],[29.02558593750001,-21.796875],[28.99072265625,-21.78144531250001],[28.919335937500023,-21.766015625],[28.74775390625001,-21.707617187500006],[28.532031250000017,-21.65126953125001],[28.181640625,-21.58935546875],[28.04560546875001,-21.573046875],[28.014062500000023,-21.55419921875],[27.974609375,-21.50673828125001],[27.90742187500001,-21.35908203125001],[27.844140625000023,-21.261523437500003],[27.693457031250006,-21.11103515625001],[27.66943359375,-21.064257812500003],[27.67695312500001,-20.94482421875],[27.688085937500006,-20.84833984375001],[27.70429687500001,-20.76640625],[27.69697265625001,-20.689746093750003],[27.69482421875,-20.59453125],[27.699609375000023,-20.53066406250001],[27.679296875,-20.503027343750006],[27.624609375,-20.48359375000001],[27.46894531250001,-20.47480468750001],[27.28076171875,-20.47871093750001],[27.27460937500001,-20.3818359375],[27.256738281250023,-20.23203125],[27.221484375000017,-20.145800781250003],[27.17822265625,-20.10097656250001],[27.091796875,-20.05419921875],[26.91669921875001,-19.99013671875001],[26.67822265625,-19.89277343750001],[26.474609375,-19.748632812500006],[26.241015625000017,-19.5693359375],[26.168066406250006,-19.53828125000001],[26.081933593750023,-19.369921875],[25.95068359375,-19.08173828125001],[25.95917968750001,-18.985644531250003],[25.939355468750023,-18.93867187500001],[25.811914062500023,-18.79707031250001],[25.78369140625,-18.72353515625001],[25.76123046875,-18.64921875],[25.55830078125001,-18.441796875],[25.4892578125,-18.35126953125001],[25.43671875000001,-18.234960937500006],[25.384375,-18.14199218750001],[25.340234375000023,-18.1044921875],[25.28242187500001,-18.04121093750001],[25.242285156250006,-17.969042968750003],[25.224023437500023,-17.91523437500001],[25.239062500000017,-17.843066406250003],[25.2587890625,-17.793554687500006],[25.451757812500006,-17.84511718750001],[25.55712890625,-17.84951171875001],[25.6396484375,-17.82412109375001],[25.741601562500023,-17.858203125],[25.86328125,-17.951953125],[25.995898437500017,-17.969824218750006],[26.139550781250023,-17.91171875],[26.333398437500023,-17.929296875],[26.577539062500023,-18.022558593750006],[26.779882812500006,-18.04150390625],[27.020800781250017,-17.95839843750001],[27.235742187500023,-17.728320312500003],[27.437890625000023,-17.51191406250001],[27.63671875,-17.262109375],[27.75654296875001,-17.060351562500003],[27.932226562500006,-16.89619140625001],[28.16376953125001,-16.76972656250001],[28.399804687500023,-16.66279296875001],[28.760644531250023,-16.53193359375001],[28.760546875000017,-16.53212890625001],[28.83271484375001,-16.424121093750003],[28.856738281250017,-16.30615234375],[28.856738281250017,-16.14228515625001],[28.875585937500006,-16.0361328125],[28.9130859375,-15.98779296875],[28.973046875000023,-15.950097656250009],[29.050585937500017,-15.901171875],[29.287890625000017,-15.776464843750006],[29.4873046875,-15.69677734375],[29.729589843750006,-15.644628906250006],[29.994921875000017,-15.64404296875],[30.25068359375001,-15.643457031250009],[30.39609375,-15.64306640625],[30.39814453125001,-15.80078125],[30.409375,-15.978222656250011],[30.437792968750017,-15.995312500000011],[30.630175781250017,-15.999218750000011],[30.938769531250017,-16.01171875],[31.236230468750023,-16.02363281250001],[31.426171875000023,-16.15234375],[31.48984375,-16.1796875],[31.687597656250006,-16.214160156250003],[31.939843750000023,-16.428808593750006],[32.243261718750006,-16.44873046875],[32.45195312500002,-16.515722656250006],[32.635839843750006,-16.589453125],[32.741796875,-16.67763671875001],[32.81025390625001,-16.69765625],[32.902929687500006,-16.704199218750006],[32.94804687500002,-16.71230468750001],[32.93789062500002,-16.775976562500006],[32.87626953125002,-16.88359375],[32.884375,-17.03779296875001],[32.969335937500006,-17.2515625],[32.98076171875002,-17.4375],[32.9546875,-17.765429687500003],[32.95556640625,-18.08291015625001],[32.96464843750002,-18.1962890625],[32.978515625,-18.271484375],[32.99638671875002,-18.312597656250006],[32.99306640625002,-18.35957031250001],[32.942480468750006,-18.49267578125],[32.90166015625002,-18.632910156250006],[32.90029296875002,-18.6890625],[32.88457031250002,-18.728515625],[32.8544921875,-18.763671875],[32.72197265625002,-18.828417968750003],[32.69921875,-18.868457031250003],[32.69970703125,-18.94091796875],[32.71650390625001,-19.00185546875001],[32.766210937500006,-19.02431640625001],[32.826171875,-19.05878906250001],[32.84980468750001,-19.10439453125001],[32.85,-19.152441406250006],[32.83095703125002,-19.24140625000001],[32.77763671875002,-19.388769531250006],[32.83076171875001,-19.558203125],[32.89042968750002,-19.668066406250006],[32.97265625,-19.79541015625],[33.00673828125002,-19.873828125],[33.0048828125,-19.93017578125],[32.992773437500006,-19.98486328125],[32.86962890625,-20.2171875],[32.780859375,-20.36152343750001],[32.67255859375001,-20.51611328125],[32.529296875,-20.613085937500003],[32.49238281250001,-20.659765625],[32.477636718750006,-20.712988281250006],[32.48281250000002,-20.82890625],[32.476171875,-20.95009765625001],[32.353613281250006,-21.136523437500003],[32.429785156250006,-21.29707031250001],[32.41240234375002,-21.311816406250003],[32.37109375,-21.33486328125001],[32.19472656250002,-21.515429687500003],[32.01630859375001,-21.698046875],[31.88593750000001,-21.83154296875],[31.737695312500023,-21.9833984375],[31.57148437500001,-22.15351562500001],[31.429492187500017,-22.298828125],[31.287890625000017,-22.40205078125001]]]}}

… and “mapping look” because country borders are added in, and some JSON attributes we can call on to allow for …

  • the similar Google Chart Map Chart maps introduced yesterday into the user interaction mix … as well as …
  • Wikipedia, thanks, webpage lookup possibilities calling on those new GeoJson property attributes presented within the dataset above

We enable this, as we just add in some Javascript popup window type equals “prompt” to the existant “confirm” and “alert” logic of yesterday.

Feel free to try the how we got there regions.php GeoJson PHP World Countries web application in a new window, or below …


Previous relevant GeoJson World Coastline TimeZone Tutorial is shown below.

GeoJson World Coastline TimeZone Tutorial

GeoJson World Coastline TimeZone Tutorial

Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance. As such, given the “purely coastline” GeoJson data involved in our fledgling PHP web application of yesterday’s GeoJson World Coastline Primer Tutorial a useful arrangement for improvement involves …

  • document.body onclick event co-ordinates … able to be converted to …
  • longitude, latitude (easily, only because of our simplistic map projection, of course) … onfed to …
  • our inhouse “TimeZone Places” web application PHP helper

… can have us helping out your curious web “clicking” user with the 3 nearest TimeZone places, as a reference as to where they are “clicking” in the world.

Feel free to try our improved regions.php GeoJson PHP web application in a new window, or below …

Stop Press

Our efforts in making our new tweaked regions.php GeoJson PHP web application more mobile platform user friendly reminds us about a salutary issue regarding touch gestures …

  • in a discrete click methodology of interest, you could adopt a non-mobile “onmousedown” logic set that does not get interfered with by a mobile “ontouchdown” logic set (perhaps leaving “onclick” event, which both non-mobile and mobile both recognise, for another event logic role) … and …
  • neither will interrupt the mobile gestures associated with swiping and pinching, which refer to the events “ontouchstart” and “ontouchend” at either end of their lifespan


Previous relevant GeoJson World Coastline Primer Tutorial is shown below.

GeoJson World Coastline Primer Tutorial

GeoJson World Coastline Primer Tutorial

We’re keen to further explore the possibilities of GeoJson public data sets, further to yesterday’s Swift Playgrounds on macOS Map Emoji Tutorial.

And then we remembered some of the methodologies we used with Responsive Web Design Landing Page Image Map Tutorial, talking about image maps

And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out … but not today?! Why not? We have a funny set of needs, they being …

  • our Image Map’s image will have a variable set of width x height dimensions …
  • our Image Map’s image will be transparent
  • our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working

… the first two ideas of which, along with …

… in our “early days” “proof of concept” regions.php GeoJson PHP web application.

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

Audio Stream of YouTube Video Play Safari Error Tutorial

Audio Stream of YouTube Video Play Safari Error Tutorial

Audio Stream of YouTube Video Play Safari Error Tutorial

Like with GeoJson World Countries SVG Overlay Safari Error Tutorial we have another incarnation of the …

A problem repeatedly occurred with …

… style of erroneous webpage scenario hosting an iframe using that Audio Stream of YouTube Video Play web application logic within some of this WordPress blog’s postings, but very specifically only using …

  • Safari web browser … on …
  • iPhone but not iPad, gobsmackingly (of devices that we know of)

… as we tested (and you should do as many tests as you can over browsers and platforms when you get this error in particular).

We think, this way, as with the situation below, you can get these errors to do with memory issues when using the browser/platform combination where it happens.

However, as a programmer you should be curious enough to test and debug for memory leaks, at the very least, in your own code, and any setInterval or setTimeout related abnormalities that may be causing the error. Luckily, if you have access to …

  • iPhone Safari web browser …
  • macOS Safari web browser with Developer debugging capabilities …
  • Apple white lead that connect these two

… then you can …

  • be in Safari web browser at new tabs in both iPhone and macOS (eg. MacAir) …
  • connect the two devices with Apple White Lead
  • on iPhone Safari type in and go to URL where problem is known
  • on macOS Safari click Developer menu to reach and select the session with offending URL
  • debug via the Console and Network and Errors and whatever else helps to try to track down issues with the web application, in this environment

We think us changing external Javascript ytaudioonly.js this way


var oktocheck=true;

function audioytlook() {
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (navigator.userAgent.match(/iPhone/i) && oktocheck && isSafari) {
if (('' + top.document.URL).indexOf('/external-javascript-') != -1 && ('' + top.document.URL).indexOf('andabit=') != -1) {
if (document.URL.indexOf('/karaoke_') == -1) {
oktocheck=false;
setTimeout(audioytlook, 180000);
return '';
}
} else if (('' + top.document.URL).indexOf('/external-javascript-') != -1) {
if (document.URL.indexOf('/karaoke_') == -1) {
oktocheck=false;
setTimeout(audioytlook, 180000);
return '';
}
}
}
oktocheck=false;

/* Rest of function audioytlook is as is, below ... */
}

… having helped here shows, again, that timing can be the issue with this error. But to know where to time things better will probably be the result of doing this Safari iPhone debugging via macOS Safari web browser Developer menu.


Previous relevant GeoJson World Countries SVG Overlay Safari Error Tutorial is shown below.

GeoJson World Countries SVG Overlay Safari Error Tutorial

GeoJson World Countries SVG Overlay Safari Error Tutorial

Mostly on smaller devices (such as an iPhone), but elsewhere as well, but less drastically, this morning, using our current Display GeoJson Countries web application we would get the Safari web browser error …

A problem repeatedly occurred with https://www.rjmprogramming.com.au/HTMLCSS/countries.php

… with web application work up to yesterday’s GeoJson World Countries SVG Overlay Colour Infill Tutorial.

On discovering our first solution theory of turning yesterday’s mapsvg.js external Javascript work into an async piece of work made no difference to this situation, we surmised that the huge amount of content held in the Javascript (ie. client side) global variable appendtoinnerHTML was causing memory issues. We couldn’t shift much to do with the overall amount of “data” needing to be handled, in order to implement country SVG colour infilling, but we could shift the data from being …

  • client side (external) Javascript held … to, instead, (have that data) be (determined on the) …
  • server side PHP filling in the contents of our (relevant) HTML div id=svgd ahead of the document.body onload event timing …
    <?php

    $icnt=0;

    function apptohtmstuff($coordsare, $origc) {
    global $icnt;
    $minl=-1;
    $mint=-1;
    $maxl=-1;
    $maxt=-1;
    $zysare=explode(',', $coordsare);
    $svgcis='';
    for ($ij=0; $ij<sizeof($zysare); $ij+=2) {
    if ($minl < 0) {
    $minl=$zysare[$ij];
    $maxl=$zysare[$ij];
    $mint=$zysare[1 + $ij];
    $maxt=$zysare[1 + $ij];
    } else {
    if ($zysare[$ij] < $minl) { $minl=$zysare[$ij]; }
    if ($zysare[$ij] > $maxl) { $maxl=$zysare[$ij]; }
    if ($zysare[1 + $ij] < $mint) { $mint=$zysare[1 + $ij]; }
    if ($zysare[1 + $ij] > $maxt) { $maxt=$zysare[1 + $ij]; }
    }
    }

    for ($ij=0; $ij<sizeof($zysare); $ij+=2) {
    if ($svgcis == '') {
    $svgcis='' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);
    } else {
    $svgcis.=' ' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);
    }
    }

    $icnt++;
    return '<div title="' . $coordsare . '" id="dsa' . (-1 + $icnt) . '" style="position:absolute;left:' . $minl . 'px;top:' . $mint . 'px;width:' . ($maxl - $minl) . 'px;height:' . ($maxt - $mint) . ';display:BLOCK;z-index:24;"><svg height="100%" width="100%"><polygon points="' . $svgcis . '" style="fill:lime;stroke:purple;stroke-width:1"></polygon></svg></div>';
    }

    ?>
    … meaning the web application’s underlying HTML size increased at the expense of no need for external Javascript involvement any more

… in our changed countries.php web application you can also try below.

We’re not exactly sure why, but …

  • this improved web application stability …

    …everywhere … and an idea we’d ditched yesterday of …
  • idea to pre-colour “land” parts of the world GeoJson map green (ahead of the document.body onload event) also came good (after causing problems yesterday)

… meaning now, “overlay” wise, we could say

  • document.body lowest level …
  • overlayed by HTML canvas element plotted with world country linework …
  • overlayed by HTML img (transparent image) element and its associated image map area elements … and today we add into the mix …
  • HTML div hosting SVG elements overlaying initialized with “land” parts green infilled SVG at a mid range z-index (only as well as when called upon) individual GeoJson entities overlay

… and we (reckon we’ve) improved the colour coding user experience at the same time.

We noticed that tweaks in the changed …


var lastflagged='', appendtoinnerHTML='', waitplease=false; // used to make sure "area" element onclick code precedes any document.body onmousedown or ontouchdown code

function checkdsa(ath) {
waitplease=true;
var wasih='';
var athcoords=('' + ath.coords); //.substring(0, Math.floor(eval(0.1 * ('' + ath.coords).length)));
if (document.getElementById('svgd').innerHTML.indexOf(('' + athcoords)) != -1) {
wasih='<div title=' + String.fromCharCode(34) + '' + ath.coords + document.getElementById('svgd').innerHTML.split(ath.coords)[1].split('<div ')[0];
if (lastflagged == '') {
if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }
} else {
document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace(/rgba\(255\,87\,51\,0.5\)/g, 'rgba(200,200,200,0.3)');
if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }
}
if (lastflagged != '') {
document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');
document.getElementById(lastflagged).title=ath.title;
} else {
document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(wasih, '<div title=' + String.fromCharCode(34) + '' + ath.title + wasih.split(ath.coords)[1].split('<div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);'));
}
} else if (('' + appendtoinnerHTML).indexOf(('' + athcoords)) != -1) {
if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {
document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(/rgba\(255\,87\,51\,0.5\)/g, 'rgba(200,200,200,0.3)');
document.getElementById('svgd').innerHTML+='<div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('<div ')[0].replace('none;', 'block;z-index:123;').replace(/\ id\=/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');
} else {
document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(/rgba\(255\,87\,51\,0.5\)/g, 'rgba(200,200,200,0.3)');
document.getElementById('svgd').innerHTML+='<div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('<div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');
}
}
waitplease=false;
return '';
}

… also lessened the burden on the client side by only asking any Javascript DOM command operations act on single HTML element at a time, not a whole swathe of hosted ones, in any operation.


Previous relevant GeoJson World Countries Geo Chart Tutorial is shown below.

GeoJson World Countries Geo Chart Tutorial

GeoJson World Countries Geo Chart Tutorial

There are many advantages regarding today’s task to …

Integrate Google Chart Geo Chart

… as an additional “drill down” map option, functionality adding onto the work of yesterday’s GeoJson World Countries Tutorial.

What deducible data item needs to be determined for these Geo Charts to work? We need a way to deduce ISO-2 character country codes from the ISO-3 character codes existing in the GeoJson “countries.geojson” data from yesterday’s work. We happened upon the extremely generous mapping data webpage to help with these ISO-2 character deductions

<?php

$geojsonis=file_get_contents('countries.geojson');
$parts=explode("]]", $geojsonis);
$globalattr="";
$mappings=file_get_contents('http://gist.github.com/tadast/8827699'); // thanks
if (strpos($mappings, '>IN</td>') !== false) {
$mappings.='<td>IN</td><td>KAS</td><td>EH</td><td>SAH</td><td>SO</td><td>SOL</td><td>SS</td><td>SDS</td><td>XK</td><td>KOS</td><td>CY</td><td>CYN</td></body>';
}


for ($i=0; $i<(-1 + sizeof($parts)); $i++) {
if (strpos($parts[$i], '"sr_sov_a3":"') !== false) {
$globalattr=' data-iso3="' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '"';
if (strpos($mappings, '>' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '</td>') !== false) {
$iparts=explode('>' . explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0] . '</td>', $mappings);
$globalattr.=' data-iso2="' . explode('>', explode('</td>', $iparts[0])[-2 + sizeof(explode('</td>', $iparts[0]))])[-1 + sizeof(explode('>', explode('</td>', $iparts[0])[-2 + sizeof(explode('</td>', $iparts[0]))]))] . '"';
} else if (substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],-1,1) >= '0' && substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],-1,1) <= '9') {
$globalattr.=' data-iso2="' . substr(explode('"', explode('"sr_sov_a3":"', $parts[$i])[1])[0],0,2) . '"';
}
}
if (strpos($parts[$i], '"sr_subunit":"') !== false) {
$globalattr.=' data-cname="' . explode('"', explode('"sr_subunit":"', $parts[$i])[1])[0] . '"';
}
$coords=str_replace('[','',str_replace(']','',explode('[[' , $parts[$i])[-1 + sizeof(explode('[[' , $parts[$i]))]));
$newcoords=$coords;
if (!$dolatlong || 1 == 1) {
$lls=explode(",", $coords);
$newcoords="";
for ($j=0; $j<sizeof($lls); $j+=2) {
$lls[$j]=($lls[$j] + $longoff) * $factor;
$lls[$j + 1]=($lls[$j + 1] + $latoff) * $factor;
if ($newcoords != "") { $newcoords.=","; $htmlis=str_replace("}", " context.lineTo(" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . "); \n}", $htmlis); } else { $htmlis=str_replace("}", " context.stroke(); \n context.beginPath(); \n context.moveTo(" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . "); \n}", $htmlis); }
$newcoords.='' . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]);
}
}
$abit.="<area" . $globalattr . " onclick=\"ouralert(this.getAttribute('data-cname'),this.getAttribute('data-iso3'),this.getAttribute('data-iso2'),'Longitude,Latitude coordinates are " . $coords . "');\" shape='poly' coords='" . $newcoords . "'></area>\n";
//echo "<area type='poly' coords='" . $newcoords . "'></area>\n";
}

?>

… in our image map area elements PHP creation code above. As you can see, extra “intelligence”, moving forward, is contained in area element global data attributes.

Which leaves us with why any of this helps functionality within our changed countries.php web application you can also try below?

  • Geo Chart can zoom into a country view …
  • Geo Chart can involve emoji (🏠 &127968;) or image (SVG) circle based symbology for the “User Clicked Place” and nearby TimeZone places respectively …
  • all these symbols can be clicked to open popup windows containing TimeZone Place Wikipedia webpages of relevance …
  • an emoji national flag (eg. Zambia “ZA” could be used to derive &#127487;&#127462; 🇿🇦 flag emoji) derived from those ISO-2 character codes can supplement the GeoJson (more ISO-3 character based) names presented in the underlying data, in the Geo Chart title …
  • contextualizing the accompanying Map Chart … and …
  • vice versa regarding hovering over symbology (which works on Map Chart, but not Geo Chart) …
  • within the Map Chart iframe a “Geo” link can glean a “zoomed out” world Geo Chart view of your TimeZone places

And feel free to (re-)try our tweaked “to make thinner the coastline linework” regions.php GeoJson PHP web application in a new window, or you can also try below.


Previous relevant GeoJson World Countries Tutorial is shown below.

GeoJson World Countries Tutorial

GeoJson World Countries Tutorial

Know your GeoJson! Yes, pretty obviously, any two GeoJson datasets might display the same in that “map plotting” sense, but one might have different and/or more “intelligence” than the other. Often, an XML has more “intelligence” than equivalent HTML (barring the use of global data attributes, that is), as today’s Corollacorollary.

And so, moving on from yesterday’s GeoJson World Coastline TimeZone Tutorial, today, we present a new GeoJson admin 0 countries we download, and upload as “countries.geojson” data set, again via the excellent HTTP://geojson.xyz/ repository, thanks.

From it, we do get a different JSON additional “intelligence”


{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"scalerank":1,"labelrank":1,"sr_sov_a3":"ZWE","sr_adm0_a3":"ZWE","sr_gu_a3":"ZWE","sr_su_a3":"ZWE","sr_subunit":"Zimbabwe","featureclass":"Admin-0 scale ranks"},"geometry":{"type":"Polygon","coordinates":[[[31.287890625000017,-22.40205078125001],[31.197265625,-22.34492187500001],[31.07343750000001,-22.30781250000001],[30.916113281250006,-22.29072265625001],[30.71162109375001,-22.2978515625],[30.46015625000001,-22.32900390625001],[30.1904296875,-22.291113281250006],[29.90234375,-22.184179687500006],[29.6630859375,-22.146289062500003],[29.37744140625,-22.19277343750001],[29.36484375,-22.193945312500006],[29.315234375000017,-22.15771484375],[29.237207031250023,-22.07949218750001],[29.106835937500023,-22.065722656250003],[29.07148437500001,-22.047460937500006],[29.042382812500023,-22.018359375],[29.023339843750023,-21.98125],[29.01582031250001,-21.93994140625],[29.03730468750001,-21.811328125],[29.02558593750001,-21.796875],[28.99072265625,-21.78144531250001],[28.919335937500023,-21.766015625],[28.74775390625001,-21.707617187500006],[28.532031250000017,-21.65126953125001],[28.181640625,-21.58935546875],[28.04560546875001,-21.573046875],[28.014062500000023,-21.55419921875],[27.974609375,-21.50673828125001],[27.90742187500001,-21.35908203125001],[27.844140625000023,-21.261523437500003],[27.693457031250006,-21.11103515625001],[27.66943359375,-21.064257812500003],[27.67695312500001,-20.94482421875],[27.688085937500006,-20.84833984375001],[27.70429687500001,-20.76640625],[27.69697265625001,-20.689746093750003],[27.69482421875,-20.59453125],[27.699609375000023,-20.53066406250001],[27.679296875,-20.503027343750006],[27.624609375,-20.48359375000001],[27.46894531250001,-20.47480468750001],[27.28076171875,-20.47871093750001],[27.27460937500001,-20.3818359375],[27.256738281250023,-20.23203125],[27.221484375000017,-20.145800781250003],[27.17822265625,-20.10097656250001],[27.091796875,-20.05419921875],[26.91669921875001,-19.99013671875001],[26.67822265625,-19.89277343750001],[26.474609375,-19.748632812500006],[26.241015625000017,-19.5693359375],[26.168066406250006,-19.53828125000001],[26.081933593750023,-19.369921875],[25.95068359375,-19.08173828125001],[25.95917968750001,-18.985644531250003],[25.939355468750023,-18.93867187500001],[25.811914062500023,-18.79707031250001],[25.78369140625,-18.72353515625001],[25.76123046875,-18.64921875],[25.55830078125001,-18.441796875],[25.4892578125,-18.35126953125001],[25.43671875000001,-18.234960937500006],[25.384375,-18.14199218750001],[25.340234375000023,-18.1044921875],[25.28242187500001,-18.04121093750001],[25.242285156250006,-17.969042968750003],[25.224023437500023,-17.91523437500001],[25.239062500000017,-17.843066406250003],[25.2587890625,-17.793554687500006],[25.451757812500006,-17.84511718750001],[25.55712890625,-17.84951171875001],[25.6396484375,-17.82412109375001],[25.741601562500023,-17.858203125],[25.86328125,-17.951953125],[25.995898437500017,-17.969824218750006],[26.139550781250023,-17.91171875],[26.333398437500023,-17.929296875],[26.577539062500023,-18.022558593750006],[26.779882812500006,-18.04150390625],[27.020800781250017,-17.95839843750001],[27.235742187500023,-17.728320312500003],[27.437890625000023,-17.51191406250001],[27.63671875,-17.262109375],[27.75654296875001,-17.060351562500003],[27.932226562500006,-16.89619140625001],[28.16376953125001,-16.76972656250001],[28.399804687500023,-16.66279296875001],[28.760644531250023,-16.53193359375001],[28.760546875000017,-16.53212890625001],[28.83271484375001,-16.424121093750003],[28.856738281250017,-16.30615234375],[28.856738281250017,-16.14228515625001],[28.875585937500006,-16.0361328125],[28.9130859375,-15.98779296875],[28.973046875000023,-15.950097656250009],[29.050585937500017,-15.901171875],[29.287890625000017,-15.776464843750006],[29.4873046875,-15.69677734375],[29.729589843750006,-15.644628906250006],[29.994921875000017,-15.64404296875],[30.25068359375001,-15.643457031250009],[30.39609375,-15.64306640625],[30.39814453125001,-15.80078125],[30.409375,-15.978222656250011],[30.437792968750017,-15.995312500000011],[30.630175781250017,-15.999218750000011],[30.938769531250017,-16.01171875],[31.236230468750023,-16.02363281250001],[31.426171875000023,-16.15234375],[31.48984375,-16.1796875],[31.687597656250006,-16.214160156250003],[31.939843750000023,-16.428808593750006],[32.243261718750006,-16.44873046875],[32.45195312500002,-16.515722656250006],[32.635839843750006,-16.589453125],[32.741796875,-16.67763671875001],[32.81025390625001,-16.69765625],[32.902929687500006,-16.704199218750006],[32.94804687500002,-16.71230468750001],[32.93789062500002,-16.775976562500006],[32.87626953125002,-16.88359375],[32.884375,-17.03779296875001],[32.969335937500006,-17.2515625],[32.98076171875002,-17.4375],[32.9546875,-17.765429687500003],[32.95556640625,-18.08291015625001],[32.96464843750002,-18.1962890625],[32.978515625,-18.271484375],[32.99638671875002,-18.312597656250006],[32.99306640625002,-18.35957031250001],[32.942480468750006,-18.49267578125],[32.90166015625002,-18.632910156250006],[32.90029296875002,-18.6890625],[32.88457031250002,-18.728515625],[32.8544921875,-18.763671875],[32.72197265625002,-18.828417968750003],[32.69921875,-18.868457031250003],[32.69970703125,-18.94091796875],[32.71650390625001,-19.00185546875001],[32.766210937500006,-19.02431640625001],[32.826171875,-19.05878906250001],[32.84980468750001,-19.10439453125001],[32.85,-19.152441406250006],[32.83095703125002,-19.24140625000001],[32.77763671875002,-19.388769531250006],[32.83076171875001,-19.558203125],[32.89042968750002,-19.668066406250006],[32.97265625,-19.79541015625],[33.00673828125002,-19.873828125],[33.0048828125,-19.93017578125],[32.992773437500006,-19.98486328125],[32.86962890625,-20.2171875],[32.780859375,-20.36152343750001],[32.67255859375001,-20.51611328125],[32.529296875,-20.613085937500003],[32.49238281250001,-20.659765625],[32.477636718750006,-20.712988281250006],[32.48281250000002,-20.82890625],[32.476171875,-20.95009765625001],[32.353613281250006,-21.136523437500003],[32.429785156250006,-21.29707031250001],[32.41240234375002,-21.311816406250003],[32.37109375,-21.33486328125001],[32.19472656250002,-21.515429687500003],[32.01630859375001,-21.698046875],[31.88593750000001,-21.83154296875],[31.737695312500023,-21.9833984375],[31.57148437500001,-22.15351562500001],[31.429492187500017,-22.298828125],[31.287890625000017,-22.40205078125001]]]}}

… and “mapping look” because country borders are added in, and some JSON attributes we can call on to allow for …

  • the similar Google Chart Map Chart maps introduced yesterday into the user interaction mix … as well as …
  • Wikipedia, thanks, webpage lookup possibilities calling on those new GeoJson property attributes presented within the dataset above

We enable this, as we just add in some Javascript popup window type equals “prompt” to the existant “confirm” and “alert” logic of yesterday.

Feel free to try the how we got there regions.php GeoJson PHP World Countries web application in a new window, or below …


Previous relevant GeoJson World Coastline TimeZone Tutorial is shown below.

GeoJson World Coastline TimeZone Tutorial

GeoJson World Coastline TimeZone Tutorial

Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance. As such, given the “purely coastline” GeoJson data involved in our fledgling PHP web application of yesterday’s GeoJson World Coastline Primer Tutorial a useful arrangement for improvement involves …

  • document.body onclick event co-ordinates … able to be converted to …
  • longitude, latitude (easily, only because of our simplistic map projection, of course) … onfed to …
  • our inhouse “TimeZone Places” web application PHP helper

… can have us helping out your curious web “clicking” user with the 3 nearest TimeZone places, as a reference as to where they are “clicking” in the world.

Feel free to try our improved regions.php GeoJson PHP web application in a new window, or below …

Stop Press

Our efforts in making our new tweaked regions.php GeoJson PHP web application more mobile platform user friendly reminds us about a salutary issue regarding touch gestures …

  • in a discrete click methodology of interest, you could adopt a non-mobile “onmousedown” logic set that does not get interfered with by a mobile “ontouchdown” logic set (perhaps leaving “onclick” event, which both non-mobile and mobile both recognise, for another event logic role) … and …
  • neither will interrupt the mobile gestures associated with swiping and pinching, which refer to the events “ontouchstart” and “ontouchend” at either end of their lifespan


Previous relevant GeoJson World Coastline Primer Tutorial is shown below.

GeoJson World Coastline Primer Tutorial

GeoJson World Coastline Primer Tutorial

We’re keen to further explore the possibilities of GeoJson public data sets, further to yesterday’s Swift Playgrounds on macOS Map Emoji Tutorial.

And then we remembered some of the methodologies we used with Responsive Web Design Landing Page Image Map Tutorial, talking about image maps

And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out … but not today?! Why not? We have a funny set of needs, they being …

  • our Image Map’s image will have a variable set of width x height dimensions …
  • our Image Map’s image will be transparent
  • our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working

… the first two ideas of which, along with …

… in our “early days” “proof of concept” regions.php GeoJson PHP web application.

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

External Javascript YouTube Audio of Video Research Tutorial

External Javascript YouTube Audio of Video Research Tutorial

External Javascript YouTube Audio of Video Research Tutorial

In the same line of thinking as yesterday’s External Javascript YouTube Audio of Video Switch Tutorial we probably have a little more room in that textarea (user interactions menu) for a couple more switch/class hotkey options, in the research line of thinking, we’ll call …

G=Google
W=Wikipedia

… the first having an obvious connection, where the title of a YouTube video is likely to resonate with Google.

But do you ever “go fishing” in Wikipedia? It won’t give up on you even if you are asking for strange information, that is, suggesting other avenues to research using “words, basically”.

And so, like with yesterday (and it’s work augmented a bit), we’ve got to say the Javascript function playingvideo‘s switch and case based logic stuck out because the coding involves words that relate to functionality far better than an if code structure. And so all we needed to do for our change, between the Javascript’s switch and first case was add …


case 'Y':
if (document.URL.indexOf('start=') != -1 && document.URL.indexOf('start=0') == -1) {
window.open('//www.youtube.com/watch?v=' + vid + '&t=' + document.URL.split('start=')[1].split('&')[0].split('#')[0] + 's', '_blank', 'top=100,left=100,width=600,height=600');
} else {

window.open('//www.youtube.com/watch?v=' + vid, '_blank', 'top=100,left=100,width=600,height=600');
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;

case 'G':
window.open('//www.google.com/search?q=' + encodeURIComponent(parent.document.getElementsByTagName('h1')[0].innerHTML), '_blank', 'top=110,left=110,width=600,height=600');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;


case 'W':
window.open('//wikipedia.org/wiki/' + encodeURIComponent(parent.document.getElementsByTagName('h1')[0].innerHTML), '_blank', 'top=120,left=120,width=600,height=600');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;


… still only involving changes to the modified stop_start_youtube.html YouTube API caller to make happen.


Previous relevant External Javascript YouTube Audio of Video Switch Tutorial is shown below.

External Javascript YouTube Audio of Video Switch Tutorial

External Javascript YouTube Audio of Video Switch Tutorial

If we say …

  1. switch … and then …
  2. case

… related to Javascript coding, what’s the reaction around here? Well, we’d say …

One of the most relatable and easily revisited modus operandi, within Javascript, to pick up where you left off or add more

Doesn’t exactly “roll off the tongue”, but we’ll leave that for you should you read this blog posting, and agree?!

In a similar line of thinking as External Javascript YouTube Audio of Video Snippet Tutorial, what did we want to achieve with today’s modification to YouTube Audio of Video Stream Play Only web application, is, once the user is into the YouTube play and you get to that textarea menu that works like a hotkey (and we can thank that for what must have been clear and relatable thinking that day) is to add a Y hotkey possibility to open a popup window back to a YouTube based play of the video concerned.

We’ve got to say the Javascript function playingvideo‘s switch and case based logic stuck out because the coding involves words that relate to functionality far better than an if code structure. And so all we needed to do for our change, between the Javascript’s switch and first case was add …


case 'Y':
window.open('//www.youtube.com/watch?v=' + vid, '_blank', 'top=100,left=100,width=600,height=600');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;


… and only involving changes to the modified stop_start_youtube.html YouTube API caller to make happen.


Previous relevant External Javascript YouTube Audio of Video Snippet Tutorial is shown below.

External Javascript YouTube Audio of Video Snippet Tutorial

External Javascript YouTube Audio of Video Snippet Tutorial

Given the current Play Audio Stream of Selected YouTube Video In Place functionality talked about, last, at External Javascript YouTube Audio of Video Numericals Tutorial occurs “in place” there’s a good chance what the user may want to describe is either …

  • audio starting at a given timed position …
  • audio starting at a given timed position and ending at another timed position … ie. an audio snippet

. Well, today, we’re allowing for either possibility above to value add to our work.

So, YouTube URLs are already possible in the first of the modes above, such as the URL …


https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s

… and we augment that possibility by stopping the videoaudio starting at that same starting point but making use of hashtag thinking to add …


https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s#d=5

… used by this link or …


https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s#e=21m30s

… means …


altend='22223';
spos='0';
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].replace('#t','&t').indexOf('&t=') != -1) { // &t=2m37s
sposspare=('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].replace('#t','&t').split('&t=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0].split('>')[0];
if (sposspare.indexOf(':') != -1) {
for (idel=eval(-1 + sposspare.split(':').length); idel>=0; idel--) {
spos='' + eval(eval('' + spos) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel] )));
}
} else {
//alert(sposspare);
for (idel=3; idel>=0; idel--) {
if (sposspare.indexOf(delts[idel]) != -1) {
spos='' + eval(eval('' + spos) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'') )));
} else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {
spos='' + sposspare;
}
}
}
}
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].indexOf('#e=') != -1) { // &t=2m37s
sposspare=('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].split('#e=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0].split('>')[0];
if (sposspare.indexOf(':') != -1) {
altend='0.000';
for (idel=eval(-1 + sposspare.split(':').length); idel>=0; idel--) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel] )));
}
} else {
altend='0.000';
for (idel=3; idel>=0; idel--) {
if (sposspare.indexOf(delts[idel]) != -1) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'') )));
} else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {
altend='' + eval(eval('' + altend) + eval('' + sposspare));
}
}
}
}
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].indexOf('#d') != -1) { // &t=2m37s
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].split('#d')[1].indexOf('=') != -1) { // &t=2m37s
sposspare=('' + audioonlyas[iuhg].outerHTML).split('>')[0].split('youtube.com/watch?v=')[1].split('#d')[1].split('=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0].split('>')[0];
if (sposspare.indexOf(':') != -1) {
altend=spos.split('.')[0] + '.000';
for (idel=eval(-1 + sposspare.split(':').length); idel>=0; idel--) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel] )));
}
} else {
altend=spos.split('.')[0] + '.000';
for (idel=3; idel>=0; idel--) {
if (sposspare.indexOf(delts[idel]) != -1) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'') )));
} else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {
altend='' + eval(eval('' + altend) + eval('' + sposspare));
}
}
}
}
//alert('spos=' + spos + ' and altend=' + altend);
}

… by which you can define a 5 second snippet of YouTube cLsgc8S33dE audio stream (of video) starting at 21m 25s be played, perhaps looping, in our changed external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in useful ways via …


<script type='text/javascript' src='//www.rjmprogramming.com.au/ytaudioonly.js'></script>

… within the head section of a webpage massaging how a link such as


<a target="_blank" class="audioytplay" title="https://www.youtube.com/watch?v=cLsgc8S33dE" href="https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s#d=5" rel="noopener">this link</a>

… behaves.


Previous relevant External Javascript YouTube Audio of Video Numericals Tutorial is shown below.

External Javascript YouTube Audio of Video Numericals Tutorial

External Javascript YouTube Audio of Video Numericals Tutorial

Regarding yesterday’s External Javascript YouTube Audio of Video Fallback Tutorial 📻🎶 (&#128251;&#127926;) emoji (non-mobile showing) title attribute now goes something like …

Right click opens in new window the video and audio but normal click just plays audio in place. Numerical only entry in textarea seeks that audio timing position. Numerical space search text does YouTube search of search text to create the numerical number of audio only YouTube video links. Eg. 7 octopus anatomy

… and the purple functionality has been going two days now, because we found it convenient debugging the fallback logic, while the blue is today’s new functionality which opens the door to a user creating their own dynamically created audio stream part of YouTube video playing links presented close to yesterday’s textarea element information … perhaps three doors down from MacArthur Park?

This new hierarchical layer had us questioning, again, our “grandchild” logic penchant of referring to the layer containing these link references like …


top.document.getElementById('ajaxxx_myajaxxx').placeholder

… when, now, it could be the case, sandwiched between, can be this new hierarchical layer. And so, the awkward feeling …


parent.parent.document.getElementById('ajaxxx_myajaxxx').placeholder

… is the better and more precise way a “grandchild” can refer to a “grandparent” exclusively. Of course, in hindsight, on a project, these hierarchy possibilities would probably be mapped out for every eventuality, and the penchant for a programmer to willy-nilly use top.document everywhere, could be put under the microscope. But, please don’t declare war on all top.document reference thinking … for instance, to share data among many such layers of web application functionality, it can be effectively shared in …


top.document.title

… as just one example of effective top.document referencing. There is also the issue that parent.parent.document type references can make someone maintaining the code later suspect the codeline as a bug (and maybe a codeline comment could help).

The new Javascript function needed for this goes …


function ytsearch(intysidea) {
var afternums='', isanum=true, beforenums='', wasph='';
for (var ihj=0; ihj<intysidea.length; ihj++) {
if (isanum) {
if (intysidea.substring(ihj).substring(0,1) < '0' || intysidea.substring(ihj).substring(0,1) > '9') {
isanum=false;
if (intysidea.substring(ihj).substring(0,1) != ' ') {
afternums+=intysidea.substring(ihj).substring(0,1);
}
} else {
beforenums+=intysidea.substring(ihj).substring(0,1);
}
} else {
afternums+=intysidea.substring(ihj).substring(0,1);
}
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
if (afternums.trim() != '') {
if (parent.parent.document.getElementById('yts' + location.hash.replace(/\#/g,'').substring(3).split('_')[0])) {
wasph=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='';
parent.parent.document.getElementById('yts' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).src='//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++' + encodeURIComponent(afternums) + '&audioonlys=' + (beforenums.trim() == '' ? '5' : beforenums) + '&paridis=' + ouraidis + '&wasph=' + encodeURIComponent(wasph) + '#tonlyaudios';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).scrollIntoView();
} else if (top.document.getElementById('ldi' + location.hash.replace(/\#/g,'').substring(3).split('_')[0])) {
wasph=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='';
parent.parent.document.getElementById('ldi' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).innerHTML+='<iframe style=height:250px; id="yts' + + ouraidis + '" src="' + '//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++' + encodeURIComponent(afternums) + '&audioonlys=' + (beforenums.trim() == '' ? '5' : beforenums) + '&paridis=' + ouraidis + '&wasph=' + encodeURIComponent(wasph) + '#tonlyaudios"></iframe>';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).scrollIntoView();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder=wasph;
} else {
wasph=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).innerHTML+='<iframe style=height:250px; id="yts' + + ouraidis + '" src="' + '//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++' + encodeURIComponent(afternums) + '&audioonlys=' + (beforenums.trim() == '' ? '5' : beforenums) + '&paridis=' + ouraidis + '&wasph=' + encodeURIComponent(wasph) + '#tonlyaudios"></iframe>';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).scrollIntoView();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder=wasph;
}
}
}

… and connected to that non-onblur event approach …


function playingvideo() {
inplaying=true;
if (thatisit) { inplaying=false; return ''; }
psuf='';
if (startagain) {
if (1 == 6 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
psuf=' via button reclick ' + String.fromCodePoint(10004);
} else {
psuf=' ' + String.fromCodePoint(10004);
}
}
if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
if (one == 1 || onepause != 1) {
if (1 == 4) { player.pauseVideo(); }
} else {
player.playVideo();
}
if (!inplaying) { inplaying=true; setTimeout(playingvideo, 1000); }
} else {
if (parent.parent.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value= parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
}
switch (('' + parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
case 'L':
if (numericalssamecount <= 0) {
startagain=true;
if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(/^undefined/g,'').replace(/^null/g,'').trim() == '') {
setInterval(retry, 5000);
} else {
window.sessionStorage.removeItem('loop_' + vid);
}
window.sessionStorage.setItem('loop_' + vid, 'y');
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=false;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'S':
if (numericalssamecount <= 0) {
startagain=false;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=true;
player.stopVideo();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
try {
window.sessionStorage.removeItem('loop_' + vid);
} catch(hdgf) { }
} else {
numericalssamecount++;
}
break;

case 'P':
if (numericalssamecount <= 0) {
if (one == 1 || onepause != 1) {
player.pauseVideo();
} else {
player.playVideo();
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'M':
if (numericalssamecount <= 0) {
player.mute();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).removeAttribute('data-mute');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-mute', 'y');
mletter='M';
uletter='u';
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'U':
if (numericalssamecount <= 0) {
player.unMute();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).removeAttribute('data-mute');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-mute', '');
mletter='m';
uletter='U';
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':

if (2 == 2 || !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (numericals == '') {
numericalssamecount=1;
numericals=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
} else if (parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value == numericals) {
numericalssamecount++;
if (numericalssamecount >= 10) {
if (numericals.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').trim() == '') {
if (eval(numericals) >= 0 && eval(numericals) <= eval('' + duration)) {
player.seekTo(eval(numericals.trim()));
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
numericals='';
numericalssamecount=0;
//top.document.title='ZerO';
} else {
ytsearch(parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value);
numericals='';
numericalssamecount=0;
//top.document.title='ZeRO';
}

}
} else {
numericalssamecount=1;
numericals=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
}
}
break;

default:
if (numericalssamecount > 0) {
numericalssamecount++;
}
break;
}
if (parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.replace('/p','').indexOf('/') != -1) {
if (startagain && eval(2.2 + Math.round(player.getCurrentTime())) > Math.floor(eval('' + duration)) && eval('' + duration) > 0) {
thatisit=true;
lastokn=0;
//alert(4);
if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
//alert(44);
window.sessionStorage.removeItem('loop_' + vid.split(',')[0]);
}
window.sessionStorage.setItem('loop_' + vid.split(',')[0], 'y');
//alert(444);
secscnt=eval(0.001 + duration);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){
if (1 == 11) {
setTimeout(startVideo, playtime + delay);
thatisit=false; setTimeout(playingvideo, 1900);
} else {
var huhc=false;
// huhc=confirm('Okay to loop?');
if (huhc && 1 == 7) {
player.seekTo(0.01);
secscnt=0.01;
oursecscnt=0.01;
player.playVideo();
thatisit=false; setTimeout(playingvideo, 1900);
} else if (9 == 5) {
window.parent.focus();
parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
window.parent.scrollTo(0,0);
} else {
player.seekTo(1);
thatisit=false; setTimeout(playingvideo, 3000);
setTimeout(retry, 5000);
//alert(4444);
}
} }, 1500);
inplaying=false;
return '';
} else {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){ window.top.focus(); parent.parent.document.getElementById(location.hash.replace(/\#/g,'').substring(3).split('_')[0]).click(); }, 1500);
inplaying=false;
return '';
}
}
if (one == 1 || onepause != 1) {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=pause/play S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
} else {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=play/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
setTimeout(addablank, 3000);
}
setTimeout(playingvideo, 1000);
}
}
}
}
}

… in our changed external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in a useful way.


Previous relevant External Javascript YouTube Audio of Video Fallback Tutorial is shown below.

External Javascript YouTube Audio of Video Fallback Tutorial

External Javascript YouTube Audio of Video Fallback Tutorial

Further to yesterday’s External Javascript YouTube Audio of Video Looping Tutorial work regarding the Play Audio Stream of Selected YouTube Video In Place functionality we’re currently working on …

  • the timing of getting some mobile platform looping going is fortunate … and it means, with far less complication, we can organize …
  • the “red button” (mobile) or “link” (non-mobile) can serve as a fallback option when the user is in looping mode of YouTube Audio Stream Part of Video play and there is an interruption to that playing

… because there are a million and one reasons your YouTube video can get interrupted, such as …

  • window focus leaves the window of the playing YouTube video
  • seems like some mobile time limit is going on too
  • dormancy to sleep screen
  • focus regarding the textarea elements, we suspect

… etcetera etcetera etcetera … and there will could be good reasons the operating system behaves the way it does (as well as, as far as it goes here, we’ve been known to have “bad hair days”, even “very little hair days”).

But with a fallback option there, to re-click that originating “red button” (mobile) or “link” (non-mobile) is the chance to continue on with looping, so far not always back where you were, but who knows what the future brings?!

Also, organization wise, what has made all this easier, was to


function playingvideo() {
psuf='';
if (startagain) {
if (1 == 6 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
psuf=' via button reclick ' + String.fromCodePoint(10004);
} else {
psuf=' ' + String.fromCodePoint(10004);
}
}
if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
if (one == 1 || onepause != 1) {
if (1 == 4) { player.pauseVideo(); }
} else {
player.playVideo();
}
setTimeout(playingvideo, 1000);
} else {
if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
top.document.getElementById(location.hash.replace(/\#/g,'')).value= top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
}
switch (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
case 'L':
if (numericalssamecount <= 0) {
startagain=true;
if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(/^undefined/g,'').replace(/^null/g,'').trim() == '') {
setInterval(retry, 5000);
} else {
window.sessionStorage.removeItem('loop_' + vid, 'y');
}
window.sessionStorage.setItem('loop_' + vid, 'y');
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=false;
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'S':
if (numericalssamecount <= 0) {
startagain=false;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=true;
player.stopVideo();
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
try {
window.sessionStorage.removeItem('loop_' + vid);
} catch(hdgf) { }
} else {
numericalssamecount++;
}
break;

case 'P':
if (numericalssamecount <= 0) {
if (one == 1 || onepause != 1) {
player.pauseVideo();
} else {
player.playVideo();
}
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'M':
if (numericalssamecount <= 0) {
player.mute();
mletter='M';
uletter='u';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'U':
if (numericalssamecount <= 0) {
player.unMute();
mletter='m';
uletter='U';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
if (2 == 2 || !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (numericals == '') {
numericalssamecount=1;
numericals=top.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
} else if (top.document.getElementById(location.hash.replace(/\#/g,'')).value == numericals) {
numericalssamecount++;
if (numericalssamecount >= 10) {
if (numericals.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').trim() == '') {
if (eval(numericals) >= 0 && eval(numericals) <= eval('' + duration)) {
player.seekTo(eval(numericals.trim()));
}
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
numericals='';
numericalssamecount=0;
}
}
} else {
numericalssamecount=1;
numericals=top.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
}
}
break;

default:
if (numericalssamecount > 0) {
numericalssamecount++;
}
break;
}
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf('/') != -1) {
if (startagain && eval(2 + Math.round(player.getCurrentTime())) > eval('' + duration) && eval('' + duration) > 0) {
secscnt=eval(0.001 + duration);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){
if (1 == 11) {
setTimeout(startVideo, playtime + delay);
setTimeout(playingvideo, 1900);
} else {
var huhc=false;
// huhc=confirm('Okay to loop?');
if (huhc && 1 == 7) {
player.seekTo(0.01);
secscnt=0.01;
oursecscnt=0.01;
player.playVideo();
setTimeout(playingvideo, 1900);
} else if (9 == 5) {
window.parent.focus();
parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
window.parent.scrollTo(0,0);
} else {
player.seekTo(1);
setTimeout(playingvideo, 3000);
setTimeout(retry, 5000);
}
} }, 1500);
return '';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){ window.top.focus(); top.document.getElementById(location.hash.replace(/\#/g,'').substring(3).split('_')[0]).click(); }, 1500);
return '';
}
}
if (one == 1 || onepause != 1) {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=pause/play S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
} else {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=play/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
setTimeout(addablank, 3000);
}
setTimeout(playingvideo, 1000);
}
}
}
}
}

… start using the web browser’s session storage smarts as an overseeing data source we can better rely on. With this in place it was so much more robust to work out when to invoke our fallback thinking new Javascript function …


function retry() {
if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('0/0 ...') == 0) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' try click of link to continue looping';
}
window.parent.focus();
parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
window.parent.scrollTo(0,0);
}
} else if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('P=pause/play') != -1) {
if (prevretry == '') {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
} else if (prevretry == top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of link to continue looping';
}
}
} else {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
}
} else if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('P=play/pause') != -1) {
if (prevretry == '') {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
} else if (prevretry == top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of link to continue looping';
}
}
} else {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
}
}
}
}

… for our so far in the day unchanged external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in a useful way.


Previous relevant External Javascript YouTube Audio of Video Looping Tutorial is shown below.

External Javascript YouTube Audio of Video Looping Tutorial

External Javascript YouTube Audio of Video Looping Tutorial

Of yesterday’s External Javascript YouTube Audio of Video Emoji Tutorial

  1. pause
  2. play
  3. loop
  4. stop
  5. progress perhapsyes

… list of suggested “controls” for our Play Audio Stream of Selected YouTube Video In Place functionality, am sure of most interest was the loop one. Well, it certainly was for us, anyway.

We weren’t sure whether we could get around the actual tap needed on mobile platforms to just apply …


player.seekTo(0);
player.playVideo();

… as we near the end of the video. Alas, no, we need the red button (ie. the transparent YouTube video) to be retapped to get anywhere … so sad.

But non-mobile platform usages can loop effectively, and might help out users, who, like me, occasionally get obsessed with a YouTube music video (such as Morricone – Gabriel’s Oboe from The Mission, Maja Łagowska – oboe, conducted by Andrzej Kucybała) … hence the radio and musical note emojis 📻🎶 (&#128251;&#127926;) we started using yesterday.

Another plan we had to ask for menu operations via a window.prompt a lot of users will be relieved to hear, didn’t work either, and so we had to redesign, finally settling on HTML textarea elements whereby …

  • information and instructions are placed in its placeholder attribute … and …
  • like a hotkey (but not needing onkeydown or onkeyup or onkeypress event logic intervention) user audio control instructions are unique regarding first character, so way down at the grandchild level we have …

    function playingvideo() {
    psuf='';
    if (startagain) {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    psuf=' via button reclick ' + String.fromCodePoint(10004);
    } else {
    psuf=' ' + String.fromCodePoint(10004);
    }
    }
    if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
    if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
    if (one == 1 || onepause != 1) {
    if (1 == 4) { player.pauseVideo(); }
    } else {
    player.playVideo();
    }
    setTimeout(playingvideo, 1000);
    } else {
    if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
    if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
    top.document.getElementById(location.hash.replace(/\#/g,'')).value= top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
    top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
    }
    switch (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
    case 'L':
    startagain=true;
    psuf='';
    if (startagain) {
    psuf=' ' + String.fromCodePoint(10004);
    }
    dostumps=false;
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'S':
    startagain=false;
    psuf='';
    if (startagain) {
    psuf=' ' + String.fromCodePoint(10004);
    }
    dostumps=true;
    player.stopVideo();
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'P':
    if (one == 1 || onepause != 1) {
    player.pauseVideo();
    } else {
    player.playVideo();
    }
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'M':
    player.mute();
    mletter='M';
    uletter='u';
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'U':
    player.unMute();
    mletter='m';
    uletter='U';
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;


    default:
    break;
    }

    if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf('/') != -1) {
    if (startagain && eval(2 + Math.round(player.getCurrentTime())) > eval('' + duration) && eval('' + duration) > 0) {
    secscnt=eval(0.001 + duration);
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
    setTimeout(function(){
    if (1 == 11) {
    setTimeout(startVideo, playtime + delay);
    setTimeout(playingvideo, 1900);
    } else {
    var huhc=false;
    // huhc=confirm('Okay to loop?');
    if (huhc && 1 == 7) {
    player.seekTo(0.01);
    secscnt=0.01;
    oursecscnt=0.01;
    player.playVideo();
    setTimeout(playingvideo, 1900);
    } else {
    window.parent.focus();
    parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
    }
    } }, 1500);
    return '';
    } else {
    top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
    setTimeout(function(){ window.top.focus(); top.document.getElementById(location.hash.replace(/\#/g,'').substring(3).split('_')[0]).click(); }, 1500);
    return '';
    }
    }
    if (one == 1 || onepause != 1) {
    if (eval('' + duration) == 0) { duration=player.getDuration(); }
    top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=pause/play S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
    } else {
    if (eval('' + duration) == 0) { duration=player.getDuration(); }
    top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=play/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
    }
    setTimeout(playingvideo, 1000);
    }
    }
    }
    }
    }

    … does a good job acting like those keyboard events

… for today’s fourth draft external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in a useful way.

Stop Press

UnLess attended mobile looping can work with the kludge (we suspect our bug or code design flaw) …


player.seekTo(1);
player.playVideo();

… and we hope nobody’s playing “Name That Sound” with the replays.


Previous relevant External Javascript YouTube Audio of Video Emoji Tutorial is shown below.

External Javascript YouTube Audio of Video Emoji Tutorial

External Javascript YouTube Audio of Video Emoji Tutorial

Onto yesterday’s External Javascript YouTube Audio of Video Mobile Helper Tutorial, today, we’ve …

  • further shored up the mobile platform playing of the audio stream of a YouTube video, as requested …
  • added display (usefulness only, so far) emojis 📻🎶 (&#128251;&#127926;) into the “underlay” button displays, as today’s work, leading up to, tomorrow …
  • the emoji tap/clicks will lead the user to a menu of further options (as often displayed with video controls) …
    1. pause
    2. play
    3. loop
    4. stop
    5. progress … perhaps

… where today’s third draft external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer in our quest to play YouTube audio “in place” in a useful way.


Previous relevant External Javascript YouTube Audio of Video Mobile Helper Tutorial is shown below.

External Javascript YouTube Audio of Video Mobile Helper Tutorial

External Javascript YouTube Audio of Video Mobile Helper Tutorial

After the start yesterday’s External Javascript YouTube Audio of Video Helper Tutorial gave us with our External Javascript YouTube Audio of Video Helper we’ve progressed making the mobile platform interfacing less flaky, but more testing is needed.

Introducing a general delay into our changed karaoke_youtube_api.htm inhouse YouTube video interfacer part of the solution turned things around here.

To delay, say by 13.5 seconds, even great swathes of code …


setTimeout(function(){
// Start of "great swathes of code"
// ...
// End of "great swathes of code"
}, 13500);

… is one of those ideas we’re still pinching ourselves about how effective it can be (let alone passing in arguments at the function() bit). We’re forever filling “great swathes of code” with global Javascript variables but today’s “great swathe” works okay with non global Javascript variables in there, and we’re thinking we have to be more trusting of the brilliant setTimeout (and setInterval) Javascript techniques of introducing a delay into the flow of your Javascript. Of course, we could also delay the work until the document.body onload event, but we wanted to get in early with what the code is trying to achieve here … we’ll see.

Perhaps a good adage here is …

Trust the process.
Trust the wonders of (in the case of iOS, Safari) Web Browser Web Inspector debugging to test ideas you start out being unsure of.

… with our ongoing second draft external Javascript ytaudioonly.js external Javascript ongoing current project … so Wake Me Up Before You Go-Go.


Previous relevant External Javascript YouTube Audio of Video Helper Tutorial is shown below.

External Javascript YouTube Audio of Video Helper Tutorial

External Javascript YouTube Audio of Video Helper Tutorial

It is not that surprising that the next step onto the progress of yesterday’s Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial would involve us developing…

  • an external Javascript …
  • helper for “in place” …
  • audio play …
  • of that stream of a YouTube video … via …
  • user linked script call …

    <script type='text/javascript' src='//www.rjmprogramming.com.au/ytaudioonly.js'></script>

    … helping out …
  • HTML “a” link with class=audioytplay and a mention of https://www.youtube.com/watch?v=[YouTubeID] … eg.

    <p>Oops, <a class="audioytplay" target="_blank" title="?" href='https://www.youtube.com/watch?v=gBzJGckMYO4' rel="noopener"><strike>that's all</strike>sorry, folks</a></p>
  • to be, via onclick event, playing “in place” the audio part of that YouTube referenced [YouTubeID] video

Developing this is definitely more than a one day job (especially getting mobile platforms working), but today’s “first draft” ytaudioonly.js external Javascript, along with the help of …

… is our start to this project. Try it yourself below …

Oops, that's allsorry, folks


Previous relevant Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial is shown below.

Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial

Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial

As far as CSS styling goes with our web application work, personally speaking, it is one of …

Give it a bit of oompha!

… moments in coding we think we learn more from, than reading about CSS. That, and, usually StackOverflow, thanks, where examples of achieving some styling ambition teach us a lot too.

Yesterday, with Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial, we decided to “put a bit of oompha” into that “two bell emoji” ( ie. 🔔🔔 ) link “double buzzer” sound “production number”, and wanted to break down what we ended up with, for readers …

Our first try … okay for non-mobile … not as good for mobile …

<a id="aja" target="myja" title="" onmouseover="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { this.title=' '; this.target='myja'; } " onclick="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && this.title == '') { this.title=' '; this.target='myja'; document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100);" href="//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&jusJUNKtaudio=&youtube_duration=2.000&email=&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=" rel="noopener">&#128276;&#128276;</a>

… begets …

🔔🔔

Our second try … okay for non-mobile … better for mobile …

<a id="aja" target="myja" title="" onmouseover="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { this.title=' '; this.target='myja'; } " onclick="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) { this.title == '') { this.title=' '; this.target='myja'; document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100); }" href="//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&justJUNKaudio=&youtube_duration=2.000&email=&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=" rel="noopener">&#128276;&#128276;</a>
<iframe onload="if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf('About_Us.') != -1) { document.getElementById('aja').target='myja';
this.src=document.getElementById('aja').href + '&rand=' + Math.floor(Math.random() * 1989786); } } " id="myja" name="myja" src="/About_Us.html" style="display:none;"></iframe>

… begets …

🔔🔔

… working better because of tweaked karaoke_youtube_api.htm
inhouse YouTube video interfacer‘s new


if (window.top) {
if (document.URL.indexOf('youtubeid=7XMW6Z_Oq38&') != -1 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
if (document.getElementById('audioejkaraoke')) {
document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;
document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('audioejkaraoke').style.position='absolute';
document.getElementById('audioejkaraoke').style.left='0px';
document.getElementById('audioejkaraoke').style.top='0px';
document.getElementById('audioejkaraoke').style.backgroundColor='transparent';
document.getElementById('audioejkaraoke').style.zIndex='99';
document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('repeat').style.position='absolute';
document.getElementById('repeat').style.left='0px';
document.getElementById('repeat').style.top='-10px';
document.getElementById('repeat').style.backgroundColor='transparent';
document.getElementById('repeat').style.zIndex='199';
document.getElementById('myiframe').style.position='absolute';
document.getElementById('myiframe').style.left='-100px';
document.getElementById('myiframe').style.top='-100px';
document.getElementById('myiframe').style.zIndex='299';
//document.getElementById('myiframe').style.backgroundColor='transparent';
document.getElementById('myiframe').style.opacity='0.0';
if (aaconto) {
aaconto.getElementById('player').style.opacity='0.0';
} else {
aaset=true;
}
document.body.style.backgroundColor='transparent';
} else {
setInterval(function(){
if (document.getElementById('audioejkaraoke')) {
if (('' + document.getElementById('audioejkaraoke').title + ' ').substring(0,1) != ' ') {
document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;
document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('audioejkaraoke').style.position='absolute';
document.getElementById('audioejkaraoke').style.left='0px';
document.getElementById('audioejkaraoke').style.top='0px';
document.getElementById('audioejkaraoke').style.backgroundColor='transparent';
document.getElementById('audioejkaraoke').style.zIndex='99';
document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('repeat').style.position='absolute';
document.getElementById('repeat').style.left='0px';
document.getElementById('repeat').style.top='-10px';
document.getElementById('repeat').style.backgroundColor='transparent';
document.getElementById('repeat').style.zIndex='199';
document.getElementById('myiframe').style.position='absolute';
document.getElementById('myiframe').style.left='-100px';
document.getElementById('myiframe').style.top='-100px';
document.getElementById('myiframe').style.zIndex='299';
//document.getElementById('myiframe').style.backgroundColor='transparent';
document.getElementById('myiframe').style.opacity='0.0';
if (aaconto) {
aaconto.getElementById('player').style.opacity='0.0';
} else {
aaset=true;
}
document.body.style.backgroundColor='transparent';
}
}
}, 1000);
}
if (top.document.getElementById('aja')) {
var boxis=top.document.getElementById('aja').getBoundingClientRect();
//alert('boxis.left=' + boxis.left + ' ' + top.document.getElementById('aja').innerHTML);
if (top.document.getElementById('aja').innerHTML.indexOf('<iframe') == -1) {
//alert('Boxis.left=' + boxis.left);
top.document.getElementById('myja').style.width='' + eval(2 * boxis.width) + 'px';
top.document.getElementById('myja').style.height='' + eval(1 * boxis.height) + 'px';
setTimeout(function(){
top.document.getElementById('aja').innerHTML=top.document.getElementById('myja').outerHTML.replace('/About_Us.html',top.document.getElementById('aja').href).replace(' onload=',' data-onload=').replace(' id=',' data-id=').replace(' name=',' name-id=').replace('none;','inline-block;');
}, 2000);
} else if (3 == 4) {
top.document.getElementById('myja').style.position='absolute';
top.document.getElementById('myja').style.left='' + boxis.left + 'px';
top.document.getElementById('myja').style.top='' + boxis.top + 'px';
top.document.getElementById('myja').style.width='' + boxis.width + 'px';
top.document.getElementById('myja').style.height='' + boxis.height + 'px';
top.document.getElementById('myja').style.display='block';
top.document.getElementById('myja').style.zIndex='99';
//top.document.getElementById('aja').innerHTML='  ';
}
}
}, 1000);
}

if (top.document.URL.indexOf('/esp_ornot_esp.') != -1 || parent.document.URL.indexOf('/esp_ornot_esp.') != -1) {
if (top.document.title.indexOf(' justaudio ') != -1) {
asuffis='&justaudio=&';
bsuffis=' name=justaudio ';
}
}
}

Let’s start with …

Why can’t we just link to a YouTube video URL webpage off any old platform or web browser incarnation?

Well, you could! But we wanted a less obvious approach (and we were not sure about mobile platforms, trying this), only relevant for scenarios where you are only interested in the audio stream of a YouTube video (it should be noted), that is hiding from the reader “the mechanics” of what we are doing (to get a cheap giggle … there, are you happy now?!).

What does Javascript if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { } if test achieve?

If this test returns true we have detected a non-mobile platform/web browser scenario.

What does the HTML target attribute of an a HTML element do?

That target attribute determines the “navigational place” of the href attribute URL of that a link where …

  1. _blank opens in a new window
  2. _self clobbers current window
  3. _top adds a new (tabbed) window (perhaps from the viewpoint of a child HTML iframe window)
  4. other named target point to the name attribute of an HTML iframe element, presumably, in the current window

What does HTML code snippet onload=”if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf(‘About_Us.’) != -1) { document.getElementById(‘aja’).target=’myja’;
this.src=document.getElementById(‘aja’).href + ‘&rand=’ + Math.floor(Math.random() * 1989786); } } “
do as the onload event logic of the “second version” iframe incarnation?

We decided that we needed to get assistance from our inhouse YouTube video interfacing player, when it came to mobile platforms and web browsers, to get to a point where …

  • unbeknown to such mobile users
  • when they tap the 🔔🔔 “buzzer” button emojis …
  • it is arranged from the child iframe inhouse YouTube video interfacing player web application using “overlay” concepts …
    1. position: absolute
    2. opacity
    3. z-index
    4. top and left positioning
    5. width and height dimensioning
    6. 🔔🔔 into some button content

    … that what they are tapping is a YouTube video element

  • looking like 🔔🔔 at levels of a smaller z-index seen through opacity:0.0 higher z-index levels, the topmost transparent but high z-index one being the YouTube video element which is that webpage area’s “action item” … if you will

Huh?!

On mobile platforms, media cannot play, these days, unless it is as a direct result of a user tap (excluding programmatically produced taps). See all this in action, with thanks to FreeConvert, below …

And so, yes … was it worth it? Perhaps not to do with the job at hand, but for future reference, we’re happy to give this added oompha to this effort.

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

External Javascript YouTube Audio of Video Switch Tutorial

External Javascript YouTube Audio of Video Switch Tutorial

External Javascript YouTube Audio of Video Switch Tutorial

If we say …

  1. switch … and then …
  2. case

… related to Javascript coding, what’s the reaction around here? Well, we’d say …

One of the most relatable and easily revisited modus operandi, within Javascript, to pick up where you left off or add more

Doesn’t exactly “roll off the tongue”, but we’ll leave that for you should you read this blog posting, and agree?!

In a similar line of thinking as External Javascript YouTube Audio of Video Snippet Tutorial, what did we want to achieve with today’s modification to YouTube Audio of Video Stream Play Only web application, is, once the user is into the YouTube play and you get to that textarea menu that works like a hotkey (and we can thank that for what must have been clear and relatable thinking that day) is to add a Y hotkey possibility to open a popup window back to a YouTube based play of the video concerned.

We’ve got to say the Javascript function playingvideo‘s switch and case based logic stuck out because the coding involves words that relate to functionality far better than an if code structure. And so all we needed to do for our change, between the Javascript’s switch and first case was add …


case 'Y':
window.open('//www.youtube.com/watch?v=' + vid, '_blank', 'top=100,left=100,width=600,height=600');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;


… and only involving changes to the modified stop_start_youtube.html YouTube API caller to make happen.


Previous relevant External Javascript YouTube Audio of Video Snippet Tutorial is shown below.

External Javascript YouTube Audio of Video Snippet Tutorial

External Javascript YouTube Audio of Video Snippet Tutorial

Given the current Play Audio Stream of Selected YouTube Video In Place functionality talked about, last, at External Javascript YouTube Audio of Video Numericals Tutorial occurs “in place” there’s a good chance what the user may want to describe is either …

  • audio starting at a given timed position …
  • audio starting at a given timed position and ending at another timed position … ie. an audio snippet

. Well, today, we’re allowing for either possibility above to value add to our work.

So, YouTube URLs are already possible in the first of the modes above, such as the URL …


https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s

… and we augment that possibility by stopping the videoaudio starting at that same starting point but making use of hashtag thinking to add …


https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s#d=5

… used by this link or …


https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s#e=21m30s

… means …


altend='22223';
spos='0';
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].replace('#t','&t').indexOf('&t=') != -1) { // &t=2m37s
sposspare=('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].replace('#t','&t').split('&t=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0].split('>')[0];
if (sposspare.indexOf(':') != -1) {
for (idel=eval(-1 + sposspare.split(':').length); idel>=0; idel--) {
spos='' + eval(eval('' + spos) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel] )));
}
} else {
//alert(sposspare);
for (idel=3; idel>=0; idel--) {
if (sposspare.indexOf(delts[idel]) != -1) {
spos='' + eval(eval('' + spos) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'') )));
} else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {
spos='' + sposspare;
}
}
}
}
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].indexOf('#e=') != -1) { // &t=2m37s
sposspare=('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].split('#e=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0].split('>')[0];
if (sposspare.indexOf(':') != -1) {
altend='0.000';
for (idel=eval(-1 + sposspare.split(':').length); idel>=0; idel--) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel] )));
}
} else {
altend='0.000';
for (idel=3; idel>=0; idel--) {
if (sposspare.indexOf(delts[idel]) != -1) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'') )));
} else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {
altend='' + eval(eval('' + altend) + eval('' + sposspare));
}
}
}
}
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].indexOf('#d') != -1) { // &t=2m37s
if (('' + audioonlyas[iuhg].href).split('>')[0].split('youtube.com/watch?v=')[1].split('#d')[1].indexOf('=') != -1) { // &t=2m37s
sposspare=('' + audioonlyas[iuhg].outerHTML).split('>')[0].split('youtube.com/watch?v=')[1].split('#d')[1].split('=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0].split('>')[0];
if (sposspare.indexOf(':') != -1) {
altend=spos.split('.')[0] + '.000';
for (idel=eval(-1 + sposspare.split(':').length); idel>=0; idel--) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel] )));
}
} else {
altend=spos.split('.')[0] + '.000';
for (idel=3; idel>=0; idel--) {
if (sposspare.indexOf(delts[idel]) != -1) {
altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'') )));
} else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {
altend='' + eval(eval('' + altend) + eval('' + sposspare));
}
}
}
}
//alert('spos=' + spos + ' and altend=' + altend);
}

… by which you can define a 5 second snippet of YouTube cLsgc8S33dE audio stream (of video) starting at 21m 25s be played, perhaps looping, in our changed external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in useful ways via …


<script type='text/javascript' src='//www.rjmprogramming.com.au/ytaudioonly.js'></script>

… within the head section of a webpage massaging how a link such as


<a target="_blank" class="audioytplay" title="https://www.youtube.com/watch?v=cLsgc8S33dE" href="https://www.youtube.com/watch?v=cLsgc8S33dE&t=21m25s#d=5" rel="noopener">this link</a>

… behaves.


Previous relevant External Javascript YouTube Audio of Video Numericals Tutorial is shown below.

External Javascript YouTube Audio of Video Numericals Tutorial

External Javascript YouTube Audio of Video Numericals Tutorial

Regarding yesterday’s External Javascript YouTube Audio of Video Fallback Tutorial 📻🎶 (&#128251;&#127926;) emoji (non-mobile showing) title attribute now goes something like …

Right click opens in new window the video and audio but normal click just plays audio in place. Numerical only entry in textarea seeks that audio timing position. Numerical space search text does YouTube search of search text to create the numerical number of audio only YouTube video links. Eg. 7 octopus anatomy

… and the purple functionality has been going two days now, because we found it convenient debugging the fallback logic, while the blue is today’s new functionality which opens the door to a user creating their own dynamically created audio stream part of YouTube video playing links presented close to yesterday’s textarea element information … perhaps three doors down from MacArthur Park?

This new hierarchical layer had us questioning, again, our “grandchild” logic penchant of referring to the layer containing these link references like …


top.document.getElementById('ajaxxx_myajaxxx').placeholder

… when, now, it could be the case, sandwiched between, can be this new hierarchical layer. And so, the awkward feeling …


parent.parent.document.getElementById('ajaxxx_myajaxxx').placeholder

… is the better and more precise way a “grandchild” can refer to a “grandparent” exclusively. Of course, in hindsight, on a project, these hierarchy possibilities would probably be mapped out for every eventuality, and the penchant for a programmer to willy-nilly use top.document everywhere, could be put under the microscope. But, please don’t declare war on all top.document reference thinking … for instance, to share data among many such layers of web application functionality, it can be effectively shared in …


top.document.title

… as just one example of effective top.document referencing. There is also the issue that parent.parent.document type references can make someone maintaining the code later suspect the codeline as a bug (and maybe a codeline comment could help).

The new Javascript function needed for this goes …


function ytsearch(intysidea) {
var afternums='', isanum=true, beforenums='', wasph='';
for (var ihj=0; ihj<intysidea.length; ihj++) {
if (isanum) {
if (intysidea.substring(ihj).substring(0,1) < '0' || intysidea.substring(ihj).substring(0,1) > '9') {
isanum=false;
if (intysidea.substring(ihj).substring(0,1) != ' ') {
afternums+=intysidea.substring(ihj).substring(0,1);
}
} else {
beforenums+=intysidea.substring(ihj).substring(0,1);
}
} else {
afternums+=intysidea.substring(ihj).substring(0,1);
}
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
if (afternums.trim() != '') {
if (parent.parent.document.getElementById('yts' + location.hash.replace(/\#/g,'').substring(3).split('_')[0])) {
wasph=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='';
parent.parent.document.getElementById('yts' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).src='//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++' + encodeURIComponent(afternums) + '&audioonlys=' + (beforenums.trim() == '' ? '5' : beforenums) + '&paridis=' + ouraidis + '&wasph=' + encodeURIComponent(wasph) + '#tonlyaudios';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).scrollIntoView();
} else if (top.document.getElementById('ldi' + location.hash.replace(/\#/g,'').substring(3).split('_')[0])) {
wasph=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='';
parent.parent.document.getElementById('ldi' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).innerHTML+='<iframe style=height:250px; id="yts' + + ouraidis + '" src="' + '//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++' + encodeURIComponent(afternums) + '&audioonlys=' + (beforenums.trim() == '' ? '5' : beforenums) + '&paridis=' + ouraidis + '&wasph=' + encodeURIComponent(wasph) + '#tonlyaudios"></iframe>';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).scrollIntoView();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder=wasph;
} else {
wasph=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).innerHTML+='<iframe style=height:250px; id="yts' + + ouraidis + '" src="' + '//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++' + encodeURIComponent(afternums) + '&audioonlys=' + (beforenums.trim() == '' ? '5' : beforenums) + '&paridis=' + ouraidis + '&wasph=' + encodeURIComponent(wasph) + '#tonlyaudios"></iframe>';
parent.parent.document.getElementById('' + location.hash.replace(/\#/g,'').substring(3).split('_')[0]).scrollIntoView();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder=wasph;
}
}
}

… and connected to that non-onblur event approach …


function playingvideo() {
inplaying=true;
if (thatisit) { inplaying=false; return ''; }
psuf='';
if (startagain) {
if (1 == 6 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
psuf=' via button reclick ' + String.fromCodePoint(10004);
} else {
psuf=' ' + String.fromCodePoint(10004);
}
}
if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
if (one == 1 || onepause != 1) {
if (1 == 4) { player.pauseVideo(); }
} else {
player.playVideo();
}
if (!inplaying) { inplaying=true; setTimeout(playingvideo, 1000); }
} else {
if (parent.parent.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value= parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
}
switch (('' + parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
case 'L':
if (numericalssamecount <= 0) {
startagain=true;
if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(/^undefined/g,'').replace(/^null/g,'').trim() == '') {
setInterval(retry, 5000);
} else {
window.sessionStorage.removeItem('loop_' + vid);
}
window.sessionStorage.setItem('loop_' + vid, 'y');
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=false;
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'S':
if (numericalssamecount <= 0) {
startagain=false;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=true;
player.stopVideo();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
try {
window.sessionStorage.removeItem('loop_' + vid);
} catch(hdgf) { }
} else {
numericalssamecount++;
}
break;

case 'P':
if (numericalssamecount <= 0) {
if (one == 1 || onepause != 1) {
player.pauseVideo();
} else {
player.playVideo();
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'M':
if (numericalssamecount <= 0) {
player.mute();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).removeAttribute('data-mute');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-mute', 'y');
mletter='M';
uletter='u';
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'U':
if (numericalssamecount <= 0) {
player.unMute();
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).removeAttribute('data-mute');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-mute', '');
mletter='m';
uletter='U';
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':

if (2 == 2 || !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (numericals == '') {
numericalssamecount=1;
numericals=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
} else if (parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value == numericals) {
numericalssamecount++;
if (numericalssamecount >= 10) {
if (numericals.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').trim() == '') {
if (eval(numericals) >= 0 && eval(numericals) <= eval('' + duration)) {
player.seekTo(eval(numericals.trim()));
}
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
numericals='';
numericalssamecount=0;
//top.document.title='ZerO';
} else {
ytsearch(parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value);
numericals='';
numericalssamecount=0;
//top.document.title='ZeRO';
}

}
} else {
numericalssamecount=1;
numericals=parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
}
}
break;

default:
if (numericalssamecount > 0) {
numericalssamecount++;
}
break;
}
if (parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.replace('/p','').indexOf('/') != -1) {
if (startagain && eval(2.2 + Math.round(player.getCurrentTime())) > Math.floor(eval('' + duration)) && eval('' + duration) > 0) {
thatisit=true;
lastokn=0;
//alert(4);
if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
//alert(44);
window.sessionStorage.removeItem('loop_' + vid.split(',')[0]);
}
window.sessionStorage.setItem('loop_' + vid.split(',')[0], 'y');
//alert(444);
secscnt=eval(0.001 + duration);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){
if (1 == 11) {
setTimeout(startVideo, playtime + delay);
thatisit=false; setTimeout(playingvideo, 1900);
} else {
var huhc=false;
// huhc=confirm('Okay to loop?');
if (huhc && 1 == 7) {
player.seekTo(0.01);
secscnt=0.01;
oursecscnt=0.01;
player.playVideo();
thatisit=false; setTimeout(playingvideo, 1900);
} else if (9 == 5) {
window.parent.focus();
parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
window.parent.scrollTo(0,0);
} else {
player.seekTo(1);
thatisit=false; setTimeout(playingvideo, 3000);
setTimeout(retry, 5000);
//alert(4444);
}
} }, 1500);
inplaying=false;
return '';
} else {
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){ window.top.focus(); parent.parent.document.getElementById(location.hash.replace(/\#/g,'').substring(3).split('_')[0]).click(); }, 1500);
inplaying=false;
return '';
}
}
if (one == 1 || onepause != 1) {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=pause/play S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
} else {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=play/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
setTimeout(addablank, 3000);
}
setTimeout(playingvideo, 1000);
}
}
}
}
}

… in our changed external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in a useful way.


Previous relevant External Javascript YouTube Audio of Video Fallback Tutorial is shown below.

External Javascript YouTube Audio of Video Fallback Tutorial

External Javascript YouTube Audio of Video Fallback Tutorial

Further to yesterday’s External Javascript YouTube Audio of Video Looping Tutorial work regarding the Play Audio Stream of Selected YouTube Video In Place functionality we’re currently working on …

  • the timing of getting some mobile platform looping going is fortunate … and it means, with far less complication, we can organize …
  • the “red button” (mobile) or “link” (non-mobile) can serve as a fallback option when the user is in looping mode of YouTube Audio Stream Part of Video play and there is an interruption to that playing

… because there are a million and one reasons your YouTube video can get interrupted, such as …

  • window focus leaves the window of the playing YouTube video
  • seems like some mobile time limit is going on too
  • dormancy to sleep screen
  • focus regarding the textarea elements, we suspect

… etcetera etcetera etcetera … and there will could be good reasons the operating system behaves the way it does (as well as, as far as it goes here, we’ve been known to have “bad hair days”, even “very little hair days”).

But with a fallback option there, to re-click that originating “red button” (mobile) or “link” (non-mobile) is the chance to continue on with looping, so far not always back where you were, but who knows what the future brings?!

Also, organization wise, what has made all this easier, was to


function playingvideo() {
psuf='';
if (startagain) {
if (1 == 6 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
psuf=' via button reclick ' + String.fromCodePoint(10004);
} else {
psuf=' ' + String.fromCodePoint(10004);
}
}
if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
if (one == 1 || onepause != 1) {
if (1 == 4) { player.pauseVideo(); }
} else {
player.playVideo();
}
setTimeout(playingvideo, 1000);
} else {
if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
top.document.getElementById(location.hash.replace(/\#/g,'')).value= top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
}
switch (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
case 'L':
if (numericalssamecount <= 0) {
startagain=true;
if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(/^undefined/g,'').replace(/^null/g,'').trim() == '') {
setInterval(retry, 5000);
} else {
window.sessionStorage.removeItem('loop_' + vid, 'y');
}
window.sessionStorage.setItem('loop_' + vid, 'y');
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=false;
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'S':
if (numericalssamecount <= 0) {
startagain=false;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=true;
player.stopVideo();
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
try {
window.sessionStorage.removeItem('loop_' + vid);
} catch(hdgf) { }
} else {
numericalssamecount++;
}
break;

case 'P':
if (numericalssamecount <= 0) {
if (one == 1 || onepause != 1) {
player.pauseVideo();
} else {
player.playVideo();
}
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'M':
if (numericalssamecount <= 0) {
player.mute();
mletter='M';
uletter='u';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case 'U':
if (numericalssamecount <= 0) {
player.unMute();
mletter='m';
uletter='U';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
} else {
numericalssamecount++;
}
break;

case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
if (2 == 2 || !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (numericals == '') {
numericalssamecount=1;
numericals=top.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
} else if (top.document.getElementById(location.hash.replace(/\#/g,'')).value == numericals) {
numericalssamecount++;
if (numericalssamecount >= 10) {
if (numericals.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').trim() == '') {
if (eval(numericals) >= 0 && eval(numericals) <= eval('' + duration)) {
player.seekTo(eval(numericals.trim()));
}
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
numericals='';
numericalssamecount=0;
}
}
} else {
numericalssamecount=1;
numericals=top.document.getElementById(location.hash.replace(/\#/g,'')).value;
setTimeout(sanitycheck, 12000);
}
}
break;

default:
if (numericalssamecount > 0) {
numericalssamecount++;
}
break;
}
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf('/') != -1) {
if (startagain && eval(2 + Math.round(player.getCurrentTime())) > eval('' + duration) && eval('' + duration) > 0) {
secscnt=eval(0.001 + duration);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){
if (1 == 11) {
setTimeout(startVideo, playtime + delay);
setTimeout(playingvideo, 1900);
} else {
var huhc=false;
// huhc=confirm('Okay to loop?');
if (huhc && 1 == 7) {
player.seekTo(0.01);
secscnt=0.01;
oursecscnt=0.01;
player.playVideo();
setTimeout(playingvideo, 1900);
} else if (9 == 5) {
window.parent.focus();
parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
window.parent.scrollTo(0,0);
} else {
player.seekTo(1);
setTimeout(playingvideo, 3000);
setTimeout(retry, 5000);
}
} }, 1500);
return '';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
setTimeout(function(){ window.top.focus(); top.document.getElementById(location.hash.replace(/\#/g,'').substring(3).split('_')[0]).click(); }, 1500);
return '';
}
}
if (one == 1 || onepause != 1) {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=pause/play S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
} else {
if (eval('' + duration) == 0) { duration=player.getDuration(); }
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=play/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
setTimeout(addablank, 3000);
}
setTimeout(playingvideo, 1000);
}
}
}
}
}

… start using the web browser’s session storage smarts as an overseeing data source we can better rely on. With this in place it was so much more robust to work out when to invoke our fallback thinking new Javascript function …


function retry() {
if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('0/0 ...') == 0) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' try click of link to continue looping';
}
window.parent.focus();
parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
window.parent.scrollTo(0,0);
}
} else if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('P=pause/play') != -1) {
if (prevretry == '') {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
} else if (prevretry == top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of link to continue looping';
}
}
} else {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
}
} else if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('P=play/pause') != -1) {
if (prevretry == '') {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
} else if (prevretry == top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of link to continue looping';
}
}
} else {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
}
}
}
}

… for our so far in the day unchanged external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in a useful way.


Previous relevant External Javascript YouTube Audio of Video Looping Tutorial is shown below.

External Javascript YouTube Audio of Video Looping Tutorial

External Javascript YouTube Audio of Video Looping Tutorial

Of yesterday’s External Javascript YouTube Audio of Video Emoji Tutorial

  1. pause
  2. play
  3. loop
  4. stop
  5. progress perhapsyes

… list of suggested “controls” for our Play Audio Stream of Selected YouTube Video In Place functionality, am sure of most interest was the loop one. Well, it certainly was for us, anyway.

We weren’t sure whether we could get around the actual tap needed on mobile platforms to just apply …


player.seekTo(0);
player.playVideo();

… as we near the end of the video. Alas, no, we need the red button (ie. the transparent YouTube video) to be retapped to get anywhere … so sad.

But non-mobile platform usages can loop effectively, and might help out users, who, like me, occasionally get obsessed with a YouTube music video (such as Morricone – Gabriel’s Oboe from The Mission, Maja Łagowska – oboe, conducted by Andrzej Kucybała) … hence the radio and musical note emojis 📻🎶 (&#128251;&#127926;) we started using yesterday.

Another plan we had to ask for menu operations via a window.prompt a lot of users will be relieved to hear, didn’t work either, and so we had to redesign, finally settling on HTML textarea elements whereby …

  • information and instructions are placed in its placeholder attribute … and …
  • like a hotkey (but not needing onkeydown or onkeyup or onkeypress event logic intervention) user audio control instructions are unique regarding first character, so way down at the grandchild level we have …

    function playingvideo() {
    psuf='';
    if (startagain) {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    psuf=' via button reclick ' + String.fromCodePoint(10004);
    } else {
    psuf=' ' + String.fromCodePoint(10004);
    }
    }
    if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
    if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
    if (one == 1 || onepause != 1) {
    if (1 == 4) { player.pauseVideo(); }
    } else {
    player.playVideo();
    }
    setTimeout(playingvideo, 1000);
    } else {
    if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
    if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
    top.document.getElementById(location.hash.replace(/\#/g,'')).value= top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
    top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
    }
    switch (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
    case 'L':
    startagain=true;
    psuf='';
    if (startagain) {
    psuf=' ' + String.fromCodePoint(10004);
    }
    dostumps=false;
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'S':
    startagain=false;
    psuf='';
    if (startagain) {
    psuf=' ' + String.fromCodePoint(10004);
    }
    dostumps=true;
    player.stopVideo();
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'P':
    if (one == 1 || onepause != 1) {
    player.pauseVideo();
    } else {
    player.playVideo();
    }
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'M':
    player.mute();
    mletter='M';
    uletter='u';
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;

    case 'U':
    player.unMute();
    mletter='m';
    uletter='U';
    top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
    break;


    default:
    break;
    }

    if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf('/') != -1) {
    if (startagain && eval(2 + Math.round(player.getCurrentTime())) > eval('' + duration) && eval('' + duration) > 0) {
    secscnt=eval(0.001 + duration);
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
    setTimeout(function(){
    if (1 == 11) {
    setTimeout(startVideo, playtime + delay);
    setTimeout(playingvideo, 1900);
    } else {
    var huhc=false;
    // huhc=confirm('Okay to loop?');
    if (huhc && 1 == 7) {
    player.seekTo(0.01);
    secscnt=0.01;
    oursecscnt=0.01;
    player.playVideo();
    setTimeout(playingvideo, 1900);
    } else {
    window.parent.focus();
    parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
    }
    } }, 1500);
    return '';
    } else {
    top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-loop','y');
    setTimeout(function(){ window.top.focus(); top.document.getElementById(location.hash.replace(/\#/g,'').substring(3).split('_')[0]).click(); }, 1500);
    return '';
    }
    }
    if (one == 1 || onepause != 1) {
    if (eval('' + duration) == 0) { duration=player.getDuration(); }
    top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=pause/play S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
    } else {
    if (eval('' + duration) == 0) { duration=player.getDuration(); }
    top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '/' + duration + ' ... ' + 'P=play/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;
    }
    setTimeout(playingvideo, 1000);
    }
    }
    }
    }
    }

    … does a good job acting like those keyboard events

… for today’s fourth draft external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer calling the modified stop_start_youtube.html YouTube API caller in our quest to play YouTube audio “in place” in a useful way.

Stop Press

UnLess attended mobile looping can work with the kludge (we suspect our bug or code design flaw) …


player.seekTo(1);
player.playVideo();

… and we hope nobody’s playing “Name That Sound” with the replays.


Previous relevant External Javascript YouTube Audio of Video Emoji Tutorial is shown below.

External Javascript YouTube Audio of Video Emoji Tutorial

External Javascript YouTube Audio of Video Emoji Tutorial

Onto yesterday’s External Javascript YouTube Audio of Video Mobile Helper Tutorial, today, we’ve …

  • further shored up the mobile platform playing of the audio stream of a YouTube video, as requested …
  • added display (usefulness only, so far) emojis 📻🎶 (&#128251;&#127926;) into the “underlay” button displays, as today’s work, leading up to, tomorrow …
  • the emoji tap/clicks will lead the user to a menu of further options (as often displayed with video controls) …
    1. pause
    2. play
    3. loop
    4. stop
    5. progress … perhaps

… where today’s third draft external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer in our quest to play YouTube audio “in place” in a useful way.


Previous relevant External Javascript YouTube Audio of Video Mobile Helper Tutorial is shown below.

External Javascript YouTube Audio of Video Mobile Helper Tutorial

External Javascript YouTube Audio of Video Mobile Helper Tutorial

After the start yesterday’s External Javascript YouTube Audio of Video Helper Tutorial gave us with our External Javascript YouTube Audio of Video Helper we’ve progressed making the mobile platform interfacing less flaky, but more testing is needed.

Introducing a general delay into our changed karaoke_youtube_api.htm inhouse YouTube video interfacer part of the solution turned things around here.

To delay, say by 13.5 seconds, even great swathes of code …


setTimeout(function(){
// Start of "great swathes of code"
// ...
// End of "great swathes of code"
}, 13500);

… is one of those ideas we’re still pinching ourselves about how effective it can be (let alone passing in arguments at the function() bit). We’re forever filling “great swathes of code” with global Javascript variables but today’s “great swathe” works okay with non global Javascript variables in there, and we’re thinking we have to be more trusting of the brilliant setTimeout (and setInterval) Javascript techniques of introducing a delay into the flow of your Javascript. Of course, we could also delay the work until the document.body onload event, but we wanted to get in early with what the code is trying to achieve here … we’ll see.

Perhaps a good adage here is …

Trust the process.
Trust the wonders of (in the case of iOS, Safari) Web Browser Web Inspector debugging to test ideas you start out being unsure of.

… with our ongoing second draft external Javascript ytaudioonly.js external Javascript ongoing current project … so Wake Me Up Before You Go-Go.


Previous relevant External Javascript YouTube Audio of Video Helper Tutorial is shown below.

External Javascript YouTube Audio of Video Helper Tutorial

External Javascript YouTube Audio of Video Helper Tutorial

It is not that surprising that the next step onto the progress of yesterday’s Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial would involve us developing…

  • an external Javascript …
  • helper for “in place” …
  • audio play …
  • of that stream of a YouTube video … via …
  • user linked script call …

    <script type='text/javascript' src='//www.rjmprogramming.com.au/ytaudioonly.js'></script>

    … helping out …
  • HTML “a” link with class=audioytplay and a mention of https://www.youtube.com/watch?v=[YouTubeID] … eg.

    <p>Oops, <a class="audioytplay" target="_blank" title="?" href='https://www.youtube.com/watch?v=gBzJGckMYO4' rel="noopener"><strike>that's all</strike>sorry, folks</a></p>
  • to be, via onclick event, playing “in place” the audio part of that YouTube referenced [YouTubeID] video

Developing this is definitely more than a one day job (especially getting mobile platforms working), but today’s “first draft” ytaudioonly.js external Javascript, along with the help of …

… is our start to this project. Try it yourself below …

Oops, that's allsorry, folks


Previous relevant Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial is shown below.

Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial

Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial

As far as CSS styling goes with our web application work, personally speaking, it is one of …

Give it a bit of oompha!

… moments in coding we think we learn more from, than reading about CSS. That, and, usually StackOverflow, thanks, where examples of achieving some styling ambition teach us a lot too.

Yesterday, with Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial, we decided to “put a bit of oompha” into that “two bell emoji” ( ie. 🔔🔔 ) link “double buzzer” sound “production number”, and wanted to break down what we ended up with, for readers …

Our first try … okay for non-mobile … not as good for mobile …

<a id="aja" target="myja" title="" onmouseover="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { this.title=' '; this.target='myja'; } " onclick="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && this.title == '') { this.title=' '; this.target='myja'; document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100);" href="//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&jusJUNKtaudio=&youtube_duration=2.000&email=&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=" rel="noopener">&#128276;&#128276;</a>

… begets …

🔔🔔

Our second try … okay for non-mobile … better for mobile …

<a id="aja" target="myja" title="" onmouseover="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { this.title=' '; this.target='myja'; } " onclick="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) { this.title == '') { this.title=' '; this.target='myja'; document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100); }" href="//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&justJUNKaudio=&youtube_duration=2.000&email=&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=" rel="noopener">&#128276;&#128276;</a>
<iframe onload="if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf('About_Us.') != -1) { document.getElementById('aja').target='myja';
this.src=document.getElementById('aja').href + '&rand=' + Math.floor(Math.random() * 1989786); } } " id="myja" name="myja" src="/About_Us.html" style="display:none;"></iframe>

… begets …

🔔🔔

… working better because of tweaked karaoke_youtube_api.htm
inhouse YouTube video interfacer‘s new


if (window.top) {
if (document.URL.indexOf('youtubeid=7XMW6Z_Oq38&') != -1 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
if (document.getElementById('audioejkaraoke')) {
document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;
document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('audioejkaraoke').style.position='absolute';
document.getElementById('audioejkaraoke').style.left='0px';
document.getElementById('audioejkaraoke').style.top='0px';
document.getElementById('audioejkaraoke').style.backgroundColor='transparent';
document.getElementById('audioejkaraoke').style.zIndex='99';
document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('repeat').style.position='absolute';
document.getElementById('repeat').style.left='0px';
document.getElementById('repeat').style.top='-10px';
document.getElementById('repeat').style.backgroundColor='transparent';
document.getElementById('repeat').style.zIndex='199';
document.getElementById('myiframe').style.position='absolute';
document.getElementById('myiframe').style.left='-100px';
document.getElementById('myiframe').style.top='-100px';
document.getElementById('myiframe').style.zIndex='299';
//document.getElementById('myiframe').style.backgroundColor='transparent';
document.getElementById('myiframe').style.opacity='0.0';
if (aaconto) {
aaconto.getElementById('player').style.opacity='0.0';
} else {
aaset=true;
}
document.body.style.backgroundColor='transparent';
} else {
setInterval(function(){
if (document.getElementById('audioejkaraoke')) {
if (('' + document.getElementById('audioejkaraoke').title + ' ').substring(0,1) != ' ') {
document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;
document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('audioejkaraoke').style.position='absolute';
document.getElementById('audioejkaraoke').style.left='0px';
document.getElementById('audioejkaraoke').style.top='0px';
document.getElementById('audioejkaraoke').style.backgroundColor='transparent';
document.getElementById('audioejkaraoke').style.zIndex='99';
document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('repeat').style.position='absolute';
document.getElementById('repeat').style.left='0px';
document.getElementById('repeat').style.top='-10px';
document.getElementById('repeat').style.backgroundColor='transparent';
document.getElementById('repeat').style.zIndex='199';
document.getElementById('myiframe').style.position='absolute';
document.getElementById('myiframe').style.left='-100px';
document.getElementById('myiframe').style.top='-100px';
document.getElementById('myiframe').style.zIndex='299';
//document.getElementById('myiframe').style.backgroundColor='transparent';
document.getElementById('myiframe').style.opacity='0.0';
if (aaconto) {
aaconto.getElementById('player').style.opacity='0.0';
} else {
aaset=true;
}
document.body.style.backgroundColor='transparent';
}
}
}, 1000);
}
if (top.document.getElementById('aja')) {
var boxis=top.document.getElementById('aja').getBoundingClientRect();
//alert('boxis.left=' + boxis.left + ' ' + top.document.getElementById('aja').innerHTML);
if (top.document.getElementById('aja').innerHTML.indexOf('<iframe') == -1) {
//alert('Boxis.left=' + boxis.left);
top.document.getElementById('myja').style.width='' + eval(2 * boxis.width) + 'px';
top.document.getElementById('myja').style.height='' + eval(1 * boxis.height) + 'px';
setTimeout(function(){
top.document.getElementById('aja').innerHTML=top.document.getElementById('myja').outerHTML.replace('/About_Us.html',top.document.getElementById('aja').href).replace(' onload=',' data-onload=').replace(' id=',' data-id=').replace(' name=',' name-id=').replace('none;','inline-block;');
}, 2000);
} else if (3 == 4) {
top.document.getElementById('myja').style.position='absolute';
top.document.getElementById('myja').style.left='' + boxis.left + 'px';
top.document.getElementById('myja').style.top='' + boxis.top + 'px';
top.document.getElementById('myja').style.width='' + boxis.width + 'px';
top.document.getElementById('myja').style.height='' + boxis.height + 'px';
top.document.getElementById('myja').style.display='block';
top.document.getElementById('myja').style.zIndex='99';
//top.document.getElementById('aja').innerHTML='  ';
}
}
}, 1000);
}

if (top.document.URL.indexOf('/esp_ornot_esp.') != -1 || parent.document.URL.indexOf('/esp_ornot_esp.') != -1) {
if (top.document.title.indexOf(' justaudio ') != -1) {
asuffis='&justaudio=&';
bsuffis=' name=justaudio ';
}
}
}

Let’s start with …

Why can’t we just link to a YouTube video URL webpage off any old platform or web browser incarnation?

Well, you could! But we wanted a less obvious approach (and we were not sure about mobile platforms, trying this), only relevant for scenarios where you are only interested in the audio stream of a YouTube video (it should be noted), that is hiding from the reader “the mechanics” of what we are doing (to get a cheap giggle … there, are you happy now?!).

What does Javascript if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { } if test achieve?

If this test returns true we have detected a non-mobile platform/web browser scenario.

What does the HTML target attribute of an a HTML element do?

That target attribute determines the “navigational place” of the href attribute URL of that a link where …

  1. _blank opens in a new window
  2. _self clobbers current window
  3. _top adds a new (tabbed) window (perhaps from the viewpoint of a child HTML iframe window)
  4. other named target point to the name attribute of an HTML iframe element, presumably, in the current window

What does HTML code snippet onload=”if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf(‘About_Us.’) != -1) { document.getElementById(‘aja’).target=’myja’;
this.src=document.getElementById(‘aja’).href + ‘&rand=’ + Math.floor(Math.random() * 1989786); } } “
do as the onload event logic of the “second version” iframe incarnation?

We decided that we needed to get assistance from our inhouse YouTube video interfacing player, when it came to mobile platforms and web browsers, to get to a point where …

  • unbeknown to such mobile users
  • when they tap the 🔔🔔 “buzzer” button emojis …
  • it is arranged from the child iframe inhouse YouTube video interfacing player web application using “overlay” concepts …
    1. position: absolute
    2. opacity
    3. z-index
    4. top and left positioning
    5. width and height dimensioning
    6. 🔔🔔 into some button content

    … that what they are tapping is a YouTube video element

  • looking like 🔔🔔 at levels of a smaller z-index seen through opacity:0.0 higher z-index levels, the topmost transparent but high z-index one being the YouTube video element which is that webpage area’s “action item” … if you will

Huh?!

On mobile platforms, media cannot play, these days, unless it is as a direct result of a user tap (excluding programmatically produced taps). See all this in action, with thanks to FreeConvert, below …

And so, yes … was it worth it? Perhaps not to do with the job at hand, but for future reference, we’re happy to give this added oompha to this effort.

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

Select Multiple Webpage Palette Speech Bubble Group Talk Privacy Tutorial

Select Multiple Webpage Palette Speech Bubble Group Talk Privacy Tutorial

Select Multiple Webpage Palette Speech Bubble Group Talk Privacy Tutorial

Meanwhile, back at some other ranch … somewhere … we’re some of the way down the line, with our recent …

  • Select Multiple Webpage Palette web application …
  • Bulletin Board subset of functionality, towards with it’s …
  • Group Talk (comma separated list of username/contacts) abilities … now offer …
  • Bulletin Board privacy

… as people in a Group Talk may appreciate. In other words, your generic Bulletin Board viewers would not see your Group Talk setup communications should the originator of any Group Talk now, either at …

  • best, as a To: + spaces appendage to a textarea line record (delimited by line feed) … ahead of a way with …
  • spaces prefixing to the prompt widow off right click or gesture events … starting the ball rolling …
  • populating a new data-applyprivacy global data attribute into the SVG

… allowing this new privacy functionality to work.

Again, we’ll need more than the work today to bed this in, but we now do not think there are any impassable concepts to its implementation.

And so, onto the recent Select Multiple Webpage Palette Speech Bubble Username Emoji Tutorial‘s work we have the changed select_palette.html web application helped out by the changed select_palette.php “seventh draft” PHP we have made a start making this “privacy dream” happen.


Previous relevant Select Multiple Webpage Palette Speech Bubble Emoji Tutorial is shown below.

Select Multiple Webpage Palette Speech Bubble Emoji Tutorial

Select Multiple Webpage Palette Speech Bubble Emoji Tutorial

The reason for today’s efforts with our latest web application have a similar theme to yesterday’s Select Multiple Webpage Palette Speech Bubble IP Address Tutorial‘s efforts, namely …

help differentiate Speech Bubbles of different users in a Group Talk arrangement with our public Bulletin Board functionality

Today’s research into displaying emoji text at the pointy corner of the Speech Bubble hopes to help out here, and though we may have nuances yet to come, we can say with the changed select_palette.html web application helped out by the changed select_palette.php “fifth draft” PHP we have made a start making this “emoji dream” happen.


Previous relevant Select Multiple Webpage Palette Speech Bubble IP Address Tutorial is shown below.

Select Multiple Webpage Palette Speech Bubble IP Address Tutorial

Select Multiple Webpage Palette Speech Bubble IP Address Tutorial

To further differentiate Group Talk users accessing the public Bulletin Board of our web application talked about in Select Multiple Webpage Palette Colour Coded Speech Bubble Tutorial

  • we need to consider user IP addresses, as Wikipedia describes …

    An Internet Protocol address (IP address) is a numerical label such as 192.0.2.1 that is assigned to a device connected to a computer network that uses the Internet Protocol for communication.[1][2] IP addresses serve two main functions: network interface identification, and location addressing.

    Some readers may have noted for a couple of days now, our newly introduced PHP has been assisting the calling HTML, and itself, by remembering the user’s IP address. Yesterday, it was to help colour code Speech Bubbles, and today, it helps in amongst …

    • username … and …
    • contact … set lists … with …
    • IP address

    … to differentiate email and SMS invitation origin calls of our web application, as to who that user has been described as by the originator of the Group Talk settings with the changed select_palette.html web application helped out by the changed select_palette.php “fourth draft” PHP.


    Previous relevant Select Multiple Webpage Palette Colour Coded Speech Bubble Tutorial is shown below.

    Select Multiple Webpage Palette Colour Coded Speech Bubble Tutorial

    Select Multiple Webpage Palette Colour Coded Speech Bubble Tutorial

    The concept of Group Talk started with yesterday’s Select Multiple Webpage Palette Speech Bubble Invitations Tutorial. It made us think that we should start thinking about the differentiation of voices amongst the Speech Bubbles of the public Bulletin Board we’re supporting with the associated web application and its user mobile ontouchend and non-mobile oncontextmenu event interfacing Javascript logic talents.

    We decided that one way could be to …

    • Colour Code the background colour of the Speech Bubbles via the user IP address …
      <?php

      $gbcol="0,0,255";

      function server_remote_addr() {
      global $gbcol;
      $rma = $_SERVER['REMOTE_ADDR'];
      $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
      $uas=explode('.', str_replace('::1','65.254.95.247',$rma)); // 65.254.93.32

      if (sizeof($uas) >= 3) {
      $gbcol='' . ($uas[0] % 256);
      $gbcol.=',' . ($uas[1] % 256);
      $gbcol.=',' . (($uas[2] + $uas[(-1 + sizeof($uas))]) % 256);
      }

      // you can add different browsers with the same way ..
      if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua))
      $rma = '000000'.$rma;
      elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua))
      $rma = '00000'.$rma;
      elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua))
      $rma = '0000'.$rma;
      elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua))
      $rma = '000'.$rma;
      elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua))
      $rma = '00'.$rma;
      elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua))
      $rma = '0'.$rma;
      return str_replace(":", "_", $rma);
      }

      server_remote_addr();

      ?>
    • when a Group Talk invitation is sent out do not have the sender username and/or contact as the recipient username and/or contact

    … moving further along with the changed select_palette.html web application helped out by the changed select_palette.php “third draft” PHP.


    Previous relevant Select Multiple Webpage Palette Speech Bubble Invitations Tutorial is shown below.

    Select Multiple Webpage Palette Speech Bubble Invitations Tutorial

    Select Multiple Webpage Palette Speech Bubble Invitations Tutorial

    Yesterday’s Select Multiple Webpage Palette Speech Bubble PHP Tutorial‘s …

    • PHP embellishment of …
    • the day before’s SVG data enhancemants … today improves yesterday’s …
    • public Bulletin Board via user mobile ontouchend and non-mobile oncontextmenu event interfacing Javascript logics … today, adding …
    • optional invitation communication email and/or SMS logics via Group Talk set comma separated optional user username/contact entered data set lists helping with Group Talk filtering means of filtering the Speech Bubble data

    … with the changed select_palette.html web application helped out by the changed select_palette.php “second draft” PHP.


    Previous relevant Select Multiple Webpage Palette Speech Bubble PHP Tutorial is shown below.

    Select Multiple Webpage Palette Speech Bubble PHP Tutorial

    Select Multiple Webpage Palette Speech Bubble PHP Tutorial

    Yesterday’s Select Multiple Webpage Palette Speech Bubble Data Tutorial‘s …

    • data … begets …
    • PHP
    … around here a lot, as PHP is our domain’s “first call” serverside language.

    Add to that that “yesterday’s tomorrow is today” we’re supposed to be finished with our “short two day mini project sojourn”, and in a crude way we have, but we want a third day to add nuance to the arrangements with data filtering and more sophistication regarding collection, within the approach of our new …

    Bulletin Board of Speech Bubbles

    … that becomes a …

    • shareable
    • public (on this second day, a bit too public)
    • reverse chronological
    • speech bubble

    … resource, if the user avails themselves of the mobile ontouchend and non-mobile oncontextmenu event interfacing Javascript logic smarts with the changed select_palette.html web application, now helped out by select_palette.php “first draft” PHP …


    <?php
    // select_palette.php
    // RJM Programming
    // May, 2025

    $prevcont="";
    $curcont="";
    $curgmt=gmdate("Ymd");
    $newlines=[];

    if (isset($_POST['indata'])) {
    $ind=str_replace('+',' ',urldecode($_POST['indata']));
    $lines=explode('<svg name="', $ind);
    if (!file_exists('/tmp/select_palette.htm')) {
    file_put_contents('/tmp/select_palette.htm', '');
    } else {
    $prevcont=file_get_contents('/tmp/select_palette.htm');
    if (strpos($prevcont, '<svg name="' . $curgmt) === false) {
    file_put_contents('/tmp/select_palette.htm', '');
    } else {
    $curcont=$prevcont;
    }
    }


    for ($i=1; $i<sizeof($lines); $i++) {
    $thisline='<svg name="' . explode('</svg>', $lines[$i])[0] . '</svg><br><br><br>';
    if (strpos($thisline, $curgmt) !== false && strpos($thisline, ' data-public="n"') === false && (strpos($thisline, ' data-owner="') !== false && strpos($thisline, ' data-owner=""') === false) || (strpos($thisline, ' data-contact="') !== false && strpos($thisline, ' data-contact=""') === false)) {
    if (strpos($curcont, $thisline) === false) {
    $curcont.=$thisline;
    }
    }
    }
    file_put_contents('/tmp/select_palette.htm', $curcont);
    echo '<html><body></body></html>';
    exit;

    } else if (isset($_GET['extract'])) {
    if (file_exists('/tmp/select_palette.htm')) {
    $prevcont=file_get_contents('/tmp/select_palette.htm');
    if (strpos($prevcont, '<svg name="' . $curgmt) === false) {
    file_put_contents('/tmp/select_palette.htm', '');
    }
    $lines=explode('<svg name="', $prevcont);
    rsort($lines);

    if (!isset($_GET['owner']) && !isset($_GET['me']) && !isset($_GET['contact'])) {
    $prevcont="";
    for ($i=0; $i<sizeof($lines); $i++) {
    $thisline='<svg name="' . explode('</svg>', $lines[$i])[0] . '</svg><br><br><br>';
    if (strpos($thisline, $curgmt) !== false) {
    $prevcont.=$thisline;
    }
    }
    $vslen=strlen(str_replace('+','%20',urlencode($prevcont)));
    echo '<html><body onload=" if (encodeURIComponent(parent.document.getElementById(' . "'publicreport'" . ').innerHTML).length != ' . $vslen . ') { parent.document.getElementById(' . "'publicreport'" . ').innerHTML=decodeURIComponent(' . "'" . str_replace('+','%20',urlencode($prevcont)) . "'" . '); } "></body></html>';
    exit;
    } else {
    $prevcont="";
    for ($i=0; $i<sizeof($lines); $i++) {
    $thisline='<svg name="' . explode('</svg>', $lines[$i])[0] . '</svg><br><br><br>';
    if (strpos($thisline, $curgmt) !== false) {
    $isok=true;
    if (isset($_GET['owner']) && strpos(strtolower($thisline), ' data-owner="' . strtolower(str_replace('+',' ',urldecode($_GET['owner'])) . '"')) === false) {
    $isok=false;
    }
    if (isset($_GET['contact']) && strpos(strtolower($thisline), ' data-contact="' . strtolower(str_replace('+',' ',urldecode($_GET['contact'])) . '"')) === false) {
    $isok=false;
    }
    if (isset($_GET['me']) && strpos(strtolower($thisline), strtolower('="' . str_replace('+',' ',urldecode($_GET['me'])) . '"')) === false) {
    $isok=false;
    } else if (isset($_GET['me'])) {
    $isok=true;
    }
    if ($isok) { $prevcont.=$thisline; }
    }
    }
    $vslen=strlen(str_replace('+','%20',urlencode($prevcont)));
    echo '<html><body onload=" if (encodeURIComponent(parent.document.getElementById(' . "'publicreport'" . ').innerHTML).length != ' . $vslen . ') { parent.document.getElementById(' . "'publicreport'" . ').innerHTML=decodeURIComponent(' . "'" . str_replace('+','%20',urlencode($prevcont)) . "'" . '); } "></body></html>';
    exit;
    }

    }

    }

    ?>

    … meaning …

    Data … is enhanced … … by … PHP


    Previous relevant Select Multiple Webpage Palette Speech Bubble Data Tutorial is shown below.

    Select Multiple Webpage Palette Speech Bubble Data Tutorial

    Select Multiple Webpage Palette Speech Bubble Data Tutorial

    Onto yesterday’s Select Multiple Webpage Palette Speech Bubble Tutorial, today, we’re preparing for tomorrow.

    You heard it here first.

    Admittedly, nothing startling there, but it was the first time we remember …

    • embellishing SVG data … with so much …
    • what we normally associate with HTML element work …
      1. global data attributes
      2. id and name attribution …
      3. event logic

    Yes, all possible with SVG, though not the first thing we think of using SVG data within our HTML. We normally think, just display thoughts, but today, we’re paving the way for tomorrow, and our “short two day mini project sojourn” will become clearer regarding motives, then, or get hints trying with strategically changed select_palette.html web application‘s mobile ontouchend and non-mobile oncontextmenu event interfacing Javascript logic …


    var taar=[];
    var preadd=0;
    var windowuser='', windowcontact='', windowask=true, suffix='';


    function defwuwc(inwindowuser,inwindowcontact) {
    if ((inwindowuser + inwindowcontact) == '') { return ''; }
    if (inwindowuser != '' && inwindowcontact != '') { return inwindowuser + '[' + inwindowcontact + ']'; }
    if (inwindowuser != '' && inwindowcontact == '') { return inwindowuser; }
    return inwindowcontact;
    }


    function treg(ttis) {
    var dotherest=false;
    var ctown=defwuwc(windowuser,windowcontact);
    var ourwindowask=windowask;
    preadd=1;
    if (ttis.outerHTML.indexOf(' data-public=') != -1) {
    if (windowuser == '' && windowcontact == '' && windowask) {
    ctown=prompt("To share on today's board enter a username and/or contact string (append space to remember, append another space to apply to all other Speech Bubbles) ... eg. " + String.fromCharCode(10) + "Robert Metcalfe[rmetcalfe15@gmail.com]", defwuwc(windowuser,windowcontact));
    }
    if (ctown == null) { ctown=''; }
    if (ctown != ctown.replace(/\ \ $/g,'')) {
    windowask=false;
    dotherest=true;
    ctown=ctown.trim();
    } else if (ctown != ctown.replace(/\ $/g,'')) {
    windowask=false;
    ctown=ctown.trim();
    }
    if (ctown.indexOf('[') > 0 && ctown.indexOf(']') != -1) {
    windowuser=ctown.split('[')[0];
    windowcontact=ctown.split('[')[1].split(']')[0];
    } else if (ctown.indexOf('[') == 0 && ctown.indexOf(']') != -1) {
    windowcontact=ctown.split('[')[1].split(']')[0];
    windowuser=windowcontact;
    } else {
    windowuser=ctown;
    windowcontact='';
    }
    if (windowuser != '') {
    ttis.setAttribute('data-owner', windowuser);
    }
    if (windowcontact != '') {
    ttis.setAttribute('data-contact', windowcontact);
    }
    if (windowuser != '' || windowcontact != '') {
    ttis.setAttribute('data-public', 'y');
    ttis.innerHTML=ttis.innerHTML.replace(/\<text\ /g,'<text stroke="blue" ');
    if (dotherest) {
    var svgs=document.getElementsByTagName('svg');
    for (var isvgs=0; isvgs<svgs.length; isvgs++) {
    if (svgs[isvgs].outerHTML.indexOf(' stroke=') == -1) {
    if (('' + svgs[isvgs].id) != ('' + ttis.id)) {
    if (windowuser != '') {
    svgs[isvgs].setAttribute('data-owner', windowuser);
    }
    if (windowcontact != '') {
    svgs[isvgs].setAttribute('data-contact', windowcontact);
    }
    if (windowuser != '' || windowcontact != '') {
    svgs[isvgs].setAttribute('data-public', 'y');
    }
    svgs[isvgs].innerHTML=svgs[isvgs].innerHTML.replace(/\<text\ /g,'<text stroke="blue" ');
    }
    }
    }
    }
    } else {
    windowask=ourwindowask;
    }
    }
    //alert(ttis.outerHTML);
    setTimeout(function(){ preadd=0; }, 5000);
    }


    Previous relevant Select Multiple Webpage Palette Speech Bubble Tutorial is shown below.

    Select Multiple Webpage Palette Speech Bubble Tutorial

    Select Multiple Webpage Palette Speech Bubble Tutorial

    Yesterday’s Select Multiple Webpage Palette Popup Tutorial modus operandi revolved around …

    delimitation rules

    … as so many matters do with written down text.

    We rethought yesterday’s HTML textarea start regarding line feed Speech Bubble creation possibilities, and thought …

    It’s too unwieldy for a user to add to their textual data when what they really want to do is Speech Bubbles.

    Yesterday’s thinking really hoped the user entered a Speech Bubble data one at a time, but what if the user wants to enter several Speech Bubbles in the one textarea incarnation?

    Good question. (Calling all ducks with a slow paddle going?!)

    Yes, but there is that ~~ existing delimitation rule, as of yesterday equating to a line feed. Supposing ~~ was given the delimitation roles …

    1. the character sets …
      lineFeed~~lineFeed
      … separate Speech Bubbles … ie. in the textarea a ~~ record is all there is on a line of textarea text
    2. the character set …
      ~~lineFeed
      … at the start wipes out any previously remembered text data and starts again
    3. else retain the ~~ mapping to lineFeed

    … in combination with the textarea always first presented blank and the previous Speech Bubble or Lines of Text remembered and retained unless the middle condition above happens?

    Well, we think it’s a plan, and led us to be able to share a Speech Bubble presentation of Shakepeare’s Act 1 Scene 1 of Macbeth. And so, today with the changed select_palette.html web application, onto yesterday’s …

    one textarea element

    … paradigm, we present …

    • previous text data in a details/summary “reveal” mode of use above the textarea element, as relevant
    • and below the textarea element we now have buttons to Email or SMS your text creations off to a recipient

    … harnessing hashtag navigational data methodologies in “a” “mailto:” (email) or “sms:” (SMS) prefixing href attributes, as per …


    function doemail() {
    var anchor=null;
    if (woois) {
    if (!woois.closed) {
    if (woois.document.getElementById('myta').outerHTML.indexOf(' data-done="y"') == -1) {
    if (woois.document.getElementById('myta').value.trim() != '') {
    woois.document.getElementById('myta').setAttribute('data-done', 'y');
    setTimeout(doemail, 6000);
    return '';
    }
    } else if (woois.document.getElementById('myta').value.trim() != '') {
    setTimeout(doemail, 6000);
    return '';
    }
    woois.close();
    woois=null;
    setTimeout(doemail, 6000);
    return '';
    }
    }
    var emis=prompt('Please enter email address to send to.', '');
    if (emis == null) { emis=''; }
    if (emis.indexOf('@') != -1) {
    anchor = document.createElement('a');
    anchor.href = 'mailto:' + emis.trim() + '?subject=My%20Speech%20Bubble%20data&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(document.body.innerHTML));
    anchor.style.display='none';
    document.body.appendChild(anchor);
    anchor.innerHTML='Email';
    anchor.target='_top';
    anchor.click();
    } else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
    anchor = document.createElement('a');
    anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(document.body.innerHTML));
    anchor.style.display='none';
    anchor.innerHTML='SMS';
    anchor.target='_top';
    anchor.click();
    }
    }

    function dosms(){
    var anchor=null;
    if (woois) {
    if (!woois.closed) {
    if (woois.document.getElementById('myta').outerHTML.indexOf(' data-done="y"') == -1) {
    if (woois.document.getElementById('myta').value.trim() != '') {
    woois.document.getElementById('myta').setAttribute('data-done', 'y');
    setTimeout(dosms, 6000);
    return '';
    }
    } else if (woois.document.getElementById('myta').value.trim() != '') {
    setTimeout(dosms, 6000);
    return '';
    }
    woois.close();
    woois=null;
    setTimeout(dosms, 6000);
    return '';
    }
    }
    var emis=prompt('Please enter SMS number to send to.', '');
    if (emis == null) { emis=''; }
    if (emis.indexOf('@') != -1) {
    anchor = document.createElement('a');
    anchor.href = 'mailto:' + emis.trim() + '?subject=My%20Speech%20Bubble%20data&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(document.body.innerHTML));
    anchor.style.display='none';
    document.body.appendChild(anchor);
    anchor.innerHTML='Email';
    anchor.target='_top';
    anchor.click();
    } else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
    anchor = document.createElement('a');
    anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(document.body.innerHTML));
    anchor.style.display='none';
    anchor.innerHTML='SMS';
    anchor.target='_top';
    anchor.click();
    }
    }


    Previous relevant Select Multiple Webpage Palette Popup Tutorial is shown below.

    Select Multiple Webpage Palette Popup Tutorial

    Select Multiple Webpage Palette Popup Tutorial

    Regarding yesterday’s Select Multiple Webpage Palette Primer Tutorial

    • you start with an outlandish premise …
    • it stays “outlandish” select (dropdown) element wise on non-mobile … but …
    • catering for mobile …
    • you are forced to encase it in a hosting div element (with the onmousedown and ontouchdown precursor events to onclick)

    … all contributing to getting us to a point, today, we can say we’ve added a layer of (useful, extra) functionality, by …

    • no longer asking for user interactive input via a Javascript prompt window … but, instead, like with Background Image Foreground Content Tutorial … we …
    • ask for user interactive input via a window.open (ie. popup) “here’s looking at you, kid” window.opener incarnation guise of our changed select_palette.html web application … just consisting of …
    • one textarea element …
      1. still capable of ~~ delimitation as with the Javascript prompt window thinking … but also now …
      2. harnessing the talents of a textarea line feed delimitation within it’s value attribute

      … able to extend functionality towards decent …

    • speech bubble feeling thoughts (so far, just) … because …
    • it opens up the idea that the div element innerHTML attribute can be the SVG we had previously been supplying as background HTML/CSS (via Javascript DOM) data

    Cute, huh?! (ahead of the “Speech Bubble styling” niceties making it really cute, yet, for us … but who knows what you can achieve on the “cute styling front”?!).


    Previous relevant Select Multiple Webpage Palette Primer Tutorial is shown below.

    Select Multiple Webpage Palette Primer Tutorial

    Select Multiple Webpage Palette Primer Tutorial

    In the world of web applications, there are often many ways to approach any given requirement. Like with yesterday’s Select Multiple Mobile Background Image Tutorial, today’s “albeit a bit out there idea” is to …

    • offer a select (multiple attribute) “dropdown” HTML element …
    • as a webpage covering …
    • template or palette … where the user …
    • writes user defined lines of words created

    … onto. Pretty simple idea for a “first then second draft“! But maybe not the first idea to spring to mind regarding making such an idea happen?!


    Previous relevant Select Multiple Mobile Background Image Tutorial is shown below.

    Select Multiple Mobile Background Image Tutorial

    Select Multiple Mobile Background Image Tutorial

    We had occasion to revisit Window LocalStorage Client Versus Server Map Tutorial‘s web application today changed this way to end up with wls_vs_php.htm, on an iPad, and saw how initially lacking was the advice on how to work the Capital City to Country quiz. The reason, primarily, in our view, is that on mobile platforms an element such as …


    <select class=dglow onclick=" console.log('67234'); noif(); " title='Please select Capital(s) below to get Countries Report ...' onfocusout=" document.getElementById('myrepsb').className='dglow'; tablemode = ''; nothere=true; updatecountries(null);" style='width:300px;margin-top:0px;margin-left:0px;vertical-align:top;height:100vh;background-color:lightblue;' id=scapitals multiple>
    // innard options //
    </select>

    … you just see words to the effect …

    0 items …

    … but we’d see more use for this select element “opened up” on initialization. As we read, and believed, via this useful link, thanks, this “programmatical click on mobile platforms” to open up such a select element is not easy. So we decided to go down the route of …

    • to a select multiple element …
    • on mobile …
    • background image …
    • at top right …
    • that is wording advice “Click/tap me”
    • when first encountered

    … and we came up with the document.body onload event call “new Javascript code snippet” …


    if (document.URL.indexOf('?') == -1) {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('scapitals').click(); // this is just wishful thinking, but no error is caused, and you never know?
    document.getElementById('scapitals').style.background="url(\"data:image/svg+xml;base64," + window.btoa("<svg xmlns='http://www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text x='5%' y='60%'>Click/tap me</text></svg>") + "\") no-repeat top right";
    }
    }

    Next best approach, we’d say?!


    Previous relevant Window LocalStorage Client Versus Server Map Tutorial is shown below.

    Window LocalStorage Client Versus Server Map Tutorial

    Window LocalStorage Client Versus Server Map Tutorial

    Get a good map, and a goodly number of times you’ll want a map of smaller or larger scale than the one you have. Murphy’s Law? This is probably why in the wonderful woooooooorrrrrrrrlllllld of Google Charts they have included …

    • Geo Chart topographic map of the world or of regions
    • Map Chart terrestrial/satellite map of your group of markers at a zoom level of your choosing

    … and hope you can see that the latter can save the day for a Short Distance Trip (corner shop, anyone?!).

    So we’ve added onto yesterday’s Window LocalStorage Client Versus Server Timeline Tutorial progress a new toggling button to view a scenario in either Google Chart scenario above.

    You can see this integration work with our changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link supervising a tweaked geo_chart.php Geo Chart interfacer.


    Previous relevant Window LocalStorage Client Versus Server Timeline Tutorial is shown below.

    Window LocalStorage Client Versus Server Timeline Tutorial

    Window LocalStorage Client Versus Server Timeline Tutorial

    Up to yesterday’s Window LocalStorage Client Versus Server User Tutorial‘s progress, our Capital City Find Matching Country Report web application project was all about …

    • where (and capital of “what”) … but we often seek out a way to add into the mix that 4th dimension …
    • when (ie. time)

    … and regarding the current project, a …

    • where “map” … can interface with a …
    • when “Trip Plan Itinerary”

    … and for this purpose, we’re going to interface to the excellent Google Charts Annotated Timeline Chart, thanks, because it combines links of “time” to “user annotations” in a timeline way, that similar way you might describe the qualities of a Trip, even before you’ve gone on that trip. We’ve also added it so that an unordered places list can be turned into a Trip Plan Itinerary at the click/touch of a new map 🗺 &#128506; emoji button.

    Again, see how these timeline amendments were achieved with our changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link and annotatedtimeline_chart.php which changed quite a lot.


    Previous relevant Window LocalStorage Client Versus Server User Tutorial is shown below.

    Window LocalStorage Client Versus Server User Tutorial

    Window LocalStorage Client Versus Server User Tutorial

    The inherent weakness with our current Capital City Find Matching Country Report web application project, to our minds, was that places of interest are not restricted to the Capital Cities of Countries, especially when “Trip Planning”. On the other hand, it would be impossible to cater for every “place” in the world. That is far too subjective for good web application applicability. What would be good though, is to allow in user defined …


    Place name, Country name

    … terms, the definitions of interest to a user. We can ask this …

    • flagged by the click/touch of an emoji button … and …
    • the interactive entry presented via a Javascript prompt window

    . When thinking of data applicable to an individual, then that can be catered for by recording it in localStorage where it will be recalled on the next execution of that web application in the same web browser.

    This, along with a Colour Wheel of the “nearest TimeZone place” onto the existing logic of yesterday’s Window SessionStorage Client Versus Server Order Tutorial progress could make for a more useful and practical tool for those Trip Planners out there!

    See how this was achieved with our changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link.

    Did you know?

    To click/touch one of those Google Chart Geo Chart lines between Emoji Flag Markers will show a new Google Maps directions web page with transport times and detail, as well as an inhouse crow fly distance of that trip leg, as shown up the top right of today’s tutorial picture.


    Previous relevant Window SessionStorage Client Versus Server Order Tutorial is shown below.

    Window SessionStorage Client Versus Server Order Tutorial

    Window SessionStorage Client Versus Server Order Tutorial

    If we are to honour our thoughts of being able to use our current Capital City Find Matching Country Report web application as a Trip Planner …

    Our primary integration today is to (software) integrate the great Weather Underground and its great API service for autocomplete name searches for weather (and hurricane) information. Why bother? Well, can you not envisage a user using that Ajax functionality of yesterday’s Window SessionStorage Client Versus Server Ajax Tutorial as a trip planner, perhaps, or as a “checking up on relatives overseas” tool, perhaps? And not all the capital cities are timezone places, and so for some of those we can use Weather integration to still show apt online information when click/touching a Countries Report row. Speaking of this “row”, we make an improvement whereby on a first click of a right hand (Country) row cell, that cell is not initially a contenteditable=”true” one (that may frustrate showing the keyboard on mobile, when most likely it was the row touch intended), but then becomes a contenteditable=”true” cell henceforth.

    … then yesterday’s Window SessionStorage Client Versus Server Flags Tutorial “progress to now” needs to take notice of a user’s order of multiple select (dropdown) element click/touching of Capital City option (sub)elements, just as we did with the recent User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial‘s web application project to allow for a user ordered YouTube video playlist.

    Because what is a Trip Planner without an ordered trip? Well, that is debatable, but what isn’t (debatable), is that there will be people in the world who appreciate the “mapping out” of a proposed Trip Planning Itinerary. What could we call on here? We can think of the Google Chart Geo Chart work around about the time of Google Geo Chart Co-ordinate Emojis Tutorial, when we started using …

    • a world map … with …
    • emoji markers … and optionally …
    • joined up by straight lines

    … an idea for a Trip Plan itinerary synopsis, perhaps?!

    If you examined closely yesterday’s code changes you will have noticed our collecting of TimeZone Place geographical latitude and longitude information. Today, we start making use of that preparatory work with our changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link.

    Stop Press

    The “emoji markers” above (as of 2 January 2020) will be “country flags” (as per Window SessionStorage Client Versus Server Flags Tutorial ideas), as defined.


    Previous relevant Window SessionStorage Client Versus Server Flags Tutorial is shown below.

    Window SessionStorage Client Versus Server Flags Tutorial

    Window SessionStorage Client Versus Server Flags Tutorial

    Yes, there’s more to do onto yesterday’s Window SessionStorage Client Versus Server CSS Tutorial‘s Capital City Find Matching Country Report web application project, in our eyes. We have not even mentioned “Internationalization” as a concept up to now. In this line of thinking …

    Did you know?

    Emoji flags via ISO 2 character country codes are dead easy via Regional Indicator Symbol characters …


    var lri="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var dri=["127462","127463","127464","127465","127466","127467","127468","127469","127470","127471","127472","127473","127474","127475","127476","127477","127478","127479","127480","127481","127482","127483","127484","127485","127486","127487"];

    var thiscc='AU'; // ISO 2 character countrycode for Australia
    var ccsuff='', ccchar=' ';
    for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) {
    ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();
    ccsuff+='&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';
    }
    document.getElementById('lastflag').innerHTML=ccsuff;

    … to result in (via <span style=font-size:64px;>&#127462;&#127482;</span>) …


    🇦🇺

    … providing interest and general translatability to the changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link.


    Previous relevant Window SessionStorage Client Versus Server CSS Tutorial is shown below.

    Window SessionStorage Client Versus Server CSS Tutorial

    Window SessionStorage Client Versus Server CSS Tutorial

    Further to yesterday’s Window SessionStorage Client Versus Server Integration Tutorial we have a two pronged improvements set for you today with our current Capital City Find Matching Country Report web application project …

    • CSS styling changes … and …
    • additional functionality for Email and SMS links back to our current Capital City Find Matching Country Report web application project (to complete the cycle)

    We use several modes of CSS application (the first and last of particular relevance to today’s “highlighting of workflow” improvements) …

    … the “static” measures often helping to highlight the web application’s main workflow of user interaction and the “dynamic” measures helping to alert the user as to where to proceed with their “workflow”.

    In terms of CSS styling work …

    1. for non-mobile platforms we allow for more columns to be applied to our Capitals select (dropdown) element (in order to reduce some user scrolling, as does our new additional A-Z letter basis sorting functionality) as per … the “dynamic” Javascript DOM “class” modifications

      if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
      document.getElementById('lefttd').className='lefttd';
      }

      … dovetailing with the “static” internal CSS coding

      <style>
      .lefttd {
      column-count: 4;
      max-height: 35%;
      vertical-align: top;
      max-width: 70%;
      font-size: 8px;
      background-color: rgba(205,205,205,0.5);
      background-image: -webkit-gradient(
      linear,
      right bottom,
      left top,
      color-stop(0, rgba(205, 205, 205, 0.8)),
      color-stop(0.50, rgba(255, 255, 0, 0.2))
      );
      background-image: -o-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);
      background-image: -moz-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);
      background-image: -webkit-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);
      background-image: -ms-linear-gradient(left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);
      background-image: linear-gradient(to left top, rgba(205, 205, 205, 1) 0%, rgba(255, 255, 0, 0.2) 50%);

      }
      </style>

      … and please note that around here at RJM Programming we have a “far from hard and fast rule” (but a rule regardless) regarding HTML element ID and class attributes that they concern (and (usually) be compartmentalised into) Javascript (DOM) manipulations and CSS styling issues respectively … and add a linear-gradient background to the table cell when expecting the initial user interaction on non-mobile platforms
    2. a “dynamic” Javascript DOM “class” modification … document.getElementById(‘myrepsb’).className=’dglow’; … is made to the “Report…” button at the Capitals select (dropdown) onfocusout event so as to highlight (with “glow” inspired styling) where user interaction may flow to

    As far as links go, you may expect to need serverside means to construct these in online Email and SMS message interfacing, but email (client program) products like Gmail parse your ascii text and convert http: or https: protocol URLs in your Email body to hyperlinks, as does the Messages SMS application here on this MacBook Pro using macOS Mojave. Cute, huh?! So to close the circle back from remote thar’ parts back to our web application is a simple matter of, in broad brush terms …

    • adding two new buttons called “Email Columns and Links …” and “SMS Columns and Links …” that …
    • set a global variable andlinkto = true; … setting in play, within the report writing code (that likes monospaced fonts) …
    • add a new links column to the right with URLs like …
      https://www.rjmprogramming.com.au/HTMLCSS/wls_vs_php.htm?andgo=y&countries=Belize&capitals=Belmopan
      … to tell your client programs to form the hyperlinks for us (if they are “of the mood”, that is!)

    To improve user experience we use “dynamic” Javascript DOM HTML “style” attribute change means to easier close the “Colour Wheel” helper web application “above the fold” by changing the CSS z-index (Javascript DOM [element].style.zIndex) of elements accordingly, when the user clicks other elements. You can see all this with the first “the changed” link above, where all “glow” CSS styling will also feature prominently.


    Previous relevant Window SessionStorage Client Versus Server Integration Tutorial is shown below.

    Window SessionStorage Client Versus Server Integration Tutorial

    Window SessionStorage Client Versus Server Integration Tutorial

    We hope, when performing a “software integration” task, that the two or more components of that integration work with each other’s talents, rather than a big tussle like reinventing the wheel. This ideal makes the work …

    • sometimes difficult but rewarding because …
    • the differences between two independent software components can be quite large and daunting … and the programmer has to see that …
    • care is applied so as not to wreck previous functionality and integrations in making the current integration work

    … and that is why we’ve made corollaries to “building from scratch” (when planning and design is a huge component) can be a lot simpler than a software integration “renovation”, in the past, here at this blog.

    Our primary integration today is to (software) integrate the great Weather Underground and its great API service for autocomplete name searches for weather (and hurricane) information. Why bother? Well, can you not envisage a user using that Ajax functionality of yesterday’s Window SessionStorage Client Versus Server Ajax Tutorial as a trip planner, perhaps, or as a “checking up on relatives overseas” tool, perhaps? And not all the capital cities are timezone places, and so for some of those we can use Weather integration to still show apt online information when click/touching a Countries Report row. Speaking of this “row”, we make an improvement whereby on a first click of a right hand (Country) row cell, that cell is not initially a contenteditable=”true” one (that may frustrate showing the keyboard on mobile, when most likely it was the row touch intended), but then becomes a contenteditable=”true” cell henceforth.

    As a user experience improvement for “trip planners” perhaps, we allow the user to alphabetically sort the presented select (dropdown) element entries …


    var firstopt='';
    var wasopts='';
    var restopts='';

    function readyitforsort(iselid) {
    var optsare=[];
    var huhisel=document.getElementById(iselid).innerHTML;
    var huhsopts=huhisel.split('</option>');
    for (var ihuh=0; ihuh<huhsopts.length; ihuh++) {
    if (huhsopts[ihuh].trim() != '') {
    if (firstopt == '') {
    firstopt=huhsopts[ihuh] + '</option>';
    } else {
    wasopts+=huhsopts[ihuh].replace('option ','option data-ih="' + (huhsopts[ihuh].split('>')[eval(-1 + huhsopts[ihuh].split('>').length)] + '" ')) + '</option>';
    optsare.push(huhsopts[ihuh].replace('option ','option data-ih="' + (huhsopts[ihuh].split('>')[eval(-1 + huhsopts[ihuh].split('>').length)] + '" ')) + '</option>');
    }
    }
    }
    optsare.sort();
    for (var jhuh=0; jhuh<optsare.length; jhuh++) {
    restopts+=optsare[jhuh];
    }
    }

    … controlled by a new dropdown in the left hand column header cell.

    We also allow the user to move the iframe element with some positioning emoji buttons near the “Close” button one (of yesterday’s work).

    Into the future, too, we’ll have more to say regarding the germination of an idea “to allow a mobile onmouseover simulator (of sorts)” be to allow the user to perform a swipe across an individual HTML element of interest on mobile platforms (ie. harness ontouchmove event) as per (so far) … kicked off by “<body onload=” setTimeout(athn, 5000); “>” …


    var last24='';
    var rectdc;

    function nodivalert() {
    document.getElementById('divalert').style.display='none';
    document.getElementById('divalert').style.zIndex='-456';
    document.getElementById('divalert').style.left=('-' + rectdc.left).replace('px','') + 'px';
    document.getElementById('divalert').style.top=('-' + rectdc.top).replace('px','') + 'px';
    }

    function ourdivalert(inmsg) {
    document.getElementById('divalert').style.position='absolute';
    document.getElementById('divalert').style.left=('' + rectdc.left).replace('px','') + 'px';
    document.getElementById('divalert').style.top='' + eval(-80 + eval(('' + rectdc.top).replace('px',''))) + 'px';
    document.getElementById('divalert').style.backgroundColor='#e0e0e0';
    document.getElementById('divalert').style.display='block';
    document.getElementById('divalert').style.zIndex='456';
    document.getElementById('divalert').style.opacity='0.8';
    document.getElementById('divalert').style.padding='5px 5px 5px 5px';
    document.getElementById('divalert').innerHTML=inmsg + '<br><br><input type=button value=Close onclick=nodivalert();></input>';
    setTimeout(nodivalert,9000);
    }

    function athn() {
    rectdc=document.getElementById('dc').getBoundingClientRect();
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('dc').ontouchmove=function(event) { if (last24.substring(0,eval(-1 + last24.length)) == event.target.title.substring(0,eval(-1 + event.target.title.length))) { last24=last24; } else { last24=event.target.title; ourdivalert(event.target.title); } }
    } else {
    document.getElementById('dc').onmousemove=function(event) { if (last24.substring(0,eval(-1 + last24.length)) == event.target.title.substring(0,eval(-1 + event.target.title.length))) { last24=last24; } else { last24=event.target.title; ourdivalert(event.target.title); } }
    }
    }

    … working with the new HTML …


    <div id=divalert></div>
    </body>
    </html>

    … to try to allow the “explainer of an element” advantages non-mobile platforms have for hovering over an HTML element with a title attribute filled in.

    And so, yet again, see the changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link’s new Weather integration functionality. It caused the changed colour_wheel.html‘s colour wheel (at this live run link) to be affected (by integrations “up”).


    Previous relevant Window SessionStorage Client Versus Server Ajax Tutorial is shown below.

    Window SessionStorage Client Versus Server Ajax Tutorial

    Window SessionStorage Client Versus Server Ajax Tutorial

    We have a few “clientside chestnuts” to use with our current Capital City Find Matching Country Report web application project today, those being …

    • Ajax functionality, kicked off by an “onclick” event set of logic, allowing mobile platforms to also have a look in (the look in that they miss when the event logic is off the “onmouseover” event)
    • iframe and its …
      1. srcdoc attribute (“content” alternative to src “url” attribute) … along with, and crucially needing (because srcdoc ignores its own document.body onload goings on, that we need the “Iframe Client Pre-Emptive” methods below to circumvent) the …
      2. onload event opportunity of an iframe element (we group into “Iframe Client Pre-Emptive” methods, here)

    … adding onto yesterday’s Window SessionStorage Client Versus Server Canvas Tutorial.

    It’s not that involved with the Ajax work today, given that there are no cross-domain issues, though there are cross-protocol (SSL https: versus non-SSL http:) issues to be careful about. Those can be addressed because the web application is recalled to present its “Country Report” and that is the opportunity to check on protocol navigation requirements.

    Along the way, we also make this happen for the user on …

    • click/touching a table row … it sets off new “tr” (table row) element logic calling our (inhouse) Timezone and Wikipedia Place Information helper (HTML) via Ajax (so not leaving the webpage) … and because of place name oddities we allow for …
    • “td” (table cell) element user amendments by setting their contenteditable attributes to “true” (since fixed, but we found the Timezone Europe/Tirane pointing at Tirane in Albania used to be spelt “Tirana”)

    … that latter methodology normally a technique we apply to “div” elements (so, there you are!)

    Also used are “overlay” techniques, two of the “usual suspects” here coming into play, to present to the “Ajax content to srcdoc iframe arrangements” …

    Yet again, see the changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link’s new “Ajax” functionality.


    Previous relevant Window SessionStorage Client Versus Server Canvas Tutorial is shown below.

    Window SessionStorage Client Versus Server Canvas Tutorial

    Window SessionStorage Client Versus Server Canvas Tutorial

    Yesterday’s Window SessionStorage Client Versus Server Share Tutorial dealt with ascii text clipboard copy assisted sharing options with our current Capital City Find Matching Country Report web application project. This suited both Email and SMS share options we coded for, but today’s extension of functionality from “ascii text” data to “graphical data” only suits Email sharing. The other caveat with our work is that no serverside (for us, PHP) help is allowed, so no PHP mail here.

    What comes into play with a “graphical data” clientside (only) sharing approach? It will not surprise many readers that, for us, it involves …

    • canvas element … converting HTML table outerHTML “ascii text” data … via …
    • canvas drawing methods “[canvasContext].strokeRect()” and “[canvasContext].strokeText()” via “[cellElement].getBoundingClientRect()” … to convert that canvas element content via …
    • [canvasElement].toDataURL() … to an …
    • img element nested in a div contenteditable=true element … so as to hook in with today’s very useful helper link, thanks … use …

    • function tabletoclipboard(canvas) { // thanks to https://stackoverflow.com/questions/27863617/is-it-possible-to-copy-a-canvas-image-to-the-clipboard
      var img = document.createElement('img');
      img.src = canvas.toDataURL();

      var div = document.createElement('div');
      div.contentEditable = true;
      div.appendChild(img);
      document.body.appendChild(div);

      // do copy
      SelectText(div);
      document.execCommand('Copy');
      document.body.removeChild(div);
      }

      function SelectText(element) { // thanks to https://stackoverflow.com/questions/27863617/is-it-possible-to-copy-a-canvas-image-to-the-clipboard
      var doc = document;
      if (doc.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
      } else if (window.getSelection) {
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(element);
      selection.removeAllRanges();
      selection.addRange(range);
      }
      }
    • to leave the user’s device’s clipboard containing a useful table (with linework) … ready to …
    • paste into an email body section

    … sharing off to an emailee collaborator.

    Again, see the changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link’s new “Email Table” button functionality.


    Previous relevant Window SessionStorage Client Versus Server Share Tutorial is shown below.

    Window SessionStorage Client Versus Server Share Tutorial

    Window SessionStorage Client Versus Server Share Tutorial

    Yesterday’s Window SessionStorage Client Versus Server Tutorial has been amended today for two new sharing and collaboration options, those being …

    • email
    • SMS

    … but you may well be familiar with the restrictions on email and SMS client (program) approaches to this, coming from HTML “a” link “mailto:” and “sms:” href property prefixes respectively. We’re going to need help with the 800 odd character (length) restrictions with the (resultant) web address (bar) URL, but what? How about working off the great advice of this wonderful link, thanks, to copy what we’d have assembled into an ascii text Report into the characters contained by the user’s device’s clipboard?


    function copytoclipboard(str) { // thanks to https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
    var el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    }

    An issue that springs up here using such clipboard ascii text content, whenever you get the Font choice given to you, pick a monospaced Font like Courier New or “Fixed Width”.

    See the changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link’s new sharing functionality.


    Previous relevant Window SessionStorage Client Versus Server Tutorial is shown below.

    Window SessionStorage Client Versus Server Tutorial

    Window SessionStorage Client Versus Server Tutorial

    Sometimes it’s the case at this blog that we’d like to introduce a new topic, but do not do so, because we cannot show any real world (or real application) use of that concept. So it has been, up until now, with the concept of (web browser) window (object) sessionStorage property. But yesterday’s Window LocalStorage Client Versus Server Primer Tutorial represented an opportunity akin to when Haley’s Comet gets at its closest to the Earth … while you see a chance, take it … chance because of that nuance whereby we were not trying to store data for any other purpose than passing data onto …

    1. a known entity … ie. same web application … at …
    2. a known time … ie. immediately

    … two conditions that make the code design “marginally” more ideal for the window object property concept of sessionStorage rather than localStorage, in that any …


    localStorage.removeItem([knownLocalStorageName]);

    … becomes superfluous as with sessionStorage data will disappear between web browser sessions, anyway.

    We offer this new concept as a non-default option of a select (dropdown) element replacement to the h1 element hardcoding “localStorage” with the changed wls_vs_php.htm Capital City Find Matching Country Report live run. The other nuance of difference with sessionStorage usage is that in the document.body onload event logic, we may as well (as part of other changes) pre-emptively look for, and if there, respond to, any found sessionStorage data points, even without the user having flagged it specifically


    var datamode='localStorage';

    function checkforreport() {
    var divcont='';
    var dcaps, dctys, idis;
    if (getcapitals == 'localStorage') {
    if (window.localStorage) {
    getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(/\+/g,' ');
    localStorage.removeItem('wls_vs_php_capitals');
    } else {
    getcapitals='';
    }
    } else if (getcapitals == 'sessionStorage') {
    document.getElementById('smode').value=getcapitals;
    datamode=getcapitals;
    if (window.sessionStorage) {
    getcapitals=decodeURIComponent(sessionStorage.getItem('wls_vs_php_capitals')).replace(/\+/g,' ');
    } else {
    getcapitals='';
    }
    }
    else if (getcapitals == '' && window.sessionStorage) {
    getcapitals=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_capitals')).replace(/^null$/g,'')).replace(/\+/g,' ');
    if (getcapitals != '') {
    document.getElementById('smode').value='sessionStorage';
    datamode='sessionStorage';
    }
    }

    if (getcountries == 'localStorage') {
    if (window.localStorage) {
    getcountries=decodeURIComponent(localStorage.getItem('wls_vs_php_countries')).replace(/\+/g,' ');
    if (getcapitals.replace('localStorage','') != '' && getcountries.replace('localStorage','') != '') { document.getElementById('myh1').innerHTML+=' <font size=1>... yes, it was needed</font>'; }
    localStorage.removeItem('wls_vs_php_countries');
    } else {
    getcountries='';
    }
    } else if (getcountries == 'sessionStorage') {
    if (window.sessionStorage) {
    getcountries=decodeURIComponent(sessionStorage.getItem('wls_vs_php_countries')).replace(/\+/g,' ');
    if (getcapitals.replace('sessionStorage','') != '' && getcountries.replace('sessionStorage','') != '') { document.getElementById('myh1').innerHTML+=' <font size=1>... yes, it was needed</font>'; }
    } else {
    getcountries='';
    }
    }
    else if (getcountries == '' && document.getElementById('smode').value == 'sessionStorage' && window.sessionStorage) {
    getcountries=decodeURIComponent(('' + sessionStorage.getItem('wls_vs_php_countries')).replace(/^null$/g,'')).replace(/\+/g,' ');
    if (getcountries != '') {
    document.getElementById('smode').value='sessionStorage';
    datamode='sessionStorage';
    }
    }

    if (getcapitals != '' && getcountries != '') {
    divcont='<table border=5 style="width:95%;vertical-align:top;background-color:white;"><tr style=background-color:#f0f0f0;"><th>Capital</th><th>Country</th></tr></table>';
    dcaps=getcapitals.split('|');
    dctys=getcountries.split('|');
    for (idis=0; idis<dcaps.length; idis++) {
    divcont=divcont.replace('</table>', '<tr><td>' + dcaps[idis] + '</td><td>' + dctys[idis] + '</td></tr></table>');
    }
    document.getElementById('dreport').innerHTML=divcont;
    }
    document.getElementById('smode').value=datamode;
    }

    Which beggars the question “What are the differences between sessionStorage and localStorage?” A quick reading might surmise that “the latter has an expiration date”. We leave you with an open ended Google search so that you may extend your readings on this.


    Previous relevant Window LocalStorage Client Versus Server Primer Tutorial is shown below.

    Window LocalStorage Client Versus Server Primer Tutorial

    Window LocalStorage Client Versus Server Primer Tutorial

    Even though we rave on a lot about serverside PHP and its $_POST method=POST (versus HTML/Javascript recipient via ? and & argument $_GET method=GET scenario) data length advantages as the recipient of an HTML form method=POST set of data that could be sizeable, we’ve just realized that there is a client Javascript and window.localStorage methodology that may help alleviate the need to involve PHP (and any other serverside intervention) on occasions.

    Hint: Yes, we’ve raved on about this too?! Does the blog posting title give it away? Okay, yes, it should read “localStorage”, but thought we’d gone past such juvenile finickiness since the Whac-A-Mole controversy of 1st December 2019 (or even The Great Tea Trolley Disaster of ’67, we daresay).

    It can even use a “self-destruct” approach to the use of this “localStorage” on having used it because …

    • the web application knows who is using it (localStorage) … and on having accessed and read it …
    • the web application knows it (localStorage) is of no use to any other user (in this web application’s case, at least)

    … which is very pleasing for a Land Surveyor who likes to leave cow paddocks as they’ve seen them so to speak. Except it’s like having a ten tonne truck worth of data access in amongst the cow pats when having access to “localStorage” (or PHP), rather than a little piddle of calf wee (wee Metcalfes know a thing or two about these things!) data access of ? and & HTML/Javascript URL arguments (or even if we were to use HTTP Cookies).

    It’s not as if we all have access to serverside language usage, though we do, because we really like PHP and MAMP and Apache/PHP/MySql web servers (and have arranged our development environment accordingly), but what if you are starting out in web development, and still want to allow for sizeable chunks of data with your web applications? Huh? Huh?! See the possibilities? Try our proof of concept wls_vs_php.html Capital City Find Matching Country Report live run, and highlight a whole swathe of (multiple mode) dropdown option Capital Cities holding down the shift key before pressing the yellow “Report” button. If the URL ends up as …

    https://rjmprogramming.com.au/HTMLCSS/wls_vs_php.html?capitals=localStorage&countries=localStorage

    that’s because the web application’s …


    function analyze() {
    var purl=document.URL.split('#')[0].split('?')[0] + '?capitals=' + encodeURIComponent(document.getElementById('capitals').value) + '&countries=' + encodeURIComponent(document.getElementById('countries').value);
    if (purl.length > 800) {
    if (phpexists) {
    document.getElementById('myform').method='POST';
    document.getElementById('myform').action='./wls_vs_php.php';
    } else if (window.localStorage) {
    localStorage.setItem('wls_vs_php_countries', encodeURIComponent(document.getElementById('countries').value));
    localStorage.setItem('wls_vs_php_capitals', encodeURIComponent(document.getElementById('capitals').value));
    document.getElementById('capitals').value='localStorage';
    document.getElementById('countries').value='localStorage';
    location.href=document.URL.split('#')[0].split('?')[0] + '?capitals=' + encodeURIComponent(document.getElementById('capitals').value) + '&countries=' + encodeURIComponent(document.getElementById('countries').value);

    return false;
    }
    }
    return true;
    }

    … HTML form onsubmit event logic …

    1. discovered no PHP web application existant (via Client Pre-emptive Iframe techniques) … and …
    2. discovered (in a sanity check feeling way) that to go down the proposed HTML form method=GET approach was risking a …

      HTTP 414 "Request URI too long"

      … web browser error … and that …
    3. localStorage was a known web browser piece of functionality
    4. … and so as per our localStorage logic we …

    5. back out of the default HTML form method=GET navigation setup of the web application in favour of …
      • storing that data into localStorage
      • substituting into the URL ? and & arguments the hardcoding “localStorage” (and in so doing, getting back under the HTTP 414 “Request URI too long” limitation, piecing together (what amounts to) …
        location.href=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?capitals=localStorage&countries=localStorage’;)
        … that on a recall to this same web application a …
      • document.body onload event piece of Javascript logic checks the localStorage for its incoming Capital City Country Report data, as per …

        var phpexists=false;
        var getcapitals=location.search.split('capitals=')[1] ? decodeURIComponent(location.search.split('capitals=')[1].split('&')[0]).replace(/\+/g,' ') : '';
        var getcountries=location.search.split('countries=')[1] ? decodeURIComponent(location.search.split('countries=')[1].split('&')[0]).replace(/\+/g,' ') : '';

        function checkforreport() {
        var divcont='';
        var dcaps, dctys, idis;
        if (getcapitals == 'localStorage') {
        if (window.localStorage) {
        getcapitals=decodeURIComponent(localStorage.getItem('wls_vs_php_capitals')).replace(/\+/g,' ');
        localStorage.removeItem('wls_vs_php_capitals');
        } else {
        getcapitals='';
        }
        }
        if (getcountries == 'localStorage') {
        if (window.localStorage) {
        getcountries=decodeURIComponent(localStorage.getItem('wls_vs_php_countries')).replace(/\+/g,' ');
        if (getcapitals.replace('localStorage','') != '' && getcountries.replace('localStorage','') != '') { document.getElementById('myh1').innerHTML+=' <font size=1>... yes, it was needed</font>'; }
        localStorage.removeItem('wls_vs_php_countries');
        } else {
        getcountries='';
        }
        }

        if (getcapitals != '' && getcountries != '') {
        divcont='<table border=5 style="width:95%;vertical-align:top;background-color:white;"><tr style=background-color:#f0f0f0;"><th>Capital</th><th>Country</th></tr></table>';
        dcaps=getcapitals.split('|');
        dctys=getcountries.split('|');
        for (idis=0; idis<dcaps.length; idis++) {
        divcont=divcont.replace('</table>', '<tr><td>' + dcaps[idis] + '</td><td>' + dctys[idis] + '</td></tr></table>');
        }
        document.getElementById('dreport').innerHTML=divcont;
        }
        }

        … the localStorage.removeItem() representing that “self-destruct” nuance we were talking about before

    We may well use this methodology in future projects, and hope it has been of some little interest to you as well?!

    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.


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

Apple iOS Control Centre Tutorial

Apple iOS Control Centre Tutorial

Apple iOS Control Centre Tutorial

For many years now on any Apple iOS iPhone or iPad device we’d been around, we’d keep forgetting the relationship between a …

  • top right swipe down (or bottom swipe up) gesture (as we talked about with Apple iPad Gesture Settings Tutorial too) … and the …
  • Control Centre … as the proper terminology for that useful …
  • menu … that appears …

… of immeasurable use to us being the Torch icon. Just great for rounding up errant Golden Retrievers picking 22:30 as the time to mosey down to the backyard and sniff the breezes!

The Control Centre menu can look different in different circumstances, but off the home menu, it is at it’s most complete. Of course we can not do all the things to do it justice, the way Apple can …

And did you know, in Settings you can stop the swipe means by which you bring up the Control Centre menu? Perhaps this is useful if you’re always finding yourself triggering it accidentally, somehow?!


Previous relevant Apple iPad Gesture Settings Tutorial is shown below.

Apple iPad Gesture Settings Tutorial

Apple iPad Gesture Settings Tutorial

We do a lot of screenshotting here at RJM Programming, mainly on …

  • Apple macOS MacBook Airs and Pros … where control-command-shift-3 (after we were keen on Grab) has done us nicely for years now … and …
  • Apple iOS … via Home button “and another” …

… we have a certain “muscle memory thing” going on about. But when we presented Bluetooth iPad Keyboard and Case Document Editing Tutorial and had a stand habitating our iPad around here, perhaps there was interference to that “muscle memory” arrangement … poor Apple accessory peoples! Anyway, it made us look around our iPad’s …


Settings -> General -> Gestures

… settings, and we were introduced to a whole new (what have I been missing) wooooorrrrllllddd, as visiting Apple settings areas is apt to do.

We use diagonal swipes all the time on iPhone and iPad for the Torch, but you can configure bottom diagonal swipes, either or both from the left or right, to equate to …

  1. Quick Note
  2. Screenshot

And so, that gets around our button based screenshotting via muscle memory disappearance issue to dissolve like molasses in hot water (ie. it will take a while to sink in, and will need practice).

Toggling through the apps open we’ve been handling, on …

  • iPhone … via a swipe from the bottom and swivel … and with the …
  • iPad … via a double tap of Home button … but …

… and, didn’t you just know there’d be a small flat mountain in the desert “but” here?! On our iPad …


Settings -> General -> Gestures

… place we had a …

Four & Five Finger Swipe

… “not on”, and we thought “far fetched”, but tried it toggling through the open apps, and we got a “now we’re sold” feeling trying it out!

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

Denial of Service Attack Survival Defence Tutorial

Denial of Service Attack Survival Defence Tutorial

Denial of Service Attack Survival Defence Tutorial

When there is a rush for online ticket sales you will often see the symptoms of a Denial of Service attack

In computing, a denial-of-service attack (DoS attack) is a cyberattack in which the perpetrator seeks to make a machine or network resource unavailable to its intended users by temporarily or indefinitely disrupting services of a host connected to a network. Denial of service is typically accomplished by flooding the targeted machine or resource with superfluous requests in an attempt to overload systems and prevent some or all legitimate requests from being fulfilled.[1] The range of attacks varies widely, spanning from inundating a server with millions of requests to slow its performance, overwhelming a server with a substantial amount of invalid data, to submitting requests with an illegitimate IP address.

… of a website. That is an example of …

  • business as usual attack … but there are also …
  • malicious organized attacks

… that can happen too. We have, quite forlornly, in the past, tried to block access to our website of IP addresses an Apache Status report can advise you regarding who is sending a flood of suspicious calls. But these days you get “banks of such IP addresses” where the first three numbers are the same and different fourth number IP addresses collude to flood the website targeted … it is like the guacamole game trying to contend with the issue this way. Even so, perhaps later, we will resort to an IP address deny approach?!

Okay, so what else can we try?

Maybe you noticed it in amongst the slides of WordPress Recent Posts Korn Shell Tutorial‘s animated GIF … anyone, anyone?

Yes, Alecx, did you notice anything?

The police have kidnapped my children!

Okay, now, we’ve talked about that before, Alecx, yes?! Anybody else? Yes, Aleck, did you see something?

The yellow shading up above, quite patently, is designed to be …

  1. an annotated version of a slide from WordPress Recent Posts Korn Shell Tutorial‘s animated GIF
  2. tarted up
  3. in some puerile attempt
  4. to make us think jealousy, deceit, cowardice, and even illness are contributing to
  5. the police having kidnapped her children!

Well … oh, is that the bell?! We’ll take this up again tomorrow! But meanwhile, back at some ranch somewhere … over to you, admin

We’re currently trying a Korn Shell script Watchdog (ie. automated) approach that …

  1. seeks to have the Apache service survive long enough (that being a minute of crontab time) …
  2. during such a DoS attack … whereby …
  3. our Korn Shell scripting … can access …
  4. Linux system …

    ps -ef

    … process reporting tool …
  5. in this way …

    if [ "`ps -ef | grep 'httpd' | wc -l | wc -c`" == "4" ]; then
    /usr/local/cpanel/scripts/restartsrv_httpd
    fi
  6. that restarts the Apache httpd service (no matter what) should 100 or more connections to the website occur when the crontab Korn Shell script (each minute) re-examines the web server situation

Sadly, this disrupts what a non-malicious user may be doing when a DoS attack is detected in the way above. But it means an automated approach can make “normal transmission” occur down the line.


Previous relevant WordPress Recent Posts Korn Shell Tutorial is shown below.

WordPress Recent Posts Korn Shell Tutorial

WordPress Recent Posts Korn Shell Tutorial

Today we’re rearranging how our WordPress.org blog Recent Posts widget images are created via crontab and curl in a scheduled way on this newer Apache/PHP/MySql Linux web server, as we talked about with WordPress Recent Posts Navigation Issue Tutorial too.

For a reason still unclear to us the recent-posts-2.php exec call of ImageMagick convert creation of thumbnails failed, after a failure creating zero length non-thumbnail images (fixed now using PHP copy rather than file_put_contents), though it works on the command line in a Linux environment with that same priviledged username.

Especially given that thumbnail usage is optional in the WordPress Recent Posts functionality, rather than spend more time unhappy, we’re happy if a beginning to Korn Shell (which the PHP now writes in a way so that the execution of the Korn Shell causes it’s self destruction) involvement …

… within the crontab purview.

Hopefully we’ll have good news tomorrow that it worked as a new approach.


Previous relevant WordPress Recent Posts Navigation Issue Tutorial is shown below.

WordPress Recent Posts Navigation Issue Tutorial

WordPress Recent Posts Navigation Issue Tutorial

Back to the topic of “WordPress Blog Recent Posts” (and its relationship to the RJM Programming Landing Page) last referenced at WordPress Recent Posts Widget Caching Issues Tutorial, is today’s fix to an iPhone usage hashtag navigational annoyance that would leave the Blog Title lose a bit of its visibility up the top when navigated to via the RJM Programming Landing Page top left “Recent Posts” thumbnail images.

The fix saw us add to the existant “#post-” prefixed hashtag navigation with our “#andabit=-70” “double hashtagging” as mentioned in WordPress Blog Hashtag Navigation Return Onmouseover Tutorial. It took us a while to track down where to intervene to achieve this, and we eventually cottoned onto the way that if that RJM Programming Landing Page top left “Recent Posts” iframe container (ie. zero.html) of those thumbnail images could involve URLs suffixed by “#andabit=-70” we would rid the hashtag navigation of that annoyance

<?php

file_put_contents(dirname(__FILE__) . "/zero.html",
str_replace(" href='", ' href="',
str_replace("#andabit=-7x' title='","#andabit=-70' title='",
str_replace("0' title='","0#andabit=-7x' title='",
str_replace("1' title='","1#andabit=-7x' title='",
str_replace("2' title='","2#andabit=-7x' title='",
str_replace("3' title='","3#andabit=-7x' title='",
str_replace("4' title='","4#andabit=-7x' title='",
str_replace("5' title='","5#andabit=-7x' title='",
str_replace("6' title='","6#andabit=-7x' title='",
str_replace("7' title='","7#andabit=-7x' title='",
str_replace("8' title='","8#andabit=-7x' title='",
str_replace("9' title='","9#andabit=-7x' title='",
str_replace("/wordpress/", "/ITblog/", $htmlis))
))))))))))));

?>

… reflected by a changed recent-posts-2.php WordPress “Recent Posts” PHP processing codeset.

Then that “#andabit=-70” propagates through to a “double hashtagging” scenario you can see with today’s tutorial picture.


Previous relevant WordPress Recent Posts Widget Caching Issues Tutorial is shown below.

WordPress Recent Posts Widget Caching Issues Tutorial

WordPress Recent Posts Widget Caching Issues Tutorial

The WordPress blog you are reading, with the TwentyTen theme, has a useful “widget” (contained unit of functionality on the webpage that WordPress knows about) called “Recent Posts”, which we’ve had a lot of fun over the years, working with, but “working against”, a tad (because the issue is not exactly mission critical, and) if you are not careful, are the combination of …

  • the content needed to be up to date at all times would need to counter the once a day crontab/curl arrangements (that WordPress does not know about) for the new posting each day … versus …
  • the caching of the web browser used can circumvent the up to date correspondence of …
    1. “a” link nesting … of …
    2. “img” blog posting thumbnail

… in two scenarios that we have discovered …

  1. you arrive back at a blog posting webpage after a crontab/curl sequence has happened … the caching causes the “img” and “a” not to correspond, at least on that first such occasion, sometimes …
  2. you arrive off the Landing Page (after a crontab/curl sequence has happened) and up the top left you click on a blog posting that isn’t the latest, and you visited the day before, the caching from that day before causes the “img” and “a” not to correspond, at least on that first such occasion, sometimes

Today’s animated GIF presentation represents a warts and all (occasionally mistaking a Javascript issue for a CSS one) showing of the troubleshooting and investigation of such caching WordPress Recent Posts issues.

Central to the solutions are the idea that the crontab/curl work leaves behind a zero.html “report webpage” we can effectively test the caching against as like a “sanity test” … like. As “caching” is a “client” thaing whereas the PHP of the TwentyTen theme code “header.php” happens is taking place at the “server” end of thaings, what can be the “conduit” between these two woooooorrrrrrllllllldddds …

<?php echo ”

<iframe onload='rptds(this);' style='display:none;' src='//www.rjmprogramming.com.au/PHP/zero.html<?php echo "?rand=" . rand(0,198765432); ?>'></iframe>

“; ?>

… placed immediately after the “body” element definition. That Javascript “onload” event logic sets up some global arrays we’ll use later …

<?php echo ”

var nothanks=false, findthing="", rptdlist=[], rptdhref=[], rptdtitle=[];

function rptds(iois) {
var thistdis='';
if (iois != null) {
var xaaconto = (iois.contentWindow || iois.contentDocument);
if (xaaconto != null) {
if (xaaconto.document) { xaaconto = xaaconto.document; }
if (xaaconto.body != null) {
var ltds=xaaconto.body.innerHTML.split('<td');
for (var iltds=1; iltds<ltds.length; iltds++) {
thistdis='<td' + ltds[iltds].split('</td>')[0] + '</td>';
rptdlist.push(thistdis);
if (thistdis.indexOf(' href="') != -1) {
rptdhref.push(thistdis.split(' href="')[1].split('"')[0]);
}
if (thistdis.indexOf(' title="') != -1) {
rptdtitle.push(thistdis.split(' title="')[1].split('"')[0]);
}
}
}
}
}
}

“; ?>

… so that changed code in Javascript “function rptwo” as below …

<?php echo ”

function rptwo() {
var tworp=document.getElementById('recent-posts-2');
if (tworp != null) {
if (tworp.innerHTML.indexOf('<u' + 'l>') != -1) {
var ihs=tworp.innerHTML.split("</a>");
tworp.innerHTML = tworp.innerHTML.replace('<u' + 'l>', '<u' + 'l class="iconlist">').replace(/a href/g,'a style="border:1px solid rgba(0,127,0,0.6);background: rgba(0,255,0,0.6); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.6), rgba(255,255,0,0.6)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.5), rgba(255,255,0,0.6)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.6), rgba(255,255,0,0.6)); background: linear-gradient(to bottom right, rgba(0,255,0,0.6), rgba(255,255,0,0.6));" title="Go to tutorial" onclick="if (1 == 2) { findthing=' + "''" + '; } nothanks=true;" href');
var eight=new Array("one", "two", "three", "four", "five", "six", "seven", "eight");
var ieight;
tworp.innerHTML = tworp.innerHTML.replace(/<\/a>/g, "</a><img class='iiconlist' src='//www.rjmprogramming.com.au/wordpress/transparent.png' style='z-index:3;margin-left:0px;margin-top:0px;opacity:0.2;width:140px;height:100px;box-shadow:rgba(0,0,255,0.2) 2px 2px 2px 2px inset;' onmouseover='getRpnow();' onmouseout='yehBut();' ontouchstart='getRpnow();' ontouchend='yehBut();' title=' ... welcome to the long hover functionality that shows Blog Post regarding Recent Post images'>");
for (ieight=0; ieight<eight.length; ieight++) {
if (ihs.length > eval(0 + ieight)) {
if (rptdtitle.length > ieight) {
if (ihs[eval(0 + ieight)].split(">")[eval(-1 + ihs[eval(0 + ieight)].split(">").length)] != rptdtitle[ieight]) {
tworp.innerHTML = tworp.innerHTML.replace(ihs[eval(0 + ieight)], ihs[eval(0 + ieight)].replace(' href=', ' href="' + rptdhref[ieight].replace('?p=', '?rx=' + Math.floor(Math.random() * 198765434) + '&p=') + '" data-href=').replace('>' + ihs[eval(0 + ieight)].split(">")[eval(-1 + ihs[eval(0 + ieight)].split(">").length)] + '<', '>' + rptdtitle[ieight] + '<'));
tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li title='Cut to the Chase' onclick=' findthing=\"" + rptdtitle[ieight] + "\"; setTimeout(rplater,1000); nothanks=false; ' class='" + eight[ieight] + "'>");
} else {
tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li title='Cut to the Chase' onclick=' findthing=\"" + ihs[eval(0 + ieight)].split(">")[eval(-1 + ihs[eval(0 + ieight)].split(">").length)] + "\"; setTimeout(rplater,1000); nothanks=false; ' class='" + eight[ieight] + "'>");
}
} else {

tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li title='Cut to the Chase' onclick=' findthing=\"" + ihs[eval(0 + ieight)].split(">")[eval(-1 + ihs[eval(0 + ieight)].split(">").length)] + "\"; setTimeout(rplater,1000); nothanks=false; ' class='" + eight[ieight] + "'>");
}
} else {
tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li class='" + eight[ieight] + "'>");
}
//tworp.innerHTML = tworp.innerHTML.replace("<img class=", "<img onclick='clickaid(\"a" + eight[ieight] + "\");' class=").replace("<img title=\" ", "<img onclick=\"clickaid('a" + eight[ieight] + "');\" title=\"");
tworp.innerHTML = tworp.innerHTML.replace("<img class=", "<img onclick=\"if (1 == 2) { findthing=''; } nothanks=true; clickaid('a" + eight[ieight] + "');\" class=").replace("<img title=\" ", "<img onclick=\"clickaid('a" + eight[ieight] + "');\" title=\"");
}
}
}
}

“; ?>

… helps resolve the second issue’s mismatched data sources which caching may exacerbate.

What about the first issue? Well, we went down the route of thinking this was bound to be a Javascript scripting issue and went through the code with that in mind, until searching for “one.jp” (I think it was) within “header.php” got us tweaked into realizing some of the CSS styling there was encouraging the cache to not let go of “img” “src” attributes. As we are more and more fond of doing these days, even for image URLs, we add some “get” “?” and/or “&” arguments to cause the web browser to go back to the source (and so, around the “cache”) to get its data, as per “header.php”‘s (changed)


<style>
li.one {
background-image: url('//www.rjmprogramming.com.au/PHP/one.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.two {
background-image: url('//www.rjmprogramming.com.au/PHP/two.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.three {
background-image: url('//www.rjmprogramming.com.au/PHP/three.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.four {
background-image: url('//www.rjmprogramming.com.au/PHP/four.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.five {
background-image: url('//www.rjmprogramming.com.au/PHP/five.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.six {
background-image: url('//www.rjmprogramming.com.au/PHP/six.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.seven {
background-image: url('//www.rjmprogramming.com.au/PHP/seven.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

li.eight {
background-image: url('//www.rjmprogramming.com.au/PHP/eight.jpg<?php echo "?rnd=" . rand(0,19876545); ?>');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}
</style>

Continuing in that long line of WordPress Recent Posts work you look over to your right (or down the bottom, for some mobile platforms) of the blog webpage for the relevant widget that has that relationship to the Landing Page as we last talked about with Landing Page WordPress Tags Primer Tutorial. There, you can see, we hope, more reliable correspondence of “a” to “img” data sources, in their rightful order, the catalyst for change being that once a day crontab/curl “inhouse” publishing of one WordPress blog post.


Previous relevant Landing Page WordPress Tags Primer Tutorial is shown below.

Landing Page WordPress Tags Primer Tutorial

Landing Page WordPress Tags Primer Tutorial

We’re hooking into our crontab/curl PHP overnight arrangements regarding Recent Posts to add in …

  • a once a day creation of a web server “tag cloud” HTML file … derived via …
  • WordPress blog widget “Tags” content

… that creates on the RJM Programming “Landing Page” a toggling arrangement between …

  • this new “tag cloud” content in an iframe “onload” event populating of a global variable divtc … within the Landing Page Javascript …

    var divtc='';

    function anticheckd(iois) {
    document.getElementById('divtagcloud').innerHTML='';
    }

    function checkd(iois) {
    if (iois != null) {
    var aconto = (iois.contentWindow || iois.contentDocument);
    if (aconto != null) {
    if (aconto.document) { aconto = aconto.document; }
    if (aconto.body != null) {
    divtc=aconto.body.innerHTML;
    if (divtc.indexOf(' class="tagcloud"') != -1) {
    setTimeout(divtctoggler, 8000);
    } else {
    document.getElementById('divtagcloud').innerHTML='';
    }
    }
    }
    }
    }

    function divtctoggler() {
    if (divtc != '') {
    if (document.getElementById('divtagcloud').innerHTML == '' || document.getElementById('divtagcloud').innerHTML.indexOf('<iframe ') != -1) {
    document.getElementById('topi').style.display='none';
    document.getElementById('divtagcloud').style.transformOrigin="30% 10%"; //zoom="0.75";
    document.getElementById('divtagcloud').style.transform="scale(0.5)"; //zoom="0.75";
    document.getElementById('divtagcloud').innerHTML=divtc;
    } else {
    document.getElementById('divtagcloud').innerHTML='';
    document.getElementById('topi').style.display='block';
    }
    setTimeout(divtctoggler, 15000);
    }
    }

    … supporting the new HTML …

    <div id=divtagcloud><iframe style='display:none;' onerror='anticheckd(this);' onload='checkd(this);' src='//www.rjmprogramming.com.au/PHP/divtagcloud.html'></iframe></div>

    … with …
  • existing Google Chart Pie Chart example of use

… in its “div widget” within the Landing Page HTML. As far as the crontab/curl PHP goes the changed recent-posts-2.php does its job of populating …

… via …

<?php

$classtagcloud=file_get_contents("https://www.rjmprogramming.com.au/ITblog/?p=14234");
$classtags=explode('<div class="tagcloud"', str_replace("http:","",str_replace("https:","",$classtagcloud)));
if (sizeof($classtags) > 1) {
file_put_contents(dirname(__FILE__) . '/divtagcloud.html', str_replace('<a ','<a target=_blank ','<html><body><div class="tagcloud"' . explode('</div>', $classtags[1])[0] . '</div></body></html>'));
}

?>

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