<!doctype html>
<html>
<head>
<title>Maintaining Table Cell Dimensions With Zoomed Content - RJM Programming - May, 2018</title>
<style>
td { display: table-cell;
background-color: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
border: 1px solid green;
width: 33%;
height: 33vh; }
</style>
<script type='text/javascript'>
var curplayer=1;
var swhatshort='no use crying over spilt milk';
var clue='No soy here?!';
var myw='px';
var myh='px';
var myt='330px';
var myl='330px';
var prefx='';
function load_zoomed_content(prefix,othis) {
prefx=prefix;
if (othis.innerHTML.indexOf('over' + 'flow') == -1) othis.innerHTML+='<div onclick="prefx=' + "'" + prefix + "';" + '" id="' + prefix + 'divhangman" style="background-color:white;overflow:scroll;-webkit-overflow-scrolling:touch;width:100%;height:100%;"></div>';
myw=eval(window.getComputedStyle(document.getElementById(prefix + 'divhangman'), null).getPropertyValue('width').replace('px','')); // + myw;
myh=eval(window.getComputedStyle(document.getElementById(prefix + 'divhangman'), null).getPropertyValue('height').replace('px','')); // + myh;
document.getElementById(prefix + 'divhangman').innerHTML='<iframe onclick="prefx=' + "'" + prefix + "';" + '" style="-webkit-overflow-scrolling: touch;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) + '"></iframe>';
if (document.getElementById('ohangman').value.indexOf('?') == -1) {
prefx=prefix;
docontent('hangman_bg.html?curplayer=' + curplayer + '&tosolve=' + encodeURIComponent(swhatshort) + "&clue=" + encodeURIComponent(clue));
doscale(document.getElementById('scale').value);
} else {
prefx=prefix;
docontent(document.getElementById('content').value);
doscale(document.getElementById('scale').value);
}
othis.style.width=Math.floor(eval(myw)) + 'px';
othis.style.height=Math.floor(eval(myh)) + 'px';
othis.style.maxWidth=Math.floor(eval(myw)) + 'px';
othis.style.maxHeight=Math.floor(eval(myh)) + 'px';
document.getElementById(prefix + 'divhangman').style.width=Math.floor(eval(myw)) + 'px';
document.getElementById(prefix + 'divhangman').style.height=Math.floor(eval(myh)) + 'px';
document.getElementById(prefix + 'divhangman').style.maxWidth=Math.floor(eval(myw)) + 'px';
document.getElementById(prefix + 'divhangman').style.maxHeight=Math.floor(eval(myh)) + 'px';
document.getElementById(prefix + 'ihangman').style.width=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myw)) + 'px';
document.getElementById(prefix + 'ihangman').style.height=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myh)) + 'px';
document.getElementById(prefix + 'ihangman').style.maxWidth=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myw)) + 'px';
document.getElementById(prefix + 'ihangman').style.maxHeight=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myh)) + 'px';
}
function docontent(howurl) {
document.getElementById(prefx + 'ihangman').src=howurl;
if (document.getElementById('ohangman').value.indexOf('?') == -1) {
document.getElementById('ohangman').value=howurl;
}
tochange(document.getElementById('toleft'));
}
function doscale(howm) {
document.getElementById(prefx + 'ihangman').style.transform="scale(" + howm + ")" + tochange(document.getElementById('rotation'));
tochange(document.getElementById('toleft'));
}
function tochange(cthis) {
var skewsuffix=" skew(" + document.getElementById('skewleft').value + "deg," + document.getElementById('skewtop').value + "deg)";
var tlsuffix=" translate(" + document.getElementById('translateleft').value + document.getElementById('translateleftb').value + "," + document.getElementById('translatetop').value + document.getElementById('translatetopb').value + ")";
if (cthis.id.indexOf('rotation') != -1) { // rotation change
var retval=" rotate(" + cthis.value + "deg)" + skewsuffix + tlsuffix;
//if (prefx != 'dhangman') alert(prefx);
//document.title="scale(" + document.getElementById('scale').value + ")" + retval;
document.getElementById(prefx + 'ihangman').style.transform="scale(" + document.getElementById('scale').value + ")" + retval;
return retval;
} else if (cthis.id.indexOf('translate') != -1) { // translation change
document.getElementById(prefx + 'ihangman').style.transform="scale(" + document.getElementById('scale').value + ")" + " rotate(" + document.getElementById('rotation').value + "deg)" + skewsuffix + tlsuffix;
return tlsuffix;
} else if (cthis.id.indexOf('skew') != -1) { // translation change
document.getElementById(prefx + 'ihangman').style.transform="scale(" + document.getElementById('scale').value + ")" + " rotate(" + document.getElementById('rotation').value + "deg)" + skewsuffix + tlsuffix;
return skewsuffix;
} else if (cthis.id.indexOf('b') != -1) { // unit change
if (cthis.id.indexOf('left') != -1) { // x (left) change
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;
} else { // y (top) change
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;
}
} else { // value change
if (cthis.id.indexOf('left') != -1) { // x (left) change
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;
} else { // y (top) change
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;
}
}
return "";
}
</script>
</head>
<body onload="load_zoomed_content('dhangman',document.getElementById('dhangman'));">
<table style='width:100%;height:100vh;' border=1>
<tbody style='width:100%;height:100vh;'>
<tr style='width:100%;height:33vh;'><td style='border:1px solid green;width:33%;height:33vh;'>
Zoom (or scale): <select size=10 id='scale' onchange='doscale(this.value);'>
<option value='0.1'>10% = 0.1</option>
<option value='0.2'>20% = 0.2</option>
<option value='0.25'>25% = 0.25</option>
<option value='0.3'>30% = 0.3</option>
<option value='0.4'>40% = 0.4</option>
<option value='0.5' selected>Default Zoom 50% = Scale 0.5</option>
<option value='0.75'>75% = 0.75</option>
<option value='1.0'>100% = 1.0</option>
<option value='2.0'>200% = 2.0</option>
<option value='3.0'>300% = 3.0</option>
</select>
</td><td style='border:1px solid green;width:33%;height:33vh;'>
<h3 style="width:100%;text-align:center;">Maintaining Table Cell Dimensions With Zoomed Content<br>
RJM Programming<br>
May, 2018</h3></td><td style='border:1px solid green;width:33%;height:33vh;'>
Content: <select size=2 id='content' onchange='docontent(this.value);'>
<option id='ohangman' value='hangman_bg.html' selected>Hangman Game</option>
<option value='//www.rjmprogramming.com.au/PHP/lo_one_new.html'>LibreOffice Business Letter Template</option>
</select><br><br>
Transform Origin: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=toleft type=number value='0'></input><input id=toleftb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input> <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=totop type=number value='0'></input><input id=totopb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input><br><br>
Translation: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=translateleft type=number value='0'></input><input id=translateleftb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input>,<input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=translatetop type=number value='0'></input><input id=translatetopb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input><br><br>
Skew: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=skewleft type=number min='-359' max='359' value='0'></input> deg, <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=skewtop type=number min='-359' max='359' value='0'></input> deg<br><br>
Rotation: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=rotation type=number min='-359' max='359' value='0'></input> deg<br><br>
</td></tr>
<tr id='trhangman' style='width:100%;height:33vh;'>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='ltd'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='dhangman'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='rtd'></td></tr>
<tr style='width:100%;height:33vh;'>
<td title="Click me for content" onclick="load_zoomed_content('t7' + this.id,this);" style='background-color:red;'></td>
<td title="Click me for content" onclick="load_zoomed_content('t8' + this.id,this);" style='background-color:yellow;'></td>
<td title="Click me for content" onclick="load_zoomed_content('t9' + this.id,this);" style='background-color:green;'><div id=shangman style="display:none;">Score: 0/0</div><div id=score style="display:none;">Score: 0/0</div></td></tr>
</tbody>
</table>
</body>
</html>