{"id":33510,"date":"2017-10-07T03:01:14","date_gmt":"2017-10-06T17:01:14","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33510"},"modified":"2024-09-08T16:57:32","modified_gmt":"2024-09-08T06:57:32","slug":"css-3d-transformation-matrix-making-of-interactive-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-interactive-integration-tutorial\/","title":{"rendered":"CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial<\/p><\/div>\n

Do you remember our HTML textarea (like CMSs use) based Do It Yourself HTML Editor Integration Tutorial<\/a> HTML Editor series of blog postings? Yes, yesterday’s CSS 3D Transformation Matrix Making Of Interactive Tutorial<\/a> intimated we might integrate these two (that and today’s), and today we do. We think they work well together, and together this way, are good candidates to bear out the message of HTML Textarea and Div Talents Primer Tutorial<\/a> that both have their “talents” as per the table …<\/p>\n

\n

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

<\/p>\n\n\n\n\n\n\n\n\n\n\n<\/table>\n<\/blockquote>\n

… the extension of that lesson above, today, being that there are other stand-in HTML elements like the HTML div element with these discussions. Today’s example is the HTML td (table cell) element, that can, like the HTML div element, allow multicoloured and highlighted text, whereas the HTML textarea editing “talents” extend to that way an HTML textarea element, “under the hood” allows the use of the caret characters (“<” and “>”) in its very makeup, while with those highlighting HTML div and td type elements that look of “<” and “>” is achieved, as a display, by mapping these characters to the HTML entities “&lt;” and “&gt;” respectively.<\/p>\n

And so far we’ve integrated the Do It Yourself HTML Editor Integration Tutorial<\/a> HTML Editor into this “CSS 3D Transformation Matrix Making Of Interactive” web application via an HTML iframe element hosting of it …<\/p>\n


\nfunction anotherview() { \/\/ the parent HTML a<\/i> link onclient event logic
\n var hprefix='<html><body>', hsuffix='<\/body><\/html>';
\n var ih=document.getElementById('isdisplay').innerHTML;
\n wis='' + eval(eval(window.getComputedStyle<\/a>(document.getElementById('isdisplay'), null).getPropertyValue(\"width\").replace('px','')) - 0) + 'px'; \/\/ parent table cell (td) width
\n his='' + eval(eval(window.getComputedStyle(document.getElementById('isdisplay'), null).getPropertyValue(\"height\").replace('px','')) - 0) + 'px'; \/\/ parent table cell (td) height
\n document.getElementById('anotherapproach').style.display='block';
\n if (ih.toLowerCase().indexOf('<html') != -1 && ih.toLowerCase().indexOf('<body') != -1) {
\n hprefix='';
\n } else if (ih.toLowerCase().indexOf('<body') != -1) {
\n hprefix=ih.substring(0,ih.toLowerCase().indexOf('<body'));
\n ih=ih.substring(ih.toLowerCase().indexOf('<body'));
\n }
\n if (ih.toLowerCase().indexOf('<\/html>') != -1 && ih.toLowerCase().indexOf('<\/body>') != -1) {
\n hsuffix='';
\n } else if (ih.toLowerCase().indexOf('<\/body>') != -1) {
\n hsuffix='<\/html>';
\n }
\n if (document.URL.indexOf('localhost:8888') == -1) {
\n document.getElementById('anotherapproach').src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html?htmlcontent=\" + encodeURIComponent(hprefix + ih + hsuffix) + \"&urlprefix=\";
\n } else {
\n document.getElementById('anotherapproach').src=\"http:\/\/localhost:8888\/do_away_with_the_boring_bits.html?htmlcontent=\" + encodeURIComponent(hprefix + ih + hsuffix) + \"&urlprefix=\";
\n }
\n location.hash='#anotherapproach';
\n}
\n<\/b>
\nfunction checki(iois) { \/\/ using Client Pre-emptive Iframe<\/a> techniques to adjust iframe's iframe's width and height via parent table cell (td) width and height as calculated above
\n if (iois != null) {
\n var aconto = (iois.contentWindow || iois.contentDocument);
\n if (aconto != null) {
\n if (aconto.document) { aconto = aconto.document; }
\n if (aconto.body != null) {
\n if (wis != '') aconto.getElementById('ihtmlcontent').style.width=wis;
\n if (his != '') aconto.getElementById('ihtmlcontent').style.height=his;
\n }
\n }
\n }
\n}
\n<\/code><\/p>\n

… so that the HTML and Javascript and CSS has become downloadable making_of.htm<\/a> which changed this way<\/a> to allow this live run<\/a> link to work. You will notice that the “one-way” code functions above change a lot to make it the “two-way” integration it is now, and rather than confuse you here, will let you see the changes for yourself. “Two-way” means that once you involve the other HTML (textarea) Editor and change you make to the HTML here will go the full circle back to our “CSS 3D Transformation Matrix Making Of Interactive” editor for that other mode of changing it, and around and around it can go from there.<\/p>\n

The other new CSS you will see in code above (and for which this useful link<\/a> inspired us, thanks) is about some onhover<\/i> or onmouseover<\/i> non-mobile platform functionality we’ve introduced to that parent table cell (td) element’s contents, which get internally broken into clickable HTML span elements with some attention grabbing …<\/p>\n


\n<style>
\n#sanother:hover, span:hover {
\n border: 3px solid red; \/\/dashed #3a7999;
\n display: block;
\n\tbackground: rgba(0,0,0,0);
\n\tpadding: 4px 4px 4px 4px;
\n\tborder-radius: 15px;
\n\tbox-shadow: inset 0 0 0 2px #3a7999;
\n}
\n<\/style>
\n<\/code><\/p>\n

… that is also applied to the new HTML a<\/i> link that gets the user to the integrated Do It Yourself HTML Editor Integration Tutorial<\/a> HTML (textarea) Editor.<\/p>\n

Along the way, this project change, during unit testing, showed to us a weakness with the HTTP Cookie<\/i><\/a> management system we set up, first, with Job Search Grid Game Cookie Tutorial<\/a>‘s Javascript cookie_get.js<\/a> specifically if removal of HTTP Cookies logic, where we found out it can be important to specify<\/b>, in our case, for a cookie called “bugalugs” …<\/p>\n


\ndocument.cookie = \"bugalugs=;path=\/;<\/b>expires=0\";
\n<\/code><\/p>\n

… the “scope” (ie. path) to your HTTP Cookie, and which you can see from our changed code<\/a>.<\/p>\n

\n

Previous relevant CSS 3D Transformation Matrix Making Of Interactive Tutorial<\/a> is shown below.<\/p>\n

\"CSS<\/a>

CSS 3D Transformation Matrix Making Of Interactive Tutorial<\/p><\/div>\n

The recent CSS 3D Transformation Matrix Making Of Tutorial<\/a> got us to thinking more about linking …<\/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