{"id":70975,"date":"2025-12-11T03:01:00","date_gmt":"2025-12-10T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=70975"},"modified":"2025-12-11T12:46:22","modified_gmt":"2025-12-11T02:46:22","slug":"php-wikipedia-list-better-modularized-scrolling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-list-better-modularized-scrolling-tutorial\/","title":{"rendered":"PHP Wikipedia List Better Modularized Scrolling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Wikipedia List Better Modularized Scrolling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/lighthouse_js_scroll_external.gif\" title=\"PHP Wikipedia List Better Modularized Scrolling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Wikipedia List Better Modularized Scrolling Tutorial<\/p><\/div>\n<p>Around here we really like the &#8230;<\/p>\n<blockquote><p>\ncloning of code\n<\/p><\/blockquote>\n<p> &#8230; concept.  Howevvvvvvverrr <font size=1>(and we think a but is needed for em-pha-sis)<\/font> when you are busy cloning, perhaps during the cloning in the current line of thinking, but while you are there, perhaps during the first such clone, think about, on the client-side of the work &#8230;<\/p>\n<ul>\n<li>what is going to be common &#8220;across the board&#8221; regarding client-side Javascript requirements &#8230;<\/li>\n<li>can that be, the sooner the better, be hived off into an external Javascript &#8230; which &#8230;<\/li>\n<li>all the clones call<\/li>\n<\/ul>\n<p>We wish, today, that we had done that more with our, albeit PHP <font size=1>(but even PHP will have a client-side to it)<\/font> suite of web applications in the Australian Lighthouses (via Wikipedia, thanks) suite we last talked about with <a title='PHP Wikipedia List Scrolling Tutorial' href='#phpwlst'>PHP Wikipedia List Scrolling Tutorial<\/a>.<\/p>\n<p>After the event, when there are lots of clones, as any such project, is the less than ideal scenario &#8220;second choice&#8221; option.  No worries, still and all, wherever you see it, it will be an improvement in modularization, to involve &#8230;<\/p>\n<ul>\n<li>common client-side (ie. Javascript) code &#8230; into a commonly called &#8230;<\/li>\n<li>single external Javascript file<\/li>\n<\/ul>\n<p>That way, going forward with new ideas later, it may be just the one external Javascript that will need changing to achieve some pretty cute modifications, we&#8217;re hoping, at a later date.<\/p>\n<p>And today&#8217;s two function transfer of Javascript concerned the &#8220;Animate&#8221; left hand cell emoji button workings.  Two matters improved upon were &#8230;<\/p>\n<ul>\n<li>as soon as animation is requested scrolling will be apparent, whereas in times past it would take too much time to start, in our opinion &#8230; and now &#8230;<\/li>\n<li>after <font color=blue>that scrolling takes place<\/font> we <font color=purple>reinclude those topmost HTML elements<\/font> so they do not get forgotten about &#8230;<br \/>\n<code><br \/>\n    <font color=blue>document.getElementById(\"td\" + curanim).scrollIntoView();<\/font> \/\/location.href=\"#td\" + curanim;<br \/>\n    <font color=purple>window.scrollTo(window.scrollX, 0);<\/font><br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; affecting one external Javascript file &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js---GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js---GETME\" rel=\"noopener\">australian_lighthouses.js<\/a> helping out our Wikipedia (thanks) interfacing <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\">Australian Lighthouses<\/a> web application &#8230; and &#8230;\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">Australian Lighthouses<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-------GETME\" title=\"Click picture\" rel=\"noopener\">australian_lighthouses.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-------GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php\" title=\"Click picture\" rel=\"noopener\">Australian Waterfalls<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php-------GETME\" title=\"Click picture\" rel=\"noopener\">australian_waterfalls.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php-------GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php\" title=\"Click picture\" rel=\"noopener\">Australian Dams<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php-------GETME\" title=\"Click picture\" rel=\"noopener\">australian_dams.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php-------GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php\" title=\"Click picture\" rel=\"noopener\">Australian Ports<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php-------GETME\" title=\"Click picture\" rel=\"noopener\">australian_ports.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php-------GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php\" title=\"Click picture\" rel=\"noopener\">Australian National Parks<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php-------GETME\" title=\"Click picture\" rel=\"noopener\">australian_parks.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php-------GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-list-better-modularized-scrolling-tutorial\/' rel=\"noopener\">New PHP Wikipedia List Better Modularized Scrolling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='phpwlst'>Previous relevant <a target=\"_blank\" title='PHP Wikipedia List Scrolling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-list-scrolling-tutorial\/' rel=\"noopener\">PHP Wikipedia List Scrolling Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Wikipedia List Scrolling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/lighthouse_js_scroll_align.jpg\" title=\"PHP Wikipedia List Scrolling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Wikipedia List Scrolling Tutorial<\/p><\/div>\n<p>We had occasion to revisit the &#8220;peer to peer&#8221; web application arrangements of the <a title='PHP Wikipedia List Genericization Tutorial' href='#phpwlgt'>PHP Wikipedia List Genericization Tutorial<\/a> thread of blog postings, and wondered whether its &#8230;<\/p>\n<p><button><br \/>\nMore &#8230; That a Way -&gt;<br \/>\n<\/button><\/p>\n<p> &#8230; button click event Javascript logic <i>window.scrollBy(100,0)<\/i> repercussions could be improved upon.  Why?  Well, within the &#8220;broad brush&#8221; design view of these web application webpages of &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;div align=center&gt;&lt;h1&gt; ... <font color=blue>menu type contents<\/font> ... &lt;\/h1&gt;&lt;\/div&gt;<br \/>\n&lt;table&gt;&lt;tr&gt;&lt;td&gt; ... <font color=darkgreen>scrollable individual cell place information pods<\/font> ... &lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<br \/>\n&lt;div align=center&gt;&lt;iframe&gt; ... <font color=purple>Google Chart Map Chart Iframe<\/font> ... &lt;\/iframe&gt;&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; too many clicks of that &#8220;More &#8230; That a Way -&gt;&#8221; button could result in <font color=blue>menu type contents<\/font> and <font color=purple>Google Chart Map Chart Iframe<\/font> disappearing from the user&#8217;s view, off to the left of screen.<\/p>\n<p>Thinking about solutions to this, our first thought was the use of CSS <i>position:absolute<\/i> but as we coded, we started to realize that would &#8230;<\/p>\n<ul>\n<li>shift the remaining <i>position:relative<\/i> <font color=darkgreen>scrollable individual cell place information pods<\/font> up to clash with <font color=blue>menu type contents<\/font> (re-)positioning<\/li>\n<li>the <i>div align=center<\/i> initial thinking above would mean the <font color=blue>menu type contents<\/font> and <font color=purple>Google Chart Map Chart Iframe<\/font> still disappear, albeit slower to disappear<\/li>\n<\/ul>\n<p> &#8230; but that &#8230;<\/p>\n<ul>\n<li>keeping the <i>position:relative<\/i> default &#8230; combined with &#8230;<\/li>\n<li>adjusted CSS style margin-left settings could match the amount of horizontal scrolling &#8230; and &#8230;<\/li>\n<li>make the <i>div align=center<\/i> be <i>div align=left<\/i> for first div and  be <i>div align=right<\/i> for last div &#8230; and &#8230;<\/li>\n<li>also increase the width of <i>&lt;div align=<strike>center<\/strike><sup>right<\/sup>&gt;<font size=1>&lt;iframe&gt; &#8230; <font color=purple>Google Chart Map Chart Iframe<\/font> &#8230; &lt;\/iframe&gt;<\/font>&lt;\/div&gt;<\/i> by the horizontal scrolling amount<\/li>\n<\/ul>\n<p> &#8230; was a better approach &#8230;<\/p>\n<p><code><br \/>\nvar lastscp=0;<br \/>\nvar lasthonex=0, lastiframex=0, lastdivw=0;<br \/>\n<br \/>\nfunction scrollchange() {<br \/>\n  \/\/document.title=('' + document.body.scrollLeft);<br \/>\n  var huhsc=eval('' + ('' + document.body.scrollLeft).replace('px',''));<br \/>\n  if (huhsc != 0) {<br \/>\n    if (lastscp != huhsc) {<br \/>\n      lastscp=huhsc;<br \/>\n      \/\/document.title='leftScrollPos=' + huhsc;<br \/>\n      if (1 == 1) {<br \/>\n      document.getElementsByTagName('div')[0].align='left';<br \/>\n      document.getElementsByTagName('div')[eval(-1 + document.getElementsByTagName('div').length)].align='right';<br \/>\n      document.getElementsByTagName('div')[eval(-1 + document.getElementsByTagName('div').length)].style.width='' + eval(huhsc + eval(('' + lastdivw).split('.')[0])) + 'px';<br \/>\n      document.getElementsByTagName('h1')[0].style.marginLeft='' + huhsc + 'px';<br \/>\n      document.getElementsByTagName('iframe')[0].style.marginLeft='' + huhsc + 'px';<br \/>\n      } else {<br \/>\n      document.getElementsByTagName('h1')[0].style.position='absolute';<br \/>\n      document.getElementsByTagName('h1')[0].style.left='' + eval(huhsc + eval(('' + lasthonex).split('.')[0])) + 'px';<br \/>\n      document.getElementsByTagName('h1')[0].style.top=('' + lasthonex).split('.')[1] + 'px';<br \/>\n      document.getElementsByTagName('iframe')[0].style.position='absolute';<br \/>\n      document.getElementsByTagName('iframe')[0].style.left='' + eval(huhsc + eval(('' + lastiframex).split('.')[0])) + 'px';<br \/>\n      document.getElementsByTagName('iframe')[0].style.top=('' + lastiframex).split('.')[1] + 'px';<br \/>\n      }<br \/>\n    }<br \/>\n  } else if (lastscp != huhsc) {<br \/>\n    \/\/document.title='leftScrollPos=' + huhsc;<br \/>\n      if (1 == 1) {<br \/>\n      document.getElementsByTagName('div')[0].align='left';<br \/>\n      document.getElementsByTagName('div')[eval(-1 + document.getElementsByTagName('div').length)].align='right';<br \/>\n      document.getElementsByTagName('div')[eval(-1 + document.getElementsByTagName('div').length)].style.width='' + eval(huhsc + eval(('' + lastdivw).split('.')[0])) + 'px';<br \/>\n      document.getElementsByTagName('h1')[0].style.marginLeft='' + huhsc + 'px';<br \/>\n      document.getElementsByTagName('iframe')[0].style.marginLeft='' + huhsc + 'px';<br \/>\n      } else {<br \/>\n    document.getElementsByTagName('h1')[0].style.position='absolute';<br \/>\n    document.getElementsByTagName('h1')[0].style.left='' + eval(huhsc + eval(('' + lasthonex).split('.')[0])) + 'px';<br \/>\n    document.getElementsByTagName('h1')[0].style.top=('' + lasthonex).split('.')[1] + 'px';<br \/>\n    document.getElementsByTagName('iframe')[0].style.position='absolute';<br \/>\n    document.getElementsByTagName('iframe')[0].style.left='' + eval(huhsc + eval(('' + lastiframex).split('.')[0])) + 'px';<br \/>\n    document.getElementsByTagName('iframe')[0].style.top=('' + lastiframex).split('.')[1] + 'px';<br \/>\n      }j<br \/>\n  } else if (lasthonex == 0 && lastiframex == 0) {<br \/>\n    var rectlis=document.getElementsByTagName('h1')[0].getBoundingClientRect();<br \/>\n    lasthonex=eval(('' + rectlis.left).split('.')[0] + '.' + ('' + ('' + rectlis.top).split('.')[0] + '.').replace('0.','1.').replace('.',''));<br \/>\n    rectlis=document.getElementsByTagName('iframe')[0].getBoundingClientRect();<br \/>\n    lastiframex=eval(('' + rectlis.left).split('.')[0] + '.' + ('' + ('' + rectlis.top).split('.')[0] + '.').replace('0.','1.').replace('.',''));<br \/>\n    rectlis=document.getElementsByTagName('div')[eval(-1 + document.getElementsByTagName('div').length)].getBoundingClientRect();<br \/>\n    lastdivw=eval('' + rectlis.width);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nsetInterval(scrollchange, 1000);<br \/>\n<\/code><\/p>\n<p> &#8230; which could be applied to three external Javascript files &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js--GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js--GETME\" rel=\"noopener\">australian_lighthouses.js<\/a> helping <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">Australian Lighthouses<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.js-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.js-GETME\" rel=\"noopener\">ireland_lighthouses.js<\/a> helping <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">Ireland Lighthouses<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.js-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.js-GETME\" rel=\"noopener\">new_zealand_lighthouses.js<\/a> helping <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">New Zealand Lighthouses<\/a><\/li>\n<\/ul>\n<p> .. to fulfill our wish to leave more relevant webpage visible to the user at all times with these web applications.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-php-wikipedia-list-genericization-tutorial\/' rel=\"noopener\">New PHP Wikipedia List Genericization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='phpwlgt'>Previous relevant <a target=\"_blank\" title='PHP Wikipedia List Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-list-genericization-tutorial\/' rel=\"noopener\">PHP Wikipedia List Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Wikipedia List Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.jpg\" title=\"PHP Wikipedia List Genericization Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Wikipedia List Genericization Tutorial<\/p><\/div>\n<p>We had to do it!  It&#8217;s not perfect, but what software is perfect.  We feel it could benefit those more intrepid users out there.  So what is it?<\/p>\n<p>A few days ago we presented <a title='PHP Wikipedia Australian List Integration Tutorial' href='#phpwalit'>PHP Wikipedia Australian List Integration Tutorial<\/a> showing some <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> &#8220;list of&#8221; webpages related to some Australian &#8220;concepts&#8221; for latitude and longitude (our where <font size=1>of life<\/font> conduit) based tabular data.<\/p>\n<p>Today we&#8217;ve started genericizing those &#8220;business rules&#8221; to add a new option to &#8230;<\/p>\n<ul>\n<li>not have to relate the job to Australia, necessarily &#8230; but &#8230;<\/li>\n<li>ask for a <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> URL that starts with &#8220;List_of_&#8221; as a lot of such webpages have as the start of their URLs &#8230;<\/li>\n<li>then have concept word(s) follow in the URL &#8230;<\/li>\n<li>then follow that by <i>_of_<\/i> or <i>_in_<\/i> or <i>_on_<\/i> &#8230; followed by &#8230;<\/li>\n<li>a placename (eg. country name) &#8230; then &#8230;\n<li>look for some latitude and longitude data within that data<\/li>\n<\/ul>\n<p> &#8230; and as you can imagine with that last one we can&#8217;t cater for everything, but we try hard to cater for quite of few combinations of what the latitude and longitude data could look like.<\/p>\n<p>This is a PHP writes PHP job building webpages like those of the tutorial below, dynamically (and ephemerally), with the new bit of PHP running the show and in these early days we have not catered for it being used a lot, so if you start using it and get somebody else&#8217;s &#8220;run&#8221; data, that&#8217;s how the cookie crumbles for now.<\/p>\n<p>We&#8217;ll leave you with some that worked for us during the quiet times of our development cycle &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Wikipedia list of islands of the Philippines ... thanks' href='http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.php?wikipediaurl=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_islands_of_the_Philippines' rel=\"noopener\">Wikipedia List of islands of the Philippines<\/a><\/li>\n<li><a target=\"_blank\" title='Wikipedia list of islands of Argentina ... thanks' href='http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.php?wikipediaurl=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_islands_of_Argentina' rel=\"noopener\">Wikipedia List of islands of Argentina<\/a><\/li>\n<li><a target=\"_blank\" title='Wikipedia list of highest mountains on Earth ... thanks' href='http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.php?wikipediaurl=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_highest_mountains_on_Earth' rel=\"noopener\">Wikipedia List of highest mountains on Earth<\/a><\/li>\n<li><a target=\"_blank\" title='Wikipedia list of waterfalls of South Africa ... thanks' href='http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.php?wikipediaurl=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_waterfalls_of_South_Africa' rel=\"noopener\">Wikipedia List of waterfalls of South Africa<\/a><\/li>\n<\/ul>\n<p>To run what we refer to as a &#8220;makeover&#8221;, click this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link and the PHP is downloadable via this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/template_wiki.php_GETME\" title=\"template_wiki.php\" rel=\"noopener\">template_wiki.php<\/a> link, as the chance to learn some geography you never knew.<\/p>\n<hr>\n<p id='phpwalit'>Previous relevant <a target=\"_blank\" title='PHP Wikipedia Australian List Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-australian-list-integration-tutorial\/' rel=\"noopener\">PHP Wikipedia Australian List Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Wikipedia Australian List Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_things_more.jpg\" title=\"PHP Wikipedia Australian List Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Wikipedia Australian List Integration Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP Wikipedia Australian List Makeover Tutorial' href='#phpwalmt'>PHP Wikipedia Australian List Makeover Tutorial<\/a> got us thinking more about &#8220;where <font size=1>of life<\/font>&#8221; functionality integration possibilities.<\/p>\n<p>For us, with many &#8220;where <font size=1>of life<\/font>&#8221; web applications, the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> is a core part of the functionality, as the receptacle, and more and more often as time goes on, also a launching pad out to other concepts, such as &#8230;<\/p>\n<ul>\n<li>TimeZone &#8230; and &#8230;<\/li>\n<li>Weather<\/li>\n<\/ul>\n<p> &#8230; two of the concepts hovering about our &#8220;Other Side of the World&#8221; web application we last talked about with <a target=\"_blank\" title='Other Side of the World Google Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-google-chart-tutorial\/' rel=\"noopener\">Other Side of the World Google Chart Tutorial<\/a>, whose supervisory HTML <a target=\"_blank\" title='other_side_of_the_world.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---------GETME' rel=\"noopener\">other_side_of_the_world.htm<\/a>&#8216;s <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='Click picture' rel=\"noopener\">live run<\/a>, changed in <a target=\"_blank\" title='other_side_of_the_world.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---------GETME' rel=\"noopener\">this way<\/a> to tweak the the linking of &#8230;<\/p>\n<ul>\n<li>latitude and longitude and (anywhere) <i>placename<\/i> &#8230; to &#8230;<\/li>\n<li>TimeZone place(s) &#8230; and then (with great help from <a target=\"_blank\" title='Weather Underground' href='http:\/\/www.wunderground.com' rel=\"noopener\">Weather Underground<\/a> (thanks)) onto &#8230;<\/li>\n<li>direct or nearby weather predictions<\/li>\n<\/ul>\n<p> &#8230; coming off a new <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> and its <a target=\"_blank\" title='Google Charts select event help ... from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/events?hl=en' rel=\"noopener\"><i>select<\/i> event<\/a> <b>menu option<\/b> &#8230;<\/p>\n<ul>\n<li><b>Nearest TimeZone=Z (and onto Other Side of the World and Weather)<\/b><\/li>\n<li>YouTube=Y (looking for <i>placename<\/i>)<\/li>\n<\/ul>\n<p> &#8230; the latter integrating us with <a target=\"_blank\" title='YouTube' href='http:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm' rel=\"noopener\">karaoke_youtube_api.htm<\/a> HTML iframe elements in another direction additional to yesterday&#8217;s usage.  Along the way, we tweak the <i>Google Map=G<\/i> menu option, adding more map type options and zooming in a little less by default, and with the <i>Nearby Airports=A<\/i> option making the default be a search for 3 (rather than 4) nearby airports.  A lot of this all happens because of the <b>changes to<\/b> &#8230;<\/p>\n<ul>\n<li><b><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php------------------GETME\" title=\"map.php\" rel=\"noopener\">map.php<\/a>&#8216;s <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> interface&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" title=\"map.php\" rel=\"noopener\">live run<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php------------------GETME\" title=\"map.php\" rel=\"noopener\">this way<\/a>)<\/b><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">Australian Lighthouses<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_lighthouses.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php\" title=\"Click picture\" rel=\"noopener\">Australian Waterfalls<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_waterfalls.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php\" title=\"Click picture\" rel=\"noopener\">Australian Dams<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_dams.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php\" title=\"Click picture\" rel=\"noopener\">Australian Ports<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_ports.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php\" title=\"Click picture\" rel=\"noopener\">Australian National Parks<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_parks.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<\/ul>\n<p> &#8230; which all got changed to allow for an &#8220;Animate&#8221; feature, allowing for an automated right to left &#8220;animation&#8221; (via hashtagging) of the <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> based slides near the top of this suite of web application&#8217;s webpages.  We hope you get to try all this out for yourself.<\/p>\n<hr>\n<p id='phpwalmt'>Previous relevant <a target=\"_blank\" title='PHP Wikipedia Australian List Makeover Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-australian-list-makeover-tutorial\/' rel=\"noopener\">PHP Wikipedia Australian List Makeover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Wikipedia Australian List Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_things.jpg\" title=\"PHP Wikipedia Australian List Makeover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Wikipedia Australian List Makeover Tutorial<\/p><\/div>\n<p>Some time back we linked a <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> &#8220;list&#8221; webpage to the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> functionality with <a title='PHP Modularization for Lighthouses in Australia Tutorial' href='#phpmlat'>PHP Modularization for Lighthouses in Australia Tutorial<\/a>.<\/p>\n<p>We&#8217;re revisiting, and finding some &#8220;peer&#8221; web applications, linked by a dropdown, that all &#8230;<\/p>\n<ul>\n<li>access a relevant Wikipedia &#8220;list&#8221; webpage for Australian &#8220;things&#8221; and mentioning latitude and longitude &#8230; which link to &#8230;<\/li>\n<li>Google Charts Map Chart<\/li>\n<\/ul>\n<p> &#8230; for all of &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">Australian Lighthouses<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php\" title=\"Click picture\" rel=\"noopener\">Australian Waterfalls<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php\" title=\"Click picture\" rel=\"noopener\">Australian Dams<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php\" title=\"Click picture\" rel=\"noopener\">Australian Ports<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php\" title=\"Click picture\" rel=\"noopener\">Australian National Parks<\/a><\/li>\n<\/ul>\n<p>We were inspired to take on this &#8220;makeover&#8221; of &#8220;where <font size=1>of life<\/font>&#8221; functionalities because earlier on today we discovered a stupendous online resource for Australian geography enthusiasts, the <a target=\"_blank\" title='Bonzle Digital Atlas of Australia' href='http:\/\/www.bonzle.com' rel=\"noopener\">Bonzle Digital Atlas of Australia<\/a>, with incredibly detailed and flexible search mechanisms, thanks heaps!<\/p>\n<p>We&#8217;ve decided to include extra buttons (to those already linking to <a target=\"_blank\" title='Google Maps' href='http:\/\/maps.google.com' rel=\"noopener\">Google Maps<\/a> links and to the relevant <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> webpage) for that suite of web applications above for &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Bonzle Digital Atlas of Australia' href='http:\/\/www.bonzle.com' rel=\"noopener\">Bonzle Digital Atlas of Australia<\/a><\/li>\n<li><a target=\"_blank\" title='Australian government website' href='http:\/\/www.australia.gov.au\/' rel=\"noopener\">Australian government website<\/a> (sometimes)<\/li>\n<li><a target=\"_blank\" title='YouTube' href='http:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm' rel=\"noopener\">karaoke_youtube_api.htm<\/a> HTML iframe elements<\/li>\n<\/ul>\n<p>Great for research and &#8220;surfing the Australian world&#8221;!  Lose yourself!<\/p>\n<p>What happened Javascript (<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js-GETME\" title=\"australian_lighthouses.js\" rel=\"noopener\">australian_lighthouses.js<\/a> changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js-GETME\" title=\"australian_lighthouses.js\" rel=\"noopener\">this way<\/a>) and PHP wise?<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_lighthouses.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian-waterfalls.php<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_dams.php<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_ports.php<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_parks.php<\/a><\/li>\n<\/ul>\n<hr>\n<p id='phpmlat'>Previous relevant <a target=\"_blank\" title='PHP Modularization for Lighthouses in Australia Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-modularization-for-lighthouses-in-australia-tutorial\/' rel=\"noopener\">PHP Modularization for Lighthouses in Australia Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP Modularization for Lighthouses in Australia Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.gif\" title=\"PHP Modularization for Lighthouses in Australia Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP Modularization for Lighthouses in Australia Tutorial<\/p><\/div>\n<p>Today we want to try two more things &#8230;<\/p>\n<ol>\n<li>continuing on with our PHP code (you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php--GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a>) for our Australian Lighthouses project<\/li>\n<li>talk about PHP glob and its modularization sensibilities<\/li>\n<\/ol>\n<p> &#8230; so let&#8217;s talk about the second one first &#8230; it&#8217;s south of north &#8230; <font size=0>chortle, chortle.<\/font><\/p>\n<p>What does PHP&#8217;s <a target=\"_blank\" title='PHP glob method information' href='http:\/\/php.net\/manual\/en\/function.glob.php' rel=\"noopener\">glob<\/a> do?  It is doing functionality like the &#8220;underworkings&#8221; of any browse button you would see would do when you have a hard disk (in your life) &#8230; unfortunately, this is no longer a given (with mobile technology and the &#8220;cloud&#8221; challenging this thinking, sometimes).  Give glob a file specification and a directory to start with, and it will happily (if you were both &#8220;globular&#8221; <i>and<\/i> &#8220;modular&#8221; you would be, too) provide you with a list of filenames, so that we use it to construct this PHP function for use with our lighthouses web application &#8230;<\/p>\n<p><code><br \/>\n function selcreate($def) {<br \/>\n   $ret=$def;<br \/>\n   $selstr='&lt;select onchange=\" window.location=this.value; \"&gt;&lt;option value=\"' . str_replace(\" \", \"_\", strtolower($def)) . '_lighthouses.php\"&gt;' . $def . '&lt;\/option&gt;';<br \/>\n   $cnt=0;<br \/>\n   foreach (glob(\"*_lighthouses.php\") as $filename) {<br \/>\n    if (strpos(($filename . \"*\"), (str_replace(\" \", \"_\", strtolower($def)) . '_lighthouses.php*')) === false) {<br \/>\n     $cnt++;<br \/>\n     $newidea=str_replace(\"_\", \" \", str_replace(\"_lighthouses.php\", \"\", strtolower($filename)));<br \/>\n     $newideas=explode(\" \", $newidea);<br \/>\n     $ideas=strtoupper(substr($newideas[0],0,1)) . strtolower(substr($newideas[0],1));<br \/>\n     for ($ii=1; $ii&lt;sizeof($newideas); $ii++) {<br \/>\n       $ideas.=(\" \" . strtoupper(substr($newideas[$ii],0,1)) . strtolower(substr($newideas[$ii],1)));<br \/>\n     }<br \/>\n     $selstr.='&lt;option value=\"' . $filename . '\"&gt;' . $ideas . '&lt;\/option&gt;';<br \/>\n    }<br \/>\n   }<br \/>\n   if ($cnt &gt; 0) return $selstr . \"&lt;\/select&gt;\";<br \/>\n   return $ret;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; and hope you can see that glob could be used for PHP code to self-detect sibling variation programs, so that, for instance, if we &#8220;plonked&#8221; (ie. eg. (s)ftp it) an egypt_lighthouses.php (probably with an egypt_lighthouses.js accompanying Javascript file) into the same directory as our &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php--GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a> (changed from yesterday as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php--GETME\" title='australian_lighthouses.php' rel=\"noopener\">this link<\/a>) (uses <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js_GETME\" title='australian_lighthouses.js_GETME' rel=\"noopener\">australian_lighthouses.js<\/a>) to arrive at a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Live Run\" rel=\"noopener\">live run<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.php_GETME\" title='new_zealand_lighthouses.php' rel=\"noopener\">new_zealand_lighthouses.php<\/a> (uses <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.js_GETME\" title='new_zealand_lighthouses.js_GETME' rel=\"noopener\">new_zealand_lighthouses.js<\/a>) to arrive at a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.php\" title=\"Live Run\" rel=\"noopener\">live run<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.php_GETME\" title='ireland_lighthouses.php' rel=\"noopener\">ireland_lighthouses.php<\/a> (uses <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.js_GETME\" title='ireland_lighthouses.js_GETME' rel=\"noopener\">ireland_lighthouses.js<\/a>) to arrive at a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.php\" title=\"Live Run\" rel=\"noopener\">live run<\/a><\/li>\n<\/ul>\n<p> &#8230; it would automatically be added into the functionality of its siblings without you having to change any code of those siblings &#8230; and that egypt_lighthouses.php is free to be a web application with a totally different method of functionality &#8230; cute, huh?!<\/p>\n<p>As a matter of fact ireland_lighthouses.php is quite different, and if you examine the code, you will see that the <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-putelement(s)by-via-php-relative-urls-tutorial\/' title='Javascript putElement(s)By via PHP Relative URLs Tutorial' rel=\"noopener\">Javascript putElement(s)By via PHP Relative URLs Tutorial<\/a> is more apt to a discussion of its workings.<\/p>\n<p>You see, there are so many many different ways to &#8220;skin a cat&#8221; in Information Technology, quite often &#8230; not always &#8230; but &#8220;quite often&#8221; &#8230; and why be cornered into thinking there is only one way to do things?<\/p>\n<p>The other thing you&#8217;ll find is that even though ireland_lighthouses.php differs a lot to its nearest matching sibling (in terms of methodology), new_zealand_lighthouses.php the Javascript corresponding codesets called ireland_lighthouses.js and new_zealand_lighthouses.js are only superficially different &#8230; in other words our PHP coalesces concepts into a similar &#8220;client&#8221; look &#8230; a &#8220;modularization&#8221; of sorts &#8230; not everybody&#8217;s sort, but a sort none the less &#8230; and this begs a question?<\/p>\n<p>Why is &#8220;modularization&#8221; a good thing?  Well, to me, you don&#8217;t have to have any &#8220;modularization&#8221; going on at all, and this is fine by me, but you must deal with issues that allow you to modify many many codesets efficiently and accurately in vastly different ways to be efficient, or be &#8220;modular&#8221; and be able to, perhaps, even, automate your changes, because of these &#8220;modular&#8221; patterns you&#8217;ve created &#8230; many people find &#8220;modularization&#8221; blissful &#8230; and often it suits the work patterns for teams of programmers.  Perhaps you want to read about <a target-_blank title='MVC inforamtion from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Model\u2013view\u2013controller'>MVC<\/a> (and its like) as a coding modularization idea for PHP (or many other programming languages, for that matter).<\/p>\n<hr>\n<p id='pjaliat'>Previous releveant <a target=\"_blank\" title='PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial' rel=\"noopener\">PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.jpg\" title=\"PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial<\/p><\/div>\n<p>Today we want to try two things &#8230;<\/p>\n<ol>\n<li>continuing on with our PHP code (you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a>) for our Australian Lighthouses project<\/li>\n<li>talk about Javascript asynchronous script tag option<\/li>\n<\/ol>\n<p> &#8230; so let&#8217;s talk about the second one first &#8230; it&#8217;s south &#8230; chortle, chortle.<\/p>\n<p>Why should you be interested in the HTML&#8217;s <a target=\"_blank\" title='HTML script tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_script.asp' rel=\"noopener\">script<\/a> tag attributes &#8230;<\/p>\n<ul>\n<li>asynch=&#8221;asynch&#8221;<\/li>\n<li>defer=&#8221;defer&#8221;<\/li>\n<\/ul>\n<p>?  Well, we want our web pages to load as fast as possible.  Yaaaaaa?!  So if there was the mechanism to do more than one bit of ((client) Javascript) thinking at a time would you avail yourself of the opportunity &#8230; or would you pick what&#8217;s behind door 3?<\/p>\n<p>Do you want to hear more on this theory wise?  It seems to me, there are web application mission critical parts, and there are embellishments, quite often &#8230; &#8220;nice to haves&#8221; but not &#8220;mission critical&#8221; &#8230; well, if those &#8220;nice to haves&#8221; could be arranged not to hog all the web application designated CPU that would be good, wouldn&#8217;t it?!   Yaaaaaaaaaaa?!<\/p>\n<p>So, that, in theory, is <strike>y<\/strike> why.<\/p>\n<p>Now back to the project at hand &#8230; Australian Lighthouses &#8230; don&#8217;t you think some geographical sorting options and place name sorting options might be useful?   Yaaaaaaaaaaaaaaaaa?!  But for us it doesn&#8217;t feel mission critical &#8230; so we &#8230;<\/p>\n<ul>\n<li>place the logic in some external Javascript called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js_GETME\" title='australian_lighthouses.js' rel=\"noopener\">australian_lighthouses.js<\/a><\/li>\n<li>we load it from the PHP via<br \/>\n&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;australian_lighthouses.js&#8221; async=&#8221;async&#8221;&gt;&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; and this amounts to the only change to today&#8217;s PHP code from yesterday as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-GETME\" title='australian_lighthouses.php' rel=\"noopener\">this link<\/a><\/li>\n<\/ul>\n<p>&#8230; and this becomes a way to modularize your thinking regarding a project &#8230; please don&#8217;t think there are not a myriad of other ways &#8230; this is just one idea here.<\/p>\n<p>With regard to how we approached our external Javascript we did not demand anything (much) of our parent PHP and this may not be the fastest way to approach this.  What we mean by that is that, perhaps, as a general rule, external Javascript can perform faster with the parent PHP or HTML leaving it with a lot more HTML element id=&#8221;[elementId]&#8221; to hang its hats on, so to speak &#8230; instead, here, we acted innocently with our Javascript and used lots of calls to the Javascript DOM method <a target=\"_blank\" title='Javascript DOM getElementsByTagName() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_getelementsbytagname.asp' rel=\"noopener\">getElementsByTagName()<\/a> (which results in an array return value).  Perhaps calls to <a target=\"_blank\" title='Javascript DOM getElementsByTagName() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_getelementbytagid.asp' rel=\"noopener\">getElementById()<\/a> via (parent) arranged id=&#8221;[elementId]&#8221; would be faster?!  Today, as with the previous <a target=\"_blank\" title='Static HTML Javascript Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/static-html-javascript-primer-tutorial\/' rel=\"noopener\">Static HTML Javascript Primer Tutorial<\/a> we concentrated on the &#8220;modular&#8221; feel to additional external Javascript code ideas.<\/p>\n<p>So try a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title='Click picture' rel=\"noopener\">live run<\/a> to see what we mean.<\/p>\n<hr>\n<p id='pliapt'>Previous relevant <a target=\"_blank\" title='PHP Lighthouses in Australia Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-lighthouses-in-australia-primer-tutorial\/' rel=\"noopener\">PHP Lighthouses in Australia Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP Lighthouses in Australia Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_loghthouses-64of.jpg\" title=\"PHP Lighthouses in Australia Primer Tutorial\" id='alhi' onmouseover=\" this.src=this.src.replace('-62of.j','-63of.xj').replace('-63of.j','-64of.xj').replace('-64of.j','-65of.xj').replace('-65of.j','-62of.xj').replace('.xj','.j');    \" \/><\/a><p class=\"wp-caption-text\">PHP Lighthouses in Australia Primer Tutorial<\/p><\/div>\n<p>Today we examine some of the methodology behind a project idea.<\/p>\n<p>Projects need &#8230;<\/p>\n<ul>\n<li>an idea &#8230; ours came from listening to the radio and hearing about Lighthouses, and how the technologies had changed what they look like and how they function these days &#8230; to quote <a target=\"_blank\" title='list of lighthouse positions' href='https:\/\/en.wikipedia.org\/wiki\/List_of_lighthouses_and_lightvessels_in_Australia' rel=\"noopener\">Wikipedia<\/a> with respect to Australian Lighthouses (thanks) &#8230;<br \/>\n<blockquote><p>\nThe first lighthouse was Macquarie Lighthouse, which was lit in 1793 as a tripod mounted wood and coal fired beacon. The last manned lighthouse was Maatsuyker Island Lighthouse, off the south coast of Tasmania, which was automated in 1996.\n<\/p><\/blockquote>\n<\/li>\n<li>a means to access information &#8230; much easier these days with the search engines &#8230; we went with a Google Search as per <a target=\"_blank\" title='list of lighthouse positions' href='https:\/\/www.google.com.au\/search?q=list+of+lighthouse+positions&#038;ie=utf-8&#038;oe=utf-8&#038;gws_rd=cr&#038;ei=e7OXVf2zHNH88QWBnaeACg' rel=\"noopener\">list of lighthouse positions<\/a> &#8230; which led to &#8230;<\/li>\n<li>the information source(s) &#8230; we settled, and were not surprised about the source, for Wikipedia&#8217;s <a target=\"_blank\" title='List of lighthouses and lightvessels in Australia - Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/List_of_lighthouses_and_lightvessels_in_Australia' rel=\"noopener\">List of lighthouses and lightvessels in Australia &#8211; Wikipedia<\/a> &#8230; then, once happy about the quality of the source information, analyzed &#8230;<\/li>\n<li>the source data format &#8230; initially, at least, via View-&gt;Page Source, relative to the webpage &#8230; to get ideas for how to parse the data &#8230; so that we can determine a &#8230;<\/li>\n<li>programming language of choice &#8230; which is PHP &#8230; no surprise here &#8230; will need a server-side language &#8230; and a method like PHP&#8217;s <a target=\"_blank\" title='PHP file_get_contents() method' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php' rel=\"noopener\">file_get_contents()<\/a> &#8230; from there &#8230;<\/li>\n<li>PHP coding to parse the data and put it into another format that value adds &#8230; otherwise why do it, as the Wikipedia information is fine as is &#8230; that is where we determine that we should &#8230;<\/li>\n<li>include an iframe that uses the Google Chart Map Chart to add that extra overall positional view of Lighthouses &#8230; a definite asset to the reader&#8217;s understanding of the subject &#8230; definitely a &#8220;where&#8221; web application &#8230; and in doing this we notice that &#8230;<\/li>\n<li>Google Chart Map Chart <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---GETME' title='Download me' rel=\"noopener\">map.php<\/a> web application needed to be able to handle much larger input data streams than it could in its previous incarnation of only allowing PHP $_GET[] parameters &#8230; so we change it to allow $_POST[] parameters &#8230; maybe you noticed this with yesterday&#8217;s <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial' href='#pjhgcmot' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/a> as shown below &#8230; as this meant that &#8230;<\/li>\n<li>we need an HTML form that POSTs to the iframe with the Google Chart Map Chart map.php web application allowable because we are on the same domain with this thinking &#8230; and using an HTML textarea element to store the huge string of Lighthouse data that will be passed across via urldecode($_POST[&#8216;data&#8217;]) at map.php &#8230; using PHP&#8217;s <a target=\"_blank\" title='PHP urldecode() method information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php' rel=\"noopener\">urldecode()<\/a> and <a target=\"_blank\" title='PHP urlencode() method information' href='http:\/\/php.net\/manual\/en\/function.urlencode.php' rel=\"noopener\">urlencode()<\/a> methods and Javascript&#8217;s <a target=\"_blank\" title='Javascript decodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_decodeuricomponent.asp' rel=\"noopener\">decodeURIComponent()<\/a> method &#8230; as well as utilizing &#8230;<\/li>\n<li>Google Chart Map Chart map.php web application <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial' href='#pjhgcmot' rel=\"noopener\">onclick<\/a> and <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tooltip Tutorial' href='#pjhgcmtt' rel=\"noopener\">tooltip<\/a> functionality we&#8217;ve been working on lately &#8230; hence the talk about this below &#8230; working out what (component) tools could do with a &#8220;makeover&#8221; is an extremely important part of any project and can be a useful compartmentalizing of the project<\/li>\n<\/ul>\n<p> &#8230; and so we end up with our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title='click picture' rel=\"noopener\">live run<\/a> behind which is the PHP programming source code you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php_GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a> for your perusal.<\/p>\n<hr>\n<p id='pjhgcmot'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-onclick-tutorial\/' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map_onclick.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/p><\/div>\n<p>They say &#8220;the knee bone&#8217;s connected to the thigh bone&#8221; then they say &#8220;the thigh bone&#8217;s connected to the &#8230; hip bone&#8221; then they say &#8220;let&#8217;s call the whole thing off&#8221; &#8230; sometimes.<\/p>\n<p>Today we say &#8220;the onmouseover event is connected to the onclick event&#8221; then we say &#8220;the onclick event is connected to the online woooooorld&#8221; &#8230; &#8220;do &#8230; the hokey pokey&#8221; x3 &#8230; &#8220;that&#8217;s what the onclick event preceeded by the onmouseover event within the environs you are encountering &#8230; is all about&#8221;.<\/p>\n<p>That news is pretty good actually, because it means mobile users are not missing out on much not having easy access to any onmouseover (ie. hover) functionality &#8230; they&#8217;ll still reach any onclick logic you present them, in the default case of events where onclick is a valid &#8220;touch&#8221; event as well.<\/p>\n<p>So the data structure of arrangements to allow for this onclick functionality is intrinsically the same as allowed for yesterday with the <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial' href='#pjhgcmtt' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial<\/a> as shown below, but we just check for some more delimitation issue matters, and our updated prompting window logic gets quite &#8220;blurby&#8221; as per the Javascript (via PHP)  &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\n echo \" datalinesuffix = prompt('Enter decimal Latitude,Longitude ' + thisline + extra +  ' (for no more hit Cancel button and append with ' + '\\\\n\\\\n' + ',\\\"A tooltip and clicking link for Google Map of &lt;a target=_blank href=https:\/\/www.google.com.au\/maps\/place\/' + encodeURIComponent(dlp2) + '&gt;' + dlp2 + '&lt;\/a&gt;\\\" ' + '\\\\n\\\\n' + ' or maybe perhaps ' + '\\\\n\\\\n' + ',\\\"A tooltip and clicking link for Google Map based on latitude and longitude of &lt;a target=_blank href=https:\/\/maps.google.com.au\/maps?' + encodeURIComponent('z=15&t=m&q=loc:') + '{latitude}{longitude}&gt;' + dlp2 + '&lt;\/a&gt;\\\"' + '\\\\n\\\\n' + ' optionally (as (just) two examples of what is possible with HTML included (activates with onclick bit not onmouseover))', thisdef); \" . \"\\n\";<br \/>\n echo ' if (datalinesuffix != null) { if (datalinesuffix.indexOf(\"{latitude}\") != -1) { dlsa=datalinesuffix.split(\",\"); if (dlsa[0].indexOf(\"-\") == -1) { datalinesuffix=datalinesuffix.replace(\"{latitude}\",encodeURIComponent(\"+\" + dlsa[0]));  } else { datalinesuffix=datalinesuffix.replace(\"{latitude}\",encodeURIComponent(dlsa[0]));  }  } if (datalinesuffix.indexOf(\"{longitude}\") != -1) { dlsa=datalinesuffix.split(\",\"); if (dlsa.length &gt; 1) { if (dlsa[1].indexOf(\"-\") == -1) { datalinesuffix=datalinesuffix.replace(\"{longitude}\",encodeURIComponent(\"+\" + dlsa[1]));  } else { datalinesuffix=datalinesuffix.replace(\"{longitude}\",encodeURIComponent(dlsa[1])); }  }  }    } ' . \"\\n\";<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; as again we are making use of $_GET[] parameters coming into the PHP at the server side.<\/p>\n<p>The bigger picture plan for how this helps something else we are trying will become apparent over time &#8230; in the fullness of time &#8230; at the appropriate juncture of juxtapositions.<\/p>\n<p>Let&#8217;s see some PHP code in <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' rel=\"noopener\">live action<\/a> for this tutorial where you define your map characteristics and data.<\/p>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\n' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart Tools Map information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map (chart)' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart tooltips information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/customizing_tooltip_content' title='Google Map (chart) tooltips information' rel=\"noopener\">via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---GETME' title='Download me' rel=\"noopener\">map.php<\/a> which changed from yesterday as per <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---GETME' title='map.php' rel=\"noopener\">this link<\/a>.<\/p>\n<hr>\n<p id='pjhgcmtt'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-tooltips-tutorial\/' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map_tooltips.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial<\/p><\/div>\n<p>Here is a tutorial that is revisiting Google Graphs API, or Google Chart Tools, and its Map functionality, which we first talked about with <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tutorial' href='#pjhgmt' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/a> as shown below.  Please <a target=\"_blank\" title='Google Charts mission statement' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/' rel=\"noopener\">read<\/a> &#8230;<\/p>\n<blockquote><p>Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.<\/p><\/blockquote>\n<p>Why are we revisiting?  Well, we are interested in the interactive side to this wonderful product.  We are going to start with a look into <a target=\"_blank\" title='Tooltips information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Tooltip' rel=\"noopener\">&#8220;tooltips&#8221;<\/a>.  Tooltips are those optional informational features of some webpages that happen when hovering over an HTML element, principally through the filling out of an HTML element&#8217;s <a target=\"_blank\" title='HTML global attribute of title information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_global_title.asp' rel=\"noopener\">title<\/a> global attribute..  Google Charts functionality amounts to the use of Javascript, and, these days, <a target=\"_blank\" title='SVG information from w3schools' href='http:\/\/www.w3schools.com\/svg\/' rel=\"noopener\">SVG<\/a> HTML elements, so &#8220;tooltips&#8221; are very relevant to the &#8220;user experience&#8221; when using Google Charts.  With the Map Chart, the latitude, laongitude set is combined with a title, which can be the default &#8220;tooltip&#8221; shown, as this is all fine for many usages, but we want to extend it so that that title doesn&#8217;t have to be the tooltip.<\/p>\n<p>The integration of this added functionality into the Google Chart Map Chart involves adding an extra &#8220;string&#8221; column to the data table as per the <b>bold<\/b> bits of the new Javascript (via PHP) snippet &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\n if (isset($_GET['value']) && (isset($_GET['tooltip']) || strpos($GETdata, \"'\") !== false)) {<br \/>\n  echo \"   var data = new google.visualization.DataTable(); \/\" . \"\/\" . $GETlabel . $GETvalue . \" \\n\";<br \/>\n  echo \"   data.addColumn('number', '\" . str_replace(\"'\",\"\",str_replace(\",\",\"\",str_replace(\"['\",\"\",$GETlabel))) . \"');  \\n\";<br \/>\n  echo \"   data.addColumn('number', \" . str_replace(\",\", \"); data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); data.addColumn('string', \", str_replace(\"]\",\"\",$GETvalue)) . \");  \\n\";<br \/>\n  echo \"   data.addRows([ \\n\";<br \/>\n  echo str_replace(\"''\" . \"''\", \"''\", str_replace(\"~\", \"'\", substr($GETdata,1)));<br \/>\n  echo \"   ]); \\n\";<br \/>\n } else {<br \/>\n <\/b><br \/>\n      echo ' var data = google.visualization.arrayToDataTable([ ' . \"\\n\";<br \/>\n      echo \" \" . $GETlabel . $GETvalue . \" \\n\";<br \/>\n      echo str_replace(\"''\" . \"''\", \"''\", str_replace(\"~\", \"'\", $GETdata));<br \/>\n      echo \"        ]);\\n\";<br \/>\n<b> }<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; making use of $_GET[] parameters coming into the PHP at the server side &#8230; you&#8217;ll find that Javascript loves to work with PHP as one of those <a target=\"_blank\" title='Fred and Ginger' href='http:\/\/www.youtube.com\/watch?v=MsS7B8nyw5Y' rel=\"noopener\">Fred and Ginger<\/a> relationships of the programming world &#8230; you&#8217;ll be happier writing Javascript from your PHP too &#8230; try it and you&#8217;ll see the advantages time and again and again and again &#8230; did we leave out one? &#8230; <font size=0>and again<\/font>.<\/p>\n<p>The bigger picture plan for how this helps something else we are trying will hopefully become apparent over time.<\/p>\n<p>Let&#8217;s see some PHP code in <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' rel=\"noopener\">live action<\/a> for this tutorial where you define your map characteristics and data.<\/p>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\n' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart Tools Map information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map (chart)' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart tooltips information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/customizing_tooltip_content' title='Google Map (chart) tooltips information' rel=\"noopener\">via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--GETME' title='Download me' rel=\"noopener\">map.php<\/a> which changed from the days of <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-emailing-primer-tutorial\/' title='Google Charts Emailing Primer Tutorial' rel=\"noopener\">Google Charts Emailing Primer Tutorial<\/a> as per <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--GETME' title='map.php' rel=\"noopener\">this link<\/a>.<\/p>\n<hr>\n<p id='pjhgmt'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-tutorial' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/GoogleChart_Map.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Map Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to Google Graphs API, or Google Chart Tools, and its Map functionality.<\/p>\n<blockquote><p>Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.<\/p><\/blockquote>\n<p>Let&#8217;s see some  <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' rel=\"noopener\">PHP<\/a> code in live action for this tutorial where you define your map characteristics and data.<\/p>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\n' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart Tools Map information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map (chart)' rel=\"noopener\">via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php_GETME' title='Download me' rel=\"noopener\">map.php<\/a>.\n<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d4832' onclick='var dv=document.getElementById(\"d4832\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Google+Chart#content\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d4832' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d15782' onclick='var dv=document.getElementById(\"d15782\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15782' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d15807' onclick='var dv=document.getElementById(\"d15807\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15807' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d15807' onclick='var dv=document.getElementById(\"d15807\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=geographicals\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15807' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d15867' onclick='var dv=document.getElementById(\"d15867\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15867' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d15884' onclick='var dv=document.getElementById(\"d15884\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15884' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d32868' onclick='var dv=document.getElementById(\"d32868\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32868' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d32895' onclick='var dv=document.getElementById(\"d32895\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timezone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32895' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d32975' onclick='var dv=document.getElementById(\"d32975\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32975' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59697' onclick='var dv=document.getElementById(\"d59697\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scroll\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59697' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d70975' onclick='var dv=document.getElementById(\"d70975\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/modularization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d70975' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Around here we really like the &#8230; cloning of code &#8230; concept. Howevvvvvvverrr (and we think a but is needed for em-pha-sis) when you are busy cloning, perhaps during the cloning in the current line of thinking, but while you &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-list-better-modularized-scrolling-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,14,37],"tags":[5211,5359,409,2208,518,576,5358,652,710,1616,932,997,1075,1917,1107,3896,1319,1431,1826],"class_list":["post-70975","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animate","tag-elements","tag-external-javascript","tag-getboundingclientrect","tag-google-chart","tag-html","tag-ifram","tag-javascript","tag-list","tag-modularization","tag-php","tag-programming","tag-row","tag-scroll","tag-scrolling","tag-scrollintoview","tag-tutorial","tag-wikipedia","tag-window-innerwidth"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70975"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=70975"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70975\/revisions"}],"predecessor-version":[{"id":70995,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70975\/revisions\/70995"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=70975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=70975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=70975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}