Tag Archives: highlight

Window LocalStorage Client Versus Server Map Tutorial

Posted on by

Get a good map, and a goodly number of times you’ll want a map of smaller or larger scale than the one you have. Murphy’s Law? This is probably why in the wonderful woooooooorrrrrrrrlllllld of Google Charts they have included … Geo Chart topographic map of the world or of regions Map Chart terrestrial/satellite map of your group of markers at a zoom level of your choosing … and hope you can see that the latter can save the day for a Short Distance Trip (corner shop, anyone?!). So we’ve added onto yesterday’s Window LocalStorage Client Versus Server Timeline Tutorial progress a new toggling button to view a scenario in either Google Chart scenario above. You can see this integration work with our changed wls_vs_php.htm‘s Capital City Find Matching Country Report live run link supervising a tweaked geo_chart.php Geo Chart interfacer. Previous relevant Window LocalStorage Client Versus Server Timeline Tutorial is shown below. Up to yesterday’s Window LocalStorage Client Versus Server User Tutorial‘s progress, our Capital City Find Matching Country Report web application project was all about … where (and capital of “what”) … but we often seek out a way to add into the mix that 4th dimension … when (ie. time) … and regarding the current project, a … where “map” … can interface with a … when “Trip Plan Itinerary” … and for this purpose, we’re going to interface to the excellent Google Charts Annotated Timeline Chart, thanks, because it combines links of “time” to “user annotations” in a timeline way, that similar way you might describe the qualities of a Trip, even before you’ve gone on that trip. We’ve also added it so that an unordered places list can be turned into a Trip Plan Itinerary at the click/touch of a new map 🗺 🗺 emoji button. Again, see how these timeline amendments were achieved with our changed

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

Window LocalStorage Client Versus Server Timeline Tutorial

Posted on by

Up to yesterday’s Window LocalStorage Client Versus Server User Tutorial‘s progress, our Capital City Find Matching Country Report web application project was all about … where (and capital of “what”) … but we often seek out a way to add into the mix that 4th dimension … when (ie. time) … and regarding the current project, a … where “map” … can interface with a … when “Trip Plan Itinerary” … and for this purpose, we’re going to interface to the excellent Google Charts Annotated Timeline Chart, thanks, because it combines links of “time” to “user annotations” in a timeline way, that similar way you might describe the qualities of a Trip, even before you’ve gone on that trip. We’ve also added it so that an unordered places list can be turned into a Trip Plan Itinerary at the click/touch of a new map 🗺 🗺 emoji button. Again, see how these timeline amendments were achieved with our changed

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

Window LocalStorage Client Versus Server User Tutorial

Posted on by

The inherent weakness with our current Capital City Find Matching Country Report web application project, to our minds, was that places of interest are not restricted to the Capital Cities of Countries, especially when “Trip Planning”. On the other hand, it would be impossible to cater for every “place” in the world. That is far too subjective for good web application applicability. What would be good though, is to allow in user defined … Place name, Country name … terms, the definitions of interest to a user. We can ask this … flagged by the click/touch of an emoji button … and … the interactive entry presented via a Javascript prompt window . When thinking of data applicable to an individual, then that can be catered for by recording it in localStorage where it will be recalled on the next execution of that web application in the same web browser. This, along with a Colour Wheel of the “nearest TimeZone place” onto the existing logic of yesterday’s Window SessionStorage Client Versus Server Order Tutorial progress could make for a more useful and practical tool for those Trip Planners out there! See how this was achieved with our changed

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

Window SessionStorage Client Versus Server Order Tutorial

Posted on by

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

Window SessionStorage Client Versus Server Flags Tutorial

Posted on by

Yes, there’s more to do onto yesterday’s Window SessionStorage Client Versus Server CSS Tutorial‘s Capital City Find Matching Country Report web application project, in our eyes. We have not even mentioned “Internationalization” as a concept up to now. In this line of thinking … Did you know? Emoji flags via ISO 2 character country codes are dead easy via Regional Indicator Symbol characters … var lri=”ABCDEFGHIJKLMNOPQRSTUVWXYZ”; var dri=[“127462″,”127463″,”127464″,”127465″,”127466″,”127467″,”127468″,”127469″,”127470″,”127471″,”127472″,”127473″,”127474″,”127475″,”127476″,”127477″,”127478″,”127479″,”127480″,”127481″,”127482″,”127483″,”127484″,”127485″,”127486″,”127487″]; var thiscc=’AU’; // ISO 2 character countrycode for Australia var ccsuff=”, ccchar=’ ‘; for (var iccsuff=0; iccsuff<thiscc.length; iccsuff++) { ccchar=thiscc.substring(iccsuff, eval(1 + eval(” + iccsuff))).toUpperCase(); ccsuff+=’&#’ + dri[eval(” + lri.indexOf(ccchar))] + ‘;’; } document.getElementById(‘lastflag’).innerHTML=ccsuff; … to result in (via <span style=font-size:64px;>&#127462;&#127482;</span>) … 🇦🇺 … providing interest and general translatability to the changed

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

Window SessionStorage Client Versus Server CSS Tutorial

Posted on by

Further to yesterday’s Window SessionStorage Client Versus Server Integration Tutorial we have a two pronged improvements set for you today with our current Capital City Find Matching Country Report web application project … CSS styling changes … and … additional functionality for Email and SMS links back to our current Capital City Find Matching Country Report web application project (to complete the cycle) We use several modes of CSS application (the first and last of particular relevance to today’s “highlighting of workflow” improvements) … “static” internal CSS coding within the changed

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

