Tag Archives: geographicals

Window SessionStorage Client Versus Server Order Tutorial

If we are to honour our thoughts of being able to use our current Capital City Find Matching Country Report web application as a Trip Planner … Our primary integration today is to (software) integrate the great Weather Underground and its great API service for autocomplete name searches for weather (and hurricane) information. Why bother? Well, can you not envisage a user using that Ajax functionality of yesterday’s Window SessionStorage Client Versus Server Ajax Tutorial as a trip planner, perhaps, or as a “checking up on relatives overseas” tool, perhaps? And not all the capital cities are timezone places, and so for some of those we can use Weather integration to still show apt online information when click/touching a Countries Report row. Speaking of this “row”, we make an improvement whereby on a first click of a right hand (Country) row cell, that cell is not initially a contenteditable=”true” one (that may frustrate showing the keyboard on mobile, when most likely it was the row touch intended), but then becomes a contenteditable=”true” cell henceforth. … then yesterday’s Window SessionStorage Client Versus Server Flags Tutorial “progress to now” needs to take notice of a user’s order of multiple select (dropdown) element click/touching of Capital City option (sub)elements, just as we did with the recent User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial‘s web application project to allow for a user ordered YouTube video playlist. Because what is a Trip Planner without an ordered trip? Well, that is debatable, but what isn’t (debatable), is that there will be people in the world who appreciate the “mapping out” of a proposed Trip Planning Itinerary. What could we call on here? We can think of the Google Chart Geo Chart work around about the time of Google Geo Chart Co-ordinate Emojis Tutorial, when we started using … a world map … with … emoji markers … and optionally … joined up by straight lines … an idea for a Trip Plan itinerary synopsis, perhaps?! If you examined closely yesterday’s code changes you will have noticed our collecting of TimeZone Place geographical latitude and longitude information. Today, we start making use of that preparatory work with our changed

Posted in Ajax, eLearning, Event-Driven Programming, Trips, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Google Crawl Viewport Geographicals Tutorial

Yesterday’s Google Crawl Viewport Error Tutorial theme of fixing HTML meta tag viewport errors up at the Google Search Console (part of “Google Webmasters”) continues today for the “Google Crawl” error nuance … Viewport not set … with its pretty self-evident issue. We acted with all innocence just including a … <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> … in the <head> </head> section of the web application codings underlying the URLs of the affected webpages. Note, here, that the error rate can mount if URL ? and & argument variations happen with an affected web application, as each incarnation, based on user interaction, may contribute to another “Google Crawl” error. Along the way examining this issue we gave a makeover to our “Geographicals” supervisory web application, adding to it … more eye catching h1 tag more eye catching webpage body background linear-gradients thanks to the excellent ideas of uiGradients colour wise changed the default Google Chart interfacing from Map Chart to Geo Chart Some readers may wish to see this changed code for place_latlong.php or as a live run link. For the first time ever we call into play a combination of … a child HTML iframe element onload event Javascript function … referencing that … child HTML iframe element’s (view of its) document.referrer … facilitating … the parent window (or document’s DOM) clicking a particular child iframe element’s “a” element (the one with an innerHTML of “Geo”, courtesy of getElementsByTagName()) … as per (new) Javascript function vsgeo below … <script type=’text/javascript’> // Thanks to ideas via https://uigradients.com/ below var ideas=[‘#d3cbb8,#6d6027’, ‘#74ebd5,#acb6e5’, ‘#f7b733,#fc4a1a’, ‘#00f260,#0575e6’, ‘#ffc0cb,#800080’, ‘#f3f9a7,#cac531’, ‘#605c3c,#3c3b3f’, ‘#fffbd5,#b20a2c’, ‘#03001e,#7303c0,#ec38bc,#fdeff9’, ‘#ada996,#f2f2f2,#dbdbdb,#eaeaea’]; var wasone=-1; var aconto=null; function vsgeo(iois) { if (iois != null) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if ((” + aconto.referrer).indexOf(‘/PHP/GeoChart/geo_chart.php’) == -1) { var xas=aconto.getElementsByTagName(‘a’); for (var iou=0; iou<xas.length; iou++) { if (xas[iou].innerHTML == ‘Geo’) { xas[iou].click(); } } } } } } function randgrad() { if (wasone < 0) { wasone=Math.floor(Math.random() * ideas.length); document.getElementById(‘xbody’).className=’s’ + wasone; wasone=-1; } setTimeout(randgrad,5000); } </script> Stop Press We’ve decided to write a mobile checker of any meta viewport tag (that exists, or not, in a webpage of interest) to adjust to a more suitable initial-scale even before the webpage’s document onload event, called check_viewport.js placed into Document Root. Can you guess why there ( ie. https://www.rjmprogramming.com.au/ )? It can be expressed both … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Colour Wheel Canvas Analogue Clock Background Blend Mode Tutorial

