{"id":20146,"date":"2016-02-14T03:01:30","date_gmt":"2016-02-13T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20146"},"modified":"2016-08-25T21:52:22","modified_gmt":"2016-08-25T11:52:22","slug":"htmljavascript-themed-supervision-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-themed-supervision-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Themed Supervision Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Themed Supervision Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.jpg\" title=\"HTML\/Javascript Themed Supervision Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Themed Supervision Primer Tutorial<\/p><\/div>\n<p>Today we want to show another <a target=_blank title='Overlay tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> variation on HTML and Javascript supervision of other web applications, in an HTML <a target=_blank title='HTML iframe element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element.  We make the look of this supervisor be a central &#8220;core&#8221; child web application that is either a &#8230;<\/p>\n<ul>\n<li>tutorial web application &#8230; or &#8230;<\/li>\n<li>tutorial (itself)<\/li>\n<\/ul>\n<p> &#8230; displayed in a middle &#8220;overlay&#8221; HTML iframe element.<\/p>\n<p>That middle &#8220;overlay&#8221; HTML iframe element&#8217;s content is controlled by (the clicking of) HTML <a target=_blank title='HTML button element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_button.asp'>button<\/a> elements spread around it, that position themselves as far away from the &#8220;middle&#8221; part as they can (so that the &#8220;middle&#8221; part can be as big as it can), in HTML <a target=_blank title='HTML td element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_td.asp'>td<\/a> (cell) elements.  Three pieces of information are associated with these buttons, namely &#8230;<\/p>\n<ol>\n<li>a label (that is displayed and is that HTML button element&#8217;s <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> property)<\/li>\n<li>a title containing a URL to reach the &#8220;tutorial web application&#8221; as above<\/li>\n<li>an onclick event, the function called passing across a <i>this<\/i> var<font size=1>iable<\/font> pointing at the HTML button element and a URL to reach the &#8220;tutorial (itself)&#8221; as above<\/li>\n<\/ol>\n<p>That all sounds a pretty generic plan, but today we have a &#8220;Primer&#8221; tutorial, as proof of concept, which hardcodes all the HTML button element features as above on the theme (which is contained in a global var<font size=1>iable<\/font> called &#8220;theme&#8221;) of <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a>.  We chose this &#8220;theme&#8221; because we have quite a varied lineup that would benefit from a web application coalescing some of the ideas we&#8217;ve been developing here at this blog.<\/p>\n<p>Over time, you can be pretty sure we&#8217;ll be genericising all this in a variety of directions.   We hope you stick around to see this.<\/p>\n<p>By the way, the CSS &#8220;overlay&#8221; usual suspects come into play again today, the main two being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ul>\n<p> &#8230; and we use the Window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a> Javascript functionality to help position that middle &#8220;overlay&#8221; HTML iframe element, as well as CSS <a target=_blank title='CSS float property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_float.asp'>float<\/a> and  <a target=_blank title='CSS vertical-align property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_vertical-align.asp'>vertical-align<\/a> properties.  Again, as was the case with <a target=_blank title='Landing Page Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-mobile-tutorial\/'>Landing Page Mobile Tutorial<\/a>, we use Javascript that performs a little like a server language like PHP, holding back on the production of the HTML via that HTML being defined in a var<font size=1>iable<\/font> capable of being modified and &#8220;tweaked&#8221;, until ready to release via the use of the Javascript DOM <a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>([that variable]) method, used to set off the bulk of the web page rendering at the web browser.<\/p>\n<p>In the meantime, have a look at our HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html_GETME\" title='middle_interest.html'>middle_interest.html<\/a> and\/or try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.html\" title='click picture'>live run<\/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='#20146' onclick='var dv=document.getElementById(\"d20146\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/esl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20146' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we want to show another &#8220;overlay&#8221; variation on HTML and Javascript supervision of other web applications, in an HTML iframe element. We make the look of this supervisor be a central &#8220;core&#8221; child web application that is either a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-themed-supervision-primer-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,13,37],"tags":[1580,281,352,354,396,446,1801,576,587,652,894,997,1986,1222,1238,1319,1802],"class_list":["post-20146","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-tutorials","tag-cell","tag-css","tag-document-write","tag-dom","tag-esl","tag-float","tag-getcomputedstyle","tag-html","tag-iframe","tag-javascript","tag-overlay","tag-programming","tag-proof-of-concept","tag-supervisor","tag-table","tag-tutorial","tag-vertical-align"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20146"}],"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=20146"}],"version-history":[{"count":17,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20146\/revisions"}],"predecessor-version":[{"id":20163,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20146\/revisions\/20163"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}