WordPress Blog TwentyTen Theme Glow Tutorial

Posted on by

And so we come to (W3School’s glowing text inspired) “glow” ideas regarding this WordPress blog, adding onto yesterday’s Flowchart and Venn Diagram Glow Tutorial blog posting thread of “glow” functionality. Today we show you this WordPress blog TwentyTen theme’s stylesheet changes for allowing for a variety of “glow” “depictions” into the future, bearing in mind there are … text-shadow … text scenarios … and … box-shadow … div and other rectangular HTML element scenarios … and maybe, one day there’ll be the need to … drop-shadow … SVG element scenario … and … box-shadow … div and other rectangular HTML element, with border-radius=50% (for a circle or ellipse), scenarios … catered for. What is also needed for a blog in the “glow” department, would be to use the HTML syntax like (as used throughout this blog post) … <span class=miniglow12>”glow”</span> … liberally in amongst the paragraphs of text “blurb” to highlight text (and remember HTML5 Mark Tag with Glowing Text Tutorial also regarding this) in order to grab the user’s attention (if you are still with us?!). And, pretty naturally, in a blog post, we’d want “glow” functionality to work in a “blockquote” element. Let’s see, below … “Glow” with the flow! … and here we must say that versions of Internet Explorer do not work with the keyframes and animation CSS needed by the “glow” functionality to (now what’s that word …) function. And so the CSS stylesheet changes amount to a whole swathe of styling appended to (the WordPress TwentyTen themed blog) stylesheet style.css as per … <style> /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */ .cglow { box-shadow-bottom-right-radius: 50%; // thanks to https://stackoverflow.com/questions/2714765/using-border-radius-and-box-shadow-together-css box-shadow-bottom-left-radius: 50%; box-shadow-top-right-radius: 50%; box-shadow-top-left-radius: 50%; -webkit-animation: cglow 1s ease-in-out infinite alternate; -moz-animation: cglow 1s ease-in-out infinite alternate; animation: cglow 1s ease-in-out infinite alternate; -webkit-border-radius: 50%; border-radius: 50%; } @-webkit-keyframes cglow { from { box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073; box-shadow-bottom-right-radius: 50%; // thanks to https://stackoverflow.com/questions/2714765/using-border-radius-and-box-shadow-together-css box-shadow-bottom-left-radius: 50%; box-shadow-top-right-radius: 50%; box-shadow-top-left-radius: 50%; } to { box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6; box-shadow-bottom-right-radius: 50%; // thanks to https://stackoverflow.com/questions/2714765/using-border-radius-and-box-shadow-together-css box-shadow-bottom-left-radius: 50%; box-shadow-top-right-radius: 50%; box-shadow-top-left-radius: 50%; } } .bglow { -webkit-animation: bglow 1s ease-in-out infinite alternate; -moz-animation: bglow 1s ease-in-out infinite alternate; animation: bglow 1s ease-in-out infinite alternate; } @-webkit-keyframes bglow { from { box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073; } to { box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px … Continue reading →

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

Horizontal Rule and Div Glowing Lines and Vertices Tutorial

Posted on by

There is another graphical idea we’d like to add some (W3School’s glowing text inspired) “glow” to, like in the spirit of yesterday’s Image Map with Overlay SVG Glowing Polygon Tutorial, but this time, we want it as a user controllable quality, as we realize sometimes people don’t want “glow” in their faces (… but then there’s …) That (user controllable CSS via Javascript DOM into HTML div) concept involves … hr (horizontal rule) div (that are CSS transformed) … picking up where we left off with the web application sections of the HTML Square Horizontal Rule Image Map Notice Board Tutorial web application … combined with … static CSS animation keyframe arrangements involving box-shadow … /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */ @-webkit-keyframes glow { from { box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073; } to { box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6; } } … that with the “glow” work up to now has been combined with static CSS “call that keyframes animation” … but not today … where we add one more static HTML div at the end of the <body></body> section of the webpage as per … <div id=dstyle></div> </body> … with our HTML and Javascript means by which “glow control” goes back to the user (optionally) via … dynamic CSS (because CSS is incredibly useful as a dynamically added “tool” statically before document.body onload within the <head></head> section or dynamically via Javascript DOM into the <body></body> section of the webpage … within <head></head> webpage section we introduce a new global variable … var doglow=true; // default to “glow mode is yes” after 5 seconds showing non-glow mode implications added to static text “,” of an H3 header element to change this way in HTML … <h3 id=myh3>RJM Programming – December<a class=”glow” onclick=”doglow=!doglow; if (!doglow) { this.className=’xglow’; } else { this.className=’glow’; } glowit(); ” style=”cursor:pointer;text-decoration:none;” title=”Click to toggle glow mode”>,</a> 2018<span id=debug></span></h3> … which starts as “glowing” to attract the user’s attention to it, though the user has 5 seconds of time not to see this “glow” applied to the application the user is accessing via document.body onload HTML … <body onload=’ draw_hrs(); ‘> … that Javascript function “draw_hrs()” changing at its top to add in that 5 second delay (after document.body onload) logic … function draw_hrs() { setTimeout(glowit, 5000); // Rest of “draw_hrs” document.body onload logic follows … // … // End of rest of “draw_hrs” document.body onload logic } … calling that Javascript function “glowit()” which has the dual purpose of being what’s called when the user takes control to click/touch the “,” to toggle “glow mode” for the application section at … Continue reading →

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