<!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='';
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 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) == '++') {
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];
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];
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 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.split('#')[0]) + '">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=" wht=wholething(); docontent(prompt('What is/are the URL(s) (comma delimited) you want to show? (rjmprogramming.com.au ones most likely to succeed) ... 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>