{"id":38645,"date":"2018-06-05T03:01:22","date_gmt":"2018-06-04T17:01:22","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=38645"},"modified":"2020-06-13T21:58:10","modified_gmt":"2020-06-13T11:58:10","slug":"html-table-cell-maintained-dimensions-variably-zoomed-styling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-styling-tutorial\/","title":{"rendered":"HTML Table Cell Maintained Dimensions Variably Zoomed Styling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Table Cell Maintained Dimensions Variably Zoomed Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle_css.jpg\" title=\"HTML Table Cell Maintained Dimensions Variably Zoomed Styling Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Maintained Dimensions Variably Zoomed Styling Tutorial<\/p><\/div>\n<p>Today we wanted to address some of the aesthetics of the web application of yesterday&#8217;s <a title='HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial' href='#htmltcmdvzhct'>HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial<\/a>.<\/p>\n<p>Primarily we wanted the cells to stand out more in a 3D way, and so we experiment with &#8230;<\/p>\n<ul>\n<li>box shadows with the HTML td, div, select, input elements<\/li>\n<li>drop shadow filter with HTML select, input elements (that helped on the Safari web browser)<\/li>\n<li>text shadow on HTML h3 element &#8230; thanks to <a target=_blank title='Great help' href='https:\/\/mayvendev.com\/blog\/inner-shadows-in-css-images-text-and-beyond'>this great link<\/a> for ideas here<\/li>\n<\/ul>\n<p> &#8230; as a means by which something &#8220;flat&#8221; and very 2D looking elements can stand out more with the aid of subtle amounts of shadowing.  We achieve this with <b>new CSS styling<\/b> as per &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\ntd {<br \/>\n     display: table-cell;<br \/>\n     background-color: yellow;<br \/>\n     overflow: scroll;<br \/>\n     -webkit-overflow-scrolling: touch;<br \/>\n     border: 1px solid green;<br \/>\n     width: 33%;<br \/>\n     height: 33vh;<br \/>\n<b>     -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,255,0.8);<br \/>\n     -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,255,0.8);<br \/>\n     box-shadow: 0px 0px 2px 1px rgba(0,0,255,0.8);<\/b><br \/>\n}<br \/>\n<b>div {<br \/>\n     -webkit-box-shadow: 0px 0px 19px 10px rgba(0,0,0,0.6) !important;<br \/>\n     -moz-box-shadow: 0px 0px 19px 10px rgba(0,0,0,0.6) !important;<br \/>\n     box-shadow: 0px 0px 19px 10px rgba(0,0,0,0.6) !important;<br \/>\n}<br \/>\ninput,select {<br \/>\n     -webkit-box-shadow: 0px 0px 9px 0px rgba(127,0,0,0.6);<br \/>\n     -moz-box-shadow: 0px 0px 9px 0px rgba(127,0,0,0.6);<br \/>\n     box-shadow: 0px 0px 9px 0px rgba(127,0,0,0.6);<br \/>\n     filter: drop-shadow(0px 0px 9px rgba(127,0,0,0.6));<br \/>\n}<br \/>\nh3 {<br \/>\n     -webkit-text-shadow: 1px 1px 1px rgba(0,255,0,0.6);<br \/>\n     -moz-text-shadow: 1px 1px 1px rgba(0,255,0,0.6);<br \/>\n     text-shadow: 1px 1px 1px rgba(0,255,0,0.6);<br \/>\n     filter: grayscale(50%);<br \/>\n}<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>We wanted to get the user&#8217;s eye attracted to the HTML h3 element title in the second td cell element (now has id=&#8217;tdt&#8217;), and decided to give <a target=_blank title='SVG information from w3schools' href='http:\/\/www.w3schools.com\/svg\/'>SVG<\/a> graphics a go simulating a background image &#8220;under that cell&#8221;.  The fact is though, we end up with a two layer scenario featuring all of the usual &#8220;three amigo&#8221; methodologies for <a target=_blank title='Overlay tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> work &#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 (teamed with top:0px and left:0px)<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p> &#8230; not a background image.  We make these prison cell bars appear behind the title text in this second cell using the <b>new<\/b> Javascript code &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n\/\/<br \/>\n\/\/  Lots of other Javascript above where ...<br \/>\n\/\/<br \/>\n\/\/<br \/>\nfunction cload() {<br \/>\n  var uprefix='', dv=[],lo=[];<br \/>\n  var oot=location.search.split('originother=')[1] ? decodeURIComponent(location.search.split('originother=')[1].split('&')[0]) : '';<br \/>\n  if (oot != '') uprefix=oot + ' ';<br \/>\n  var noot=location.search.split('nonoriginother=')[1] ? decodeURIComponent(location.search.split('nonoriginother=')[1].split('&')[0]) : '';<br \/>\n  if (noot != '') uprefix+=noot + ' ';<br \/>\n  var turl=location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1].split('&')[0]) : '';<br \/>\n  if (turl != '') {<br \/>\n    document.getElementById('myh3').innerHTML+='&lt;br&gt;&lt;a target=_blank href=\"mailto:?subject=My%203x3%20Grid%20of%20Web%20Applications&body=' + encodeURIComponent(document.URL) + '\"&gt;Share this via Email&lt;\/a&gt;';<br \/>\n    lo=turl.split('loopover:');<br \/>\n    if (lo.length &gt; 1) {<br \/>\n     loopover=eval(lo[1].split('delay:')[0].split(' ')[0].split(',')[0].split(';')[0]);<br \/>\n     dvlo+=' loopover:' + loopover + ' ';<br \/>\n     turl=turl.replace('loopover:' + loopover,'');<br \/>\n    }<br \/>\n    dv=turl.split('delay:');<br \/>\n    if (dv.length &gt; 1) {<br \/>\n     delay=eval(dv[1].split('loopover:')[0].split(' ')[0].split(',')[0].split(';')[0]);<br \/>\n     dvlo+=' delay:' + delay + ' ';<br \/>\n     turl=turl.replace('delay:' + delay,'');<br \/>\n    }<br \/>\n    docontent(uprefix + turl);<br \/>\n  }<br \/>\n<i><\/i><br \/>\n<b>  var rect=document.getElementById('tdt').getBoundingClientRect();<br \/>\n  var tdbt=Math.floor(eval(('' + rect.top).replace('px',''))); \/\/eval(window.getComputedStyle(document.getElementById('tdt'), null).getPropertyValue('top').replace('px',''));<br \/>\n  var tdbl=Math.floor(eval(('' + rect.left).replace('px',''))); \/\/eval(window.getComputedStyle(document.getElementById('tdt'), null).getPropertyValue('left').replace('px',''));<br \/>\n  var tdbw=Math.floor(eval(('' + rect.width).replace('px',''))); \/\/Math.floor(eval(window.getComputedStyle(document.getElementById('tdt'), null).getPropertyValue('width').replace('px','')));<br \/>\n  var tdbh=Math.floor(eval(('' + rect.height).replace('px',''))); \/\/Math.floor(eval(window.getComputedStyle(document.getElementById('tdt'), null).getPropertyValue('height').replace('px','')));<br \/>\n<i><\/i><br \/>\n  var xis=97, xi=2, xac=91, xaw=36, bars='', okay=false;<br \/>\n<i><\/i><br \/>\n  while (!okay) {<br \/>\n  bars='&lt;g&gt;&lt;title&gt;Layer 1&lt;\/title&gt;&lt;rect id=\"svg_1\" height=\"' + eval(-8 + tdbh) + '\" width=\"' + xaw + '\" y=\"4\" x=\"6\" stroke-width=\"5\" stroke=\"rgba(0,0,0,0.5)\" fill=\"rgba(63,63,63,0.3)\"\/&gt;&lt;\/g&gt;';<br \/>\n  while (xis &lt; tdbw) {<br \/>\n    bars=bars.replace('&lt;\/g&gt;','&lt;rect id=\"svg_' + xi + '\" height=\"' + eval(-8 + tdbh) + '\" width=\"' + xaw + '\" x=\"' + xis + '\" y=\"4\" stroke-linecap=\"null\" stroke-linejoin=\"null\" stroke-dasharray=\"null\" stroke-width=\"5\" stroke=\"rgba(0,0,0,0.5)\" fill=\"rgba(63,63,63,0.3)\"\/&gt;&lt;\/g&gt;');<br \/>\n    if (xi == 5) okay=true;<br \/>\n    xis+=xac;<br \/>\n    xi++;<br \/>\n  }<br \/>\n  if (!okay) {<br \/>\n   xac-=6;<br \/>\n   xaw-=2;<br \/>\n   xis=eval(6 + xac);<br \/>\n   xi=2;<br \/>\n  }<br \/>\n  if (xac &lt;= 0 || xaw &lt;= 0) okay=true;<br \/>\n  }<br \/>\n<i><\/i><br \/>\n  document.getElementById('dsvg').innerHTML+='&lt;svg style=\"position:absolute;top:' + tdbt + 'px;left:' + tdbl + 'px;z-index:5;width:' + tdbw + 'px;height:' + tdbh + 'px;\" width=\"' + tdbw + '\" height=\"' + tdbh + '\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"&gt;&lt;filter id=\"svgBlur\" x=\"-5%\" y=\"-5%\" width=\"110%\" height=\"110%\"&gt;&lt;feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\"\/&gt;&lt;\/filter&gt;&lt;rect x=\"' + eval(0 * tdbl) + '\" y=\"' +  eval(0 * tdbt) + '\" rx=\"80\" ry=\"80\" width=\"' + tdbw + '\" height=\"' + tdbh + '\" fill=\"rgba(255,204,153,0.4)\" stroke=\"black\"  filter=\"url(#svgBlur)\" \/&gt;' + bars + '&lt;\/svg&gt;';<br \/>\n<i><\/i><br \/>\n  document.getElementById('myh3').style.position='absolute';<br \/>\n  document.getElementById('myh3').style.top=Math.floor(eval(eval('' + tdbt) + tdbh * 0.3)) + 'px';<br \/>\n  document.getElementById('myh3').style.left='' + tdbl + 'px';<br \/>\n  document.getElementById('myh3').style.width='' + tdbw + 'px';<br \/>\n  document.getElementById('myh3').style.height='' + tdbh + 'px';<br \/>\n  document.getElementById('myh3').style.zIndex='17';<br \/>\n  document.getElementById('myh3').style.opacity='1.0';<\/b><br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"load_zoomed_content('dhangman',document.getElementById('dhangman')); cload();\"&gt;<br \/>\n&lt;!-- Lots more HTML in here --&gt;<br \/>\n&lt;div id='dsvg' style='display:block;'&gt;&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n<\/code><\/p>\n<p>The HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html------GETME\">zoom_in_middle.htm<\/a> code changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html------GETME\">this way<\/a> for shadowing and SVG logic, and which you can download if you like, or try as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm\" title=\"Click picture\">live run<\/a>.  As usual, we hope this can help you in some way.<\/p>\n<hr>\n<p id='htmltcmdvzhct'>Previous relevant <a target=_blank title='HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-hashtagging-content-tutorial\/'>HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle_hashtagging.jpg\" title=\"HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial<\/p><\/div>\n<p><a target=_blank title='hashtag information fro Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Hashtag'>Hashtagging<\/a>, like &#8220;inhouse delimitation rules&#8221;, can be used to add to web functionality, because, as we have discussed before with &#8230;<\/p>\n<ul>\n<li><a target=_blank title='WordPress Is Mentioned By Code Download Navigation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-is-mentioned-by-code-download-navigation-tutorial\/'>WordPress Is Mentioned By Code Download Navigation Tutorial<\/a> where hashtags were repeated but still useful to lob onto the &#8220;first of a block of&#8221; things of interest in a (code download) table &#8230; and think of how &#8230;<\/li>\n<li><a target=_blank title='Google Translate' href='https:\/\/translate.google.com'>Google Translate<\/a> uses hashtagging in this non-positional way too &#8230; think of a URL like &#8220;https:\/\/translate.google.com\/#auto\/de\/hello&#8221; translating the English &#8220;hello&#8221; to the German &#8220;Hallo&#8221;<\/li>\n<\/ul>\n<p> &#8230; that don&#8217;t in any way interfere with what hashtags were designed for, as with a book&#8217;s table of contents, positioning you at the relevant spot (like with vinyl record tracks).  Think this was the original intention of hashtagging.<\/p>\n<p><a target=_blank title='location.hash blog posts' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=location.hash'>We&#8217;ve talked<\/a> about &#8220;location.hash&#8221; (Javascript) client storage area on a webpage for the hashtag data, and it will also appear with &#8220;document.URL&#8221; if used at the web browser address bar, or by some other means, at document.body onload time (actually available before that too).<\/p>\n<p>How do we make use of it with the latest work?  We allow for the hashtag <i>#breakout<\/i> to break out the contents from the strictures of its table cell (confines) into a new popup window of its own the width and height of its parent <i>document.body<\/i> (notice no parent.document.body &#8230; this doesn&#8217;t work for popup window scenarios) &#8230; with new Javascript code &#8230;<\/p>\n<p><code><br \/>\nvar cprewos=',', prewos=[], prewosp=[], prewosc=[], wos=[], thiswo=0, bw=-1, bh=-1, divw=-1, divh=-1, lastoh='', prewocall=false;<br \/>\nfunction alater() {<br \/>\n if (thiswo &gt; 0) {<br \/>\n  for (var iy=0; iy&lt;thiswo; iy++) {<br \/>\n       wos[iy]=window.open('','_blank','top=0,left=0,width=' + bw + 'px,height=' + bh + 'px');<br \/>\n       wos[iy].document.write(prewosc[iy]);<br \/>\n  }<br \/>\n  thiswo=0;<br \/>\n  prewocall=false;<br \/>\n }<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction changewh(inoh, bsrc) {<br \/>\n var outoh=inoh, founds=[], ifounds=0, spare, sparec='', alit=false, asrc=inoh.split('src=')[1];<br \/>\n if (inoh.indexOf('100%') != -1) {<br \/>\n outoh=lastoh.split('src=')[0] + 'src=' + asrc;<br \/>\n } else {<br \/>\n if (asrc.indexOf(bsrc) == -1) {<br \/>\n   outoh=outoh.replace(asrc.substring(1).split(asrc.substring(0,1))[0],bsrc);<br \/>\n }<br \/>\n divw=eval(inoh.split('width:')[1].split('px')[0].split('%')[0].trim());<br \/>\n divh=eval(inoh.split('height:')[1].split('px')[0].split('%')[0].trim());<br \/>\n if (bw != divw) {<br \/>\n   outoh=outoh.replace('' + divw + 'px','' + bw + 'px');<br \/>\n   outoh=outoh.replace('' + divw + 'px','' + bw + 'px');<br \/>\n   founds=outoh.split('width:');<br \/>\n   for (ifounds=3; ifounds&lt;founds.length; ifounds++) {<br \/>\n    sparec=founds[ifounds].split('px')[0].split('%')[0].trim();<br \/>\n    if (outoh.indexOf('' + sparec + 'px') != -1) {<br \/>\n    outoh=outoh.replace('' + sparec + 'px','' + Math.floor(eval(bw * eval('' + sparec) \/ divw)) + 'px');<br \/>\n    }<br \/>\n   }<br \/>\n }<br \/>\n if (bh != divh) {<br \/>\n   outoh=outoh.replace('' + divh + 'px','' + bh + 'px');<br \/>\n   outoh=outoh.replace('' + divh + 'px','' + bh + 'px');<br \/>\n   founds=outoh.split('height:');<br \/>\n   for (ifounds=3; ifounds&lt;founds.length; ifounds++) {<br \/>\n    sparec=founds[ifounds].split('px')[0].split('%')[0].trim();<br \/>\n    if (outoh.indexOf('' + sparec + 'px') != -1) {<br \/>\n    outoh=outoh.replace('' + sparec + 'px','' + Math.floor(eval(bw * eval('' + sparec) \/ divw)) + 'px');<br \/>\n    }<br \/>\n   }<br \/>\n }<br \/>\n }<br \/>\n if (alit) {<br \/>\n   alert(outoh);<br \/>\n   outoh='';<br \/>\n } else {<br \/>\n   lastoh=outoh;<br \/>\n }<br \/>\n return outoh;<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction later_breakout() {<br \/>\n    var cwh='';<br \/>\n    for (var ii=0; ii&lt;prewos.length; ii++) {<br \/>\n       if (bw &lt; 0) bw=eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px',''));<br \/>\n       if (bh &lt; 0) bh=eval(window.getComputedStyle(document.body, null).getPropertyValue('height').replace('px',''));<br \/>\n       cwh=changewh(document.getElementById(prewosp[ii] + 'divhangman').outerHTML,prewos[ii]);<br \/>\n       if (cwh != '') {<br \/>\n       prewosc[thiswo]=('&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;&lt;' + document.body.outerHTML.substring(1).split('&gt;')[0] + '&gt;' + cwh + document.getElementById('readyfortransitions_ooo').outerHTML + document.getElementById('readyfortransitions_nooo').outerHTML + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n       thiswo++;<br \/>\n       if (!prewocall) {<br \/>\n         prewocall=true;<br \/>\n         setTimeout(alater,3000);<br \/>\n       }<br \/>\n       }<br \/>\n    }<br \/>\n    prewos=[];<br \/>\n    prewosp=[];<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction maybe_breakout(howurlij) {<br \/>\n    if (howurlij.indexOf('#breakout') != -1) { \/\/ new idea for #breakout<br \/>\n      if (cprewos.indexOf(',' + howurlij + ',') == -1 && document.URL.indexOf('#breakout') == -1 && location.hash.indexOf('breakout') == -1) {<br \/>\n       prewosp.push(prefx);<br \/>\n       prewos.push(howurlij);<br \/>\n       cprewos+=howurlij + ',';<br \/>\n       if (prewos.length == 1) {<br \/>\n        setTimeout(later_breakout,6000);<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; the code above called into play via two sets of <b>these code lines<\/b> populating the iframes (with content) &#8230;<\/p>\n<p><code><br \/>\n    document.getElementById(prefx + 'ihangman').src=howurl[ij];<br \/>\n    <b>maybe_breakout(howurl[ij]);<\/b><br \/>\n<\/code><\/p>\n<p>And so here we are building on yesterday&#8217;s <a title='HTML Table Cell Maintained Dimensions Variably Zoomed Animated Content Tutorial' href='#htmltcmdvzact'>HTML Table Cell Maintained Dimensions Variably Zoomed Animated Content Tutorial<\/a> with HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html-----GETME\">zoom_in_middle.htm<\/a> code (that changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html-----GETME\">this way<\/a> for hashtagging logic) you can download if you like.  We hope this leaves you with ideas.<\/p>\n<hr>\n<p id='htmltcmdvzact'>Previous relevant <a target=_blank title='HTML Table Cell Maintained Dimensions Variably Zoomed Animated Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-animated-content-tutorial\/'>HTML Table Cell Maintained Dimensions Variably Zoomed Animated Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Table Cell Maintained Dimensions Variably Zoomed Animated Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle_animation.jpg\" title=\"HTML Table Cell Maintained Dimensions Variably Zoomed Animated Content Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Maintained Dimensions Variably Zoomed Animated Content Tutorial<\/p><\/div>\n<p>An onion layer (\u00e0 la &#8220;<a target=_blank title='Onions of the 4th dimension' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=onions'>Onions of the 4th Dimension<\/a>&#8220;) on top of the recent <a title='HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Content Tutorial' href='#htmltcmdmvzct'>HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Content Tutorial<\/a> would be &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone?, anyone?<\/a> &#8230; yes, you are right over there by the window, trying to escape &#8230; animate the content.  Does this need Javascript (DOM)?  Do fish swim?  But mainly it needs CSS &#8230; CSS3 functionality act-u-ally.  For information about &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Keyframes w3schools information' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>keyframes<\/a><\/li>\n<li><a target=_blank title='Animations w3schools information' href='https:\/\/www.w3schools.com\/css\/css3_animations.asp'>animation<\/a><\/li>\n<li><a target=_blank title='Transitions w3schools information' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>transition<\/a><\/li>\n<\/ul>\n<p> &#8230; at this blog we&#8217;d like to direct you to a thread of blog posts we did deliberately missing Javascript that you can latch onto the head of at <a target=_blank title='Missing Javascript Audio on Unmute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/missing-javascript-audio-on-unmute-tutorial\/'>Missing Javascript Audio on Unmute Tutorial<\/a>, and we recommend you read right down through it.  Where the Javascript (DOM) makes the functionality today all the more powerful is by the wonderful way CSS can be dynamically added to the workings of a webpage within the document.body by filling in a &lt;style&gt; &#8230; &lt;\/style&gt; dynamic CSS styling segment within HTML div &#8230;<\/p>\n<p><code><br \/>\n&lt;div id='readyfortransitions_ooo'&gt;&lt;\/div&gt;<br \/>\n&lt;div id='readyfortransitions_nooo'&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; elements, for example, on the fly off either\/both &#8230;<\/p>\n<ol>\n<li>document.body onload event &#8230; and\/or &#8230;<\/li>\n<li>result of user defined entry from a Javascript prompt window resulting from the click\/touch of the &#8220;(Animated?) Content&#8221; button<\/li>\n<\/ol>\n<p> &#8230; utilizing the new Javascript function &#8230;<\/p>\n<p><code><br \/>\nvar ooo='', nooo='';<br \/>\nvar loopover='20', delay='5', dvlo='';<br \/>\n<br \/>\nfunction lookfornonabscissa(olabel, oval) {<br \/>\n var ret_val=oval, sprefix='', spareval='';<br \/>\n if (olabel == 'ooo') {<br \/>\n   if (ooo.indexOf('_') != -1) {<br \/>\n     sprefix=' #' + getlist() + ' { -moz-animation: spin ' + loopover + 's infinite linear; -webkit-animation: spin ' + loopover + 's infinite linear; animation: spin ' + loopover + 's linear infinite reverse; animation-delay: ' + delay + 's; } ';<br \/>\n     if (document.getElementById('readyfortransitions_ooo').innerHTML == '') {<br \/>\n      document.getElementById('readyfortransitions_ooo').innerHTML+=\"&lt;st\" + \"yle&gt; \" + sprefix + \" @-moz-keyframes spin { from { -moz-transformOrigin: \" + originother.replace(';','') + \"; } to { -moz-transformOrigin: \" + ooo.replace(\/\\_\/g,'').replace(';','') + \"; } } @-webkit-keyframes spin { from { -webkit-transformOrigin: \" + originother.replace(';','') + \"; } to { -webkit-transformOrigin: \" + ooo.replace(\/\\_\/g,'').replace(';','') + \"; } } @keyframes spin { from { transformOrigin: \" + originother.replace(';','') + \"; } to { transformOrigin: \" + ooo.replace(\/\\_\/g,'').replace(';','') + \"; } } &lt;\/sty\" + \"le&gt;\";<br \/>\n      sprefix='';<br \/>\n     }<br \/>\n     document.getElementById('readyfortransitions_ooo').innerHTML=document.getElementById('readyfortransitions_ooo').innerHTML.replace(\"&lt;sty\" + \"le&gt;\", \"&lt;sty\" + \"le&gt; \" + sprefix + \" \");<br \/>\n   }<br \/>\n } else if (olabel == 'nooo') {<br \/>\n   if (nooo.indexOf('_') != -1) {<br \/>\n     sprefix=' #' + getlist() + ' { -moz-animation: spintwo ' + loopover + 's infinite linear; -webkit-animation: spintwo ' + loopover + 's infinite linear; animation: spintwo ' + loopover + 's linear infinite reverse; animation-delay: ' + delay + 's; } ';<br \/>\n     if (document.getElementById('readyfortransitions_nooo').innerHTML == '') {<br \/>\n      document.getElementById('readyfortransitions_nooo').innerHTML+=\"&lt;st\" + \"yle&gt; \" + sprefix + \" @-moz-keyframes spintwo { from { -moz-transform: \" + nonoriginother.replace(';','') + \"; } to { -moz-transform: \" + nooo.replace(\/\\_\/g,'').replace(';','') + \"; } } @-webkit-keyframes spintwo { from { -webkit-transform: \" + nonoriginother.replace(';','') + \"; } to { -webkit-transform: \" + nooo.replace(\/\\_\/g,'').replace(';','') + \"; } } @keyframes spintwo { from { transform: \" + nonoriginother.replace(';','') + \"; } to { transform: \" + nooo.replace(\/\\_\/g,'').replace(';','') + \"; } } &lt;\/sty\" + \"le&gt;\";<br \/>\n      sprefix='';<br \/>\n     }<br \/>\n     document.getElementById('readyfortransitions_nooo').innerHTML=document.getElementById('readyfortransitions_nooo').innerHTML.replace(\"&lt;sty\" + \"le&gt;\", \"&lt;sty\" + \"le&gt; \" + sprefix + \" \");<br \/>\n   }<br \/>\n } else if (olabel == '') {<br \/>\n   var dots=oval.split('_'), gro='';<br \/>\n   if (dots.length &gt; 1) {<br \/>\n     ret_val=dots[0];<br \/>\n     for (idots=1; idots&lt;dots.length; idots++) {<br \/>\n       gro=dots[idots].split('deg')[0].split('px')[0].split('%')[0].split(',')[0].split(' ')[0].split(')')[0];<br \/>\n       ret_val+=dots[idots].replace(gro,'');<br \/>\n     }<br \/>\n   }<br \/>\n } else if (olabel.indexOf('left') != -1 && document.getElementById(olabel)) {<br \/>\n   if (oval.indexOf('_') != -1) {<br \/>\n     document.getElementById(olabel).title=oval; \/\/'_' + oval.split('_')[1];<br \/>\n     ret_val=oval.split('_')[0];<br \/>\n   } else {<br \/>\n     document.getElementById(olabel).title='';<br \/>\n   }<br \/>\n } else {<br \/>\n   var tis='';<br \/>\n   if (document.getElementById(olabel + 'left')) {<br \/>\n     tis=document.getElementById(olabel + 'left').title;<br \/>\n   }<br \/>\n   if (oval.indexOf('_') != -1 && tis != '') {<br \/>\n     \/\/ Set up CSS transition here<br \/>\n     spareval=document.getElementById(olabel + 'left').title.split('_')[0];<br \/>\n     if (olabel == 'origin' || olabel == 'toleft') {<br \/>\n     ooo=ooo.replace(spareval + '_','_');<br \/>\n     } else {<br \/>\n     nooo=nooo.replace(spareval + '_','_');<br \/>\n     }<br \/>\n     ret_val=oval.split('_')[0];<br \/>\n     if (olabel == 'origin' || olabel == 'toleft') {<br \/>\n     ooo=ooo.replace(ret_val + '_','_');<br \/>\n     } else {<br \/>\n     nooo=nooo.replace(ret_val + '_','_');<br \/>\n     }<br \/>\n   } else if (oval.indexOf('_') != -1) {<br \/>\n     \/\/ Set up CSS transition here<br \/>\n     ret_val=oval.split('_')[0];<br \/>\n     if (olabel == 'origin' || olabel == 'toleft') {<br \/>\n     ooo=ooo.replace(ret_val + '_','_');<br \/>\n     } else {<br \/>\n     nooo=nooo.replace(ret_val + '_','_');<br \/>\n     }<br \/>\n   } else if (tis != '') {<br \/>\n     \/\/ Set up CSS transition here<br \/>\n     spareval=document.getElementById(olabel + 'left').title.split('_')[0];<br \/>\n     if (olabel == 'origin' || olabel == 'toleft') {<br \/>\n     ooo=ooo.replace(spareval + '_','_');<br \/>\n     } else {<br \/>\n     nooo=nooo.replace(spareval + '_','_');<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n return ret_val;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Maybe you are amused by this function&#8217;s name of &#8220;lookfornonabscissa&#8221; (though a better name would be &#8220;lookfornon<a target=_blank title='Mantissa' href='https:\/\/www.yourdictionary.com\/mantissa'>mantissa<\/a>&#8220;)?  Well, it goes back to similar ideas to that presented at <a target=_blank title='Textarea Pointing Local Font Colour Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-local-font-colour-tutorial\/'>Textarea Pointing Local Font Colour Tutorial<\/a> where, in our thinking, we like making use of &#8220;inhouse delimitation rule&#8221; ideas when we think a data item is restricted to just being made up of integers, and then we shaped to do it using a period (.) &#8220;inhouse delimitation rule&#8221; to (more neatly, we think) store &#8220;destination animation setting&#8221; data items, when we realised we&#8217;d forgotten a &#8220;scale(0.5)&#8221; scenario wrecked our train of thought, so we settled for the more kludgy introduction of a (user entered) &#8220;_&#8221; (underscore) usage in that prompt window where <strike>integers<\/strike>numbers can (ie. did we mention, &#8220;all this is optional&#8221;) be defined as per a &#8230;<\/p>\n<p><code><br \/>\n[animationInitialNumberSetting]_[animationGoToAfterDelayBackToInitialAfterLoopoverValueSetting]<br \/>\n<\/code><\/p>\n<p> &#8230; &#8220;inhouse delimitation rule&#8221;, as our best thought for the user being able to define the data needed for these animations of content.<\/p>\n<p>So, again, try a <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm\">live run<\/a> link into a new window or see it in an HTML iframe, the result of clicking the &#8220;(Animated?) Content&#8221; button and entering &#8230;<\/p>\n<p><code><br \/>\n+ loopover:45 delay:1 0% 0%; scale(0.5) rotate(12_34deg) translate(0%,0%) skew(5_15deg,6_16deg); https:\/\/www.rjmprogramming.com.au\/About_Us.html,https:\/\/www.rjmprogramming.com.au\/Welcome.html,https:\/\/www.rjmprogramming.com.au\/Contact_Us.html,https:\/\/www.rjmprogramming.com.au\/Services.html,https:\/\/www.rjmprogramming.com.au\/News.html,https:\/\/www.rjmprogramming.com.au\/Link.html<br \/>\n<\/code><\/p>\n<p> &#8230; below, and which includes an email sharing link now &#8230;<\/p>\n<p><iframe style='height:100vh;width:100%;' src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm?url=loopover%3A45%20delay%3A1%200%25%200%25%3B%20scale(0.5)%20rotate(12_34deg)%20translate(0%25%2C0%25)%20skew(5_15deg%2C6_16deg)%3B%20https%3A%2F%2Fwww.rjmprogramming.com.au%2FAbout_Us.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FWelcome.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FContact_Us.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FServices.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FNews.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FLink.html'><\/iframe><\/p>\n<p> &#8230; and HTML and Javascript and (heaps more dynamically added) CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html----GETME\">zoom_in_middle.htm<\/a> code (that changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html----GETME\">this way<\/a> for animation logic) you can download if you like.  And so yet again, we hope it is food for thought for you, yours and theirs, and anything passing you by.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-animated-content-tutorial\/'>HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Animated Content Tutorial<\/a>.<\/p>\n<hr>\n<p id='htmltcmdmvzct'>Previous relevant <a target=_blank title='HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-multiple-variably-zoomed-content-tutorial\/'>HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle_contents.jpg\" title=\"HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Content Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Maintained Dimensions Multiple Variably Zoomed Content Tutorial<\/p><\/div>\n<p>Today we build on yesterday&#8217;s transformational <a title='HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial' href='#htmltcmdvzctt'>HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial<\/a> building more flexibility and power into the way it can be used.<\/p>\n<p>So far with these usages we can stick to HTML and Javascript and CSS usage because the information we pass is small enough to pass in a (web browser address bar) URL for &#8230;<\/p>\n<ul>\n<li>up to 6 URLs corresponding to the 6 (of 9) available table cells we set aside for content<\/li>\n<li>transformOrigin setting data<\/li>\n<li>transform setting data<\/li>\n<\/ul>\n<p> &#8230; so that we can &#8230;<\/p>\n<ul>\n<li>modify the current webpage table cell look<\/li>\n<li>create a new webpage window table cell look<\/li>\n<li>do both<\/li>\n<\/ul>\n<p> &#8230; via the mechanism of turning the &#8220;Content:&#8221; wording of the webpage into a &#8220;Content button&#8221; (plus the colon), that button opening a Javascript window.<a target=_blank title='Javascript window.prompt window information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> (popup window) where the user can define all these &#8220;content&#8221; functionality improvements.  With URLs we are mainly thinking of ones from the rjmprogramming.com.au domain, with no guarantee on you trying any others.<\/p>\n<p>See, codewise, how we can take a URL and load the ($_GET[]) parameters into the table cells &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n\/\/<br \/>\n\/\/  Lots of other Javascript above where ...<br \/>\n\/\/<br \/>\n\/\/<br \/>\n<b>function cload() {<br \/>\n  var uprefix='';<br \/>\n  var oot=location.search.split('originother=')[1] ? decodeURIComponent(location.search.split('originother=')[1].split('&')[0]) : '';<br \/>\n  if (oot != '') uprefix=oot + ' ';<br \/>\n  var noot=location.search.split('nonoriginother=')[1] ? decodeURIComponent(location.search.split('nonoriginother=')[1].split('&')[0]) : '';<br \/>\n  if (noot != '') uprefix+=noot + ' ';<br \/>\n  var turl=location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1].split('&')[0]) : '';<br \/>\n  if (turl != '') docontent(uprefix + turl);<br \/>\n}<\/b><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"load_zoomed_content('dhangman',document.getElementById('dhangman')); <b>cload();<\/b>\"&gt;<br \/>\n<\/code><\/p>\n<p>And yet again, try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm\">live run<\/a> link into a new window or see it in an HTML iframe below &#8230;<\/p>\n<p><iframe style='height:100vh;width:100%;' src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.htm?url=%200%25%200%25%3B%20scale(0.5)%20rotate(5deg)%20translate(0%25%2C0%25)%20skew(2deg%2C8deg)%3B%20https%3A%2F%2Fwww.rjmprogramming.com.au%2FAbout_Us.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FWelcome.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FContact_Us.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FServices.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FNews.html%2Chttps%3A%2F%2Fwww.rjmprogramming.com.au%2FLink.html'><\/iframe><\/p>\n<p> &#8230; and HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html---GETME\">zoom_in_middle.htm<\/a> code (that changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html---GETME\">>this way<\/a>) you can download if you like.  And yet again, we hope it is food for thought for you, yours and theirs.<\/p>\n<hr>\n<p id='htmltcmdvzctt'>Previous relevant <a target=_blank title='HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-content-transform-tutorial\/'>HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle_transform.jpg\" title=\"HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Maintained Dimensions Variably Zoomed Content Transform Tutorial<\/p><\/div>\n<p>In yesterday&#8217;s <a title='HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial' href='#htmltcmdvzcpt'>HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial<\/a> you eagled-eyed readers will have noted a means by which we &#8230;<\/p>\n<ol>\n<li>made life easier for ourselves &#8230; and &#8230;<\/li>\n<li>aided with genericization<\/li>\n<\/ol>\n<p> &#8230; going from the static Zoom=50% (Scale=0.5) display scenarios of <a target=_blank title='Speech to Text LibreOffice Template Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/speech-to-text-libreoffice-template-tutorial\/'>Speech to Text LibreOffice Template Tutorial<\/a> to the user controlled dynamic HTML iframe &#8220;child&#8221; ways of yesterday was to involve a CSS <b>Property<\/b> called &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='CSS transform-origin Property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_transform-origin.asp'>transform-origin<\/a><br \/>\n... as in the CSS definition ...<br \/>\n&lt;style&gt;<br \/>\n#myDIV {<br \/>\n    transform-origin: 20% 40%;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which can also be expressed (in a more dynamic way, at least in our books <font size=1>&#8230; but never in our pamphlettes &#8230;<\/font>) via Javascript DOM <b>style<\/b> &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Style transformOrigin Property information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_style_transformorigin.asp'>[HTMLElementObject].style.transformOrigin<\/a><br \/>\n... as in the Javascript (DOM) (equivalent) codeline (to CSS example above) ...<br \/>\ndocument.getElementById(\"myDIV\").style.transformOrigin = \"20% 40%\";<br \/>\n<\/code><\/p>\n<p> &#8230; 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 <b>0% 0%<\/b> &#8230; in other words, <b>&#8220;scale from the top left&#8221;<\/b> (or maybe you&#8217;d prefer the habit of <i>left top<\/i> to keep x, y as preferred <i>thinking<\/i> order).<\/p>\n<p>Why even talk about this?  Well, the default CSS transform-origin or Javascript DOM [HTMLElementObject].style.transformOrigin scenario is, in &#8220;HTML web browser land&#8221;, <b>50% 50%<\/b> which is a mathematical approach sensible default in our books (<font size=1>pamphlettes? smamplettes?!<\/font>), but not of practical benefit to the idea of squeezing zoomed content into tight spaces.  Sorry not to go fully &#8220;International&#8221; in my thinking, but we left to right readers tend to look at the <strike>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 <b>0% 0%<\/b> as the &#8220;hinge point&#8221; for <i>transformations<\/i>.   Now, there&#8217;s the word we wanted to get to &#8230; <i>transformations<\/i> &#8230; in &#8220;CSS land&#8221; (and hence &#8220;Javascript DOM land&#8221; too) a wide variety of functionality for <i>transformation<\/i> (of HTML elements) exists.  The ones we make user controllable today go like the CSS 2D <b>Property<\/b> &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='CSS transform Property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform<\/a><br \/>\n... as in the CSS definition ...<br \/>\n&lt;style&gt;<br \/>\n#myDIV {<br \/>\n    transform: scale(0.5) rotate(0deg) translate(0%,0%) skew(0deg,0deg);<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; <font size=2>and yes, there are 3D ones too<\/font> &#8230; which can also be expressed (in a more &#8220;way dynam<font size=1>agnifencent<\/font>ique&#8221;, at least in our books <font size=1>&#8230; reject these paplettes &#8230;<\/font>) via Javascript DOM <b>style<\/b> &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Style transform Property information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_style_transform.asp'>[HTMLElementObject].style.transform<\/a><br \/>\n... as in the Javascript (DOM) (equivalent) codeline (to CSS example above) ...<br \/>\ndocument.getElementById(\"myDIV\").style.transform = \"scale(0.5) rotate(0deg) translate(0%,0%) skew(0deg,0deg)\";<br \/>\n<\/code><\/p>\n<p> &#8230; and so, it&#8217;s our job, in our new Javascript function &#8230;<\/p>\n<p><code><br \/>\nfunction tochange(cthis) {<br \/>\n  var skewsuffix=\" skew(\" + document.getElementById('skewleft').value + \"deg,\" + document.getElementById('skewtop').value + \"deg)\";<br \/>\n  var tlsuffix=\" translate(\" + document.getElementById('translateleft').value + document.getElementById('translateleftb').value + \",\" + document.getElementById('translatetop').value + document.getElementById('translatetopb').value + \")\";<br \/>\n  if (cthis.id.indexOf('rotation') != -1) {  \/\/ rotation change<br \/>\n    var retval=\" rotate(\" + cthis.value + \"deg)\" + skewsuffix + tlsuffix;<br \/>\n    document.getElementById(prefx + 'ihangman').style.transform=\"scale(\" + document.getElementById('scale').value + \")\" + retval;<br \/>\n    return retval;<br \/>\n  } else if (cthis.id.indexOf('translate') != -1) {  \/\/ translation change<br \/>\n    document.getElementById(prefx + 'ihangman').style.transform=\"scale(\" + document.getElementById('scale').value + \")\" + \" rotate(\" + document.getElementById('rotation').value + \"deg)\" + skewsuffix + tlsuffix;<br \/>\n    return tlsuffix;<br \/>\n  } else if (cthis.id.indexOf('skew') != -1) {  \/\/ translation change<br \/>\n    document.getElementById(prefx + 'ihangman').style.transform=\"scale(\" + document.getElementById('scale').value + \")\" + \" rotate(\" + document.getElementById('rotation').value + \"deg)\" + skewsuffix + tlsuffix;<br \/>\n    return skewsuffix;<br \/>\n  } else if (cthis.id.indexOf('b') != -1) {  \/\/ unit change<br \/>\n    if (cthis.id.indexOf('left') != -1) {  \/\/ x (left) change<br \/>\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;<br \/>\n    } else {  \/\/ y (top) change<br \/>\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;<br \/>\n    }<br \/>\n  } else {  \/\/ value change<br \/>\n    if (cthis.id.indexOf('left') != -1) {  \/\/ x (left) change<br \/>\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;<br \/>\n    } else {  \/\/ y (top) change<br \/>\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;<br \/>\n    }<br \/>\n  }<br \/>\n  return \"\";<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; 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 (<font size=1>that dastardly content?!<\/font>).<\/p>\n<p>Again, try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html\">live run<\/a> link into a new window or see it in an HTML iframe below &#8230;<\/p>\n<p><iframe style='height:100vh;width:100%;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html'><\/iframe><\/p>\n<p> &#8230; and HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html--GETME\">zoom_in_middle.html<\/a> code (that changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html--GETME\">>this way<\/a>) you can download if you like.  Again, we hope it is food for thought for you.<\/p>\n<hr>\n<p id='htmltcmdvzcpt'>Previous relevant <a target=_blank title='HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-content-primer-tutorial\/'>HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.jpg\" title=\"HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Speech to Text LibreOffice Template Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/speech-to-text-libreoffice-template-tutorial\/'>Speech to Text LibreOffice Template Tutorial<\/a> had synergies with process, explained yesterday, and synergies with trying to express zoomed content in a limited space, involving two quite different concepts &#8230;<\/p>\n<ul>\n<li>Hangman Game<\/li>\n<li>LibreOffice Template<\/li>\n<\/ul>\n<p> &#8230; us deciding on a static Zoom=50% (Scale=0.5) display with this in yesterday&#8217;s work.  This got us wondering if we can design a proof of concept web application where &#8230;<\/p>\n<ul>\n<li>the Zooming (or Scaling) can be dynamically selected by the user, bit like those magnifier functionalities so popular on fashion eCommerce websites<\/li>\n<li>a couple of content choices (as above) can be dynamically selected by the user<\/li>\n<li>the display of this content can be created at &#8230;\n<ol>\n<li>document.body onload event &#8230; and\/or &#8230;<\/li>\n<li>onclick event &#8230; shared Javascript code as per &#8230;<br \/>\n<code><br \/>\nfunction load_zoomed_content(prefix,othis) {<br \/>\n    prefx=prefix;<br \/>\n    if (othis.innerHTML.indexOf('over' + 'flow') == -1) othis.innerHTML+='&lt;div onclick=\"prefx=' + \"'\" + prefix + \"';\" + '\" id=\"' + prefix + 'divhangman\" style=\"background-color:white;overflow:hidden;width:100%;height:100%;\"&gt;&lt;\/div&gt;';<br \/>\n    myw=eval(window.getComputedStyle(document.getElementById(prefix + 'divhangman'), null).getPropertyValue('width').replace('px','')); \/\/ + myw;<br \/>\n    myh=eval(window.getComputedStyle(document.getElementById(prefix + 'divhangman'), null).getPropertyValue('height').replace('px','')); \/\/ + myh;<br \/>\n    document.getElementById(prefix + 'divhangman').innerHTML='&lt;iframe onclick=\"prefx=' + \"'\" + prefix + \"';\" + '\" style=\"border:1px solid red;transform-origin: 0% 0%;transform:scale(' + document.getElementById('scale').value + '); -o-transform: scale(' + document.getElementById('scale').value + '); -moz-transform: scale(' + document.getElementById('scale').value + '); -ms-transform: scale(' + document.getElementById('scale').value + '); -webkit-transform:  scale(' + document.getElementById('scale').value + ');width:' + Math.floor(eval(eval(100.0 \/ document.getElementById('scale').value))) + '%;height:' + Math.floor(eval(eval(100.0 \/ document.getElementById('scale').value))) + '%;\" id=\"' + prefix + 'ihangman\" src=\"hangman_bg.html?curplayer=' + curplayer + '&tosolve=' + encodeURIComponent(swhatshort) + \"&clue=\" + encodeURIComponent(clue) + '\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (document.getElementById('ohangman').value.indexOf('?') == -1) {<br \/>\n     prefx=prefix;<br \/>\n     docontent('hangman_bg.html?curplayer=' + curplayer + '&tosolve=' + encodeURIComponent(swhatshort) + \"&clue=\" + encodeURIComponent(clue));<br \/>\n     doscale(document.getElementById('scale').value);<br \/>\n    } else {<br \/>\n     prefx=prefix;<br \/>\n     docontent(document.getElementById('content').value);<br \/>\n     doscale(document.getElementById('scale').value);<br \/>\n    }<br \/>\n    othis.style.width=Math.floor(eval(myw)) + 'px';<br \/>\n    othis.style.height=Math.floor(eval(myh)) + 'px';<br \/>\n    othis.style.maxWidth=Math.floor(eval(myw)) + 'px';<br \/>\n    othis.style.maxHeight=Math.floor(eval(myh)) + 'px';<br \/>\n    document.getElementById(prefix + 'divhangman').style.width=Math.floor(eval(myw)) + 'px';<br \/>\n    document.getElementById(prefix + 'divhangman').style.height=Math.floor(eval(myh)) + 'px';<br \/>\n    document.getElementById(prefix + 'divhangman').style.maxWidth=Math.floor(eval(myw)) + 'px';<br \/>\n    document.getElementById(prefix + 'divhangman').style.maxHeight=Math.floor(eval(myh)) + 'px';<br \/>\n    document.getElementById(prefix + 'ihangman').style.width=Math.floor(eval(eval(1.0 \/ document.getElementById('scale').value) * myw)) + 'px';<br \/>\n    document.getElementById(prefix + 'ihangman').style.height=Math.floor(eval(eval(1.0 \/ document.getElementById('scale').value) * myh)) + 'px';<br \/>\n    document.getElementById(prefix + 'ihangman').style.maxWidth=Math.floor(eval(eval(1.0 \/ document.getElementById('scale').value) * myw)) + 'px';<br \/>\n    document.getElementById(prefix + 'ihangman').style.maxHeight=Math.floor(eval(eval(1.0 \/ document.getElementById('scale').value) * myh)) + 'px';<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<li>for a webpage consisting of a 3&#215;3 grid of HTML table cells (td)<\/li>\n<\/ul>\n<p>Try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html\">live run<\/a> link into a new window or see it in an HTML iframe below &#8230;<\/p>\n<p><iframe style='height:100vh;width:100%;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html'><\/iframe><\/p>\n<p> &#8230; and HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zoom_in_middle.html-GETME\">zoom_in_middle.html<\/a> code you can download if you like.  We hope it is food for thought for you.<\/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='#d38487' onclick='var dv=document.getElementById(\"d38487\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scale\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d38487' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d38505' onclick='var dv=document.getElementById(\"d38505\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/skew\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d38505' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d38522' onclick='var dv=document.getElementById(\"d38522\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/url\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d38522' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d38578' onclick='var dv=document.getElementById(\"d38578\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d38578' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d38616' onclick='var dv=document.getElementById(\"d38616\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d38616' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d38645' onclick='var dv=document.getElementById(\"d38645\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d38645' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we wanted to address some of the aesthetics of the web application of yesterday&#8217;s HTML Table Cell Maintained Dimensions Variably Zoomed Hashtagging Content Tutorial. Primarily we wanted the cells to stand out more in a 3D way, and so &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-styling-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":[1669,2419,84,2566,1580,257,281,282,2380,342,354,1833,380,557,576,587,652,675,2205,2562,739,3326,2563,2561,894,997,1761,1071,1094,1572,1147,1226,1238,1581,2567,1298,2378,1300,1319,1345,1498],"class_list":["post-38645","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-address-bar","tag-aesthetics","tag-animation-2","tag-box-shadow","tag-cell","tag-content","tag-css","tag-css3","tag-delay","tag-div","tag-dom","tag-drop-shadow","tag-email","tag-hashtag","tag-html","tag-iframe","tag-javascript","tag-keyframes","tag-loop","tag-magnifier","tag-mailto","tag-mantissa","tag-origin","tag-overflow","tag-overlay","tag-programming","tag-prompt","tag-rotate","tag-scale","tag-shadow","tag-skew","tag-svg","tag-table","tag-table-cell","tag-text-shadow","tag-transform","tag-transition","tag-translate","tag-tutorial","tag-url","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/38645"}],"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=38645"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/38645\/revisions"}],"predecessor-version":[{"id":49314,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/38645\/revisions\/49314"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=38645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=38645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=38645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}