<!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='';
var arrids=['ltd','dhangman','rtd','t7','t8','t9'];
var wht='', howurl_len=0;
var originother='', nonoriginother='', ooo='', nooo='';
var loopover='20', delay='5', dvlo='';
var cprewos=',', prewos=[], prewosp=[], prewosc=[], wos=[], thiswo=0, bw=-1, bh=-1, divw=-1, divh=-1, lastoh='', prewocall=false;

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="//www.rjmprogramming.com.au/HTMLCSS/hangman_bg.html?curplayer=' + curplayer + '&tosolve=' + encodeURIComponent(swhatshort) + "&clue=" + encodeURIComponent(clue) + '"></iframe>';
if (document.getElementById('ohangman').value.indexOf('?') == -1) {
prefx=prefix;
docontent('//www.rjmprogramming.com.au/HTMLCSS/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(howurls) {
var cwh, lo=[], dv=[], newwo=false, sofararr=";", icouple, couple, ij, kl, wasprefx=prefx, howurl, iother, bef='', redo=false, others, other='';
if (howurls != null) {
if (howurls.trim() != '' && howurls.trim() != wht.trim()) {
lo=howurls.split('loopover:');
if (lo.length > 1) {
loopover=eval(lo[1].split('delay:')[0].split(' ')[0].split(',')[0].split(';')[0]);
dvlo+=' loopover:' + loopover + ' ';
if (howurls.indexOf('+') == -1) howurls=howurls.replace('loopover:' + loopover,'');
}
dv=howurls.split('delay:');
if (dv.length > 1) {
delay=eval(dv[1].split('loopover:')[0].split(' ')[0].split(',')[0].split(';')[0]);
dvlo+=' delay:' + delay + ' ';
if (howurls.indexOf('+') == -1) howurls=howurls.replace('delay:' + delay,'');
}
if (wht != '') {
redo=true;
if (howurls.indexOf(wht) != -1 || wht.replace('% ','(').replace('px ','(').indexOf('(') == -1) redo=false;
}
var words=howurls.trim().split(' ');
//alert(words.length + ' ... ' + words[0]);
if (words.length > 1) {
if ((howurls.trim() + ' ').substring(0,2) == '++') { // || howurls.indexOf('#breakout') != -1) {
if (document.URL.indexOf('?') == -1) newwo=true;
howurls=howurls.replace('++','');
words[0]=words[0].replace('++','');
if (newwo) window.open('./zoom_in_middle.htm?url=' + encodeURIComponent(howurls.trim()),'_blank');
if (lo.length > 1) {
howurls=howurls.replace('loopover:' + loopover,'').trim();
words=howurls.trim().split(' ');
}
if (dv.length > 1) {
howurls=howurls.replace('delay:' + delay,'').trim();
words=howurls.trim().split(' ');
}
} else if ((howurls.trim() + ' ').substring(0,1) == '+') {
if (document.URL.indexOf('?') == -1) newwo=true;
howurls=howurls.replace('+','');
words[0]=words[0].replace('+','');
if (newwo) {
window.open('./zoom_in_middle.htm?url=' + encodeURIComponent(howurls.trim()),'_blank');
if (lo.length > 1) {
howurls=howurls.replace('loopover:' + loopover,'').trim();
words=howurls.trim().split(' ');
}
if (dv.length > 1) {
howurls=howurls.replace('delay:' + delay,'').trim();
words=howurls.trim().split(' ');
}
return;
}
if (lo.length > 1) {
howurls=howurls.replace('loopover:' + loopover,'').trim();
words=howurls.trim().split(' ');
}
if (dv.length > 1) {
howurls=howurls.replace('delay:' + delay,'').trim();
words=howurls.trim().split(' ');
}
}
if (words[0].replace('%','(').replace(';','(').indexOf('(') != -1 || words[1].replace('%','(').replace(';','(').indexOf('(') != -1) {
//alert(words[0]);
howurl=words[eval(-1 + words.length)].split(',');
howurl_len=howurl.length;
other=howurls.replace(' ' + words[eval(-1 + words.length)],'');
others=other.split(';');
for (iother=0; iother<others.length; iother++) {
if (others[iother].indexOf('(') != -1) {
nooo=others[iother].trim() + ';';
nonoriginother=lookfornonabscissa('',others[iother].trim()) + ';';
if (others[iother].trim().indexOf('rotate(') != -1) {
document.getElementById('rotation').value=lookfornonabscissa('rotate',others[iother].trim().split('rotate(')[1].split(')')[0].replace('deg',''));
}
if (others[iother].trim().indexOf('scale(') != -1) {
document.getElementById('scale').value=lookfornonabscissa('scale',others[iother].trim().split('scale(')[1].split(')')[0]);
}
if (others[iother].trim().indexOf('skew(') != -1) {
document.getElementById('skewleft').value=lookfornonabscissa('skewleft',others[iother].trim().split('skew(')[1].split(')')[0].split(',')[0].replace('deg',''));
document.getElementById('skewtop').value=lookfornonabscissa('skew',others[iother].trim().split('skew(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('skew(')[1].split(')')[0].split(',').length)].replace('deg',''));
}
if (others[iother].trim().indexOf('translate(') != -1) {
document.getElementById('translateleftb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px',''),'');
document.getElementById('translateleft').value=lookfornonabscissa('translateleft',others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px',''));
document.getElementById('translatetopb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px',''),'');
document.getElementById('translatetop').value=lookfornonabscissa('translate',others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px',''));
}
lookfornonabscissa('nooo',null);
} else if (others[iother].trim() != '' && others[iother].substring(1).indexOf(' ') != -1) {
ooo=others[iother].trim() + ';';
originother=lookfornonabscissa('',others[iother].trim()) + ';';
document.getElementById('toleftb').value=others[iother].trim().split(' ')[0].replace(others[iother].trim().split(' ')[0].replace('%','').replace('px',''),'');
document.getElementById('toleft').value=lookfornonabscissa('toleft',others[iother].trim().split(' ')[0].replace('%','').replace('px',''));
document.getElementById('totopb').value=others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace(others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px',''),'');
document.getElementById('totop').value=lookfornonabscissa('to',others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px',''));
lookfornonabscissa('ooo',null);
}
}
//alert(prefx + '02:' + nonoriginother);
} else {
howurl=words[0].split(',');
howurl_len=howurl.length;
other=howurls.replace(words[0] + ' ','');
others=other.split(';');
for (iother=0; iother<others.length; iother++) {
if (others[iother].indexOf('(') != -1) {
nooo=others[iother].trim() + ';';
nonoriginother=lookfornonabscissa('',others[iother].trim()) + ';';
if (others[iother].trim().indexOf('rotate(') != -1) {
document.getElementById('rotation').value=lookfornonabscissa('rotate',others[iother].trim().split('rotate(')[1].split(')')[0].replace('deg',''));
}
if (others[iother].trim().indexOf('scale(') != -1) {
document.getElementById('scale').value=lookfornonabscissa('scale',others[iother].trim().split('scale(')[1].split(')')[0]);
}
if (others[iother].trim().indexOf('skew(') != -1) {
document.getElementById('skewleft').value=lookfornonabscissa('skewleft',others[iother].trim().split('skew(')[1].split(')')[0].split(',')[0].replace('deg',''));
document.getElementById('skewtop').value=lookfornonabscissa('skew',others[iother].trim().split('skew(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('skew(')[1].split(')')[0].split(',').length)].replace('deg',''));
}
if (others[iother].trim().indexOf('translate(') != -1) {
document.getElementById('translateleftb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px',''),'');
document.getElementById('translateleft').value=lookfornonabscissa('translateleft',others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px',''));
document.getElementById('translatetopb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px',''),'');
document.getElementById('translatetop').value=lookfornonabscissa('translate',others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px',''));
}
lookfornonabscissa('nooo',null);
} else if (others[iother].trim() != '' && others[iother].substring(1).indexOf(' ') != -1) {
ooo=others[iother].trim() + ';';
originother=lookfornonabscissa('',others[iother].trim()) + ';';
document.getElementById('toleftb').value=others[iother].trim().split(' ')[0].replace(others[iother].trim().split(' ')[0].replace('%','').replace('px',''),'');
document.getElementById('toleft').value=lookfornonabscissa('toleft',others[iother].trim().split(' ')[0].replace('%','').replace('px',''));
document.getElementById('totopb').value=others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace(others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px',''),'');
document.getElementById('totop').value=lookfornonabscissa('to',others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px',''));
lookfornonabscissa('ooo',null);
}
}


//alert('002:' + nonoriginother);
}
} else {
howurl=howurls.split(',');
howurl_len=howurl.length;
}
for (ij=0; ij<howurl.length; ij++) {
if (ij > 0) {
prefx="";
for (kl=0; kl<arrids.length; kl++) {
if (prefx == "" && sofararr.indexOf(';' + arrids[kl] + ';') == -1) {
prefx=arrids[kl];
}
}
}

if (prefx != "") {
if (ij > 0) {
if (howurl[ij].toLowerCase().indexOf('rjmprogramming.com.au') == -1) {
bef=howurl[ij];
howurl[ij]='//www.rjmprogramming.com.au/HTMLCSS/gencont.php?url=' + encodeURIComponent(howurl[ij]);
if (document.getElementById('content').innerHTML.indexOf(howurl[ij]) == -1 && howurl[ij].indexOf('hangman_bg.html') == -1) {
document.getElementById('content').innerHTML+='<option value="' + howurl[ij] + '">' + bef + '</option>';
document.getElementById('content').value=howurl[ij];
document.getElementById('content').size='1';
}
} else {
if (document.getElementById('content').innerHTML.indexOf(howurl[ij]) == -1 && howurl[ij].indexOf('hangman_bg.html') == -1) {
document.getElementById('content').innerHTML+='<option value="' + howurl[ij] + '">..' + howurl[ij].split('www.rjmprogramming.com.au')[1] + '</option>';
document.getElementById('content').value=howurl[ij];
document.getElementById('content').size='1';
}
}
if (document.getElementById(prefx + 'ihangman')) {
document.getElementById(prefx + 'ihangman').src=howurl[ij];
maybe_breakout(howurl[ij]);
if (nonoriginother != '' && originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
//alert(prefx + 'ihangman: ' + nonoriginother);
document.getElementById(prefx).click(); //load_zoomed_content(prefx + 'ihangman',document.getElementById(prefx + 'ihangman')); //tochange(document.getElementById('toleft'));
} else if (nonoriginother != '') {
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
document.getElementById(prefx).click();
} else if (originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx).click();
} else {
tochange(document.getElementById('toleft'));
}
docontent(howurl[ij]);
} else {
document.getElementById(prefx).click();
if (nonoriginother != '' && originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
//alert('2:' + nonoriginother);
document.getElementById(prefx).click(); //tochange(document.getElementById('toleft'));
} else if (nonoriginother != '') {
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
document.getElementById(prefx).click();
} else if (originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx).click();
} else {
tochange(document.getElementById('toleft'));
}
docontent(howurl[ij]);
}
} else {
if (howurl[ij].toLowerCase().indexOf('rjmprogramming.com.au') == -1) howurl[ij]='//www.rjmprogramming.com.au/HTMLCSS/gencont.php?url=' + encodeURIComponent(howurl[ij]);
if (document.getElementById('content').innerHTML.indexOf(howurl[ij]) == -1 && howurl[ij].indexOf('hangman_bg.html') == -1) {
document.getElementById('content').innerHTML+='<option value="' + howurl[ij] + '">..' + howurl[ij].split('www.rjmprogramming.com.au')[1] + '</option>';
document.getElementById('content').value=howurl[ij];
document.getElementById('content').size='1';
}
document.getElementById(prefx + 'ihangman').src=howurl[ij];
maybe_breakout(howurl[ij]);
if (document.getElementById('ohangman').value.indexOf('?') == -1) {
document.getElementById('ohangman').value=howurl[ij];
}
if (nonoriginother != '' && originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
//alert(prefx + 'ihangman; ' + nonoriginother);
document.getElementById(prefx).click(); //load_zoomed_content(prefx + 'ihangman',document.getElementById(prefx + 'ihangman')); //tochange(document.getElementById('toleft'));
} else if (nonoriginother != '') {
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
document.getElementById(prefx).click();
} else if (originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx).click();
} else {
tochange(document.getElementById('toleft'));
}
}
sofararr+=prefx + ";";

}




}

}
}
if (prefx == "") prefx=wasprefx;
}

function alater() {
if (thiswo > 0) {
for (var iy=0; iy<thiswo; iy++) {
wos[iy]=window.open('','_blank','top=0,left=0,width=' + bw + 'px,height=' + bh + 'px');
wos[iy].document.write(prewosc[iy]);
}
thiswo=0;
prewocall=false;
}
}

function changewh(inoh, bsrc) {
var outoh=inoh, founds=[], ifounds=0, spare, sparec='', alit=false, asrc=inoh.split('src=')[1];
//if (divw > 0) alit=true;
if (inoh.indexOf('100%') != -1) {
outoh=lastoh.split('src=')[0] + 'src=' + asrc;
} else {
if (asrc.indexOf(bsrc) == -1) {
outoh=outoh.replace(asrc.substring(1).split(asrc.substring(0,1))[0],bsrc);
}
divw=eval(inoh.split('width:')[1].split('px')[0].split('%')[0].trim());
divh=eval(inoh.split('height:')[1].split('px')[0].split('%')[0].trim());
if (bw != divw) {
outoh=outoh.replace('' + divw + 'px','' + bw + 'px');
outoh=outoh.replace('' + divw + 'px','' + bw + 'px');
founds=outoh.split('width:');
for (ifounds=3; ifounds<founds.length; ifounds++) {
sparec=founds[ifounds].split('px')[0].split('%')[0].trim();
if (outoh.indexOf('' + sparec + 'px') != -1) {
outoh=outoh.replace('' + sparec + 'px','' + Math.floor(eval(bw * eval('' + sparec) / divw)) + 'px');
}
}
}
if (bh != divh) {
outoh=outoh.replace('' + divh + 'px','' + bh + 'px');
outoh=outoh.replace('' + divh + 'px','' + bh + 'px');
founds=outoh.split('height:');
for (ifounds=3; ifounds<founds.length; ifounds++) {
sparec=founds[ifounds].split('px')[0].split('%')[0].trim();
if (outoh.indexOf('' + sparec + 'px') != -1) {
outoh=outoh.replace('' + sparec + 'px','' + Math.floor(eval(bw * eval('' + sparec) / divw)) + 'px');
}
}
}
}
if (alit) {
alert(outoh);
outoh='';
} else {
lastoh=outoh;
}
return outoh;
}

function later_breakout() {
var cwh='';
for (var ii=0; ii<prewos.length; ii++) {
//document.title='' + ii;
if (bw < 0) bw=eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px',''));
if (bh < 0) bh=eval(window.getComputedStyle(document.body, null).getPropertyValue('height').replace('px',''));
cwh=changewh(document.getElementById(prewosp[ii] + 'divhangman').outerHTML,prewos[ii]);
if (cwh != '') {
//wos.push(window.open('','_blank','top=0,left=0,width=' + bw + 'px,height=' + bh + 'px'));
//wos[thiswo].document.write('<!doctype html><html><head>' + document.head.innerHTML + '</head><' + document.body.outerHTML.substring(1).split('>')[0] + '>' + cwh + '</body></html>');
prewosc[thiswo]=('<!doctype html><html><head>' + document.head.innerHTML + '</head><' + document.body.outerHTML.substring(1).split('>')[0] + '>' + cwh + document.getElementById('readyfortransitions_ooo').outerHTML + document.getElementById('readyfortransitions_nooo').outerHTML + '</body></html>');
thiswo++;
if (!prewocall) {
prewocall=true;
setTimeout(alater,3000);
}
}
}
prewos=[];
prewosp=[];
}

function maybe_breakout(howurlij) {
if (howurlij.indexOf('#breakout') != -1) { // new idea for #breakout
if (cprewos.indexOf(',' + howurlij + ',') == -1 && document.URL.indexOf('#breakout') == -1 && location.hash.indexOf('breakout') == -1) {
prewosp.push(prefx);
prewos.push(howurlij);
cprewos+=howurlij + ',';
if (prewos.length == 1) {
setTimeout(later_breakout,6000);
}
}
}
}

function doscale(howm) {
document.getElementById(prefx + 'ihangman').style.transform="scale(" + howm + ")" + tochange(document.getElementById('rotation'));
tochange(document.getElementById('toleft'));
}

function wholething() {
var oprefix=" " + document.getElementById('toleft').value + document.getElementById('toleftb').value + " " + document.getElementById('totop').value + document.getElementById('totopb').value + ';';
var ssuffix=" scale(" + document.getElementById('scale').value + ")";
var rotsuffix=" rotate(" + document.getElementById('rotation').value + "deg)";
var tlsuffix=" translate(" + document.getElementById('translateleft').value + document.getElementById('translateleftb').value + "," + document.getElementById('translatetop').value + document.getElementById('translatetopb').value + ")";
var skewsuffix=" skew(" + document.getElementById('skewleft').value + "deg," + document.getElementById('skewtop').value + "deg)";
return dvlo + oprefix + ssuffix + rotsuffix + tlsuffix + skewsuffix + "; ";
}

function tochange(cthis) {
if (cthis.value.indexOf('_') != -1) {
document.getElementById('bcontent').click();
} else {
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 "";
}

function getlist() {
var rval=prefx + 'ihangman', kl, tval=prefx;
for (var iv=1; iv<howurl_len; iv++) {
for (kl=0; kl<arrids.length; kl++) {
if (tval == arrids[kl]) {
rval+=',#' + arrids[eval((kl + 1) % arrids.length)] + 'ihangman';
tval=arrids[eval((kl + 1) % arrids.length)];
}
}
}
return rval;
}

function lookfornonabscissa(olabel, oval) {
var ret_val=oval, sprefix='', spareval='';
if (olabel == 'ooo') {
if (ooo.indexOf('_') != -1) {
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; } ';
if (document.getElementById('readyfortransitions_ooo').innerHTML == '') {
document.getElementById('readyfortransitions_ooo').innerHTML+="<st" + "yle> " + 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(';','') + "; } } </sty" + "le>";
sprefix='';
}
document.getElementById('readyfortransitions_ooo').innerHTML=document.getElementById('readyfortransitions_ooo').innerHTML.replace("<sty" + "le>", "<sty" + "le> " + sprefix + " ");
}
} else if (olabel == 'nooo') {
if (nooo.indexOf('_') != -1) {
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; } ';
if (document.getElementById('readyfortransitions_nooo').innerHTML == '') {
document.getElementById('readyfortransitions_nooo').innerHTML+="<st" + "yle> " + 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(';','') + "; } } </sty" + "le>";
sprefix='';
}
document.getElementById('readyfortransitions_nooo').innerHTML=document.getElementById('readyfortransitions_nooo').innerHTML.replace("<sty" + "le>", "<sty" + "le> " + sprefix + " ");
}
} else if (olabel == '') {
var dots=oval.split('_'), gro='';
if (dots.length > 1) {
ret_val=dots[0];
for (idots=1; idots<dots.length; idots++) {
gro=dots[idots].split('deg')[0].split('px')[0].split('%')[0].split(',')[0].split(' ')[0].split(')')[0];
ret_val+=dots[idots].replace(gro,'');
}
}
} else if (olabel.indexOf('left') != -1 && document.getElementById(olabel)) {
if (oval.indexOf('_') != -1) {
document.getElementById(olabel).title=oval; //'_' + oval.split('_')[1];
ret_val=oval.split('_')[0];
} else {
document.getElementById(olabel).title='';
}
// ghfhgjfjhg_deg hgfjhgfjhgfjhg_deg)
} else {
var tis='';
if (document.getElementById(olabel + 'left')) {
tis=document.getElementById(olabel + 'left').title;
}
if (oval.indexOf('_') != -1 && tis != '') {
// Set up CSS transition here
spareval=document.getElementById(olabel + 'left').title.split('_')[0];
if (olabel == 'origin' || olabel == 'toleft') {
ooo=ooo.replace(spareval + '_','_');
} else {
nooo=nooo.replace(spareval + '_','_');
}
ret_val=oval.split('_')[0];
if (olabel == 'origin' || olabel == 'toleft') {
ooo=ooo.replace(ret_val + '_','_');
} else {
nooo=nooo.replace(ret_val + '_','_');
}
//alert('1:' + oval + ' ... ' + document.getElementById(olabel + 'left').title);
//if (document.getElementById(olabel + 'leftb')) { // % or px
//} else { // deg
//}

} else if (oval.indexOf('_') != -1) {
// Set up CSS transition here
ret_val=oval.split('_')[0];
if (olabel == 'origin' || olabel == 'toleft') {
ooo=ooo.replace(ret_val + '_','_');
} else {
nooo=nooo.replace(ret_val + '_','_');
}
//alert(nonoriginother + ' 2:' + oval);
//if (document.getElementById(olabel + 'leftb')) { // % or px
//} else { // deg
//}

} else if (tis != '') {
// Set up CSS transition here
//alert(nonoriginother + ' 3:' + document.getElementById(olabel + 'left').title);
spareval=document.getElementById(olabel + 'left').title.split('_')[0];
if (olabel == 'origin' || olabel == 'toleft') {
ooo=ooo.replace(spareval + '_','_');
} else {
nooo=nooo.replace(spareval + '_','_');
}
//if (document.getElementById(olabel + 'leftb')) { // % or px
//} else { // deg
//}

}
}
return ret_val;
}

function cload() {
var uprefix='', dv=[],lo=[];
var oot=location.search.split('originother=')[1] ? decodeURIComponent(location.search.split('originother=')[1].split('&')[0]) : '';
if (oot != '') uprefix=oot + ' ';
var noot=location.search.split('nonoriginother=')[1] ? decodeURIComponent(location.search.split('nonoriginother=')[1].split('&')[0]) : '';
if (noot != '') uprefix+=noot + ' ';
var turl=location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1].split('&')[0]) : '';
if (turl != '') {
document.getElementById('myh3').innerHTML+='<br><a target=_blank href="mailto:?subject=My%203x3%20Grid%20of%20Web%20Applications&body=' + encodeURIComponent(document.URL) + '">Share this via Email</a>';
lo=turl.split('loopover:');
if (lo.length > 1) {
loopover=eval(lo[1].split('delay:')[0].split(' ')[0].split(',')[0].split(';')[0]);
dvlo+=' loopover:' + loopover + ' ';
turl=turl.replace('loopover:' + loopover,'');
}
dv=turl.split('delay:');
if (dv.length > 1) {
delay=eval(dv[1].split('loopover:')[0].split(' ')[0].split(',')[0].split(';')[0]);
dvlo+=' delay:' + delay + ' ';
turl=turl.replace('delay:' + delay,'');
}
docontent(uprefix + turl);
}
}

</script>
</head>
<body onload="load_zoomed_content('dhangman',document.getElementById('dhangman')); cload();">
<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 id=myh3 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;'>
     <input onclick=" cprewos=','; wht=wholething(); docontent(prompt('What is/are the URL(s) (comma delimited) you want to show? (rjmprogramming.com.au ones most likely to succeed) ... URLs can be appended by #breakout to also see how they look in a cell occupying a whole window ... prefix or append the default transformation parameters supplied, that will be heeded if retained, and can involve animations by using _ between original and new numerical values (eg. scale(0.5_1.0) scales starting at 0.5 jumps to 1.0 after 5 seconds (unless overridden by delay:[yourValue] near start (after any + or ++)) and returns to 0.5 over 20 seconds (unless overridden by loopover:[yourValue] near start (after any + or ++)) ... prefix by ++ to do both here and in new window (that will contain an email link) or prefix by + to just do in that new window (that will contain an email link)',wht));" type="button" title="Your own URL(s) (comma separated) (rjmprogramming.com.au ones most likely to succeed) ... you can do animations here via _ delimiter usage unavailable to textboxes below" id="bcontent" value="(Animated?) Content"></input>: <select size=2 id='content' onchange='docontent(this.value);'>
<option id='ohangman' value='//www.rjmprogramming.com.au/HTMLCSS/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' title=''></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' title=''></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' title=''></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' title=''></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' title=''></input> deg, <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=skewtop type=number min='-359' max='359' value='0' title=''></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' title=''></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('' + this.id,this);" id='t7' style='background-color:red;'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='t8' style='background-color:yellow;'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='t9' 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>
<div id='readyfortransitions_ooo'></div>
<div id='readyfortransitions_nooo'></div>
</body>
</html>