{"id":25728,"date":"2016-10-17T03:01:53","date_gmt":"2016-10-16T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25728"},"modified":"2016-10-16T20:09:04","modified_gmt":"2016-10-16T10:09:04","slug":"html-style-mapping-tool-refinement-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-style-mapping-tool-refinement-tutorial\/","title":{"rendered":"HTML Style Mapping Tool Refinement Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Style Mapping Tool Refinement Tutorial<\/p><\/div>\n

We’re continuing on with a new web application tool idea today, an external Javascript tool that when applied to a webpage, or not<\/font><\/a>, between <head> and <\/head> via …<\/p>\n


\n<

… that allows you to dynamically map some aspects of an HTML element’s style onto others.<\/p>\n

So, starting with the Javascript function “copyTextareaStyling” featuring in the HTML Textarea and Div Talents Primer Tutorial<\/a> as a starting point we’ve refined the functionality with our tool. Yesterday we had our “tool” just differentiating by HTML element type<\/i> but today we allow window.getComputedStyle()<\/a> to delve into CSS styling you’ve defined. The web application window<\/i> object’s window.getComputedStyle()<\/a> can “delve” so much better than Javascript DOM in this scenario, scouring CSS things floating above the document<\/i> object of a webpage, and we show this in today’s tutorial picture<\/a> today regarding the HTML h4 id=”myh4″ element that has the CSS styling below …<\/p>\n


\n<style>
\n#myh4 { border: 5px solid lightgreen; }
\n<\/style>
\n<\/code><\/p>\n

On this point, have you noticed that there is an implied “window.” prefix to any “document.getElementById”? In other words you can say “window.document.getElementById” and if in an HTML iframe looking back up to the parent you could say “parent.document.getElementById” (or very likely “top.document.getElementById”). Well, these ideas form the heart and soul of the new “tool” today that has this changed external Javascript programming source you could call meld_style.js<\/a>, modified in this way<\/a>, and which you can try out because we have here<\/a> a Random Emoji Slideshow to enable you to try this “tool”.<\/p>\n

Here’s a video (that we created using the “New Screen Recording” functionality of QuickTime Player<\/a> using Mac OS X on a MacBook Pro laptop) we took of a “specially modified code” session of “Random Emoji Slideshow” and using this new functionality, reflected by this HTML and Javascript and CSS emojislideshow.htm<\/a> modified from yesterday in this way<\/a> with this live run<\/a>, for you to peruse at your leisure …<\/p>\n

We hope you try this CSS mapping “tool” yourself, and\/or it gets you thinking of one you write yourself.<\/p>\n

\n

Previous relevant HTML Style Mapping Tool Primer Tutorial<\/a> is shown below.<\/p>\n

\"HTML<\/a>

HTML Style Mapping Tool Primer Tutorial<\/p><\/div>\n

We’re having a first go at a new web application tool idea today, an external Javascript tool that when applied to a webpage, or not<\/font><\/a>, between <head> and <\/head> via …<\/p>\n


\n<

… allows you to dynamically map some aspects of an HTML element’s style onto others.<\/p>\n

So far, with our prototype “tool” we only allow elements to have styling mapped from, be those with a non-blank innerHTML<\/i> property, but we’ll see over time if this opens up … am not sure.<\/p>\n

Maybe you remember the Javascript function “copyTextareaStyling” featuring in the HTML Textarea and Div Talents Primer Tutorial<\/a> as shown below? Well, that formed the heart and soul of the new “tool” today that has this external Javascript programming source you could call meld_style.js<\/a> and which you can try out because we have here<\/a> a Random Emoji Slideshow to enable you to try this “tool”.<\/p>\n

\n

Previous relevant HTML Textarea and Div Talents Primer Tutorial<\/a> is shown below.<\/p>\n

\"HTML<\/a>

HTML Textarea and Div Talents Primer Tutorial<\/p><\/div>\n

We faced a dilemma today with the name of our web application, and ended up with textarea_talent.html<\/a> (along with its business logic external Javascript textarea_talent.js<\/a>), but as the project went along we were torn towards a name of div_talent.html<\/i> and div_talent.js<\/i> as we shall explain below.<\/p>\n

We understand the great role the HTML textarea<\/a> element has in CMS<\/a> (Content Management Systems) work, and we illustrate this below with (a) WordPress (blog as an example) …<\/p>\n

<\/img><\/p>\n

It’s crucial for getting HTML or non-caretted Text (that is internally turned into HTML behind the scenes) … via those wonderful<\/a> tabs<\/a> … off the user and onto the MySql database, and then out to the client user as part of a webpage. Out at that webpage, though, we’ve no doubt this content is embedded in an HTML div<\/a> element, the other “talent” here.<\/p>\n

But their strengths and weaknesses go like this, at least to us, in the limited HTML text view of things …<\/p>\n\n\n\n\n\n\n\n\n\n\n<\/table>\n

Our web application today is like an inhouse version of (a web browser) View Page Source type of arrangement, but allowing, optionally, for the highlighting of words. The “highlighting of words” functionality needed the HTML div element to come into the equation, otherwise the “talents” of an HTML textarea element would have sufficed, and are normally preferred, for those editing reasons. By the way, an HTML textarea element given a readonly<\/i><\/a> property stops the user changing an HTML textarea element’s contents, should that be what you require.<\/p>\n

Another issue came into play as a “subtheme” of today’s tutorial. Are you aware that some HTML elements, such as …<\/p>\n

\nTextarea elements do not, by default, inherit CSS styling settings of the webpage Body element\n<\/p><\/blockquote>\n

… which means, without Javascript DOM programmatic intervention the text shown in an HTML textarea element will differ greatly in its appearance to that of an HTML div element. This annoyed us enough to warrant some research and development on this topic and found that the idea to have both HTML div and textarea elements to be mapped to the inherited look of the HTML body element, that you might attempt to do via CSS like …<\/p>\n


\n<style>
\ntextarea, div {
\n font-family: inherit;
\n font-size: inherit;
\n}
\n<\/style>
\n<\/code><\/p>\n

… was not nearly so effective a thing to do, as to put in the hard yards to “purloin” the styling characteristics of one HTML element type and “slap” those characteristics, via Javascript DOM, onto the other HTML element type of interest, via code (snippet) like used today (with its “thank you” implied link), as per …<\/p>\n


\nfunction copyTextareaStyling() {
\n var output = document.getElementById(\"tarea\"), divelem = document.getElementById(\"tareadiv\");
\n if (divelem) { \/\/ thanks to ideas off http:\/\/stackoverflow.com\/questions\/12266320\/copy-div-content-to-textarea-or-text-with-the-same-font-family-style<\/a>
\n divelem.style.fontFamily = window.getComputedStyle(output,null).fontFamily || output.style.fontFamily || output.currentStyle.getCurrentProperty('font-family');
\n divelem.style.fontSize = window.getComputedStyle(output,null).fontSize || output.style.fontSize || output.currentStyle.getCurrentProperty('font-size');
\n divelem.style.border = window.getComputedStyle(output,null).border || output.style.border || output.currentStyle.getCurrentProperty('border');
\n divelem.style.padding = window.getComputedStyle(output,null).padding || output.style.padding || output.currentStyle.getCurrentProperty('padding');
\n divelem.style.margin = window.getComputedStyle(output,null).margin || output.style.margin || output.currentStyle.getCurrentProperty('margin');
\n divelem.style.overflow = window.getComputedStyle(output,null).overflow || output.style.overflow || output.currentStyle.getCurrentProperty('overflow');
\n }
\n}
\n<\/code><\/p>\n

… via the wonders of the Javascript window.getComputedStyle()<\/a> method that we have mentioned before a few times at this blog<\/a>.<\/p>\n

Maybe you are a regular at this blog, and recognize the look of today’s live run<\/a> web application? Yes, a lot of the ideas emanating from Legend for and from HTML Map Element Web Server Tutorial<\/a> thread of blog postings went into the “purloinment”<\/a> … nga, nga .. nga nga … ngaaa … it is a word<\/font> … exercise done on legend_via_map.htm<\/a>‘s code in this way<\/a> mostly to do with the virtuous decision to hive off specific business logic to the external Javascript textarea_talent.js<\/a>.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n

Text Functionality Issue<\/th>\nHTML Element Type<\/th>\nStrength<\/th>\nWeakness (where a “Yes” is like … “Oh No!”)<\/th<\/tr>\n
Display Monocolour Text<\/td>\nTextarea<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n
Div<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n
Display Editable Text<\/td>\nTextarea<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n
Div<\/th>\n<\/td>\nYes<\/td>\n<\/tr>\n
Display Multicolour Text<\/td>\nTextarea<\/th>\n<\/td>\nYes<\/td>\n<\/tr>\n
Div<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n