{"id":22818,"date":"2016-06-18T03:01:31","date_gmt":"2016-06-17T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22818"},"modified":"2016-06-18T22:31:14","modified_gmt":"2016-06-18T12:31:14","slug":"colour-coded-element-innerhtml-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-element-innerhtml-tutorial\/","title":{"rendered":"Colour Coded Element InnerHTML Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"\/HTMLCSS\/font_zoom.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colour Coded Element InnerHTML Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/font_zoom.jpg\" title=\"Colour Coded Element InnerHTML Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colour Coded Element InnerHTML Tutorial<\/p><\/div>\n<p>Today we indulge in a few of the personal I.T. interests &#8220;swimming around&#8221; for me at the moment &#8230;<\/p>\n<ul>\n<li>fonts, and whether they can be zoomed to pixel level with not much more than client side Javascript, not using jQuery or other libraries &#8230; yet &#8230; more on this, specifically, later<\/li>\n<li>colour mixing &#8230; like at school &#8230; when you mix colours with watercolour or even pencil and less so with crayons &#8230; can that be simulated by <a target=_blank title='Overlay blog postings at this blog' href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\">&#8220;overlay&#8221;<\/a> thoughts (the usual suspects like <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property and <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a>) combined with really small <a target=_blank title='CSS opacity information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_image_transparency.asp'><i>opacity<\/i><\/a> usage?<\/li>\n<li>[<a target=_blank title='window.top information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_win_top.asp'>top<\/a>.]document.all or [top.]document.getElementsByTagName(&#8220;*&#8221;) &#8230; traversing of all the HTML elements of a webpage, regardless of their type &#8230; thanks to this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/2095966\/document-getelementsbytagname-or-document-all'>useful link<\/a> for ideas here<\/li>\n<\/ul>\n<p> &#8230; and we, at first, thought this amounts to a few different tutorial strands of thought, but, today, we bring them together into one &#8230; and then later they&#8217;ll probably need more examination as &#8220;a few different tutorial strands of thought&#8221;.<\/p>\n<p>Today we take some HTML input (that is, today, the content of a previous blog posting, but we may extend this mode of thinking if we pursue all this some more) <strike>&#8230; and take it to the zoo &#8230; <font size=1>sorry we&#8217;ve already used that venue<\/font><\/strike> and gather together textual HTML [element].<a target=_blank title='HTML DOM innerHTML Property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> data along with containing rectangle information via either ([element].style.left,[element].style.top,[element].style.right,[element].style.bottom) or [element].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>() (we first talked about with <a target=_blank title='HTML5 Canvas Map Clickaround Overlay Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-canvas-map-clickaround-overlay-tutorial\/'>HTML5 Canvas Map Clickaround Overlay Tutorial<\/a>) information &#8230;<\/p>\n<ul>\n<li>an array <b><i>things<\/i><\/b> &#8230; initialized to &#8220;[]&#8221; via <b><i>things<\/i>=[];<\/b> &#8230; populated via <b><i>things<\/i>.<a target=_blank title='Javascript array push method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_push.asp'>push<\/a>([stringPrefixedBy8CharZeroLeftPaddedStringLength])<\/b> &#8230; sorted via <b><i>things<\/i>.<a target=_blank title='Javascript array sort method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_sort.asp'>sort<\/a>();<\/b> &#8230; considered at the &#8220;top.document.body&#8221; <a target=_blank title='Javascript event onload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onload.asp'><i>onload<\/i><\/a> event<\/li>\n<li>a mouse click or touch &#8230; <b><i>things<\/i><\/b> &#8220;rectangles&#8221; are scanned through to see whether they surround our clicked\/touched co-ordinate &#8230; considered at the &#8220;top.document.body&#8221; <a target=_blank title='Javascript event onload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onmousedown.asp'><i>onmousedown<\/i><\/a> event (leaving the usual action event <a target=_blank title='Javascript event onload information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onclick.asp'><i>onclick<\/i><\/a> to keep &#8220;doin&#8217; its thang, <strike>man<\/strike> person&#8221;)<\/li>\n<\/ul>\n<p>Today, for simplicity&#8217;s sake, we&#8217;ve added our own clobbery CSS up the top of our (pretty experimental, at this stage) HTML and Javascript <a target=_blank title='font_zoom.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/font_zoom.html_GETME'>font_zoom.html<\/a> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\nimg { width:0; height:0; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; between &lt;head&gt; and &lt;\/head&gt; just to, for now, alleviate co-ordinate issues (we can&#8217;t ignore forever you&#8217;d have thought) regarding text after HTML img data.<\/p>\n<p>Think this &#8220;early days&#8221; &#8220;clicker of textual information&#8221; may be of interest to us and maybe to you, and as time goes on we&#8217;ll return, we think.<\/p>\n<p>Oh &#8230; what do you do with the <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/font_zoom.html'>live run<\/a>?<\/p>\n<ol>\n<li>Click\/touch on pieces of text, and see the relevant &#8220;smallest&#8221; [element].innerHTML involving that text faintly highlight with a colour of opacity:0.08 &#8230; and to see this colour better &#8230;<\/li>\n<li>See a separate window (via the use of [element].<a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'>outerHTML<\/a> and <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a>) show this [element].innerHTML with <i>font-size:xx-large<\/i> and the background colour more clearly indicated to you with opacity:0.8 &#8230;<\/li>\n<li>It&#8217;s up to you, but we thought it was interesting to reclick\/retouch (chortle, chortle) the same text to see the 1 of above turn into a colour with the mix of the original colour and the new colour (again shown to you in the new window) mixed together with opacity:0.08<\/li>\n<\/ol>\n<p>Sadly, have to say, that in the &#8220;hopeful conceptualization&#8221; stages of the thinking <b>regarding<\/b> &#8230;<\/p>\n<ul>\n<li><b>fonts, and whether they can be zoomed to pixel level<\/b> with not much more than client side Javascript, not using jQuery or other librries &#8230; yet<\/li>\n<li>colour mixing &#8230; like at school &#8230; when you mix colours with watercolour or even pencil and less so with crayons &#8230; can that be simulated by &#8220;overlay&#8221; thoughts (the usual suspects like <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property and <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a>) combined with really small <a target=_blank title='CSS opacity information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_image_transparency.asp'><i>opacity<\/i><\/a> usage<\/li>\n<li>[top.]document.all or [top.]document.getElementsByTagName(&#8220;*&#8221;) &#8230; traversing of all the HTML elements of a webpage, regardless of their type<\/li>\n<\/ul>\n<p> &#8230; we hoped that, somehow &#8230; <font size=1>wishful thinking, huh<\/font> &#8230; we might be able to set a huge numerically based <i>font-size<\/i> (and we tried <i>font-size:1234px<\/i> to no good avail) so that we could get &#8220;pixellated&#8221; text.  Really, wanted to get one of those effects on neon signs, and some other road signs, of text forming from &#8220;pixellated&#8221; chaotic text &#8220;coming together&#8221; to form the text we can resolve in our brains &#8230; and perhaps vice versa, of course.  This quest has been sidetracked, for now, as a result, but there are many other approaches that could involve reading font files and\/or using other software languages with their libraries (including looking further into Javascript options this way).<\/p>\n<p>We hope you <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/font_zoom.html'>live run<\/a> users like the Android <a target=_blank title='Andoid toast information' href='https:\/\/developer.android.com\/reference\/android\/widget\/Toast.html'><i>toast<\/i><\/a> looking temporary dialog box &#8220;overlay&#8221; idea we try (and we first tried with <a target=_blank title='Web Slideshow Like PowerPoint Hashtag Navigation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-slideshow-like-powerpoint-hashtag-navigation-tutorial\/'>Web Slideshow Like PowerPoint Hashtag Navigation Tutorial<\/a>), that contains usage information, avoiding the need for static text to explain, we hope?!<\/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='#d22818' onclick='var dv=document.getElementById(\"d22818\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22818' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we indulge in a few of the personal I.T. interests &#8220;swimming around&#8221; for me at the moment &#8230; fonts, and whether they can be zoomed to pixel level with not much more than client side Javascript, not using jQuery &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-coded-element-innerhtml-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":[224,281,354,451,576,1525,652,861,870,1919,876,1861,894,1918,997,1288,1319,1433],"class_list":["post-22818","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-colour","tag-css","tag-dom","tag-font","tag-html","tag-innerhtml","tag-javascript","tag-onclick","tag-onload","tag-onmousedown","tag-opacity","tag-outerhtml","tag-overlay","tag-pixel","tag-programming","tag-toast","tag-tutorial","tag-window-open"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22818"}],"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=22818"}],"version-history":[{"count":22,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22818\/revisions"}],"predecessor-version":[{"id":22892,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22818\/revisions\/22892"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}