<!doctype html>
<html>
<head>
<title>CSS Transform Matrix Dragging Tests ... RJM Programming - September, 2017 ... Thanks to http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/</title>
<meta id="myviewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes">
<meta charset="utf-8"/>
<style>
.box {
margin: 20px;
padding: 10px;
height: 150px;
width: 500px;
border: 1px solid black;
}
html :not(#img) {
background-color: #f0f0e0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
console.log('start');
// place this within dom ready function
function showpanel() {
console.log('more');
$(".ui-draggable").sortable({
start: function(event, ui) {
console.log('start');
ui.item.toggleClass("highlight");
},
stop: function(event, ui) {
console.log('stop');
ui.item.toggleClass("highlight");
}
});
}
// use setTimeout() to execute
setTimeout(showpanel, 3000)
});
//<style><br>
//.box {<br>
// margin: 20px; padding: 10px;<br>
// height: 150px; width: 500px;<br>
// border: 1px solid black; }<br>
//</style><br>
// Thanks to http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/ for most of jQuery Javascript below
var rfd=false;
var lastimgoh='';
var selector = '#img' // Replace this with the selector for the element you want to make transformable
var fbr=null, needlook=true, gtois='', wois=null, matfound=false, optionally=false;
var attachment='', img1=null, imgw=0, imgh=0, gtoviaresult=false;
var imgd=null, imgh=-1, imgw=-1, altimgw=-1, altimgh=-1, two=2, twotwo=2, wasv='', firstgo=true, ewo=null, ewf=null, prevffs=-11, ffs=-1;
var vtrue=true, twentythousand=20000, altsubject='', prevlastisaved='', prevlastvsaved='', prevlastasaved='', lastvsaved='', lastasaved='', lastisaved='', lastaudioname='', lastresult='';
var vsres='', zhr=null, zform=null, lastacnt=1, tgsps=[], tgspsop=[], newres='', preurl='', tgspsopwhat=[], cvis='', prevsv='', thissv='', haikusuffix='', lastu='';
jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() {
jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() {
(function() {
var $, applyTransform, getTransform, makeTransformable;
$ = jQuery;
getTransform = function(from, to) {
var A, H, b, h, i, k_i, lhs, rhs, _i, _j, _k, _ref;
console.assert((from.length === (_ref = to.length) && _ref === 4));
A = [];
for (i = _i = 0; _i < 4; i = ++_i) {
A.push([from[i].x, from[i].y, 1, 0, 0, 0, -from[i].x * to[i].x, -from[i].y * to[i].x]);
A.push([0, 0, 0, from[i].x, from[i].y, 1, -from[i].x * to[i].y, -from[i].y * to[i].y]);
}
b = [];
for (i = _j = 0; _j < 4; i = ++_j) {
b.push(to[i].x);
b.push(to[i].y);
}
h = numeric.solve(A, b);
H = [[h[0], h[1], 0, h[2]], [h[3], h[4], 0, h[5]], [0, 0, 1, 0], [h[6], h[7], 0, 1]];
for (i = _k = 0; _k < 4; i = ++_k) {
lhs = numeric.dot(H, [from[i].x, from[i].y, 0, 1]);
k_i = lhs[3];
rhs = numeric.dot(k_i, [to[i].x, to[i].y, 0, 1]);
console.assert(numeric.norm2(numeric.sub(lhs, rhs)) < 1e-9, "Not equal:", lhs, rhs);
}
return H;
};
applyTransform = function(element, originalPos, targetPos, callback) {
var H, from, i, j, p, to;
from = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = originalPos.length; _i < _len; _i++) {
p = originalPos[_i];
_results.push({
x: p[0] - originalPos[0][0],
y: p[1] - originalPos[0][1]
});
}
return _results;
})();
to = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = targetPos.length; _i < _len; _i++) {
p = targetPos[_i];
_results.push({
x: p[0] - originalPos[0][0],
y: p[1] - originalPos[0][1]
});
}
return _results;
})();
H = getTransform(from, to);
$(element).css({
'transform': "matrix3d(" + (((function() {
var _i, _results;
_results = [];
for (i = _i = 0; _i < 4; i = ++_i) {
_results.push((function() {
var _j, _results1;
_results1 = [];
for (j = _j = 0; _j < 4; j = ++_j) {
_results1.push(H[j][i].toFixed(20));
}
return _results1;
})());
}
return _results;
})()).join(',')) + ")",
'transform-origin': '0 0'
});
var bits=('' + H).split(',');
var cbits='' + bits[0];
for (var ibits=1; ibits<bits.length; ibits++) {
cbits+=',';
if (eval(ibits % 4) == 0) cbits+='<br>';
cbits+='' + bits[ibits];
}
document.getElementById(selector.replace('#','')).title='matrix3d(' + cbits.replace(/<br>/g,'') + ')';
if (('' + document.getElementById(selector.replace('#','')).style.background) == '' && document.getElementById(selector.replace('#','')).innerHTML.replace(/<br>/g,'').indexOf('<') == -1) {
document.getElementById(selector.replace('#','')).innerHTML='matrix3d(' + cbits + ')';
} else {
document.getElementById(selector.replace('#','')).innerHTML='';
}
return typeof callback === "function" ? callback(element, H) : void 0;
};
makeTransformable = function(selector, callback) {
return $(selector).each(function(i, element) {
var controlPoints, originalPos, p, position;
$(element).css('transform', '');
controlPoints = (function() {
var _i, _len, _ref, _results;
_ref = ['left top', 'left bottom', 'right top', 'right bottom'];
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
position = _ref[_i];
_results.push($('<div>').css({
border: '3px solid black',
borderRadius: '3px',
cursor: 'move',
position: 'absolute',
zIndex: 100000
}).appendTo('body').position({
at: position,
of: element,
collision: 'none'
}));
}
return _results;
})();
originalPos = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})();
$(controlPoints).draggable({
start: (function(_this) {
return function() {
return $(element).css('pointer-events', 'none');
};
})(this),
drag: (function(_this) {
return function() {
return applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
};
})(this),
stop: (function(_this) {
return function() {
applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
return $(element).css('pointer-events', 'auto');
};
})(this)
});
$(controlPoints).sortable({
start: (function(_this) {
return function() {
return $(element).css('pointer-events', 'none');
};
})(this),
touchmove: (function(_this) {
return function() {
return applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
};
})(this),
stop: (function(_this) {
return function() {
applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
return $(element).css('pointer-events', 'auto');
};
})(this)
});
return element;
});
};
window.makeTransformable = makeTransformable;
}).call(this);
makeTransformable(selector);
});
});
function applythis(tv) {
var hides, ihides=0;
if (tv != "") {
if (window.sessionStorage) {
if (('' + window.sessionStorage.getItem('moretransdatauri')).replace(/^null$/g,'') != '') {
tv=window.sessionStorage.getItem('moretransdatauri');
window.sessionStorage.removeItem('moretransdatauri');
}
}
if (tv.trim() == tv) {
document.getElementById(selector.replace('#','')).style.background="URL('" + tv.split('#')[0] + "')";
document.getElementById(selector.replace('#','')).style.backgroundRepeat='repeat';
} else {
if (tv.indexOf(tv.trim() + ' ') != -1) {
document.getElementById(selector.replace('#','')).style.background="URL('" + tv.trim().split('#')[0] + "')";
document.getElementById(selector.replace('#','')).style.backgroundSize='cover';
document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
} else if (tv.indexOf(tv.trim() + ' ') != -1) {
document.getElementById(selector.replace('#','')).style.background="URL('" + tv.trim().split('#')[0] + "')";
document.getElementById(selector.replace('#','')).style.backgroundSize='contain';
document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
} else {
document.getElementById(selector.replace('#','')).style.background="URL('" + tv.trim().split('#')[0] + "')";
document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
}
}
if (tv.indexOf('#') != -1) {
document.getElementById('divmore').innerHTML='<style> html :not(#img) { background-color: transparent !important; } </style>';
hides=document.getElementsByTagName('h1');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.display='inline-block';
hides[ihides].style.visibility='hidden';
}
hides=document.getElementsByTagName('h3');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.visibility='hidden';
}
hides=document.getElementsByTagName('p');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.visibility='hidden';
}
hides=document.getElementsByTagName('span');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.visibility='hidden';
}
hides=document.getElementsByTagName('h4');
for (ihides=0; ihides<hides.length; ihides++) {
hides[ihides].style.display='inline-block';
}
}
}
}
function readyfordrag(alsofix) {
if (rfd && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
if (alsofix) {
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
}
}
function noscrollbutzoom() {
//document.addEventListener("touchstart", touchHandler, true);
//document.addEventListener("touchmove", touchHandler, true);
//document.addEventListener("touchend", touchHandler, true);
//document.addEventListener("touchcancel", touchHandler, true);
if (rfd) { readyfordrag(false); }
//document.getElementById('img').addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });
//document.getElementById('img').addEventListener('touchdown', function(e){ e.preventDefault(); }, { passive: false });
document.getElementById('img').style.marginRight='50px';
document.getElementById('img').setAttribute('contenteditable', false);
document.getElementById('img').scroll='no';
}
function fixstyle(stih) {
var idivs=0, boxrect=null, kdivs=0;
stih=stih.replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>');
//alert('0:' + stih);
if (stih.indexOf('<style>') != -1 && stih.indexOf('</style>') != -1) {
document.getElementById('dstyle').innerHTML='<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>';
//alert('<Style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
var divs=document.getElementsByTagName('div');
for (var jdivs=0; jdivs<2; jdivs++) {
if (kdivs == 0) {
for (idivs=0; idivs<divs.length; idivs++) {
if (('' + divs[idivs].className).indexOf('ui-draggable') != -1) {
if (boxrect) {
if (kdivs == 0 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.left) + 'px';
divs[idivs].style.top=('' + boxrect.top) + 'px';
} else if (kdivs == 1 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.left) + 'px';
divs[idivs].style.top=('' + boxrect.bottom) + 'px';
} else if (kdivs == 2 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.right) + 'px';
divs[idivs].style.top=('' + boxrect.top) + 'px';
} else if (kdivs == 3 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.right) + 'px';
divs[idivs].style.top=('' + boxrect.bottom) + 'px';
//alert('<stylE>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
} else if (kdivs == 0 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='dotted'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
//document.getElementById('img').addEventListener('click', function(evt) { emailsnapshot(); evt.preventDefault(); });
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
document.getElementById('img', function(evt) { if (1 == 1) { alert('Ready for email.'); } evt.preventDefault(); });
} else if (kdivs == 1 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='dashed'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
//document.getElementById('img').addEventListener('click', function(evt) { emailsnapshot(); evt.preventDefault(); });
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
document.getElementById('img', function(evt) { if (1 == 1) { alert('Ready for email.'); } evt.preventDefault(); });
} else if (kdivs == 2 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='double'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
//document.getElementById('img').addEventListener('click', function(evt) { emailsnapshot(); evt.preventDefault(); });
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
document.getElementById('img', function(evt) { if (1 == 1) { alert('Ready for email.'); } evt.preventDefault(); });
} else if (kdivs == 3 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='groove'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
//document.getElementById('img').addEventListener('click', function(evt) { emailsnapshot(); evt.preventDefault(); });
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
document.getElementById('img', function(evt) { if (1 == 1) { alert('Ready for email.'); } evt.preventDefault(); });
//alert('<stylE>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
} else {
rfd=true;
//alert('' + window.scrollY + ' ' + boxrect.left + ' ' + boxrect.width + ' ... Left=' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + ' top=' + '' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px');
noscrollbutzoom(); //document.getElementById('resultav').innerHTML+="<script> document.body.addEventListener('touchstart', function(e){ e.preventDefault(); }); </s" + "cript> ";
}
}
}
} else if (('' + divs[idivs].className).indexOf('box') != -1 && !boxrect) {
boxrect=divs[idivs].getBoundingClientRect();
}
}
}
}
} //else {
//alert(stih);
//}
}
function checkmedia(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
var hs=aconto.getElementsByTagName('h1');
hs[0].style.display='none';
hs=aconto.getElementsByTagName('h3');
hs[0].style.display='none';
console.log(1);
fbr=aconto.getElementById('files');
setTimeout(laterfbr,3000);
aconto.getElementById('files').accept='image/*';
console.log(2);
}
}
}
}
function fvsres(inv) {
if (newres == '') {
if (inv == 'progress') {
vsres=document.getElementById('result').innerHTML;
setTimeout(lookfvsres, 2000);
return inv;
} else if (inv == 'pointer') {
if (vsres != document.getElementById('result').innerHTML) {
document.getElementById('inum').innerHTML='1';
document.getElementById('result').style.cursor=inv;
vsres=document.getElementById('result').innerHTML;
} else {
setTimeout(lookfvsres, 2000);
}
}
}
return inv;
}
function laterfbr() {
if (fbr) {
console.log(11);
fbr.accept='.pdf,audio/*,video/*,image/*';
console.log(12);
}
}
function lookfvsres() {
fvsres('pointer');
}
function notwotwo() {
twotwo=33;
vtrue=false;
twentythousand=200;
}
function checkresultdiv() {
var mysuff='';
try {
if (('' + (document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>')) == 'undefined') {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(/undefined/g,'');
}
} catch(dfdf) {
}
if (!matfound) {
if (document.body.innerHTML.indexOf('matr' + 'ix3d(') != -1) {
lastimgoh=document.getElementById('img').title;
matfound=true;
document.getElementById('mybemail').style.display='inline-block';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (1 == 111) { optionally=true;
document.getElementById('mybemail').click(); }
}
//} else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//alert('1145 ' + rfd + ' ' + ('' + window.sessionStorage.getItem('moretransdatauri')).replace(/^null$/g,''));
}
} else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (lastimgoh != document.getElementById('img').title && gtois == '') {
lastimgoh=document.getElementById('img').title;
if (1 == 111) { document.getElementById('mybemail').click(); }
}
}
if (needlook) {
needlook=false;
var imgohis=location.search.split('imgoh=')[1] ? decodeURIComponent(location.search.split('imgoh=')[1].split('&')[0]) : '';
if (imgohis != '') {
document.body.innerHTML=document.body.innerHTML.replace(document.getElementById('img').outerHTML, imgohis) + ' <style> .ui-draggable { visibility:hidden; } </style>';
document.getElementById('img').title=(document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument);
imgohis='';
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (document.URL.indexOf('imgoh=') == -1) { document.getElementById('brfd').style.display='inline-block'; }
document.getElementById('snbsp').innerHTML='<br>';
//rfd=true;
//document.addEventListener("touchstart", touchHandler, true);
//document.addEventListener("touchmove", touchHandler, true);
//document.addEventListener("touchend", touchHandler, true);
//document.addEventListener("touchcancel", touchHandler, true);
if (rfd) { readyfordrag(false); }
//fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
} else {
document.getElementById('snbsp').innerHTML='<br>';
document.getElementById('iurl').style.width='530px';
}
if (window.sessionStorage) {
if (('' + window.sessionStorage.getItem('moretransdatauri')).replace(/^null$/g,'') != '') {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//alert('imagelen=' + document.getElementById('result').innerHTML.length);
applythis(window.sessionStorage.getItem('moretransdatauri'));
}
document.getElementById('iurl').value=window.sessionStorage.getItem('moretransdatauri');
window.sessionStorage.removeItem('moretransdatauri');
document.getElementById('mybemail').style.display='inline-block';
applythis(document.getElementById('iurl').value);
}
}
}
if (document.getElementById('result').innerHTML != '') {
if (document.getElementById('result').innerHTML.indexOf('@') != -1 && document.getElementById('result').innerHTML != '@' && document.getElementById('result').innerHTML.indexOf(' ') == -1) {
gtois=document.getElementById('result').innerHTML;
document.getElementById('result').innerHTML='';
gtoviaresult=true;
emailsnapshot();
} else if (document.getElementById('result').innerHTML.indexOf(' ') == -1 && document.getElementById('result').innerHTML.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
gtois=document.getElementById('result').innerHTML;
document.getElementById('result').innerHTML='';
gtoviaresult=true;
emailsnapshot();
} else if (document.getElementById('iurl').value.indexOf(document.getElementById('result').innerHTML) != 0) {
if (document.getElementById('iurl').value.indexOf('#') != -1) {
mysuff='#' + document.getElementById('iurl').value.split('#')[1];
if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '' + mysuff);
}
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
document.getElementById('mybemail').style.display='inline-block';
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
} else if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
mysuff=' ';
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
document.getElementById('mybemail').style.display='inline-block';
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
} else if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
mysuff=' ';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('img').style.width=imgw + 'px';
document.getElementById('img').style.height=imgh + 'px';
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
document.getElementById('mybemail').style.display='inline-block';
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
}
} else if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
mysuff=' ';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('img').style.width=imgw + 'px';
document.getElementById('img').style.height=imgh + 'px';
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
document.getElementById('mybemail').style.display='inline-block';
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
}
} else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('img').style.width=imgw + 'px';
document.getElementById('img').style.height=imgh + 'px';
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
document.getElementById('mybemail').style.display='inline-block';
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//alert('imagelen=' + document.getElementById('result').innerHTML.length);
applythis(document.getElementById('result').innerHTML + mysuff);
}
console.log('imagelen=' + document.getElementById('result').innerHTML.length);
document.getElementById('iurl').value=document.getElementById('result').innerHTML + mysuff;
}
document.getElementById('result').innerHTML='';
}
setTimeout(checkresultdiv, 2000);
}
function touchHandler(event) { // thanks to https://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices
if (('' + event.target.id) == 'mybemail') { emailsnapshot(); } else if (('' + event.target.id) == 'myar') { location.href=document.URL.split('#')[0].split('?')[0]; } else {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
}
function emailsnapshot() {
var tois=gtois.trim(), zbigstr='', zs='';
var smssuffix='', plussms='';
var wastitle='' + document.getElementById('img').title;
document.getElementById('img').title='';
if (eval('' + encodeURIComponent(document.getElementById('img').outerHTML.split(' contenteditable=')[0] + ' contenteditable="true">' + (document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument) + '</div>').length) < 800) {
smssuffix=', and all integers will SMS';
plussms=' or SMS';
if (tois.trim() != '' && tois.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
zs='@';
}
} //else {
//alert('why ' + document.getElementById('img').outerHTML.split(' onblur=')[0] + '>' + (document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument) + '</div>');
//}
if ((tois + zs).indexOf('@') == -1) {
//gtois=prompt('Please enter email address to send to? (just @ will show and ask via a popup window and all uppercase will use an inline HTML technique rather than an HTML file attachment)', '');
if (optionally) {
//optionally=false;
if (gtois == '') {
gtois=prompt('Optionally enter email address to send to? (just @ will show and ask via a popup window, and just - will not ask again' + smssuffix + ')', '');
}
} else {
gtois=prompt('Please enter email address to send to? (just @ will show and ask via a popup window, and just - will hide this emoji' + smssuffix + ')', '');
}
if (gtois == null) { gtois=''; }
tois=gtois;
}
if (tois == '-') {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
gtois=' ';
} else {
gtois='';
}
document.getElementById('mybemail').style.display='none';
document.getElementById('img').title=wastitle;
return '';
} else if (tois == '@') {
gtois='';
document.getElementById('mybemail').style.display='none';
zbigstr='<html><head>' + document.head.innerHTML.split('<scr')[0].replace('</style>', ' .ui-draggable { visibility:hidden; } </style>') + '</head>' + document.body.outerHTML.replace(/\"\;/g,"'").replace('</h4>','</h4> <input style=display:inline-block; placeholder="Email' + plussms + ' address to send to" type=text value="" onblur=" window.opener.document.getElementById(' + "'result'" + ').innerHTML=this.value; "></input>') + '</html>';
wois=window.open('','_blank','top=30,left=30,width=500,height=500');
wois.document.write(zbigstr);
document.getElementById('img').title=wastitle;
return '';
} else if (tois.indexOf('@') == -1) {
if (tois.trim() != '' && tois.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
var elea=document.createElement('a');
elea.target='_blank';
elea.href='sms:' + tois + '&body=' + ourencodeURIComponent(encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?imgoh=' + encodeURIComponent(document.getElementById('img').outerHTML.split(' contenteditable=')[0] + ' contenteditable="true">' + (document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument) + '</div>')));
elea.click();
}
document.getElementById('img').title=wastitle;
return '';
}
document.getElementById('mybemail').style.display='none';
zbigstr='<html><head>' + document.head.innerHTML.split('<scr')[0].replace('</style>', ' .ui-draggable { visibility:hidden; } </style>') + '</head>' + document.body.outerHTML.replace(/\"\;/g,"'") + '</html>';
var zzhr = new XMLHttpRequest();
var zzform=new FormData();
zzform.append('to', tois);
zzform.append('subj', 'My 3D Transformed Webpage');
if (tois == tois.toUpperCase() && 1 == 7) {
zzform.append('inline', '');
}
zzform.append('tdhuhta', encodeURIComponent(zbigstr));
zzhr.open('post', '//www.rjmprogramming.com.au/PHP/emailhtml.php', true);
zzhr.send(zzform);
if (!gtoviaresult) {
wois=window.open('','_blank','top=30,left=30,width=500,height=500');
wois.document.write(zbigstr);
} else if (wois) {
wois.close();
wois=null;
}
document.getElementById('mybemail').style.display='inline-block';
gtoviaresult=false;
document.getElementById('img').title=wastitle;
return ' ';
}
function ourencodeURIComponent(inv) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
return inv;
} else {
return encodeURIComponent(inv);
}
}
function fixiurl(invl) {
var therest=document.getElementById('iurl').value.split(document.getElementById('iurl').value.trim())[1];
if (invl.toLowerCase() == 'true') {
document.getElementById('iurl').value=document.getElementById('iurl').value.trim().replace('#','') + '#' + therest;
} else if (invl.toLowerCase() == 'false') {
document.getElementById('iurl').value=document.getElementById('iurl').value.trim().replace('#','') + '' + therest;
} else if (invl.toLowerCase() == 'repeat') {
document.getElementById('iurl').value=document.getElementById('iurl').value.trim() + '';
} else if (invl.toLowerCase() == 'norepeat') {
document.getElementById('iurl').value=document.getElementById('iurl').value.trim() + ' ';
} else if (invl.toLowerCase() == 'contain') {
document.getElementById('iurl').value=document.getElementById('iurl').value.trim() + ' ';
} else if (invl.toLowerCase() == 'cover') {
document.getElementById('iurl').value=document.getElementById('iurl').value.trim() + ' ';
}
}
setTimeout(checkresultdiv, 2000);
</script>
</head>
<body>
<div id=dstyle style='display:none;'>
<script type='text/javascript'>
var styis=location.search.split('styling=')[1] ? decodeURIComponent(location.search.split('styling=')[1].split('&')[0]) : '';
if (styis != '') {
document.write(styis);
}
</script>
</div>
<a id=mybemail data-ondblclick="this.style.display='none';" title='Email snapshot (double click makes this emoji disappear)' style='display:none;' onclick=emailsnapshot();>📧</a><h1 id=myh1 style='display:inline-block;'>CSS Transform Matrix Dragging Tests</h1>
<h3>RJM Programming <a target=_blank title=Reset href='./more_transform.html' id=myar>-</a> September, 2017</h3>
<h3>Thanks to <a target=_blank title='Frank Ta work regarding CSS transform matrix ... thanks' href='http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/'>http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/</a></h3>
<p>Optional Background Image URL for Box Below: <br><input style="width:95%;" type='text' id='iurl' title='Optionally append space to this image URL to not have it repeat, two spaces for contain and three spaces for cover (combined with Choose File causes us to Apply Below for you allowing for display of image alone ready for your user dragged transformations), and include hash # for top element invisibility' value='http://www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg'></input><span id=snbsp><br></span><iframe onload="checkmedia(this);" frameborder="0" id="cbi" data-style="border-top:1px solid black;border-bottom:1px solid black;border-left:2px solid yellow;border-right:1px solid yellow;" style="width:116px;height:28px;margin-top:0px;" onmouseover="vsres=document.getElementById('result').innerHTML; document.getElementById('result').style.cursor=fvsres('progress');" src="client_browsing.htm?gfn=00000220.238.10.100.gif&d=156261280#Most%20people%20recognize%20me%20by%20my%20voice."></iframe> <span title='Make top menu part basically blank'>☾</span> <input title='Make top menu part basically blank' onchange="fixiurl('' + this.checked);" type='checkbox' id=topblank></input> <input onclick="fixiurl(this.value);" onchange="fixiurl(this.value);" type="radio" id="repeat" name="topradio" value="repeat" checked><label for="repeat">Repeat</label> <input onclick="fixiurl(this.value);" onchange="fixiurl(this.value);" type="radio" id="norepeat" name="topradio" value="norepeat"><label for="norepeat">No-Repeat</label> <input onclick="fixiurl(this.value);" onchange="fixiurl(this.value);" type="radio" id="contain" name="topradio" value="contain"><label for="contain">Contain</label> <input onclick="fixiurl(this.value);" onchange="fixiurl(this.value);" type="radio" id="cover" name="topradio" value="cover"><label for="cover">Cover</label> <input type='button' style='background-color:yellow;' title='Optionally append space to this image URL to not have it repeat, two spaces for contain and three spaces for cover (combined with Choose File causes us to Apply Below for you allowing for display of image alone ready for your user dragged transformations), and include hash # for top element invisibility' onclick=" applythis(document.getElementById('iurl').value); " value="Apply Below"></input> <input type='button' style='background-color:yellow;display:none;' title='Optionally append space to this image URL to not have it repeat, two spaces for contain and three spaces for cover (combined with Choose File causes us to Apply Below for you allowing for display of image alone ready for your user dragged transformations), and include hash # for top element invisibility' onclick=" rfd=true; readyfordrag(true); this.style.display='none'; " value="Ready for Drag Below" id=brfd></input><br></p>
<span style='display:inline-block;'> </span><div id="img" style='display:inline-block;background-color:white;' class="box" contenteditable=true onblur="fixstyle((this.innerText || this.contentWindow || this.contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));">
Drag the points to transform the box! Optionally change styling below.<br>
<script type='text/javascript'>
var xstyis=location.search.split('styling=')[1] ? decodeURIComponent(location.search.split('styling=')[1].split('&')[0]) : '';
if (xstyis != '') {
while (xstyis.indexOf(String.fromCharCode(10)) != -1) {
xstyis=xstyis.replace(String.fromCharCode(10), '<br>');
}
//alert(xstyis.replace(/\</g,'<').replace(/\>/g,'>'));
document.write(xstyis.replace(/\<s/g,'<s').replace(/\<\//g,'</').replace(/e\>/g,'e>'));
} else {
document.write('<style><br>.box {<br>margin: 20px; padding: 10px;<br>height: 150px; width: 500px;<br>border: 1px solid black; }<br></style><br>');
}
</script>
</div><span style='display:inline-block;'> </span><br><br>
<div id=inum style='display:none;'></div>
<input id=audioname style='display:none;' type=hidden value=''></input>
<input id=saysub style='display:none;' type=hidden value=''></input>
<input id=outputname style='display:none;' type=hidden value=''></input>
<input id=path style='display:none;' type=hidden value=''></input>
<input id=opath style='display:none;' type=hidden value=''></input>
<input id=cto style='display:none;' type=hidden value=''></input>
<a target=_blank id=aemailto style='display:none;' href=''>Email</a><a target=_blank id=asmsto style='display:none;' href=''>SMS</a>
<select id=sin style='display:none;position:absolute;left:-500px;top:-500px;'><option style='display:none;' value=''></option></select>
<div id=thewords style='display:none;'></div>
<div id=result style='display:none;'></div>
<div id=resultav style='display:none;'></div>
<div id=topleftx style='display:none;'></div>
<div id=videoag style='display:none;'></div><br>
<div id=divmore></div>
</body>
</html>