{"id":21291,"date":"2016-04-15T03:01:55","date_gmt":"2016-04-14T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=21291"},"modified":"2016-04-19T21:40:02","modified_gmt":"2016-04-19T11:40:02","slug":"canvas-clickaround-where-is-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-clickaround-where-is-primer-tutorial\/","title":{"rendered":"Canvas Clickaround Where Is Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Canvas Clickaround Where Is Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_where_is.jpg\" title=\"Canvas Clickaround Where Is Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Canvas Clickaround Where Is Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s web application work, yet again, revolves around our &#8220;Clickaround&#8221; series of blog postings, but this time, unlike yesterday&#8217;s <a target=_blank title='Canvas Annotation Email Attachment Scale and Clip Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotation-email-attachment-scale-and-clip-tutorial\/'>Canvas Annotation Email Attachment Scale and Clip Tutorial<\/a>, the major changes are not made to external Javascript (such as world.js), but, rather to &#8230;<\/p>\n<ul>\n<li>child PHP (you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php-GETME\" title='intair.php'>intair.php<\/a> changed as per <a target=_blank title='world.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php-GETME' title='intair.php'>this link<\/a>) supervised by various parent &#8220;Clickaround&#8221; HTML web applications, a list of which will appear near the end of this posting &#8230; and &#8230;<\/li>\n<li>one of those parent HTML &#8220;Clickaround&#8221; web applications (you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html------GETME\" title='world.html'>world.html<\/a> changed as per <a target=_blank title='world.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html------GETME' title='world.html'>this link<\/a>)<\/li>\n<\/ul>\n<p> &#8230; but, as mentioned earlier, there is no change to external Javascript today.  And why is that?  Two reasons spring to mind, being &#8230;<\/p>\n<ol>\n<li>the HTML select element is populated via data from a web server file &#8230; and &#8230;<\/li>\n<li>today&#8217;s changes are not about <i>Annotation<\/i> functionality, the &#8220;theme&#8221; of external world.js Javascript&#8217;s workings (though the <i>Annotation<\/i> functionality can be used to follow up today&#8217;s work to very good effect)<\/li>\n<\/ol>\n<p>The &#8220;Clickaround&#8221; changes today represent new functionality for the user to search for a user defined place name typed in by the user.  We then use the PHP intair.php child <i>iframe<\/i> code to go off and filter the wonderful <a target=_blank title='The Global Airport Database' href='http:\/\/www.partow.net\/miscellaneous\/airportdatabase\/'>The Global Airport Database<\/a> project by Arash Partow &#8230; thanks very much &#8230; looking for matches to populate a parent &#8220;Clickaround&#8221; HTML (select element) dropdown, the selection of which triggers a map of the world (hosted by an HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element) to appear showing the user&#8217;s place name or names marked on that world map, with accompanying linework.<\/p>\n<p>So, to reiterate, no external Javascript files needed to change today, and our (common) PHP you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php-GETME\" title='intair.php'>intair.php<\/a> changed <a target=_blank title='world.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php-GETME' title='intair.php'>quite a bit<\/a>, adding &#8220;Where Is&#8221; functionality to any\/all of &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html------GETME\" title='world.html'>world.html<\/a> (changed as per <a target=_blank title='world.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html------GETME' title='world.html'>this link<\/a>) with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html\" title=\"world.htm\">live run<\/a> link<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/australia.html---GETME\" title=\"australia.htm\">australia.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/australia.html\" title=\"australia.htm\">live run<\/a> link<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/brazil.html---GETME\" title=\"brazil.htm\">brazil.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/brazil.html\" title=\"brazil.htm\">live run<\/a> link<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/china.html---GETME\" title=\"china.htm\">china.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/china.html\" title=\"china.htm\">live run<\/a> link<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/germany.html---GETME\" title=\"germany.htm\">germany.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/germany.html\" title=\"germany.htm\">live run<\/a> link<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/india.html---GETME\" title=\"india.htm\">india.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/india.html\" title=\"india.htm\">live run<\/a> link<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ireland.html---GETME\" title=\"ireland.htm\">ireland.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ireland.html\" title=\"ireland.htm\">live run<\/a> link<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nigeria.html---GETME\"  title=\"nigeria.htm\">nigeria.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nigeria.html\"  title=\"nigeria.htm\">live run<\/a> link<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/united_states.html---GETME\" title=\"united_states.htm\">united_states.htm<\/a> with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/united_states.html\" title=\"united_states.htm\">live run<\/a> link<\/li>\n<\/ul>\n<p>Hope you try it out.<\/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='#d21291' onclick='var dv=document.getElementById(\"d21291\"); 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='d21291' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s web application work, yet again, revolves around our &#8220;Clickaround&#8221; series of blog postings, but this time, unlike yesterday&#8217;s Canvas Annotation Email Attachment Scale and Clip Tutorial, the major changes are not made to external Javascript (such as world.js), but, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-clickaround-where-is-primer-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":[12,14,37],"tags":[184,1849,481,576,578,590,745,932,997,1319],"class_list":["post-21291","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-canvas","tag-coding","tag-geographicals","tag-html","tag-html5","tag-image","tag-map","tag-php","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21291"}],"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=21291"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21291\/revisions"}],"predecessor-version":[{"id":21419,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21291\/revisions\/21419"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=21291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=21291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=21291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}