{"id":33261,"date":"2017-09-29T03:01:48","date_gmt":"2017-09-28T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33261"},"modified":"2017-09-30T07:48:58","modified_gmt":"2017-09-29T21:48:58","slug":"html-input-element-types-randomized-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-primer-tutorial\/","title":{"rendered":"HTML Input Element Types Randomized Primer 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=\"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&#8221; (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","protected":false},"excerpt":{"rendered":"<p>We are quite pleased here, with a web application design (mini) project, when all three of &#8230; HTML Javascript CSS &#8230; get a relatively even workload, and also that you can think of their roles as being quite separate in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[185,281,354,1801,557,576,652,824,1988,2128,1063,1917,1319,1827],"class_list":["post-33261","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-captions","tag-css","tag-dom","tag-getcomputedstyle","tag-hashtag","tag-html","tag-javascript","tag-mvc","tag-position","tag-pseudo-element","tag-reveal","tag-scroll","tag-tutorial","tag-window-getcomputedstyle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33261"}],"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=33261"}],"version-history":[{"count":35,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33261\/revisions"}],"predecessor-version":[{"id":33353,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33261\/revisions\/33353"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=33261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=33261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=33261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}