<html>
<head>
<title>Transparent Textarea - RJM Programming - March, 2026</title>
<style>
/* Thanks to https://www.google.com/search?q=allow+hosted+element+overflow+in+y+but+not+change+body+element+height&rlz=1C5OZZY_en&oq=allow+hosted+element+overflow+in+y+but+not+change+body+element+height&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRiPAtIBCTI2NzM1ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8 */
html, body {
height: 100%; /* or 100vh */
margin: 0;
padding: 0;
}
</style>
<script type=text/javascript>
var sofarval='', sofars=[], posi=0, sofarback='',sofarrep='',sofarsiz='',sofarpos='', woo=null;
var lastsofarval=sofarval, img=null, shadowize=true;
var poss=['left top','right bottom','right top','left bottom','center top','left center','right center','center bottom','center venter'];
var ok=false;
var xtypes = ['image/tif', 'audio/x-m4r','audio/wav','audio/x-wav','audio/x-pn-realaudio','audio/x-mpegurl','audio/x-aiff','audio/mpeg','audio/mid',
'audio/basic','audio/ogg','video/x-sgi-movie','video/x-msvideo','video/quicktime','audio/mp3','video/mp4','video/mpeg',
'video/x-la-asf','video/ogg','video/webm','audio/mp4', 'image/jpeg', 'image/jpeg', 'image/png', 'image/gif', 'image/bmp',
'text/html', 'text/html', 'text/html', 'text/javascript', 'text/css', 'text/plain', 'text/xml', 'text/csv',
'application/vnd.ms-word', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/x-php', 'application/pdf', 'IMAGE/pdf',
'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.ms-powerpoint',
'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'video/mp4'];
var xexts = ['.tif','.m4r','.wav','.wav','.ram','.m3u','.aiff','.mp3','.rmi',
'.snd','.ogg','.movie','.avi','.mov','.mp3','.m4v','.mpeg',
'.lsx','.ogv','.webm','.m4a', '.jpg', '.jpeg', '.png', '.gif', '.bmp',
'.htm', '.html', '.htmls', '.js', '.css', '.txt', '.xml', '.csv',
'.doc', '.docx', '.php', '.pdf', '.pdf',
'.pptx', '.ppt',
'.xls', '.xlsx', '.mp4'];
function onl() {
document.getElementById('ttext').value=(('' + location.search + ('' + location.hash).replace(/^null/g,'').replace(/^undefioned/g,'')).split('ttext=')[1] ? decodeURIComponent(('' + location.search + ('' + location.hash).replace(/^null/g,'').replace(/^undefioned/g,'')).split('ttext=')[1].split('&')[0]).replace(/\+/g,' ') : '');
sofarval=document.getElementById('ttext').value;
checkforthings();
lastsofarval=sofarval;
}
function whatifover(oform) {
if (eval('' + encodeURIComponent(document.getElementById('ttext').value).length) > 750) {
return false;
}
if (3 == 3) {
return false;
}
return true;
}
function checkforthings() {
var ideas=[], i=0, j=0, lastdodah='', ii=0, rect=null;
var delimideas=[String.fromCharCode(10) + '/',' /',String.fromCharCode(10) + 'http',' http',String.fromCharCode(10) + 'HTTP',' HTTP',String.fromCharCode(10) + 'Http',' Http',String.fromCharCode(10) + 'hTTP',' hTTP',' /',String.fromCharCode(10) + 'data:image/',' data:image/'];
if (sofarval != lastsofarval) {
for (i=0; i<delimideas.length; i++) {
ideas=(' ' + sofarval).split(delimideas[i]);
if (eval('' + ideas.length) > 1) {
for (ii=1; ii<ideas.length; ii++) {
lastdodah='.' + ideas[ii].split('.')[eval(-1 + ideas[ii].split('.').length)].split('?')[0].split('#')[0].toLowerCase();
if (sofars.indexOf(delimideas[i].substring(1) + ideas[ii].split(' ')[0].split(String.fromCharCode(10))[0]) == -1) {
if (xexts.indexOf(lastdodah) != -1 || (delimideas[i].indexOf('data:image/') != -1 && ideas[ii].indexOf(';') != -1)) {
if (xtypes[(xexts.indexOf(lastdodah) == -1 ? 0 : xexts.indexOf(lastdodah))].indexOf('image/') == 0 || (delimideas[i].indexOf('data:image/') != -1 && ideas[ii].indexOf(';') != -1)) {
if (delimideas[i].indexOf('data:image/') != -1) {
shadowize=false;
document.getElementById('ttext').style.color='rgba(0,0,0,0.05)';
rect=document.getElementById('ttext').getBoundingClientRect();
document.getElementById('ttext').style.height='' + eval(eval('' + rect.height) + eval(1 * screen.height)) + 'px';
}
testimg(delimideas[i].substring(1) + ideas[ii].split(' ')[0].split(String.fromCharCode(10))[0]);
}
}
}
}
}
}
}
lastsofarval=sofarval;
}
function testimg(what) {
var lg='linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),';
if (!shadowize) { lg='linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),'; }
if (sofarback.indexOf(lg) != -1) {
//sofarback=sofarback.replace('linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),','');
document.getElementById('ttext').style.outline='none';
document.getElementById('ttext').style.border='none';
lg='';
} else if (sofarback != '') {
document.getElementById('ttext').style.outline='none';
document.getElementById('ttext').style.border='none';
lg='';
} else {
document.getElementById('ttext').style.outline='none';
document.getElementById('ttext').style.border='none';
}
ok=false;
img = new Image();
img.onload = function() {
ok=true;
if (shadowize) { document.getElementById('ttext').style.textShadow='-1px 1px 1px #ff2d95'; }
document.getElementById('xbody').style.backgroundImage=sofarback + lg + 'url(' + img.src + ')';
document.getElementById('xbody').style.backgroundRepeat=sofarrep + 'no-repeat';
if (posi == 0) {
document.getElementById('xbody').style.backgroundSize=sofarsiz + 'contain';
sofarsiz+='' + 'contain' + ',';
} else if (posi == 1 || posi < 4) {
sofarsiz=sofarsiz.replace(/contain/g,'auto 50%');
document.getElementById('xbody').style.backgroundSize=sofarsiz + 'auto 50%';
sofarsiz+='' + 'auto 50%' + ',';
} else if (posi >= 4) {
//sofarsiz=sofarsiz.replace(/50\%\ 50\%/g,'33% 33%');
sofarsiz=sofarsiz.replace(/50\%\ auto/g,'auto 33%');
sofarsiz=sofarsiz.replace(/auto\ 50\%/g,'auto 33%');
document.getElementById('xbody').style.backgroundSize=sofarsiz + 'auto 33%';
sofarsiz+='' + 'auto 33%' + ',';
}
if (poss[eval(posi % eval('' + poss.length))] == 'right top') { document.getElementById('myh1').style.color='rgba(0,0,0,0.3)'; document.getElementById('myh3').style.color='rgba(0,0,0,0.3)'; }
document.getElementById('xbody').style.backgroundPosition=sofarpos + poss[eval(posi % eval('' + poss.length))];
sofarback+='' + lg + 'url(' + img.src + ')' + ',';
lg='';
sofarrep+='' + 'no-repeat' + ',';
sofarpos+='' + poss[eval(posi % eval('' + poss.length))] + ',';
posi++;
if (!shadowize) { window.scrollTo(0,0); }
}
img.src=what;
sofars.push(what);
}
function getCharacterAtCursor(textareaElement) { // thanks to https://www.google.com/search?q=textarea+detect+character+at+a+cursor+position&rlz=1C5OZZY_en&oq=textarea+detect+character+at+a+cursor+position&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRifBTIHCAQQIRifBTIHCAUQIRifBTIHCAYQIRifBTIHCAcQIRiPAtIBCTEyMzExajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
// Get the cursor position (character index)
var cursorPosition = textareaElement.selectionStart; //
// Get the total text content of the textarea
var textContent = textareaElement.value;
// To get the character *at* the cursor position, you would technically look
// at the character at that index in the string.
// Example: Getting the character before the cursor
if (cursorPosition >= 0) {
//var charBeforeCursor = textContent[cursorPosition - 1];
var charAtCursor = textContent[cursorPosition - 1 + 1];
if (charAtCursor == '/') {
if (sofars.indexOf(textContent.substring(cursorPosition).split(' ')[0].split(String.fromCharCode(10))[0]) != -1) {
window.open(textContent.substring(cursorPosition).split(' ')[0].split(String.fromCharCode(10))[0], '_blank', 'top=' + eval(-800 + screen.height) + ',left=' + eval(-800 + screen.width) + ',width=500,height=500');
}
} else if (charAtCursor == 'h' || charAtCursor == 'H') {
if (sofars.indexOf(textContent.substring(cursorPosition).split(' ')[0].split(String.fromCharCode(10))[0]) != -1) {
window.open(textContent.substring(cursorPosition).split(' ')[0].split(String.fromCharCode(10))[0], '_blank', 'top=' + eval(-800 + screen.height) + ',left=' + eval(-800 + screen.width) + ',width=500,height=500');
}
} else if (charAtCursor == 'd') {
if (sofars.indexOf(textContent.substring(cursorPosition).split(' ')[0].split(String.fromCharCode(10))[0]) != -1) {
woo=window.open('', '_blank', 'top=' + eval(-800 + screen.height) + ',left=' + eval(-800 + screen.width) + ',width=500,height=500');
woo.document.write('<html><body><img src="' + textContent.substring(cursorPosition).split(' ')[0].split(String.fromCharCode(10))[0] + '"></img></body></html>');
}
}
return charAtCursor;
} else {
return "At the beginning of the text or no character before";
}
// To get the character *after* the cursor position:
// if (cursorPosition < textContent.length) {
// const charAfterCursor = textContent[cursorPosition];
// return charAfterCursor;
// }
}
</script>
</head>
<body id=xbody onload=onl();>
<table style=width:100%;height:100%;><tr><td id=tdleft style=vertical-align:top;width:70%;>
<form onsubmit="return whatifover(this);" method=GET action="./transparent_textarea.html#" id=myform style="background-color:transparent;">
<textarea onclick="getCharacterAtCursor(this);" onpaste="setTimeout(function(){ sofarval=document.getElementById('ttext').value; checkforthings(); }, 200);" onkeypress="setTimeout(function(){ sofarval=document.getElementById('ttext').value; checkforthings(); }, 200);" spellcheck="false" autocorrect="off" autocapitalize="off" onblur="document.getElementById('fsub').click();" name=ttext id=ttext style="background-color:transparent;width:90%;height:90vh;overflow-y:auto;"></textarea>
<input type=submit id=fsub style=display:none; value=Submit</input>
</form>
</td><td id=tdright style=vertical-align:top;>
<h1 id=myh1>Transparent Textarea</h1>
<h3 id=myh3>RJM Programming - March, 2026</h3>
</td></tr></table>
</body>
</html>