{"id":38487,"date":"2018-05-30T03:01:48","date_gmt":"2018-05-29T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=38487"},"modified":"2018-05-30T12:28:39","modified_gmt":"2018-05-30T02:28:39","slug":"html-table-cell-maintained-dimensions-variably-zoomed-content-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-content-primer-tutorial\/","title":{"rendered":"HTML Table Cell Maintained Dimensions Variably Zoomed Content Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Speech to Text LibreOffice Template Tutorial had synergies with process, explained yesterday, and synergies with trying to express zoomed content in a limited space, involving two quite different concepts &#8230; Hangman Game LibreOffice Template &#8230; us deciding on a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-table-cell-maintained-dimensions-variably-zoomed-content-primer-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":[1580,281,342,576,652,2562,2561,997,1094,1238,1581,1298,1319,1498],"class_list":["post-38487","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cell","tag-css","tag-div","tag-html","tag-javascript","tag-magnifier","tag-overflow","tag-programming","tag-scale","tag-table","tag-table-cell","tag-transform","tag-tutorial","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/38487"}],"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=38487"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/38487\/revisions"}],"predecessor-version":[{"id":38504,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/38487\/revisions\/38504"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=38487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=38487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=38487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}