{"id":36485,"date":"2018-02-28T03:01:54","date_gmt":"2018-02-27T17:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36485"},"modified":"2018-02-28T05:27:46","modified_gmt":"2018-02-27T19:27:46","slug":"css-style-display-and-visibility-tall-poppies-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-and-visibility-tall-poppies-tutorial\/","title":{"rendered":"CSS Style Display and Visibility Tall Poppies Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popping_your_head_up.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"New CSS Style Display and Visibility Tall Poppies Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popping_your_head_up.jpg\" title=\"CSS Style Display and Visibility Tall Poppies Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Style Display and Visibility Tall Poppies Tutorial<\/p><\/div>\n<p><a target=_blank title='? (snigger, snigger)' href='https:\/\/www.youtube.com\/watch?v=mxD-5z_xHBU'>Who<\/a> said Australians suffer from a <a target=_blank title='Tall Poppy Syndrome' href='https:\/\/en.wikipedia.org\/wiki\/Tall_poppy_syndrome'>&#8220;Tall Poppy Syndrome&#8221;<\/a>?  It&#8217;s not like we WANTED to create a game where you click\/touch vehemently on audacious plants trying to reach the sunlight (and by so doing, destroy them in cyberspace), or anything?!  It&#8217;s just that yesterday&#8217;s <a title='CSS Style Display and Visibility Tic Tac Toe Tutorial' href='#csssdvtttt'>CSS Style Display and Visibility Tic Tac Toe Tutorial<\/a> had a bit of a static combination of use of <a target=_blank title='blank title='Reveal tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> (CSS properties) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS display property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_display.asp'>display<\/a><\/li>\n<li><a target=_blank title='CSS visibility property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_visibility.asp'>visibility<\/a><\/li>\n<\/ul>\n<p> &#8230; but with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popping_your_head_up.html\" title=\"Click picture\">Tall Poppies Game<\/a> their combination of use, dynamically controlled via Javascript DOM, and featuring regular &#8220;game&#8221; web application Javascript components here &#8230;<\/p>\n<ul>\n<li>(<a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor<\/a>(<a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> * [integerRange]) +\/- [integerOffset])  \/\/ randomosity aid<\/li>\n<li><a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> (and <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'><i>setInterval<\/i><\/a> (to derive a &#8220;seconds elapsed&#8221; idea to the game)) timer methods &#8230; and, lately, at least &#8230;<\/li>\n<li>Emoji usage (the closest we could get to &#8220;poppy&#8221;?!)<\/li>\n<\/ul>\n<p> &#8230; we have a game you can think of as a race against time (against &#8220;tall poppies&#8221; <font size=1>&#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=rGAyQAkXajg'>not that there&#8217;s anything wrong with that<\/a><\/font>) or a click\/touch reaction game with a simple count, and featuring our &#8220;so very lame&#8221; indicators of a hit, reminiscent of, but not exactly done the same way as, in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/star-proteins-versus-superbugs-game-genericization-tutorial\/' title='Star Proteins versus Superbugs Game Genericization Tutorial'>Star Proteins versus Superbugs Game Genericization Tutorial<\/a>.  There, the effect was via an HTML <a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>hr<\/a> element, but here today, the lame effect is via a one second HTML element border showing, and for today&#8217;s game there is an HTML <a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>hr<\/a> element whose (high z-index) <i>position:absolute<\/i> <a target=_blank title='CSS top information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>top<\/a> value (several of our <a target=_blank title='blank title='Reveal tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> CSS candidates) is controlled randomly via Javascript DOM as the arbiter of what defines a &#8220;Tall Poppy&#8221;.<\/p>\n<p>The game today consists of HTML and Javascript and CSS within the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/popping_your_head_up.html_GETME\" title=\"popping_your_head_up.html\">popping_your_head_up.html<\/a> source code, for your perusal. Thanks to this <a target=_blank title='Brick wall idea, thanks' href='http:\/\/lea.verou.me\/css3patterns\/#bricks'>very useful link<\/a> for the brick wall ideas.<\/p>\n<hr>\n<p id='csssdvtttt'>Previous relevant <a target=_blank title='CSS Style Display and Visibility Tic Tac Toe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-and-visibility-tic-tac-toe-tutorial\/'>CSS Style Display and Visibility Tic Tac Toe 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\/Canvas\/Game\/Chalkboard\/colourcodedtictactoechalkboard.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Style Display and Visibility Tic Tac Toe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/colourcodedtictactoechalkboard.jpg\" title=\"CSS Style Display and Visibility Tic Tac Toe Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Style Display and Visibility Tic Tac Toe Tutorial<\/p><\/div>\n<p>The recent <a title='CSS Style Display and Visibility Tutorial' href='#csssdvt'>CSS Style Display and Visibility Tutorial<\/a> had CSS properties &#8230;<\/p>\n<ul>\n<li>display<\/li>\n<li>visibility<\/li>\n<\/ul>\n<p> &#8230; both working to end up with a result, but in practice, as we intimated there, you are likely to just use one or the other.  In order for you to see this in action we made another version of the Tic Tac Toe game web application we wrote for <a target=_blank title='HTML Colour Coded Tic Tac Toe Drag and Drop Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-colour-coded-tic-tac-toe-drag-and-drop-tutorial\/'>HTML Colour Coded Tic Tac Toe Drag and Drop Tutorial<\/a> featuring [HTMLElement].style.<i>visibility<\/i> Javascript DOM and CSS definitions rather than its original [HTMLElement].style.<i>display<\/i> Javascript DOM and CSS definitions, and want to show you them below so you can compare.  As you will glean playing Tic Tac Toe in either mode is quite similar, but the &#8220;X&#8221;s and &#8220;O&#8221;s to the right present themselves that little bit differently, sometimes, as the game progresses, depending on which style of property you are using.  As we intimated yesterday, the use of <i>visibility<\/i> property allows HTML elements to not be shown but the space for them preserved, unlike with the <i>display<\/i> property mode of use.<\/p>\n<p>CSS visibility property used &#8230;<\/p>\n<div style=\"border:5px solid white;width:100%;height:900px;overflow:scroll;\"><iframe style=\"margin-left:-200px;width:900px;height:900px;z-index:9;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/colourcodedtictactoechalkboard.htm\" title=\"CSS visibility property in use\"><\/iframe><\/div>\n<p>CSS display property used &#8230;<\/p>\n<div style=\"border:5px solid white;width:100%;height:900px;overflow:scroll;\"><iframe style=\"margin-left:-200px;width:900px;z-index:9;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/colour_coded_tictactoe_chalkboard.htm\" title=\"CSS display property in use\"><\/iframe><\/div>\n<p>In new windows you can try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/colourcodedtictactoechalkboard.htm\" title=\"Click picture\">CSS visibility mode live run<\/a> involving <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/colour_coded_tictactoe_chalkboard.html--GETME\">colourcodedtictactoechalkboard.htm<\/a> HTML and Javascript and CSS, and which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/colour_coded_tictactoe_chalkboard.html--GETME\">this way<\/a> to achieve that, or you can try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/colour_coded_tictactoe_chalkboard.htm\" title=\"Click picture\">CSS display mode live run<\/a> way.  It beats getting into the pickle where <a target=_blank title='?' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this<\/a> is our only way out?!<\/p>\n<hr>\n<p id='csssdvt'>Previous relevant <a target=_blank title='CSS Style Display and Visibility Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-and-visibility-tutorial\/'>CSS Style Display and Visibility 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\/styleequalsdisplay.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Style Display and Visibility Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.gif\" title=\"CSS Style Display and Visibility Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Style Display and Visibility Tutorial<\/p><\/div>\n<p>In yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-geo-chart-worldbank-tutorial\/' title='Emoji Name Search Geo Chart WorldBank Tutorial '>Emoji Name Search Geo Chart WorldBank Tutorial <\/a> we mentioned the CSS topic of &#8220;invisibility&#8221; as a topic of interest in our <a target=_blank title='blank title='Reveal tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> thought patterns.<\/p>\n<p>Two of the best known ways in CSS to control invisibility (and, hence, visibility) are &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<th>Invisible (style=)<\/th>\n<th>Visible (style=) Block Element<\/th>\n<th>Visible (style=) Inline Element (eg. span, a, img)<\/th>\n<\/tr>\n<tr>\n<td>display:none;<\/td>\n<td>display:block;<\/td>\n<td>display:inline;<\/td>\n<\/tr>\n<tr>\n<td>visibility:hidden;<\/td>\n<td>visibility:visible;<\/td>\n<td>visibility:visible;<\/td>\n<\/tr>\n<\/table>\n<p>The <a target=_blank title='CSS display and visibility property information from w3schools' href='https:\/\/www.w3schools.com\/css\/css_display_visibility.asp'>W3Schools display and visibility<\/a> CSS topic webpage is succinct in telling you the difference, as below &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css_display_visibility.asp'><p>\nHiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:<br \/>\n<br \/>\nExample<br \/>\nh1.hidden {<br \/>\n    display: none;<br \/>\n}<br \/>\n<br \/>\nvisibility:hidden; also hides an element.<br \/>\n<br \/>\nHowever, the element will still take up the same space as before. The element will be hidden, but still affect the layout\n<\/p><\/blockquote>\n<p>Which got us to go back to a previous tutorial called <a title='CSS Style Display Primer Tutorial' href='#csssdpt'>CSS Style Display Primer Tutorial<\/a> where we wrote some HTML and CSS and Javascript to show the <i>display<\/i> CSS property &#8220;in action&#8221;, that we &#8220;flesh out&#8221; today, adding in the layer of CSS property <i>visibility<\/i> into the mix as well.<\/p>\n<p>In terms of &#8220;reveal&#8221; thoughts though, it may be more the go for you (with a project you are working on) to just use one or the other CSS property depending on whether you want to &#8230;<\/p>\n<ul>\n<li>&#8220;reveal&#8221; a surprise &#8230; and have the HTML burst onto the scene via the <i>display<\/i> property &#8230; or &#8230;<\/li>\n<li>&#8220;reveal&#8221; by easing the user into thinking there may appear something &#8220;in a set aside slot&#8221; should I choose a certain course of actions, via the use of the <i>visibility<\/i> property<\/li>\n<\/ul>\n<p>Again, you can download source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html-GETME' title=\"styleequalsdisplay.html\">styleequalsdisplay.htm<\/a> and\/or try it out at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.htm\" title=\"Click picture\">live run<\/a> link and\/or <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html-GETME' title=\"styleequalsdisplay.html\">see what changed<\/a> to involve the <i>visibility<\/i> property in this &#8220;reveal&#8221; topic tutorial.<\/p>\n<hr>\n<p id='csssdpt'>Previous relevant <a target=_blank title='CSS Style Display Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-primer-tutorial\/'>CSS Style Display 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\/styleequalsdisplay.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Style Display Primer Tutorial\"\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.jpg\" title=\"CSS Style Display Primer Tutorial\"\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Style Display Primer Tutorial<\/p><\/div>\n<blockquote><p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.<\/p><\/blockquote>\n<p><a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html'>Tutorial<\/a> &#8230;<\/p>\n<p>Cascading Style Sheet methodology is a good technique in order to separate document content from document presentation.  For the same content, two different CSS approaches can produce vastly different browser outputs.<\/p>\n<p>With today&#8217;s tutorial we concentrate on CSS within HTML and specifically the HTML object&#8217;s <a target=_blank title='style display property information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/jsref\/prop_style_display.asp'>style.display property<\/a>, which has a huge number of choices, (and is heavily used by many web designers when building up web pages, I find, being a very close friend with Javascript and the DOM) and have a <a target=_blank title='Live Run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html'>live run<\/a> link for you to use with which to experiment.  The parent HTML element of our images of Nala the dog is a <i>div<\/i> element whose own style.display property is shown to you in the document window&#8217;s title.<\/p>\n<p>You can download source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html_GETME' title=\"styleequalsdisplay.html\">styleequalsdisplay.html<\/a><\/p>\n<p>Thanks to <a target=_blank title='CSS information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets'>Wikipedia<\/a> for the quote above.<\/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='#d10537' onclick='var dv=document.getElementById(\"d10537\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10537' 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='#d36445' onclick='var dv=document.getElementById(\"d36445\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36445' 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='#d36467' onclick='var dv=document.getElementById(\"d36467\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36467' 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='#d36485' onclick='var dv=document.getElementById(\"d36485\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36485' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Who said Australians suffer from a &#8220;Tall Poppy Syndrome&#8221;? It&#8217;s not like we WANTED to create a game where you click\/touch vehemently on audacious plants trying to reach the sunlight (and by so doing, destroy them in cyberspace), or anything?! &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-and-visibility-tall-poppies-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,14,37],"tags":[2486,281,341,1549,385,476,477,576,590,2487,652,894,997,2047,1063,1125,1126,1282,1319,2485],"class_list":["post-36485","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-block","tag-css","tag-display","tag-element","tag-emoji","tag-game","tag-games-2","tag-html","tag-image","tag-inline","tag-javascript","tag-overlay","tag-programming","tag-random","tag-reveal","tag-setinterval","tag-settimeout","tag-timer","tag-tutorial","tag-visibility"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36485"}],"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=36485"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36485\/revisions"}],"predecessor-version":[{"id":36491,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36485\/revisions\/36491"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}