{"id":9412,"date":"2014-09-06T05:11:07","date_gmt":"2014-09-05T19:11:07","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9412"},"modified":"2016-07-19T19:43:41","modified_gmt":"2016-07-19T09:43:41","slug":"htmljavascriptcss-reveal-top-to-bottom-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-reveal-top-to-bottom-primer-tutorial\/","title":{"rendered":"HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_fromtoptobottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/surprise.jpg\" title=\"HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial<\/p><\/div>\n<p>Welcome to a new discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;.  We&#8217;ll be doing several postings on this theme, and today we have the first.<\/p>\n<p>Do you often wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise?   <\/p>\n<p align='center'>No?<\/p>\n<p>Do you sometimes wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise?  <\/p>\n<p align='center'>Still no, huh?  (<i>Aside:<\/i> two can play this <font size=1>little<\/font> game)<\/p>\n<p>Do you occasionally wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise &#8230; OR &#8230; <br \/>will allow those who have <i>never<\/i> had this thought in their life on Earth?  <\/p>\n<p align='center'>No again, huh?  (<i>Aside:<\/i> two planets can play this puerile <font size=1>little<\/font> game!)<\/p>\n<p>Do you ever wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise &#8230; OR &#8230; <br \/>will allow those who have <i>never<\/i> had this thought in their life on Earth, nor Mars?  <\/p>\n<p align='center'>Non? Nicht?  Good nicht! (chortle, chortle)<\/p>\n<p align='center'>Well, that&#8217;s fixed their <font size=1>little<\/font> <span style='color:red;'>red<\/span> wagon.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; a surprise from top to bottom using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\n<li>CSS <a target=_blank title=\"CSS overflow:hidden idea information from w3schools ... thanks\" href=\"http:\/\/www.w3schools.com\/cssref\/pr_pos_overflow.asp\">overflow: hidden;<\/a> style property<\/li>\n<li>Encasing working visible HTML elements within <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element for ease of:\n<ol>\n<li>positioning<\/li>\n<li>scrolling, or not<\/li>\n<li>visibility control<\/li>\n<\/ol>\n<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp' title='setInterval'>setInterval<\/a> and <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_clearinterval.asp' title='clearInterval'>clearInterval<\/a> timer functionality<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML (over time)<\/li>\n<li>HTML\/CSS body element <a target=_blank title='Background information at w3schools ... thanks' href='http:\/\/www.w3schools.com\/css\/css_background.asp'>background<\/a> URL (with fallback background colour) and the Javascript control of its <a target=_blank title='Body backgroundImage URL nullified advice from w3schools ... thanks' href='http:\/\/www.w3schools.com\/jsref\/prop_style_backgroundimage.asp'>fallback<\/a> to just the background colour and that it is Clickable<\/li>\n<\/ul>\n<p>So here is today&#8217;s tutorial&#8217;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_fromtoptobottom.html' title='Click picture'>live run<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_fromtoptobottom.html_GETME' title='reveal_fromtoptobottom.html'>reveal_fromtoptobottom.html<\/a> which called on the content of this <a href='#' onclick=' var huh=prompt(\"Hit OK to open new webpage showing this tutorial.  Am asking because you may not want to reveal this yet (it would give away the secret to the surprise, perhaps?), and if not hit Cancel or wipe out URL and hit OK.\", \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9389\");  if (huh.indexOf(\"http\") != -1) { window.open(huh,\"_blank\"); } '>tutorial<\/a>.<\/p>\n<p>Chow for now, <font size=1>brown cow (she&#8217;s always on(line), you know &#8230; <b><i>but is anything sinking in?!<\/i><\/b> &#8230; I haven&#8217;t been able to moo respectfully in public after 63.5 lessons?! &#8230; she still owes me that half lesson when she didn&#8217;t get up in time for milking)<\/font>.<\/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='#d9389' onclick='var dv=document.getElementById(\"d9389\"); 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='d9389' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to a new discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;. We&#8217;ll be doing several postings on this theme, and today we have the first. Do you often wish to make webpages that hide things until &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-reveal-top-to-bottom-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":[4,12,16,30,37],"tags":[281,354,491,576,652,894,997,1063,1125,1319],"class_list":["post-9412","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-gimp","category-photography","category-tutorials","tag-css","tag-dom","tag-gimp","tag-html","tag-javascript","tag-overlay","tag-programming","tag-reveal","tag-setinterval","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9412"}],"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=9412"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9412\/revisions"}],"predecessor-version":[{"id":23380,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/9412\/revisions\/23380"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=9412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=9412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=9412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}