Revisiting the web application of Colour Wheel Canvas Analogue Clock Background Tutorial happened with the original idea to talk about … W3school’s How To Avatar Images webpage … and saw it was mainly a CSS border-radius:50%; way to show circular or elliptical (or oval) content, so moved on with this concept, thanks, and onto considering an “avatar” feel to our … Colour Wheel HTML and Javascript changed colour_wheel.html at this live run link, adding an “avatar” mode of elliptical analogue clock background, the images of which can now have, and show us, the use of the CSS background-blend-mode And with this, we recommend you try this “play around” link as well, we interfaced the web application to user usage by … turn a hardcoded “,” into a glowing (see Flowchart and Venn Diagram Glow Tutorial) “a” link (with no “href” property, so not navigational) that a click on will set “avatar mode” … and then … that “a” element’s innerHTML content is turned into a chance for the user to set a CSS background-blend-mode for the background images defaulting to “multiply” in the list … Value Description normal This is default. Sets the blending mode to normal multiply Sets the blending mode to multiply screen Sets the blending mode to screen overlay Sets the blending mode to overlay darken Sets the blending mode to darken lighten Sets the blending mode to lighten color-dodge Sets the blending mode to color-dodge saturation Sets the blending mode to saturation color Sets the blending mode to color luminosity Sets the blending mode to luminosity … that is turned into an HTML select (dropdown) element This background-blend-mode looks to be a pretty useful CSS property. Previous relevant Colour Wheel Canvas Analogue Clock Background Tutorial is shown below. Time and place are very suitable concepts for web application work such as that of yesterday’s Colour Wheel Canvas Analogue Clock Resize Tutorial. Today’s work introduces into this “Colour Wheel” (so far analogue clock) TimeZone functionality, to us a great nexus of time to place, and able to be helped out by serverside PHP DateTimeZone class. And what are the sources we use for this new “place” work? Wikipedia … and another “usual suspect” for us … Google Charts Map Chart has its internal menus that can get you to Google Maps maps And how do we present this new “place” work? We start using the HTML5 canvas … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Wikipedia Flipcard Quiz Emoji Tutorial

