{"id":17421,"date":"2015-09-28T05:01:00","date_gmt":"2015-09-27T19:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17421"},"modified":"2020-07-16T08:43:20","modified_gmt":"2020-07-15T22:43:20","slug":"htmlphp-timezone-feed-reveal-div-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlphp-timezone-feed-reveal-div-tutorial\/","title":{"rendered":"HTML\/PHP Timezone Feed Reveal Div Tutorial"},"content":{"rendered":"
\"HTML\/PHP<\/a>

HTML\/PHP Timezone Feed Reveal Div Tutorial<\/p><\/div>\n

On the theme of “reveal”<\/a> or maybe you more think “overlay”<\/a>, or perhaps it should be “metamorphose”, we want to continue our “when” and “where” timezone web application with more Javascript DOM work that revolves around the handiness of the HTML div<\/a> element, and its qualities as probably the simplest HTML element that can be like a “placeholder”. What we mean by that, is that we see a “placeholder” as something that has a boring look to it initially quite often, but by that very boringness, it is useful, because it can be like the ever changing chameleon of the HTML element rag-<\/i>tag (chortle, chortle) world.<\/p>\n

The HTML canvas element is like that for me with graphical elements, but the HTML div element can be absolutely hidden with no CSS intervention right from the start with a blank innerHTML<\/i> property. Not only that but you can revert to that “nothingness” by resetting the innerHTML<\/i> property to blank, or make it some complex widget-type massive bit of functionality that not only makes toast for breakfast, but rings up later and asks you if you’d loik a cuupa tea like<\/i> … in that<\/i> accent, like.<\/p>\n

This is a bit why it confuses me about what we show today is in our categorization of “reveal” or “overlay” … guess it doesn’t matter … but you’ll see what we mean by trying a live run<\/a>.<\/p>\n

The actual HTML development we are talking about has an id=result and at various times has three different “revealed” (or “overlayed”) guises …<\/p>\n

    \n
  1. at the start in the raw HTML (before any onload event Javascript) the HTML div contains …
    \n
    \n<div align='center' id='result' style='background-color:white;'><iframe onload=\" ifol=true; \" style=\"display:none;\" id=\"myiframe\" width=400 height=430 src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=Airports&label=['Lat',&value='Lon','Name']&data=,[51.5072,-0.1275,~London~]\"><\/iframe><\/b><\/i><\/div>
    \n<\/code>
    \n… because this innerHTML<\/b><\/i> “state of play” is remembered in a global variable for later reuse, and almost immediately gets 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<\/li>\n
  2. then when a user selects a “From” place (and\/or even a “To” place) in the Trip Planner part, that saved global variable from step one is brought back into play to help build up the URL to send to an HTML iframe element constructed into our HTML div id=result element, containing a Google Map of nearby airports to that latitude and longitude reading …<\/li>\n
  3. then when a user hits the orange “Show Timezone Results Below” button the HTML div id=result element’s innerHTML<\/i> is completely rewritten to show an HTML table element perhaps also containing an HTML iframe element, as well<\/li>\n<\/ol>\n

    Basically we are again pointing out the joys of the Javascript DOM use of an HTML element’s innerHTML<\/i> property, which we also raved about, a lot, with the series of tutorials ending up at PHP\/HTML with External Javascript Slotting In Tutorial<\/a>.<\/p>\n

    A new source of data is used in that “nearby airports” functionality, and we’d like to thank Arash Partow for his Global Airport Database<\/a> project we talked about at HTML5 Canvas Map Clickaround Onresize Tutorial<\/a> earlier on, and whose code we call upon in more HTML iframe elements created in our web application today.<\/p>\n

    So with today’s Javascript and HTML work (only), the source code daylight_saving_time.html<\/a> (changed from yesterday as per this link<\/a>).<\/p>\n

    Please feel free, again, to try a live run<\/a> to see what we mean.<\/p>\n

    \n

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

    \"HTML\/PHP<\/a>

    HTML\/PHP Timezone Feed Javascript Autocompletion Tutorial<\/p><\/div>\n

    We’ve got to the point today with our “when” and “where” timezone web application that further work needed is on the client sode, and today’s work (adding on to yesterday’s HTML\/PHP Timezone Feed Trip Planner Tutorial<\/a> is shown below) is done in Javascript, involving …<\/p>\n