{"id":5548,"date":"2014-01-01T05:01:39","date_gmt":"2013-12-31T18:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5548"},"modified":"2014-01-01T05:01:39","modified_gmt":"2013-12-31T18:01:39","slug":"reveal-a-public-data-source-in-an-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/reveal-a-public-data-source-in-an-iframe-tutorial\/","title":{"rendered":"Reveal a Public Data Source in an Iframe Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/PublicData\/Public_Data.jpg\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Reveal a Public Data Source in an Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/PublicData\/Public_Data.jpg\" title=\"Reveal a Public Data Source in an Iframe Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Reveal a Public Data Source in an Iframe Tutorial<\/p><\/div>\n<p>There can be several reasons why you would not want to show, straight away, an HTML Iframe element in its final form, as the web page loads:<\/p>\n<ul>\n<li>It is important for the user not to see it yet.  Maybe it is the answer to a clue you give in a game?<\/li>\n<li>You may not know how long it will take to load, so you don&#8217;t want a slow webpage immediately when the user can not judge what is going on.<\/li>\n<li>It is part of some surprise for the user.<\/li>\n<li>The Iframe data may be very dynamic and it is pointless to show the user any data until they click and get told that the data is a snapshot in time.<\/li>\n<\/ul>\n<p>So one way to approach this is to use an Iframe like below (note the <i>javascript:false;<\/i> usage), as you load the webpage:<\/p>\n<blockquote><p>&lt;iframe id=&#8217;myif&#8217; src=&#8221;javascript:false;&#8221; frameborder=&#8221;0&#8243; width=&#8221;100%&#8221; height=&#8221;600px&#8221; style=&#8217;display:none;&#8217;&gt;&lt;\/iframe&gt;<\/p><\/blockquote>\n<p>Then you can allow the user to click and reveal the data within the Iframe with a <i>button<\/i> or <i>input type=button<\/i> or an <i>a<\/i> HTML element, an example of which is shown below:<\/p>\n<blockquote><p>&lt;a href=&#8217;#&#8217; style=&#8217;color: pink;&#8217; title=&#8217;Reveal&#8217; onclick=&#8217;reveal();&#8217;&gt;Show data below &#8230;&lt;\/a&gt;<\/p><\/blockquote>\n<p>So what might the Javascript <i>reveal<\/i> function (accessing the DOM) look like:<\/p>\n<blockquote><p>&lt;script type=&#8217;text\/javascript&#8217;&gt;<\/p>\n<p>function reveal() {<br \/>\n var myi = document.getElementById(&#8216;myif&#8217;);<br \/>\n myi.style.display = &#8216;block&#8217;;<br \/>\n myi.src = &#8216;http:\/\/data.gov.au\/dataset\/6cdf7a25-4f2d-4bae-b3b5-61175e2b3b13\/resource\/839fd4c3-6b4a-4658-8671-dd974b5b4bb1\/preview&#8217;;<br \/>\n}<\/p>\n<p>&lt;\/script&gt;\n<\/p><\/blockquote>\n<p>An alternative to <br \/><i>myi.src = &#8216;http:\/\/data.gov.au\/dataset\/6cdf7a25-4f2d-4bae-b3b5-61175e2b3b13\/resource\/839fd4c3-6b4a-4658-8671-dd974b5b4bb1\/preview&#8217;;<\/i><br \/> is to go <br \/><i>window.open(&#8216;http:\/\/data.gov.au\/dataset\/6cdf7a25-4f2d-4bae-b3b5-61175e2b3b13\/resource\/839fd4c3-6b4a-4658-8671-dd974b5b4bb1\/preview&#8217;, &#8216;myif&#8217;);<\/i><br \/> or another alternative is to go <br \/><i>&lt;a target=&#8217;myif&#8217; href=&#8217;http:\/\/data.gov.au\/dataset\/6cdf7a25-4f2d-4bae-b3b5-61175e2b3b13\/resource\/839fd4c3-6b4a-4658-8671-dd974b5b4bb1\/preview&#8217; &#8230; &gt;<\/i><\/p>\n<p>Thanks today go to the <a target=_blank title='Australian Government data website' href='http:\/\/data.gov.au\/'>Australian Government data website<\/a> which contains oodles of interesting data with good instructions on how to use it.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank title='aust_public_example.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/PublicData\/aust_public_example.html_GETME' title='canvas.html'>aust_public_example.html<\/a>\n<\/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='#d5548' onclick='var dv=document.getElementById(\"d5548\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=DOM\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5548' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There can be several reasons why you would not want to show, straight away, an HTML Iframe element in its final form, as the web page loads: It is important for the user not to see it yet. Maybe it &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/reveal-a-public-data-source-in-an-iframe-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,37],"tags":[354,576,587,652,997,1319],"class_list":["post-5548","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-dom","tag-html","tag-iframe","tag-javascript","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5548"}],"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=5548"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5548\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=5548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=5548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=5548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}