<html>
<head>
<title>Emoji-ize Text - RJM Programming - June, 2021</title>
<meta charset="UTF-8">
<style>
// Thanks to https://stackoverflow.com/questions/8117761/how-can-i-make-an-iframe-resizable
iframe {
max-width:1400px;
height:380px;
border:3px solid green;
resize: both;
overflow: auto;
}
</style>
<script type='text/javascript'>
var ifcont='';
var zin='9', lastzin='9';

function overlayif() {
if (ifcont.indexOf('</p>') != -1) {
var pois=document.getElementById('pinvis');
pois.innerHTML=ifcont.split('</p>')[0].split('<p>')[1].replace(/\<br\>/g, String.fromCharCode(10));
var ihpois='' + (pois.innerText || pois.contentWindow || pois.contentDocument);
if (!document.getElementById('overlayta') && document.getElementById('mydiv') && document.getElementById('divinvis')) {
var bcr=document.getElementById('mydiv').getBoundingClientRect();
document.getElementById('divinvis').innerHTML='<textarea id=overlayta style="position:absolute;' + ('z-index:' + zin + ';').replace('z-index:-','visibility:hidden;z-index:-') + 'border:3px solid green;top:' + bcr.top + 'px;left:' + bcr.left + 'px;width:' + bcr.width + 'px;height:' + bcr.height + 'px;" rows=15 cols=120>' + ihpois + '</textarea>';
document.getElementById('overlayta').title=ifcont;
document.getElementById('divinvis').title=ifcont;
if (zin != lastzin) {
document.getElementById('overlayta').style.zIndex='' + zin;
if (zin.indexOf('-') != -1) {
document.getElementById('overlayta').style.visibility='hidden';
} else {
document.getElementById('overlayta').style.visibility='visible';
}
lastzin=zin;
if (document.getElementById('myaltb').title == zin) {
document.getElementById('myaltb').value=document.getElementById('myaltb').value.replace(' Iframe', ' TextAreA').replace(' Textarea', ' IfrAme').replace(/A/g, 'a');
document.getElementById('myaltb').title=document.getElementById('myaltb').title.replace('-9', '+9').replace(/^9/g, '+-9').replace(/\+/g, '');
}
}
} else if (document.getElementById('overlayta')) {
document.getElementById('overlayta').value=ihpois;
document.getElementById('overlayta').title=ifcont;
document.getElementById('divinvis').title=ifcont;
if (zin != lastzin) {
document.getElementById('overlayta').style.zIndex='' + zin;
if (zin.indexOf('-') != -1) {
document.getElementById('overlayta').style.visibility='hidden';
} else {
document.getElementById('overlayta').style.visibility='visible';
}
lastzin=zin;
if (document.getElementById('myaltb').title == zin) {
document.getElementById('myaltb').value=document.getElementById('myaltb').value.replace(' Iframe', ' TextAreA').replace(' Textarea', ' IfrAme').replace(/A/g, 'a');
document.getElementById('myaltb').title=document.getElementById('myaltb').title.replace('-9', '+9').replace(/^9/g, '+-9').replace(/\+/g, '');
}
}
}
}
}

function textareaize(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
ifcont=aconto.body.innerHTML;
setTimeout(overlayif, 1000);
}
}
}
}

function onl() {
document.getElementById('mydiv').style.width='' + eval(-40 + screen.width) + 'px';
document.getElementById('iftext').style.width='' + eval(-40 + screen.width) + 'px';
}
</script>
</head>
<body onload=" setTimeout(onl, 2000); ">
<h1>Emoji-ize Text</h1>
<h3>RJM Programming</h3>
<h4>June, 2021</h4>
<p>Enter text below ...</p>
<form target='iftext' method='POST' action='./fillin_gaps_with_emojis.php'>
<textarea title='Emoji-ized text here goes way below after click of button below' name=intext id=intext style='width:95%;border:3px solid red;' rows=15 cols=120>
</textarea>
<br>
<br>
<input title='Emoji-ized text version of above goes below (into Textarea) after click of this button' onclick="zin='9';" type='submit' value='Emoji-ize' style='background-color:yellow;'></input> <input id=myaltb onclick="zin=this.title;" title='-9' type='submit' value='... in Iframe' style='background-color:yellow;'></input>
</form>
<br>

<div title='Emoji-ized text version of way above goes here after click of button above' id=mydiv style='width:1200px;height:380px;display:block;border:3px solid green;'>
<iframe onload='textareaize(this);' title='Emoji-ized text version of way above goes here after click of button above' style='width:100%;height:380px;' name='iftext' id='iftext' src='./fillin_gaps_with_emojis.php'></iframe>
</div>
<p id=pinvis style='display:none;'></p>
<div id=divinvis></div>
</body>
</html>