We wanted to do more integration on top of yesterday’s Wikipedia Flipcard Quiz Google Charts Tutorial integration with our Flipcards beginnings to our “Wikipedia Based Placename Flipcard Quiz” web application. Our two integration extension thoughts were to start involving … Google Maps YouTube videos … into our “Colour Wheel” child arrangements (and so, also to it standing alone, that you can read about with Colour Wheel Canvas Analogue Clock Background Tutorial) that gave us (“when”) TimeZone place information yesterday. But we realize, with integration like this, space can be at a premium, and we’ve decided with both these integrations above, that their “shopfronts” will just be two single emojis, eventually linking to (optionally used) window.open popup windows (that you may or may not allow on the web browser you are using) … as per … Google Maps 🗺 YouTube videos 📹 … the former a very easy “a” (within a “div” element) change, but the latter far more interesting in that it involves reducing down a whole inhouse interfacing web application (to the YouTube video via its Embedded Iframe API) to a single Emoji from having been a screen full of web application. So, for this, which components changed in which ways … the changed “parent” flip_card.html‘s live run link merely involves crediting our helperer outerers, thanks … whereas … the changed “child” colour_wheel.html‘s live run link … needed to … // Global variables var ytidea=’//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++San+Francisco&minimize=y&youtube_duration=&email=&emoji=on’; var gmidea=’//www.google.com/maps/place/Kaliningrad,+Kaliningrad+Oblast,+Russia/@54.7115288,20.324448,11z/’; //data=!3m1!4b1!4m5!3m4!1s0x46e33d8d4b7c21a9:0x5050960016126ed3!8m2!3d54.7104264!4d20.4522144′; // // New Javascript function // function lookforstz() { var gmi=gmidea; if (document.getElementById(‘stz’).innerHTML != ”) { document.getElementById(‘divideo’).innerHTML=”<iframe title=\”YouTube videos about ” + (document.getElementById(‘stz’).innerText || document.getElementById(‘stz’).contentWindow || document.getElementById(‘stz’).contentDocument) + “\” id=ivideo style=’display:inline-block;width:40px;height:30px;overflow:hidden;’ src='” + ytidea.replace(‘San+Francisco’,encodeURIComponent(” + (document.getElementById(‘stz’).innerText || document.getElementById(‘stz’).contentWindow || document.getElementById(‘stz’).contentDocument))) + ‘&ir=’ + Math.floor(Math.random() * 198765342) + “‘></iframe>”; gmi=gmi.replace(“Kaliningrad,+Kaliningrad+Oblast,+Russia”, (” + (document.getElementById(‘stz’).innerText || document.getElementById(‘stz’).contentWindow || document.getElementById(‘stz’).contentDocument)).replace(/\ /g, ‘+’)); if (xlongis < -900) { document.getElementById(‘divmap’).innerHTML=”<a onclick=\”window.open(‘” + gmi.split(‘@’)[0] + “‘,’_blank’,’top=20,left=20,width=700,height=500′);\” style=\”cursor:pointer;\” title=\”Google Maps\”>&#128506;</a>”; } else { gmi=gmi.replace(“54.7115288”, ylatis); gmi=gmi.replace(“20.324448″, xlongis); document.getElementById(‘divmap’).innerHTML=”<a onclick=\”” + gmi + “\” title=\”Google Maps\”>&#128506;</a>”; } } else { setTimeout(lookforstz, 1000); } } // // Onload logic Javascript function change // function onl() { var atend=false; document.getElementById(‘sele’).value=(location.search.split(‘mode=’)[1] ? decodeURIComponent(location.search.split(‘mode=’)[1].split(‘&’)[0]) : ”); if (bcol != ‘white’ && bcol.toLowerCase() == ‘transparent’) { document.getElementById(‘ourcanvas’).style.border=’1px solid ‘ + bcol.toLowerCase(); } if (done == 0) { if (document.URL.indexOf(‘mode=’) != -1) { if (document.getElementById(‘addthis’).value == ‘-0.0’) { document.getElementById(‘addthis’).value == ‘0.0’; setTimeout(lookforstz, 1000); // document.getElementById(‘divideo’).innerHTML=”<iframe id=ivideo style=’display:inline-block;width:30px;height:30px’ src='” + ytidea.replace(‘San+Francisco’,”) + “‘></iframe>”; } atend=true; } done … Continue reading →

Posted in eLearning, Event-Driven Programming, GUI, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Wikipedia Flipcard Quiz Google Charts Tutorial

Another big player for us with our web applications, especially those of the “where” (or geographical) variety, we thank, is … Google Chart’s Geo Chart … whereby we can “map” a place onto a world map to show context additional to existant functionality for yesterday’s Wikipedia Flipcard Quiz Primer Tutorial. And then to get even more context for our places, we make use of the fact that the list of places is actually a TimeZone list of places that means we can interface to … PHP TimeZone functionality … to incorporate a “when” factor into the mix for this work. This integration involves code from rjmprogramming.com.au domain interfaces to the useful public interfacings above, and so can integrate this via parent/child webpage supervisor/child iframe element arrangements. As you might surmise, you want to make all these new possibilities optional, pending an “OK” button press of a Javascript popup window confirm window to replace yesterday’s alert window. See how the changed flip_card.html‘s live run link now works these “where” and “when” functionality extensions. Previous relevant Wikipedia Flipcard Quiz Primer Tutorial is shown below. Two big “W” contributors for us in our research of the WWW Internet world are … W3schools … for HTML and Javascript and CSS and even PHP and SVG research, today, specifically, Flipcards (that contain place images on “heads” and hints for the user on “tails”) … and … Wikipedia … an online encyclopaedia for lots of research about anything, today our interest honed in on placename information Today, these two giants help us out with a quiz akin to that of the previous Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial in its Wikipedia “smarts”, but implementing W3schools flipcard “smarts”, to construct a quiz where the questions are visual clues, only, and the user can score points for correct answers via either a … select (dropdown) element containing an alphabetically sorted list of possibilities … or … textbox where the user can type their guess Sometimes the simple concepts are the best. We hope you think so too, as you try flip_card.html‘s live run link. Previous relevant Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial is shown below. With the Teletext Country Capital Quiz section of the functionality of the web application of Overlay Iframe Remembering Textarea Client Wikipedia Tutorial we wanted a different style of Wikipedia integration. We wanted to help out the user with their … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

Colour Wheel Canvas Analogue Clock Background Tutorial

