{"id":30981,"date":"2017-06-26T03:01:42","date_gmt":"2017-06-25T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=30981"},"modified":"2017-06-25T17:03:23","modified_gmt":"2017-06-25T07:03:23","slug":"other-side-of-the-world-onblur-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-onblur-tutorial\/","title":{"rendered":"Other Side of the World Onblur Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Sydney\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Onblur Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_yet_more.jpg\" title=\"Other Side of the World Onblur Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Onblur Tutorial<\/p><\/div>\n<p>The <a target=_blank title='Event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'><i>onblur<\/i><\/a> event in web programming is a very important event regarding interactive keyboard entries made by the user.  We base new functionality, today, with our &#8220;Other Side of the World&#8221; web application, by allowing a user who enters in their own &#8220;place&#8221; information, can have that information filtered through the same &#8220;autocomplete&#8221; database provided by the wonderful <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> and its great API service.<\/p>\n<p>When we presented the last Weather Underground related blog posting we even used this functionality also interfacing to the <a target=_blank title='Event onkeyup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onkeyup.asp'><i>onkeyup<\/i><\/a> keyboard event, making it look up the database after just a few characters typed into the associated HTML input type=text text box, but today we lessen the interaction, presuming the user knows a location of interest and will only want information after tabbing out of this text box &#8230; hence the <i>onblur<\/i> event, only, logic interface to new functionality that creates an additional HTML select (dropdown) element of use to populate those same &#8230;<\/p>\n<ul>\n<li>placename<\/li>\n<li>country &#8230; linked to &#8230;<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; fields as talked about yesterday when we presented <a title='Other Side of the World Places Tutorial' href='#osowpt'>Other Side of the World Places Tutorial<\/a> as shown below.<\/p>\n<p>So that&#8217;s the idea, but making it happen involved some tweaking of the parts to the Weather Underground blog posting <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-autocomplete-tutorial\/' title='Weather API via Iframe jQuery Ajax AutoComplete Tutorial'>Weather API via Iframe jQuery Ajax AutoComplete Tutorial<\/a> from some time back, the changes for which we&#8217;ll explain later.<\/p>\n<p>Again we call on <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques for this, telling us that you can just keep on adding HTML iframe elements to make this technique happen for several different sources of information, as necessary.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html--GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html--GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our <i>onblur<\/i> event purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a> (or try out for a specific (argument) location, such as <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Darwin' title='other_side_of_the_world.htm'>Darwin try out<\/a>), again.  It also required small changes to &#8230;<\/p>\n<ul>\n<li>HTML of the &#8220;parent&#8221; you could call <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html---GETME'>autocomplete.htm<\/a> changed in <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html---GETME'>this way<\/a> and with this <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.htm'>live run<\/a> link (or specific place argument calls like the one here for <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.htm?place=Darwin'>live run for Darwin<\/a> link) &#8230; and its &#8230;<\/li>\n<li>PHP autocomplete jQuery Ajax engined helper you could call <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php--GETME'>using_key.php<\/a> and tweaked in <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php--GETME'>this way<\/a>\n<\/ul>\n<hr>\n<p id='osowpt'>Previous relevant <a target=_blank title='Other Side of the World Places Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-places-tutorial\/'>Other Side of the World Places Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Places Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_more.jpg\" title=\"Other Side of the World Places Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Places Tutorial<\/p><\/div>\n<p>A fair while ago now we were in the midst of writing a Geographicals Suite of web applications that, given Latitude and Longitude pairs you could calculate things like &#8230;<\/p>\n<ol>\n<li>Sun Angle at noon<\/li>\n<li>Moon Angle at noon<\/li>\n<li>Coriolis Effect<\/li>\n<li>Distance between Geographical Locations<\/li>\n<li>Weather at Geographical Location<\/li>\n<\/ol>\n<p> &#8230; and that we eventually added some &#8220;placename&#8221; capabilities to all this, introduced with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-sun-angle-tutorial\/' title='PHP\/Javascript\/HTML Sun Angle Tutorial'>PHP\/Javascript\/HTML Sun Angle Tutorial<\/a>, which harnessed all this useful goodwill of <a target=_blank href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm'>this useful webpage<\/a> (thanks) publishing some placename geographicals data.<\/p>\n<ul>\n<li>placename<\/li>\n<li>country &#8230; linked to &#8230;<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; and that we &#8220;channel&#8221; today, via our beloved <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques, so that we reuse PHP, rather than having to create new PHP, as an aid to the modularization for added &#8220;placename&#8221; functionality to our &#8220;Other Side of the World&#8221; web application we started presenting yesterday with <a title='Other Side of the World Primer Tutorial' href='#osotwpt'>Other Side of the World Primer Tutorial<\/a> as shown below.<\/p>\n<p>Another thing we are trialling today is a concept (that admittedly seems to need more work in Firefox) of an HTML select (dropdown) element having an <i>onclick<\/i> event (after an <i>onchange<\/i> event that changes that select element value to a non-nothing value) having a logic whereby that select element value is used to repopulate the &#8230;<\/p>\n<ul>\n<li>placename (, country) (Great Circle Distance in km away)<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; HTML input type=text and type=number fields automatically.  In the normal case of events in non-Firefox web browsers an <i>onchange<\/i> event change of value to a non-nothing value just causes that select element value to be one of the places shown on 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.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> that we display.<\/p>\n<p>The default is to show five of the nearest placenames in the derived list, but a &#8220;+&#8221; button can increase that number of &#8220;nearest&#8221;s as required.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a>, again perhaps?<\/p>\n<hr>\n<p id='osotwpt'>Previous relevant <a target=_blank title='Other Side of the World Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-primer-tutorial\/'>Other Side of the World 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\/HTMLCSS\/other_side_of_the_world.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.jpg\" title=\"Other Side of the Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a first draft of an &#8220;Other Side of the World&#8221; web application using a Google Chart Map Chart embedded into an HTML iframe element to show the user &#8230;<\/p>\n<ul>\n<li>the position of the place that they enter in for their latitude and longitude &#8230; as well as &#8230;<\/li>\n<li>&#8220;the other side of the world&#8221; to the position of the place that they enter in for their latitude and longitude, calculated by imagining you take a trip from your original location through the middle of the Earth and straight through onto the other location<\/li>\n<\/ul>\n<p>Is this our &#8220;sister&#8221; location?  Am not sure.  But somebody was telling &#8220;Porkies&#8221; to me as a child where we were told &#8220;China&#8221; as being on the other side.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html' title='other_side_of_the_world.html_GETME'>other_side_of_the_world.html<\/a> if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html' title='other_side_of_the_world.html'>try out<\/a>.<\/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='#d28620' onclick='var dv=document.getElementById(\"d28620\"); 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='d28620' 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='#d30966' onclick='var dv=document.getElementById(\"d30966\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30966' 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='#d30981' onclick='var dv=document.getElementById(\"d30981\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onblur\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30981' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The onblur event in web programming is a very important event regarding interactive keyboard entries made by the user. We base new functionality, today, with our &#8220;Other Side of the World&#8221; web application, by allowing a user who enters in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-onblur-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":[1695,354,367,400,481,513,518,576,587,652,745,2126,860,1631,861,1812,932,2134,949,1866,1399,2244],"class_list":["post-30981","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-autocompletion","tag-dom","tag-dropdown","tag-event","tag-geographicals","tag-google","tag-google-chart","tag-html","tag-iframe","tag-javascript","tag-map","tag-map-chart","tag-onblur","tag-onchange","tag-onclick","tag-onkeyup","tag-php","tag-place","tag-placenames","tag-select","tag-weather","tag-weather-underground"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30981"}],"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=30981"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30981\/revisions"}],"predecessor-version":[{"id":30984,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30981\/revisions\/30984"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=30981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=30981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=30981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}