{"id":51171,"date":"2020-12-14T03:01:52","date_gmt":"2020-12-13T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51171"},"modified":"2020-12-13T15:34:01","modified_gmt":"2020-12-13T05:34:01","slug":"html-marquee-and-meter-and-input-date-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-marquee-and-meter-and-input-date-tutorial\/","title":{"rendered":"HTML Marquee and Meter and Input Date Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/marquee_itblog.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Marquee and Meter and Input Date Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/marquee_itblog.jpg\" title=\"HTML Marquee and Meter and Input Date Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Marquee and Meter and Input Date Tutorial<\/p><\/div>\n<p>If you are designing a web application with &#8230;<\/p>\n<ul>\n<li>maximum pizazz<\/li>\n<li>maximum colour and movement<\/li>\n<li>maximal presenting of lots of information fleetingly<\/li>\n<\/ul>\n<p> &#8230; then the HTML <a target=_blank title='HTML marquee element information from w3schools' href='http:\/\/www.tutorialspoint.com\/html\/html_marquee_tag.htm'>marquee<\/a> element, though not popular all over, could be the go for you.<\/p>\n<p>Content-wise it is an <a target=_blank title=\"Eat at Joe's\" href=\"https:\/\/www.google.com\/search?q=eat+at+joe%27s&#038;rlz=1C5CHFA_enAU832AU832&#038;sxsrf=ALeKk02i24tUEXShwV__eJU_h1ljPcv2Zw:1607837124006&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ved=2ahUKEwjb-YeFnMrtAhXMxTgGHVRkB-EQ_AUoAXoECDYQAw&#038;biw=1440&#038;bih=758\">&#8220;Eat at Joe&#8217;s&#8221;<\/a> type of experience showing text (like teletext) or images moving left\/right or up\/down across your screen.  Today, we wanted to see whether &#8230;<\/p>\n<ul>\n<li>content could be HTML iframe content <font size=1>&#8230; spoiler alert &#8230; yes<\/font> &#8230; could have two attributes &#8230;<\/li>\n<li>\n<ol>\n<li>behavior<\/li>\n<li>scrollamount<\/li>\n<\/ol>\n<p> &#8230; be user controllable <font size=1>&#8230; spoiler alert &#8230; yes<\/font> &#8230; that controller being a &#8230;<\/li>\n<li><a target=_blank title='HTML meter element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'>meter<\/a> element <font size=1>&#8230; spoiler alert &#8230; yes<\/font> &#8230; and the iframe content being <i>this blog&#8217;s postings by date<\/i> controlled by &#8230;<\/li>\n<li><a target=_blank title='HTML input type=date element information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_type_date.asp'>input type=&#8221;date&#8221;<\/a> element <font size=1>&#8230; spoiler alert &#8230; yes<\/font> &#8230; and thereby &#8230;<\/li>\n<li>presenting 28 iframes representing this blog&#8217;s daily blog post over the four weeks preceeding that date be presented in an &#8220;Eat at Joe&#8217;s&#8221; x 4 (&#8220;direction&#8221; attribute presented in left\/down\/right\/up clockwise display) <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=TLsTUN1wVrc'>&#8220;extravaganza&#8221;<\/a> <font size=1>&#8230; spoiler alert &#8230; yes<\/font><\/li>\n<\/ul>\n<p>Why?  Because we need to see lots of different approaches to &#8220;presentation&#8221; to spark ideas, whether they be ones you reject or take on.  It&#8217;s all in the mix, we figure.<\/p>\n<p>We&#8217;ve used the <a target=_blank title='HTML marquee element information from w3schools' href='http:\/\/www.tutorialspoint.com\/html\/html_marquee_tag.htm'>marquee<\/a> element before, as you can read with <a title='HTML Marquee and Data Feeds and the Cache Primer Tutorial' href='#htmlmdfcpt'>HTML Marquee and Data Feeds and the Cache Primer Tutorial<\/a> and we direct you to the HTML and Javascript and CSS &#8220;Marquee ITblog Look&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/marquee_itblog.html\" title=\"Click picture\">live run<\/a> you can try that is underpinned by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/marquee_itblog.html_GETME\">marquee_itblog.html<\/a> code, to see what we mean.  Of interest in the more subtle ways here, are the way the <a target=_blank title='HTML meter element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meter.asp'>meter<\/a> &#8230;<\/p>\n<p><code><br \/>\n&lt;meter title=\"Extremes are faster at right with scroll and at left with alternate\" style=\"background-image: linear-gradient( 90deg, orange, green);width:40px;display:inline-block;\" onclick=\"myownfraction(event);\" value=\"1\" min=\"-50\" max=\"50\"&gt;&lt;\/meter&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; element has been made into an interactive input clicking &#8220;tool&#8221; via the Javascript &#8220;onclick&#8221; event (function myownfraction(event)) logic &#8230;<\/p>\n<p><code><br \/>\nfunction myownfraction(event) {<br \/>\n    var x=0, y=0;<br \/>\n    if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX;<br \/>\n       y = event.clientY;<br \/>\n    } else {<br \/>\n       x = event.pageX;<br \/>\n       y = event.pageY;<br \/>\n    }<br \/>\n    var rect = event.target.getBoundingClientRect(), varn=0, vard=0, iv=0;<br \/>\n    \/\/alert('x=' + x + ' and left=' +  Math.round(rect.left));<br \/>\n    if (eval('' + x) &gt;= eval('' + rect.left) && eval('' + x) &lt;= eval('' + eval('' + Math.round(rect.left)) + eval('' +  Math.round(rect.width)))) {<br \/>\n    varn = eval('' + eval('' + x) - eval('' +  Math.round(rect.left)));<br \/>\n    vard = eval('' +  Math.round(rect.width));<br \/>\n    for (iv=Math.min(Math.abs(varn),Math.abs(vard)); iv&gt;=2; iv--) {<br \/>\n      if (eval(Math.abs(varn) % iv) == 0 && eval(Math.abs(vard) % iv) == 0) {<br \/>\n        varn \/= iv;<br \/>\n        vard \/= iv;<br \/>\n      }<br \/>\n    }<br \/>\n    event.target.value=eval(-50 + eval(100 * eval('' + varn) \/ eval('' + vard)));<br \/>\n    myownspeed(event.target);<br \/>\n    }<br \/>\n }<br \/>\n<br \/>\n function myownspeed(et) {<br \/>\n   var etv=et.value;<br \/>\n   var j=0;<br \/>\n   var mqs=document.getElementsByTagName('marquee');<br \/>\n   for (j=0; j&lt;mqs.length; j++) {<br \/>\n     if (eval('' + etv) &gt;= 0) {<br \/>\n       \/\/et.style.backgroundImage=\"linear-gradient( 90deg, green, green, green, green, green)\";<br \/>\n       mqs[j].behavior='' + mqs[j].title;<br \/>\n     } else {<br \/>\n       \/\/et.style.backgroundImage=\"linear-gradient( 90deg, orange, orange, orange, orange, orange)\";<br \/>\n       mqs[j].behavior='' + mqs[j].getAttribute('data-alt');<br \/>\n     }<br \/>\n     mqs[j].scrollAmount='' + Math.abs(eval('' + etv));<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html-marquee-and-meter-and-input-date-tutorial\/'>HTML Marquee and Meter and Input Date Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmlmdfcpt'>Previous relevant <a target=_blank title='HTML Marquee and Data Feeds and the Cache Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-marquee-and-data-feeds-and-the-cache-primer-tutorial\/'>HTML Marquee and Data Feeds and the Cache Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Marquee and Data Feeds and the Cache Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/marquee_fan.jpg\" title=\"HTML Marquee and Data Feeds and the Cache Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Marquee and Data Feeds and the Cache Primer Tutorial<\/p><\/div>\n<p>No matter how <a target=_blank title='Marquee' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/cssjavascripthtml-text-effects-primer-tutorial\/'><font color=red>c<\/font><\/a>heez<a target=_blank title='Marquee' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8720'><font color=green>y<\/font><\/a> you think the HTML <a target=_blank title='HTML marquee element information from w3schools' href='http:\/\/www.tutorialspoint.com\/html\/html_marquee_tag.htm'>marquee<\/a> element feels, it&#8217;s got to be said that &#8230;<\/p>\n<ul>\n<li>the HTML <a target=_blank title='HTML marquee element information from w3schools' href='http:\/\/www.tutorialspoint.com\/html\/html_marquee_tag.htm'>marquee<\/a> element &#8230; combined with &#8230;<\/li>\n<li>a data <a target=_blank title='Feed information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Data_feed'>feed<\/a> &#8230; and making use of a &#8230;<\/li>\n<li>web browser&#8217;s <a target=_blank title='Cache information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Cache_(computing)'>cache<\/a><\/li>\n<\/ul>\n<p> &#8230; can be quite a potent team.  Here at our (older) RJM Programming <a target=_blank title='Older RJM Programming blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress'>blog<\/a> we utilize a WordPress <a target=_blank title='Plugin information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Plug-in_(computing)'>plugin<\/a> by <a target=_blank title='Creative Software Design Solutions' href='http:\/\/creative-software-design-solutions.com\/'>Creative Software Design Solutions<\/a> (<a target=_blank title=blank title='Marquee plugin' href='http:\/\/creative-software-design-solutions.com\/creative-software-design-solutions-marquee-news-ticker-wordpress-plugin\/'>here<\/a>, and installable via WordPress&#8217;s admin area&#8217;s Plugin -&gt; Add New functionality) that creates a <a target=_blank title='?' href='https:\/\/www.google.com.au\/search?q=%22addams+family%22+%22gomez%22+%22stock+market%22&#038;client=firefox-b-ab&#038;biw=1429&#038;bih=746&#038;tbm=isch&#038;imgil=PyPVSU1aOIueuM%253A%253BpHaAoBkuYvFeCM%253Bhttp%25253A%25252F%25252Fwww.infobarrel.com%25252FStock_Market_Investing_101_-_How_To_Find_A_Company_Ticker_Symbol&#038;source=iu&#038;pf=m&#038;fir=PyPVSU1aOIueuM%253A%252CpHaAoBkuYvFeCM%252C_&#038;usg=__sDiTeLaQkuBbZ_SpABvMzGlDw3Q%3D&#038;dpr=0.9&#038;ved=0ahUKEwjXqZ2piMzNAhVRNpQKHb2GCgoQyjcIMw&#038;ei=tiFzV9f2D9Hs0AS9japQ#imgrc=PyPVSU1aOIueuM%3A'>&#8220;ticker-tape&#8221;<\/a> (machine) news and weather <a target=_blank title='Widget information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Widget'>widget<\/a> near the top of this blog&#8217;s webpages that uses an HTML marquee tag and a data feed to bring recent news and weather.<\/p>\n<p>Given any sort of a &#8220;wind up&#8221; earlier in the day when the WiFi is on, &#8220;charges&#8221; the web browser cache with this information, reminiscent of our <i>&#8220;Did you Know?&#8221;<\/i> section in <a title='HTML\/Javascript\/CSS Reveal via Image Focus Primer Tutorial' href='#hjcrvifpt'>HTML\/Javascript\/CSS Reveal via Image Focus Primer Tutorial<\/a>, as shown below.  That means, particularly with a mobile device, like we show, today, regarding our <a target=_blank title='Marquee fan' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/marquee_fan.jpg'>tutorial picture<\/a> view of an iPad, that if we are out and about with it, and cannot get a WiFi connection, we cannot navigate to any new pages, else we&#8217;ll get a &#8220;cannot connect to the internet&#8221; type of message, but we can read the news via that marquee element, and the wonders of web browser cache mechanisms.  If we blow our chance of surviving on Earth, we hope the cockroaches left can still read about the latest news and weather this way, as they&#8217;re out and about with their newly acquired mobile devices?!<\/p>\n<p><b><i>Did you know?<\/b><\/i><\/p>\n<p>If you are into navigation using online means, and not always being connected, in the same &#8220;wind up&#8221; and then &#8220;chuff off&#8221; mindset of ideas, you probably can&#8217;t beat the concept of <a target=_blank title=\"Google offline maps\" href=\"\nhttps:\/\/support.google.com\/maps\/answer\/6291838?hl=en\">Google offline maps<\/a> as an idea.<\/p>\n<hr>\n<p id='hjcrvifpt'>Previous relevant <a target=_blank title='HTML\/Javascript\/CSS Reveal via Image Focus Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-reveal-via-image-focus-primer-tutorial\/'>HTML\/Javascript\/CSS Reveal via Image Focus Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_blurred_cards.html\"><img decoding=\"async\" id='ibi' style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript\/CSS Reveal via Image Focus Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_blurred_cards.jpg\" title=\"HTML\/Javascript\/CSS Reveal via Image Focus Primer Tutorial\" onmouseover=\"  this.src = this.src.replace('.gif', '.PNG').replace('.png','.JPG').replace('.jpg','.gif').replace('.PNG', '.png').replace('.JPG', '.jpg');   \" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/CSS Reveal via Image Focus Primer Tutorial<\/p><\/div>\n<p>Good to see you back at the ongoing 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 continue on with an image focussing method of &#8220;reveal&#8221; of some playing cards where you (and some friends maybe) try to recall the last 5 cards revealed and interrupt when you think it makes a good Poker hand in our tutorial game today, which is building on previous &#8220;reveal&#8221; themed tutorials like the one below called <a target=_blank href='#hjcrvopt' title='HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial'>HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial<\/a>.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; playing cards, revealed from unclear to clear (via image quality changes made to gif files to become unclear (manipulated) jpeg files via the Batch Manipulation functionality of GIMP (called bimp)), using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\n<li>Image quality changes made to gif files to become unclear (manipulated) jpeg files via the <a target=_blank title='bimp in action' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_blurred_cards.gif'>Batch Manipulation functionality<\/a> of GIMP<\/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> 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>The usual &#8220;game&#8221; Javascript suspects <a target=_blank title='Math.floor()' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor()<\/a> and <a target=_blank title='Math.floor()' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> as in the code <code>thisc = Math.floor(Math.random() * 52) + 0;<\/code><\/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> colour<\/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\/fiftytwo_blurred_cards.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\/fiftytwo_blurred_cards.html-GETME' title='fiftytwo_blurred_cards.html'>fiftytwo_blurred_cards.html<\/a>. <\/p>\n<p>The base code used as the basis for this HTML code was from <a target=_blank href='#hjcrvopt' title='HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial'>HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial<\/a> and the code differences can be seen at this link &#8230; <a target=_blank title='fiftytwo_blurred_cards.html differences' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_blurred_cards.html-GETME'>fiftytwo_blurred_cards.html<\/a><\/p>\n<p>Enjoy the card game asking for quick reactions, memory and observational skills!   If you get a kick out of the scoring method, there is a kind of method in the madness &#8230; have a read of <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/Poker_probability' title='Poker probability information from Wikipedia ... thanks'>this<\/a>.<\/p>\n<p><i><b>Did you know?<\/b><\/i><\/p>\n<p>Some web applications can be played without an Internet connection, once first set up when there is an Internet connection, like the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_cards.html\" title='Click picture'>game<\/a> above.   This is because they work off Javascript (DOM) once running, and ask nothing of the server, just using client-side Javascript to do their <i>&#8220;thang&#8221;<\/i>.<\/p>\n<p>In Sydney, for instance, with our no Wi-Fi public transport (how <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/Wi-Fi#History' title='Wi-Fi Australian involvement ... information from Wikipedia ... thanks'>ironic<\/a>?!), you could start the game at home\/work with your Internet connection, leave the webpage window open, and keep playing all the way to work\/home (with or without an Internet connection) on your laptop, tablet or phone &#8230; and beyond &#8230; perhaps?!  The game only finishes (its functionality) when you close the webpage.<\/p>\n<hr>\n<p id='hjcrvopt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9554' title='HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial'>HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_cards.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_cards.jpg\" title=\"HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/CSS Reveal via Opacity Primer Tutorial<\/p><\/div>\n<p>Welcome back to the ongoing 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 continue on with an opacity method of &#8220;reveal&#8221; of some playing cards where you (and some friends maybe) try to recall the last 5 cards revealed and interrupt when you think it makes a good Poker hand in our tutorial game today, which is building on previous &#8220;reveal&#8221; themed tutorials like the one below called <a href='#xrifpt' title='HTML\/Javascript Reveal Image In Front of Image Tutorial'>HTML\/Javascript Reveal Image In Front of Image Tutorial<\/a>.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; playing cards, revealed from faint to bright (via the image opacity), using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\n<li>CSS <a target=_blank title=\"CSS opacity idea information from w3schools ... thanks\" href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp\">opacity<\/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> 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>The usual &#8220;game&#8221; Javascript suspects <a target=_blank title='Math.floor()' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor()<\/a> and <a target=_blank title='Math.floor()' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> as in the code <code>thisc = Math.floor(Math.random() * 52) + 0;<\/code><\/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> colour<\/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\/fiftytwo_cards.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\/fiftytwo_cards.html-GETME' title='fiftytwo_cards.html'>fiftytwo_cards.html<\/a>. <\/p>\n<p>The base code used as the basis for this HTML code was from <a target=_blank title='HTML\/Javascript Ahead of the Odds Game Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6738'>HTML\/Javascript Ahead of the Odds Game Tutorial<\/a> and the code differences can be seen at this link &#8230; <a target=_blank title='fiftytwo_cards.html differences' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_cards.html-GETME'>fiftytwo_cards.html<\/a><\/p>\n<p>Enjoy the card game asking for quick reactions, memory and observational skills!   If you get a kick out of the scoring method, there is a kind of method in the madness &#8230; have a read of <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/Poker_probability' title='Poker probability information from Wikipedia ... thanks'>this<\/a>.<\/p>\n<p><i><b>Did you know?<\/b><\/i><\/p>\n<p>Some web applications can be played without an Internet connection, once first set up when there is an Internet connection, like the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/fiftytwo_cards.html\" title='Click picture'>game<\/a> above.   This is because they work off Javascript (DOM) once running, and ask nothing of the server, just using client-side Javascript to do their <i>&#8220;thang&#8221;<\/i>.<\/p>\n<p>In Sydney, for instance, with our no Wi-Fi public transport (how <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/Wi-Fi#History' title='Wi-Fi Australian involvement ... information from Wikipedia ... thanks'>ironic<\/a>?!), you could start the game at home\/work with your Internet connection, leave the webpage window open, and keep playing all the way to work\/home (with or without an Internet connection) on your laptop, tablet or phone &#8230; and beyond &#8230; perhaps?!  The game only finishes (its functionality) when you close the webpage.<\/p>\n<hr>\n<p id='xrifpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9483' title='HTML\/Javascript Reveal Image In Front of Image Tutorial'>HTML\/Javascript Reveal Image In Front of Image Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_imageinfront.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Reveal Image In Front of Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/infrontof.jpg\" title=\"HTML\/Javascript Reveal Image In Front of Image Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Reveal Image In Front of Image Tutorial<\/p><\/div>\n<p>Continuing on with our discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;, today we reveal an image in front of another, and triggered when the user clicks a link, following on from the previous <a target=_blank href='#hjribipt' title='HTML\/Javascript\/CSS Reveal Image Behind Image Primer Tutorial'>HTML\/Javascript\/CSS Reveal Image Behind Primer Tutorial<\/a> as shown below.<\/p>\n<p>With today&#8217;s tutorial you could argue that it also belongs with the series of blog posts related to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=overlay\" title='overlay'><i>&#8220;overlay&#8221;<\/i><\/a>.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; that image in front of an image of the night sky using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\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><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='z-index information from w3schools'><i>z-index<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='position:absolute information from w3schools'><i>position:absolute<\/i><\/a><\/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, particularly with respect to visibility, and size and positioning<\/li>\n<p><!--li>HTML\/CSS body element that it is Clickable via a <i>div<\/i> supervising a \"background\" <i>a<\/i> tag (but this is not popular with the search engines)<\/li-->\n<\/ul>\n<p>So here is a tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_imageinfront.html' title='Click picture'>Images &#8220;revealed&#8221; in front of others<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_imageinfront.html_GETME' title='reveal_imageinfront.html'>reveal_imageinfront.html<\/a> for the theme of an image in front of the night sky.<\/p>\n<hr>\n<p id='hjribipt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9447' title='HTML\/Javascript Reveal Image Behind Image Primer Tutorial'>HTML\/Javascript Reveal Image Behind Image Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_keyhole.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Reveal Image Behind Image Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/sur_keyhole_prise.jpg\" title=\"HTML\/Javascript Reveal Image Behind Image Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Reveal Image Behind Image Primer Tutorial<\/p><\/div>\n<p>Continuing on with our discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;, today we reveal an image behind another,  increasing its size over time, and all triggered when the user clicks a link, following on from the previous <a target=_blank href='#hjcript' title='HTML\/Javascript\/CSS Reveal Information Primer Tutorial'>HTML\/Javascript\/CSS Reveal Information Primer Tutorial<\/a> as shown below.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; that image behind a keyhole image using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\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><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='z-index information from w3schools'><i>z-index<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='position:absolute information from w3schools'><i>position:absolute<\/i><\/a><\/li>\n<li>Simple masking image <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/keyhole.png' title='Transparent keyhole with black background'>keyhole.png<\/a> which would only require an image editor to the sophistication of <a target=_blank title='Paintbrush image editor' href=\"http:\/\/paintbrush.sourceforge.net\/\">PaintBrush<\/a> to create<\/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, particularly with respect to visibility, and size and positioning<\/li>\n<p><!--li>HTML\/CSS body element that it is Clickable via a <i>div<\/i> supervising a \"background\" <i>a<\/i> tag (but this is not popular with the search engines)<\/li-->\n<\/ul>\n<p>So here is a tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_keyhole.html' title='Click picture'>Images &#8220;revealed&#8221; behind others<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_keyhole.html_GETME' title='reveal_keyhole.html'>reveal_keyhole.html<\/a> for the theme of an image behind a keyhole &#8230; huh?!   If you try this game you may discover its inspiration.<\/p>\n<p>Content-wise, how could there be thanks enough to the &#8220;masters&#8221;, but have you ever read <a target=_blank title='Giorgio Vasari' href='http:\/\/en.wikipedia.org\/wiki\/Giorgio_Vasari'>Giorgio Vasari<\/a>&#8216;s book <i>Lives of the Most Excellent Painters, Sculptors, and Architects<\/i> ? &#8230; and we&#8217;ll include some links (or inactive link prefixes) below &#8230; thank you, terima kasih, gracias, merci, \u8c22\u8c22, danke, \u0441\u043f\u0430\u0441\u0438\u0431\u043e, \u0927\u0928\u094d\u092f\u0935\u093e\u0926, grazie, \u0e02\u0e2d\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13, c\u1ea3m \u01a1n b\u1ea1n, \u0622\u067e \u06a9\u0627 \u0634\u06a9\u0631\u06cc\u06c1, \u3042\u308a\u304c\u3068\u3046, te\u015fekk\u00fcr ederim, dankon, obrigado, dankie,\u0634\u0643\u0631\u0627, \u03c3\u03b1\u03c2 \u03b5\u03c5\u03c7\u03b1\u03c1\u03b9\u03c3\u03c4\u03ce, \uac10\uc0ac\ud569\ub2c8\ub2e4, asante:<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/workbench.cadenhead.org\/news\/3500\/link-specific-time-youtube' title='How to Link to a Specific Time in YouTube Videos'>How to Link to a Specific Time in YouTube Videos<\/a><\/li>\n<li><a target=_blank title='How to replace 1 with first, 2 with second,3 with third etc [duplicate]' href='http:\/\/stackoverflow.com\/questions\/20425771\/how-to-replace-1-with-first-2-with-second-3-with-third-etc'>How to replace 1 with first, 2 with second,3 with third etc [duplicate]<\/a><\/li>\n<li>\n<p>https:\/\/encrypted-tbn1.gstatic.com\/<\/p>\n<\/li>\n<li>\n<p>https:\/\/encrypted-tbn2.gstatic.com\/<\/p>\n<\/li>\n<li>\n<p>https:\/\/encrypted-tbn3.gstatic.com\/<\/p>\n<\/li>\n<li><a target=_blank title='http:\/\/legomenon.com\/meaning-of-the-scream-1893-painting-by-edvard-munch.html' href='http:\/\/legomenon.com\/meaning-of-the-scream-1893-painting-by-edvard-munch.html'>http:\/\/legomenon.com\/meaning-of-the-scream-1893-painting-by-edvard-munch.html<\/a><\/li>\n<li>\n<p>http:\/\/2.bp.blogspot.com\/<\/p>\n<\/li>\n<li><a target=_blank title='http:\/\/www.bbc.co.uk\/news\/uk-england-leeds-13887717' href='http:\/\/www.bbc.co.uk\/news\/uk-england-leeds-13887717'>http:\/\/www.bbc.co.uk\/news\/uk-england-leeds-13887717<\/a><\/li>\n<li>\n<p>http:\/\/news.bbcimg.co.uk\/<\/p>\n<\/li>\n<li><a target=_blank title='http:\/\/www.theepochtimes.com\/' href='http:\/\/www.theepochtimes.com\/'>http:\/\/www.theepochtimes.com\/<\/a><\/li>\n<li><a target=_blank title='http:\/\/thegreatdali.weebly.com\/masterpiece.html' href='http:\/\/thegreatdali.weebly.com\/masterpiece.html'>http:\/\/thegreatdali.weebly.com\/masterpiece.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.theguardian.com\/artanddesign\/2011\/jun\/22\/picasso-sold-auction' href='http:\/\/www.theguardian.com\/artanddesign\/2011\/jun\/22\/picasso-sold-auction'>http:\/\/www.theguardian.com\/artanddesign\/2011\/jun\/22\/picasso-sold-auction<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.wellcorps.com\/Explaining-The-Hidden-Meaning-Of-Michelangelos-Creation-of-Adam.html' href='http:\/\/www.wellcorps.com\/Explaining-The-Hidden-Meaning-Of-Michelangelos-Creation-of-Adam.html'>http:\/\/www.wellcorps.com\/Explaining-The-Hidden-Meaning-Of-Michelangelos-Creation-of-Adam.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/topartnews.blogspot.com.au\/2009\/10\/defining-masterpiece-at-minneapolis.html' href='http:\/\/topartnews.blogspot.com.au\/2009\/10\/defining-masterpiece-at-minneapolis.html'>http:\/\/topartnews.blogspot.com.au\/2009\/10\/defining-masterpiece-at-minneapolis.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.telegraph.co.uk\/news\/worldnews\/europe\/italy\/6377214\/Italian-palace-fresco-may-hide-Leonardo-da-Vinci-masterpiece.html' href='http:\/\/www.telegraph.co.uk\/news\/worldnews\/europe\/italy\/6377214\/Italian-palace-fresco-may-hide-Leonardo-da-Vinci-masterpiece.html'>http:\/\/www.telegraph.co.uk\/news\/worldnews\/europe\/italy\/6377214\/Italian-palace-fresco-may-hide-Leonardo-da-Vinci-masterpiece.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.dailymail.co.uk\/news\/article-2413253\/Van-Goghs-sunflowers-He-painted-seven-versions-glorious-masterpiece.html' href='http:\/\/www.dailymail.co.uk\/news\/article-2413253\/Van-Goghs-sunflowers-He-painted-seven-versions-glorious-masterpiece.html'>http:\/\/www.dailymail.co.uk\/news\/article-2413253\/Van-Goghs-sunflowers-He-painted-seven-versions-glorious-masterpiece.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.essentialvermeer.com\/catalogue\/girl_with_a_pearl_earring.html' href='http:\/\/www.essentialvermeer.com\/catalogue\/girl_with_a_pearl_earring.html'>http:\/\/www.essentialvermeer.com\/catalogue\/girl_with_a_pearl_earring.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/artinvestment.ru\/en\/news\/artnews\/20100111_veronese_to_venice.html' href='http:\/\/artinvestment.ru\/en\/news\/artnews\/20100111_veronese_to_venice.html'>http:\/\/artinvestment.ru\/en\/news\/artnews\/20100111_veronese_to_venice.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.fodors.com\/' href='http:\/\/www.fodors.com\/'>http:\/\/www.fodors.com\/<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.thelocal.it\/20140324\/spaniard-strips-naked-in-front-of-botticelli-masterpiece' href='http:\/\/www.thelocal.it\/20140324\/spaniard-strips-naked-in-front-of-botticelli-masterpiece'>http:\/\/www.thelocal.it\/20140324\/spaniard-strips-naked-in-front-of-botticelli-masterpiece<\/a><\/li>\n<\/ul>\n<p>Hope you have a go at today&#8217;s &#8220;reveal&#8221; game.<\/p>\n<hr>\n<p id='hjcript'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9428' title='HTML\/Javascript\/CSS Reveal Information Primer Tutorial'>HTML\/Javascript\/CSS Reveal Information Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/revealing.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript\/CSS Reveal Information Primer Tutorial ... thanks to Training Industry ( http:\/\/www.trainingindustry.com\/ ) for the image, within an image\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/currys_paradox.jpg\" title=\"HTML\/Javascript\/CSS Reveal Information Primer Tutorial ... thanks to Training Industry ( http:\/\/www.trainingindustry.com\/ ) for the image, within an image\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/CSS Reveal Information Primer Tutorial ... thanks to Training Industry ( http:\/\/www.trainingindustry.com\/ ) for the image, within an image<\/p><\/div>\n<p>Welcome to the continuing 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 continue these ideas with the revealing of information in the (simple) form of a hidden <i>div<\/i> element only revealed when the user clicks a link, following on from the previous <a target=_blank href='#hjcrttbpt' title='HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial'>HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial<\/a> as shown below.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; wording, or information regarding a puzzle using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\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\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML, particularly with respect to visibility<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp' title='Javascript prompt window information from w3schools ... thanks'>prompt<\/a> windows to receive, analyze and act on user interaction<\/li>\n<li>HTML\/CSS body element that it is Clickable via a <i>div<\/i> supervising a &#8220;background&#8221; <i>a<\/i> tag (but this is not popular with the search engines)<\/li>\n<\/ul>\n<p>So here is a tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/revealing.html' title='Click picture'>Curry&#8217;s Paradox<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/revealing.html_GETME' title='revealing.html'>revealing.html<\/a> which called on the content of this <a href='#' onclick=' var huh=prompt(\"Hit OK to find out a lot at Wikipedia.  Am asking because you may not want to reveal this yet, and if not hit Cancel or wipe out URL and hit OK.\", \"http:\/\/en.wikipedia.org\/wiki\/Curry%27s_paradox\");  if (huh.indexOf(\"http\") != -1) { window.open(huh,\"_blank\"); } '>tutorial<\/a>.   Today there will be no links below regarding getting to other links regarding Curry&#8217;s Paradox (ie. the content), but this is available via the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/revealing.html\" title='Click picture'>live run<\/a> link (as above, also) (except that to say the inspiration came from an answer on the BBC quiz show <a target=_blank title=\"BBC's QI\" href='http:\/\/www.bbcnordic.com\/qi\/'>QI<\/a>) &#8230; don&#8217;t want to give away any surprises before they surprise!  <\/p>\n<hr>\n<p id='hjcrttbpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9389' title='HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial'>HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial<\/a> is shown below.<\/p>\n<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<\/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<hr>\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='#d9428' onclick='var dv=document.getElementById(\"d9428\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9428' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d9447' onclick='var dv=document.getElementById(\"d9447\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9447' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d9483' onclick='var dv=document.getElementById(\"d9483\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9483' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d9554' onclick='var dv=document.getElementById(\"d9554\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9554' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d9580' onclick='var dv=document.getElementById(\"d9580\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=GIMP\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9580' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d23138' onclick='var dv=document.getElementById(\"d23138\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cache\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d23138' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51171' onclick='var dv=document.getElementById(\"d51171\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/marquee\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51171' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are designing a web application with &#8230; maximum pizazz maximum colour and movement maximal presenting of lots of information fleetingly &#8230; then the HTML marquee element, though not popular all over, could be the go for you. Content-wise &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-marquee-and-meter-and-input-date-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,14,37],"tags":[84,151,3520,257,281,400,576,587,609,652,1928,1517,3519,861,997,1319,1456],"class_list":["post-51171","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-blog","tag-blog-post","tag-content","tag-css","tag-event","tag-html","tag-iframe","tag-input","tag-javascript","tag-marquee","tag-meter","tag-movement","tag-onclick","tag-programming","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51171"}],"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=51171"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51171\/revisions"}],"predecessor-version":[{"id":51179,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51171\/revisions\/51179"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}