{"id":17571,"date":"2015-10-05T05:01:32","date_gmt":"2015-10-04T19:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17571"},"modified":"2020-07-16T08:42:25","modified_gmt":"2020-07-15T22:42:25","slug":"htmlphp-timezone-feed-function-keys-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlphp-timezone-feed-function-keys-tutorial\/","title":{"rendered":"HTML\/PHP Timezone Feed Function Keys Tutorial"},"content":{"rendered":"
\"HTML\/PHP<\/a>

HTML\/PHP Timezone Feed Function Keys Tutorial<\/p><\/div>\n

During the time when desktop programming work was more prevalent than web application work, or even with web application work on non-mobile platforms, the use of the keyboard Function Keys was much more common, especially as they could be effectively like buttons in functionality, as you click the one physical “thing” to make “other things” happen.<\/p>\n

Even the “mobile” world cannot wipe out that idea of one “thing’s” action causing “other things” to happen … but it just means, to cater for mobile platforms, we’ll make the F1 through to F12 function keys be buttons in a web application.<\/p>\n

However, for non-mobile web application we can (add to the functionality the) use the onkeydown<\/i><\/a> (or onkeyup<\/i><\/a>) event to check for Function Key use.<\/p>\n

Why worry with “old-fashioned” ideas? As with many old concepts, they have been great up until now, so why shouldn’t they continue to offer something. After all, haven’t you ever thought it would be good to do a piece of functionality, and not have to find that functionality by looking for the applicable button … well, on non-mobile platforms, a Function Key can do this with a single press of a “thing”.<\/p>\n

Today we add Function Key functionality to our recent “when” and “where” timezone web application, as a means for a user to store frequent user entered data sets and associate them with a particular Function Key, and later, use that same Function Key to recall that (perhaps, frequently used) data set of user entries … perhaps related to a Trip Planner pair of From\/To places.<\/p>\n

So, in our “food for thought” offering today … the live run<\/a> has, behind it, the logic of the HTML and Javascript and (extended) CSS at daylight_saving_time.html<\/a> (changed from HTML\/PHP Timezone Feed CSS Styling Tutorial<\/a>, as per this link<\/a>).<\/p>\n

Today, the PHP supervised code daylight_saving_time.php<\/a> (changed from some time back as per this link<\/a>).<\/p>\n

\n

Previous relevant HTML\/PHP Timezone Feed CSS Styling Tutorial<\/a> is shown below.<\/p>\n

\"HTML\/PHP<\/a>

HTML\/PHP Timezone Feed CSS Styling Tutorial<\/p><\/div>\n

Don’t know if you’ve noticed with our “when” and “where” timezone web application what scant attention we’ve been paying to CSS (styling) considerations … before today our small endeavours in this respect came down to …<\/li>\n


\n<style> td { text-align: center; } table { border: 5px teal solid; } <\/style>
\n<\/code><\/p>\n

… well, today, we add a bit more styling sophistication to the web application’s initial look. You may remember from yesterday’s HTML\/PHP Timezone Feed Reveal Div Tutorial<\/a> work that the HTML div element id=result …<\/p>\n

\ngets Javascript DOM rewritten (“revealed” or “overlayed”?) with some functionality based on this helpful link here<\/a> and here<\/a>, to help flash across the HTML div id=result some world daylight saving time adjusted current times …\n<\/p><\/blockquote>\n

… well (well), today, we “bite the bullet” and admit that this clock (at least, the way it looked yesterday ) will never attract any user attention in those “early times” (and, believe me, you only have those “early times” as a time to attract attention), so why don’t we try to create a “digital clock” look to the opening random timezone clock (around the world) displays … the random stuff we like, and will keep.<\/p>\n

So a “digital clock” look may seem daunting … well, well (well).<\/p>\n

But the major lessons (we’d hope and anticipate you get from) today, as we explain a bit about how the “digital clock” was constructed, are:<\/p>\n

    \n
  1. you don’t have to be the world’s best graphic designer and\/or photographer to do stuff on the web … CSS can be used … this is an extremely important lesson for people put off from trying their own web programming<\/li>\n
  2. where CSS can achieve something that an HTML img element also can, please choose CSS for a couple of reasons …\n