Time and place are very suitable concepts for web application work such as that of yesterday’s Colour Wheel Canvas Analogue Clock Resize Tutorial. Today’s work introduces into this “Colour Wheel” (so far analogue clock) TimeZone functionality, to us a great nexus of time to place, and able to be helped out by serverside PHP DateTimeZone class. And what are the sources we use for this new “place” work? Wikipedia … and another “usual suspect” for us … Google Charts Map Chart has its internal menus that can get you to Google Maps maps And how do we present this new “place” work? We start using the HTML5 canvas element “background” as the means to doing this, and we do this allowing for … multiple background images … eg. style=”background: URL([urlBackgroundImage1]), URL([urlBackgroundImage2]), URL([urlBackgroundImage3]);” … teamed with … background repeat … eg. style=”background-repeat: no-repeat;” … and positioning wise … background position … eg. rotational use of (the “float” feeling) left top,center top,right top,right center,right bottom,center bottom,left bottom,left center … leaving “center center” for your analogue clock (showing your TimeZone time) And now that TimeZones are involved, a hover over the canvas element can flesh out the day of the week in its depiction of that TimeZone’s current time. In and out of Wikipedia and/or using the PHP DateTimeZone class, geographical latitude and longitude becomes available to the programmer, and that is our conduit to interfacing to Google Charts Map Chart. You can retry today’s HTML and Javascript changed colour_wheel.html at this live run link. Previous relevant Colour Wheel Canvas Analogue Clock Resize Tutorial is shown below. “To resize, or not to resize, that is (often) the question.” In “web application land” this question’s answer often revolves around whether a “web application” is a “production tool”, needing to work for lots of platforms, in as many situations as possible. Today, adding to yesterday’s Colour Wheel Canvas Analogue Clock Primer Tutorial we were motivated to improve the … resizing of the window scenario … as per … <body align=”center” style=”background-color: lightblue;” onload=” onl();” onresize=”if (document.URL.indexOf(‘&’) != -1) { location.href=document.URL.replace(‘?x=’,’?xx=’).split(‘#’)[0].split(‘&x=’)[0] + ‘&x=’ + Math.floor(Math.random() * 12895643); } else if (document.URL.indexOf(‘?’) != -1) { location.href=document.URL.split(‘#’)[0].split(‘&’)[0] + ‘&x=’ + Math.floor(Math.random() * 12895643); } else { location.href=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?x=’ + Math.floor(Math.random() * 12895643); }”> … lead to partly because yesterday’s web application incarnation was not good with … embedding of the web application within an HTML (child) iframe … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Ajax Auto-completion Internationalization Stay Tutorial

With yesterday’s Ajax Auto-completion Internationalization Trip Tutorial … we got to a destination on a trip … and today, as far as being online goes with this, we start thinking more about … your stay at that destination … new options today involving … accomodation via starting with a Google image search helper … weather via the wonderful Weather Underground API … inhouse Sunrise and Sunset information … inhouse Moon position and other planetary positioning … for those astronomy enthusiasts … via that Python and PHP work of PHP/Javascript/HTML and Python PyEphem Moon Angle Tutorial To do this we again rely on transference of data attributes between HTML Ajax created elements and the dynamically created “Trip Mode” select (dropdown) element. You can see some of this going into the Ajax created elements, as per … if (is_capital) { idname=” onclick=\” if (stopoffs.indexOf(this.value) != -1) { stopoffs=’~’; } if (accoms.indexOf(this.getAttribute(‘data-accom’)) == -1) { accoms+=this.id + ‘=’ + this.getAttribute(‘data-accom’) + ‘~’; } if (weathers.indexOf(this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘))) == -1) { weathers+='” + myThisDiv.innerHTML + “‘.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + ‘=’ + this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘)) + ‘~’; } stopoffs+=this.value + ‘~’;\” name=\”” + myThisCapital.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” id=\”” + myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” data-accom=\”” + (myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0] + ‘, ‘ + myThisCapital.toLowerCase().split(‘ (‘)[0]).replace(/\ /g,’+’) + “\” “; } else { idname=” onclick=\”if (stopoffs.indexOf(this.value) != -1) { stopoffs=’~’; } if (accoms.indexOf(this.getAttribute(‘data-accom’)) == -1) { accoms+=this.id + ‘=’ + this.getAttribute(‘data-accom’) + ‘~’; } if (weathers.indexOf(this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘))) == -1) { weathers+='” + myThisDiv.innerHTML + “‘.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + ‘=’ + this.getAttribute(‘data-weatherurl’).replace(‘EncodedPlaceGoesHere’,encodeURIComponent(‘” + myThisDiv.innerHTML.split(‘,’)[0] + “‘)) + ‘~’; } stopoffs+=this.value + ‘~’;\” id=\”” + myThisCapital.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” name=\”” + myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0].replace(/\ /g,’_’) + “\” data-accom=\”” + (myThisCapital.toLowerCase().split(‘ (‘)[0] + ‘, ‘ + myThisDiv.innerHTML.toLowerCase().split(‘ (‘)[0]).replace(/\ /g,’+’) + “\” “; } … and then transferred up into the dynamically created “Trip Mode” select (dropdown) element (ie. the one with multiple entry abilities (by this time)), as per … function loadifsrc(iois) { var xintstuff=”, latlong=”; if (iois.src != ”) { var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (iois.src.indexOf(‘tdinto=’) != -1) { xintstuff=document.getElementById(iois.src.split(‘tdinto=’)[1].split(‘&’)[0]).innerHTML; } else { xintstuff=aconto.body.innerHTML; } //alert(xintstuff); if (xintstuff.indexOf(‘ data-geo=”‘) != -1) { latlong=xintstuff.split(‘ data-geo=”‘)[1].split(‘”‘)[0]; if ((” + iois.title).indexOf(‘countryname=’) != -1 && (” + iois.title).indexOf(‘~’) != -1) { if (accoms.indexOf(” + (” + iois.title).split(‘~’)[1] + ‘=’) != -1) … Continue reading →

Posted in Ajax, eLearning, Event-Driven Programming, Trips, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Ajax Auto-completion Internationalization Trip Tutorial

We add onto yesterday’s Ajax Auto-completion Internationalization Capitals Tutorial some Trip Planning functionality today. Don’t know about you, but we find ourselves mulling over maps for hours, wondering about far off lands. Now that Google Maps makes it so easy to deal with … map detail around a single place … it also … in “Directions” mode Google Maps becomes a trip planning tool par excellence … and so we harness that, along with the newly introduced … allow for integration of inhouse Timezone Places web application … so that when the user chooses the “Country” button display mode (rather than the “Capital” button display mode) they see Country Timezone Webpage Child Iframes lined up from left to right, to … get ideas of the “when” of timezones … incorporating … the inhouse menus (with suboptions like “Weather”) interfacing to the great Google Charts Map Chart maps … to try to meld a bit of “when” with “where”, two of the important concepts when it comes to trippingtrips. Remember that Google Maps can be used to visit a place ahead of time and download a set of “offline maps” that do not require WiFi later to access, as those caught out by huge (accidental and “in all innocence”) global roaming phone bills can probably attest to. Getting this going, in broad brush terms, what did we do? well, the dogs got up pretty early and needed feeding … then the cat came along, like “Lord Muck” … and so … the fish gave me sideways glances until “fish flaked” … when they then looked out at 2:15 or maybe 4:45 or is that one at 14:30 … … but we digress … we need latitude and longitude geographicals in order to display the map data … and so in the … newly included (in the top h1 header element) we have an HTML select element dropdown … function sadd(inih) { var purlis=”, psuffix=”; if (inih.indexOf(“‘s the capital city of “) != -1) { if (inih.indexOf(‘#’) != -1) { psuffix=’ (‘ + inih.split(‘#’)[1] + ‘)’; } purlis=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?capital=’ + encodeURIComponent(inih.split(‘#’)[0].split(‘ (‘)[0].split(“‘s “)[0].replace(‘, ‘,’,_’).replace(/\ /g,’_’)) + ‘#’ + encodeURIComponent(inih.split(“‘s the capital city of “)[1].replace(‘, ‘,’,_’).replace(/\ /g,’_’) + psuffix); } else if (inih.indexOf(“‘s capital city is “) != -1) { purlis=document.URL.split(‘#’)[0].split(‘?’)[0] + ‘?country=’ + encodeURIComponent(inih.split(‘#’)[0].split(‘ (‘)[0].split(“‘s “)[0].replace(‘, ‘,’,_’).replace(/\ /g,’_’)) + ‘#’ + encodeURIComponent(inih.split(“‘s capital city is “)[1].replace(‘, ‘,’,_’).replace(/\ /g,’_’) + psuffix); } … Continue reading →

Posted in Ajax, eLearning, Event-Driven Programming, Trips, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment