{"id":38505,"date":"2018-05-31T03:01:09","date_gmt":"2018-05-30T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=38505"},"modified":"2018-05-31T07:12:50","modified_gmt":"2018-05-30T21:12:50","slug":"html-table-cell-maintained-dimensions-variably-zoomed-content-transform-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-content-transform-tutorial\/","title":{"rendered":"HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial<\/p><\/div>\n

In yesterday’s HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial<\/a> you eagled-eyed readers will have noted a means by which we …<\/p>\n

    \n
  1. made life easier for ourselves … and …<\/li>\n
  2. aided with genericization<\/li>\n<\/ol>\n

    … going from the static Zoom=50% (Scale=0.5) display scenarios of Speech to Text LibreOffice Template Tutorial<\/a> to the user controlled dynamic HTML iframe “child” ways of yesterday was to involve a CSS Property<\/b> called …<\/p>\n


    \n    transform-origin<\/a>
    \n... as in the CSS definition ...
    \n<style>
    \n#myDIV {
    \n transform-origin: 20% 40%;
    \n}
    \n<\/style>
    \n<\/code><\/p>\n

    … which can also be expressed (in a more dynamic way, at least in our books … but never in our pamphlettes …<\/font>) via Javascript DOM style<\/b> …<\/p>\n


    \n    [HTMLElementObject].style.transformOrigin<\/a>
    \n... as in the Javascript (DOM) (equivalent) codeline (to CSS example above) ...
    \ndocument.getElementById(\"myDIV\").style.transformOrigin = \"20% 40%\";
    \n<\/code><\/p>\n

    … except that yesterday, in order not to do our head in, we had a CSS transform-origin or Javascript DOM [HTMLElementObject].style.transformOrigin scenario of 0% 0%<\/b> … in other words, “scale from the top left”<\/b> (or maybe you’d prefer the habit of left top<\/i> to keep x, y as preferred thinking<\/i> order).<\/p>\n

    Why even talk about this? Well, the default CSS transform-origin or Javascript DOM [HTMLElementObject].style.transformOrigin scenario is, in “HTML web browser land”, 50% 50%<\/b> which is a mathematical approach sensible default in our books (pamphlettes? smamplettes?!<\/font>), but not of practical benefit to the idea of squeezing zoomed content into tight spaces. Sorry not to go fully “International” in my thinking, but we left to right readers tend to look at the top left<\/strike> left top as our eye focus point, so it makes more sense for we left to right readers to use CSS transform-origin or Javascript DOM [HTMLElementObject].style.transformOrigin scenario of 0% 0%<\/b> as the “hinge point” for transformations<\/i>. Now, there’s the word we wanted to get to … transformations<\/i> … in “CSS land” (and hence “Javascript DOM land” too) a wide variety of functionality for transformation<\/i> (of HTML elements) exists. The ones we make user controllable today go like the CSS 2D Property<\/b> …<\/p>\n


    \n    transform<\/a>
    \n... as in the CSS definition ...
    \n<style>
    \n#myDIV {
    \n transform: scale(0.5) rotate(0deg) translate(0%,0%) skew(0deg,0deg);
    \n}
    \n<\/style>
    \n<\/code><\/p>\n

    … and yes, there are 3D ones too<\/font> … which can also be expressed (in a more “way dynamagnifencent<\/font>ique”, at least in our books … reject these paplettes …<\/font>) via Javascript DOM style<\/b> …<\/p>\n


    \n    [HTMLElementObject].style.transform<\/a>
    \n... as in the Javascript (DOM) (equivalent) codeline (to CSS example above) ...
    \ndocument.getElementById(\"myDIV\").style.transform = \"scale(0.5) rotate(0deg) translate(0%,0%) skew(0deg,0deg)\";
    \n<\/code><\/p>\n

    … and so, it’s our job, in our new Javascript function …<\/p>\n


    \nfunction tochange(cthis) {
    \n var skewsuffix=\" skew(\" + document.getElementById('skewleft').value + \"deg,\" + document.getElementById('skewtop').value + \"deg)\";
    \n var tlsuffix=\" translate(\" + document.getElementById('translateleft').value + document.getElementById('translateleftb').value + \",\" + document.getElementById('translatetop').value + document.getElementById('translatetopb').value + \")\";
    \n if (cthis.id.indexOf('rotation') != -1) { \/\/ rotation change
    \n var retval=\" rotate(\" + cthis.value + \"deg)\" + skewsuffix + tlsuffix;
    \n document.getElementById(prefx + 'ihangman').style.transform=\"scale(\" + document.getElementById('scale').value + \")\" + retval;
    \n return retval;
    \n } else if (cthis.id.indexOf('translate') != -1) { \/\/ translation change
    \n document.getElementById(prefx + 'ihangman').style.transform=\"scale(\" + document.getElementById('scale').value + \")\" + \" rotate(\" + document.getElementById('rotation').value + \"deg)\" + skewsuffix + tlsuffix;
    \n return tlsuffix;
    \n } else if (cthis.id.indexOf('skew') != -1) { \/\/ translation change
    \n document.getElementById(prefx + 'ihangman').style.transform=\"scale(\" + document.getElementById('scale').value + \")\" + \" rotate(\" + document.getElementById('rotation').value + \"deg)\" + skewsuffix + tlsuffix;
    \n return skewsuffix;
    \n } else if (cthis.id.indexOf('b') != -1) { \/\/ unit change
    \n if (cthis.id.indexOf('left') != -1) { \/\/ x (left) change
    \n document.getElementById(prefx + 'ihangman').style.transformOrigin=\"\" + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value + \" \" + document.getElementById('totop').value + document.getElementById('totopb').value;
    \n } else { \/\/ y (top) change
    \n document.getElementById(prefx + 'ihangman').style.transformOrigin=\"\" + document.getElementById('toleft').value + document.getElementById('toleftb').value + \" \" + + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value;
    \n }
    \n } else { \/\/ value change
    \n if (cthis.id.indexOf('left') != -1) { \/\/ x (left) change
    \n document.getElementById(prefx + 'ihangman').style.transformOrigin=\"\" + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value + \" \" + document.getElementById('totop').value + document.getElementById('totopb').value;
    \n } else { \/\/ y (top) change
    \n document.getElementById(prefx + 'ihangman').style.transformOrigin=\"\" + document.getElementById('toleft').value + document.getElementById('toleftb').value + \" \" + + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value;
    \n }
    \n }
    \n return \"\";
    \n}
    \n<\/code><\/p>\n

    … to piece all that new user controlled HTML element data into a Javascript DOM statement like above, in order to make the resultant HTML table cell (with maintained dimensions) zoomed or scaled (or not) content be more manipulative (that dastardly content?!<\/font>).<\/p>\n

    Again, try a live run<\/a> link into a new window or see it in an HTML iframe below …<\/p>\n