{"id":33396,"date":"2017-10-05T03:01:31","date_gmt":"2017-10-04T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33396"},"modified":"2017-10-05T15:57:35","modified_gmt":"2017-10-05T05:57:35","slug":"html-input-element-types-randomized-history-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-history-tutorial\/","title":{"rendered":"HTML Input Element Types Randomized History Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Input Element Types Randomized History Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/history_control.jpg\" title=\"HTML Input Element Types Randomized History Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Input Element Types Randomized History Tutorial<\/p><\/div>\n<p>Hash<a target=_blank title='Hashtagging information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Hashtag'><i>tag<\/i><\/a> navigation such as &#8230;<\/p>\n<ul>\n<li>window.location=&#8217;#place&#8217;;  \/\/ Hashtagging, as being in web page and (you will really quickly go to) HTML element <i>id<\/i>=place position on the webpage<\/li>\n<\/ul>\n<p> &#8230; is all fine and good in principle, but even this fast navigation can have its fallbacks.  If there is a lot of it going on, it can fill your web browser history with lots of entries pretty much, for all intents and purposes, the same as others, and make it hard for the web browser&#8217;s Back and Forward (through web browser history (of web pages)) to be of much practical use anymore.<\/p>\n<p>So we need to do two things with our &#8220;HTML input Element Types Randomized&#8221; (mini) web application project, last talked about at <a title='HTML Input Element Types Randomized Iframe Tutorial' href='#htmlietrit'>HTML Input Element Types Randomized Iframe Tutorial<\/a>, which suffers from this frustration.<\/p>\n<ul>\n<li>stop navigating in that <i>window.location=&#8217;#place&#8217;;<\/i> way and either &#8230;\n<ol>\n<li>don&#8217;t leave the webpage you are on, even to hashtag (which causes a web browser history record to happen) &#8230; or, and we don&#8217;t do this option today &#8230;<\/li>\n<li>use Ajax to navigate (to yourself)<\/li>\n<\/ol>\n<\/li>\n<li>take control of what, after the first history entry on starting an execution session is &#8220;let through to the keeper&#8221;, is written to the browser history (as possible ever since <a target=_blank title='HTML5 history onpopstate event information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WindowEventHandlers\/onpopstate'>HTML5<\/a> came along)<\/li>\n<\/ul>\n<p> &#8230; and in that way, make available to the user three modes of browser history writing (starting with the default) &#8230;<\/p>\n<ul>\n<li>minimal history (just that first of session history written in a natural web browser functionality fashion) &#8230; plus &#8230;<\/li>\n<li>only unique webpage URL history recordings this execution session (that had #place hashtagging in the old days) &#8230; through to &#8230;<\/li>\n<li>maximum webpage URL history recorded (even repeated #place hashtagging)<\/li>\n<\/ul>\n<p> &#8230; and to do this we, instead of <i>window.location=&#8217;#place&#8217;;<\/i><font size=1>ing<\/font> we now introduce an HTML <i>a<\/i> link we click and control the click event logic as per &#8230;<\/p>\n<p><code><br \/>\nvar cats = { hash: '', ih: '' };<br \/>\nfunction clickHandler(event) {<br \/>\n      cats.hash = event.target.getAttribute('title').split('\/').pop();<br \/>\n      updateContent(cats);  \/\/ which just hangs around to let \/\/setTimeout(randomize,3000); be the next <i>action<\/i> point<br \/>\n<b><\/b><br \/>\n      \/\/ Add an item to the history log<br \/>\n      document.getElementById('imyhistory').innerHTML=document.getElementById('myhistory').value;<br \/>\n      bihi=document.getElementById('imyhistory').innerHTML;<br \/>\n      if (1 == eval(document.getElementById('imyhistory').innerHTML)) { \/\/ maximum history<br \/>\n        if (sofar.indexOf(';' + document.URL.split('#')[0] + '#' + diarray[choice].id + ';') == -1) {<br \/>\n          sofar+=document.URL.split('#')[0] + '#' + diarray[choice].id + ';';<br \/>\n        }<br \/>\n        history.pushState(cats, document.URL.split('#')[0] + '#' + diarray[choice].id, document.URL.split('#')[0] + '#' + diarray[choice].id); \/\/event.target.href);<br \/>\n      } else if (3 == eval(document.getElementById('imyhistory').innerHTML)) { \/\/ unique history this session<br \/>\n        if (sofar.indexOf(';' + document.URL.split('#')[0] + '#' + diarray[choice].id + ';') == -1) {<br \/>\n          sofar+=document.URL.split('#')[0] + '#' + diarray[choice].id + ';';<br \/>\n          history.<a target=_blank title='HTML5 web browser history object pushState method information, thanks' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History_API'>pushState<\/a>(cats, document.URL.split('#')[0] + '#' + diarray[choice].id, document.URL.split('#')[0] + '#' + diarray[choice].id); \/\/event.target.href);<br \/>\n        }<br \/>\n\t  }<br \/>\n<b><\/b><br \/>\n      return event.<a target=_blank title='Javascript event https:\/\/www.w3schools.com\/jsreF\/event_preventdefault.asp method information from w3schools' href='https:\/\/www.w3schools.com\/jsreF\/event_preventdefault.asp'>preventDefault<\/a>();<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Why the var<font size=1>iable<\/font> name <i>cats<\/i>?  In honour of <a target=_blank title='Useful link, thanks' href='http:\/\/html5doctor.com\/demos\/history\/'>a very useful link<\/a>, thanks.<\/p>\n<p>The HTML and CSS and Javascript becomes <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html--GETME\" title=\"hashtag_idea.html\">hashtag_idea.html<\/a> and changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html--GETME\" title=\"hashtag_idea.html\">this way<\/a> regarding web browser history improvements.<\/p>\n<hr>\n<p id='htmlietrit'>Previous relevant <a target=_blank title='HTML Input Element Types Randomized Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-iframe-tutorial\/'>HTML Input Element Types Randomized Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Input Element Types Randomized Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea_iframe.jpg\" title=\"HTML Input Element Types Randomized Iframe Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Input Element Types Randomized Iframe Tutorial<\/p><\/div>\n<p>There are lots of things to be &#8220;cross&#8221; about trying to code for all eventualities to do with <i>web applications<\/i> &#8230; we&#8217;ll just limit it to <i>that<\/i> &#8230;<\/p>\n<ul>\n<li>computer device <font size=1>&#8230; cross platform<\/font><\/li>\n<li>web browser <font size=1>&#8230; cross browser<\/font> &#8230; and add to that, on occasions &#8230;<\/li>\n<li><i>supervision &#8220;mode&#8221;<\/i><\/li>\n<\/ul>\n<p> &#8230; and by <i>supervision &#8220;mode&#8221;<\/i> we mean that surprising &#8220;assumptions&#8221; may be thrown out the &#8220;window&#8221; (tee hee), we&#8217;ve found out usually relating to using mobile devices, when your web application is hosted in an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> things do not function anything like it does as &#8220;top.document&#8221; (ie. the first &#8220;call&#8221; of the web browser address bar) even when everything else is the same.  Okay, in our experience, this is rare, but think we remember when on other occasions this issue has reared up in front of us, it was, as with today, to do with issues revolving around &#8230;<\/p>\n<ul>\n<li>horizontal hashtagging &#8230; and associated &#8230;<\/li>\n<li>horizontal scrolling &#8230; when your &#8230;<\/li>\n<li>content extends to the right beyond the physical width of the (we&#8217;ve always found it to be, mobile) device<\/li>\n<\/ul>\n<p>And so, we&#8217;re revisiting yesterday&#8217;s <a title='HTML Input Element Types Randomized Primer Tutorial' href='#htmlietrpt'>HTML Input Element Types Randomized Primer Tutorial<\/a> because we found that when we hosted its associated &#8220;HTML input Element Types Randomized&#8221; (mini) web application in an HTML iframe element, as we did at the blog posting, here, we hadn&#8217;t tested this on an iPad, for instance, and found to our horror the next morning that it worked okay as &#8220;top.document&#8221; (via a &#8220;click picture&#8221;) execution, but showed very little content when hosted by the iframe and when using any of the web browsers (we tested Safari and Chrome) on an iPad (mobile) tablet.<\/p>\n<p>We spent several fruitless hours persisting with our stubborn &#8220;horizontal scrolling&#8221; approach, and we&#8217;ve left that struggle in the code, for others to take up, if they feel adventurous, but the solution required a little bit of simplistic thinking.<\/p>\n<p>We live in a three dimensional world.  To be &#8220;stuck on&#8221; the idea of &#8220;horizontal scrolling&#8221; is to ignore the Y and Z dimensional &#8220;view&#8221;, in favour of &#8220;X&#8221; thinking.  What about &#8220;Y&#8221; thinking?  Well, after the &#8220;X&#8221; struggle, we thought about it, and thought maybe this was feasible with less talk on Google about &#8220;vertical scrolling mobile issues&#8221; than the heaps about &#8220;horizontal scrolling mobile issues&#8221;, but then the &#8220;vertical&#8221; &#8220;Y&#8221; thinking has its own problems.  The &#8220;height&#8221; of a device is a bit of a vague concept too, and it has the complication that if you want to specify a height that equals the device height, we&#8217;ve found success using units in &#8220;vh&#8221; rather than &#8220;%&#8221;, and we started thinking this aspect alone will lead to as much complication with &#8220;Y&#8221; thinking as &#8220;X&#8221; thinking.<\/p>\n<p>So, what about &#8220;Z&#8221; thinking?  Well, there is the joy with CSS&#8217;s wonderful (and we normally talk about with &#8220;overlay&#8221; thoughts) &#8230;<\/p>\n<ul>\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; as the web application equivalent of our geographical talk regarding &#8220;elevation&#8221;.  Let&#8217;s &#8220;cherry pick&#8221; our way out of the issues!  The problem can be solved really simply with the MV<b>C<\/b> (<b>C<\/b> represents Javascript) &#8220;wresting of control&#8221; from the default M<i>V<\/i><b>C<\/b> (<i>V<\/i> represents CSS) percentage definition of HTML <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element&#8217;s &#8230;<\/p>\n<ul>\n<li><a target=_blank title='window.left information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_pos_left.asp'>left<\/a> property &#8230; and for our problem cases, which we bit the bullet and classified as &#8220;all mobile devices&#8221; we &#8220;wrested control of left to 0&#8221; (via Javascript DOM, once, at the first call) and started, instead, to make the dynamic property, be &#8230;<\/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> which we, on a first call case, set to an &#8220;order indexed value&#8221; (Javascript DOM wise), and increase for a particular &#8220;focussed&#8221; &#8220;HTML input Element Type&#8221; (and then later defaulted back to its &#8220;order indexed value&#8221;) as execution of the web application proceeds<\/li>\n<\/ul>\n<p> &#8230; as a much simpler solution, where for these problematic cases, think (a web design involving) &#8220;a wad of A4 sheets&#8221; (like vertical stacking) versus the default &#8220;film strip&#8221; (in X) (ie. horizontal scrolling) approach and the coalescing &#8220;concepts&#8221; of &#8230;<\/p>\n<ul>\n<li><b>overlay<\/b> &#8230; and\/or &#8230;<\/li>\n<li><b>reveal<\/b><\/li>\n<\/ul>\n<p>There&#8217;s that issue, and then there&#8217;s the other &#8220;forward move&#8221; with our web application.  Did you end up reading <a target=_blank title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>HTML Textarea and Div Talents Primer Tutorial<\/a> as you were invited to yesterday?  There, you would have seen a table as below explaining &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>\n<p>But their strengths and weaknesses go like this, at least to us, in the limited HTML text view of things &#8230;<\/p>\n<p><\/p>\n<table border=100>\n<tr>\n<th>Text Functionality Issue<\/th>\n<th>HTML Element Type<\/th>\n<th>Strength<\/th>\n<th>Weakness (where a &#8220;Yes&#8221; is like &#8230; &#8220;Oh No!&#8221;)<\/th<\/tr>\n<tr>\n<td rowspan=2>Display Monocolour Text<\/td>\n<td>Textarea<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td rowspan=2>Display Editable Text<\/td>\n<td>Textarea<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div<\/th>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<tr>\n<td rowspan=2>Display Multicolour Text<\/td>\n<td>Textarea<\/th>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Div<\/th>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<\/table>\n<\/blockquote>\n<p>As you would have viewed yesterday&#8217;s incarnation of the web application, your eye may have not known where to rest, with respect to the middle bit or the report bit, because both change, but the &#8220;middle&#8221; is immediately relevant whereas the bottom HTML textarea element report can sometimes be of diverting interest.  Well, that is the scenario, where something of &#8220;diverting interest&#8221; but with quite a lot of content to take in, can benefit the user greatly with a &#8220;focussing&#8221; technique, such as just highlighting the tiny bit of its content that changed just recently.  You can&#8217;t achieve this &#8220;highlighting&#8221; with the HTML textarea element, but you can with an HTML div element, which we &#8230; you guessed it &#8230; separated from the HTML textarea by establishing different, and Javascript DOM dynamically controlled &#8230;<\/p>\n<ul>\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; the &#8220;star&#8221; of today&#8217;s work.<\/p>\n<p>The &#8220;top.document&#8221; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html\" title=\"Click picture\">live run<\/a> link hopefully has an execution look the same as the HTML iframe <a href='#ihti' title=\"HTML iframe hosted run\">HTML iframe hosted live run<\/a> (below), especially on a mobile device.  The HTML and CSS and Javascript is now downloadable as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html-GETME\" title=\"hashtag_idea.html\">hashtag_idea.html<\/a> and changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html-GETME\" title=\"hashtag_idea.html\">this way<\/a>.<\/p>\n<hr>\n<p id='htmlietrpt'>Previous relevant <a target=_blank title='HTML Input Element Types Randomized Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-primer-tutorial\/'>HTML Input Element Types Randomized Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Input Element Types Randomized Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.jpg\" title=\"HTML Input Element Types Randomized Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Input Element Types Randomized Primer Tutorial<\/p><\/div>\n<p>We are quite pleased here, with a web application design (mini) project, when all three of &#8230;<\/p>\n<ul>\n<li>HTML<\/li>\n<li>Javascript<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p> &#8230; get a relatively even workload, and also that you can think of their roles as being quite separate in code presentation.  Sort of like that separatism I remember leaving the best bits (ie. the &#8220;Javascript&#8221; of the &#8220;food&#8221; world) of the meal to last as a kid.   And so it came to pass here, as the order of attending to the code was &#8230;<\/p>\n<ol>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<li>Javascript<\/li>\n<\/ol>\n<p> &#8230; and it occurs to us, if you like compartmentalization yourself as a creed you are going to see some <a target=_blank title='MVC information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Model\u2013view\u2013controller'>MVC<\/a>&#8216;ism (Model-View-Controller &#8230; we venture HTML-CSS-Javascript (DOM)) in all this.  We find the use of HTML with inner CSS and inner Javascript irresistible generally, but it is satisfying taking a rest from this.<\/p>\n<p>What&#8217;s the go with today&#8217;s &#8220;HTML input Element Types Randomized&#8221; (mini) web application project today?  It was inspired by yesterday&#8217;s &#8220;horizontal hashtag&#8221; talk when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/zipfiles-in-php-image-gallery-navigation-tutorial\/' title='Zipfiles in PHP Image Gallery Navigation Tutorial'>Zipfiles in PHP Image Gallery Navigation Tutorial<\/a> and coalesced into those web design &#8220;staples&#8221; &#8230;<\/p>\n<ul>\n<li>overlay &#8230; or &#8230;<\/li>\n<li><b>reveal<\/b><\/li>\n<\/ul>\n<p> &#8230; we use around here to pare down the web design process into our most popular two constructs, today&#8217;s falling into that <b>reveal<\/b> &#8220;staple&#8221;.  We&#8217;re doing a &#8220;horizontal&#8221; &#8220;reveal&#8221; off the user&#8217;s screen today via CSS concepts of &#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 &#8230; teamed, primarily, with the control of &#8230;<\/li>\n<li><a target=_blank title='window.left information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_pos_left.asp'>left<\/a> property &#8230; using percentage values off the screen, such as 500% being for the sixth &#8220;reveal&#8221; &#8220;webpage&#8221; of interest (and so things don&#8217;t &#8220;jigger&#8221; too much we make the HTML div width be almost 100% (ie. 98%)) &#8230; and making use of &#8230;<\/li>\n<li>window.location=&#8217;#place&#8217;;  \/\/ Horizontal hashtagging, as being in web page and (you will really quickly go to) HTML element <i>id<\/i>=place position on the webpage &#8230; facilitated by our, so often used, &#8220;randomosity&#8221; Javascript construct &#8230;<\/li>\n<li><code><i>choice = <\/i><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> * <i>diarray<\/i>.length); \/\/ where <i>diarray<\/i> array is a collection of what is today's \"content\" idea, that being ...<\/code><\/li>\n<li>HTML <a target=_blank href='https:\/\/www.w3schools.com\/TagS\/tag_input.asp' title='HTML input element information from w3schools'>input<\/a> element type properties &#8220;presentation&#8221; within HTML <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> elements showing the look, a type and the HTML <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'>outerHTML<\/a> property (where we use the CSS pseudo-element <code>#dbutton<a target=_blank title='CSS::after peudo-element information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/sel_after.asp'>::after<\/a> { content:'\\A\\A Button\\A\\A &lt;input type=button value=Button&gt;&lt;\/input&gt;'; }<\/code> type of syntax to effectively add &#8220;captions&#8221;) in the middle of the web page &#8230; with a top heading (h1 and h3), as well as &#8230;<\/li>\n<li>HTML <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> element (and it occurs to us a read of <a target=_blank title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>HTML Textarea and Div Talents Primer Tutorial<\/a> would be good, again, here) containing a report of the &#8220;randomosity&#8221; and being pulled along &#8220;horizontally (as with the h1 and h3) via &#8230;<\/li>\n<li><code>document.getElementById('myta').style.left=window.<a target=_blank title='Information about Window.getComputedStyle' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>getComputedStyle<\/a>(diarray[choice], null).getPropertyValue('left').replace('px','') + 'px'; \/\/ powered by a self calling and self timing ...<\/code><\/li>\n<li><code><a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a>(randomize,3000); \/\/ call of the one Javascript function of our (mini) web application project ... as you can see happening with ...<\/code><\/li>\n<\/ul>\n<div style=\"-webkit-overflow-scrolling: touch; overflow-y: scroll;overflow:auto;\"><iframe id='ihti' style=\"width:100%;height:700px;\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html?in=iframe\"><\/iframe><\/div>\n<p> &#8230; to end up with a &#8220;horizontal hashtagging&#8221; &#8220;reveal&#8221; &#8220;HTML input Element Types Randomized&#8221; web application you can try at this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html\">live run<\/a> link and with this HTML\/CSS\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_idea.html_GETME\">hashtag_idea.html<\/a> source code (all together, but really suited to redesigning with external CSS and external Javascript).<\/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='#d33261' onclick='var dv=document.getElementById(\"d33261\"); 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='d33261' 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='#d33305' onclick='var dv=document.getElementById(\"d33305\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33305' 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='#d33396' onclick='var dv=document.getElementById(\"d33396\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/history\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33396' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hashtag navigation such as &#8230; window.location=&#8217;#place&#8217;; \/\/ Hashtagging, as being in web page and (you will really quickly go to) HTML element id=place position on the webpage &#8230; is all fine and good in principle, but even this fast navigation &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-history-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":[185,275,276,278,281,342,354,1801,557,2349,566,576,578,587,630,652,795,1969,824,894,1988,2128,1063,1917,1319,1404,1827,1496],"class_list":["post-33396","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-captions","tag-cross-browser","tag-cross-browser-issues","tag-cross-platform","tag-css","tag-div","tag-dom","tag-getcomputedstyle","tag-hashtag","tag-highlight","tag-history","tag-html","tag-html5","tag-iframe","tag-ipad","tag-javascript","tag-mobile","tag-mobile-device","tag-mvc","tag-overlay","tag-position","tag-pseudo-element","tag-reveal","tag-scroll","tag-tutorial","tag-web-browser","tag-window-getcomputedstyle","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33396"}],"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=33396"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33396\/revisions"}],"predecessor-version":[{"id":33520,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33396\/revisions\/33520"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=33396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=33396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=33396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}