<html>
<head>
<title>Textarea and Div Box Shadow Interactions - RJM Programming - October, 2024 ... thanks to https://stackoverflow.com/questions/15495936/textarea-onresize-not-working and https://www.w3schools.com/css/css3_shadows_box.asp</title>
<style>
td {
padding: 20 20 20 20;
vertical-align: top;
}
#tdcontrols {
text-align: center;
}
#mydiv {
box-shadow: 10px 10px;
background-color: #ffff00;
color: #000000;
}
#myta {
box-shadow: 10px 10px;
background-color: #ffc0cb;
color: #000000;
-webkit-appearance: none;
}
#ffta, #ffdiv, #fsta, #fsdiv {
width: 75px;
}
</style>
<script type=text/javascript>
var rectis=null, origrectis=null;
var bscss='box-shadow: 10px 10px;';
var origcss='box-shadow: 10px 10px;';
var contis='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo nibh et aliquet molestie. Phasellus vehicula arcu ut convallis facilisis. Etiam interdum mollis massa, dapibus sollicitudin sem condimentum a. Aliquam viverra enim eget faucibus vulputate. Suspendisse cursus magna a ultricies finibus. Phasellus at eros aliquam, iaculis sem at, pharetra dui. Praesent scelerisque tellus leo, ac consequat ante convallis sit amet. In libero tellus, luctus sit amet velit quis, laoreet mollis urna. Aliquam aliquet tristique pharetra. Praesent quis cursus mauris. Etiam a ipsum euismod, rutrum erat vel, tincidunt enim. Sed a lorem magna. Sed odio libero, ultricies in nibh a, rutrum venenatis nisi. Pellentesque aliquet nibh augue, eget congue ante rhoncus sed. Maecenas ut ante nec erat scelerisque rutrum. Curabitur at lacinia velit, non ultricies ante.';
function fstait(ano) {
if (ano.value == '') {
document.getElementById('myta').style.fontSize='' + ano.getAttribute('data-fs');
} else {
document.getElementById('myta').style.fontSize='' + ano.value.split(' (')[0];
}
}
function fsdivit(ano) {
if (ano.value == '') {
document.getElementById('mydiv').style.fontSize='' + ano.getAttribute('data-fs');
} else {
document.getElementById('mydiv').style.fontSize='' + ano.value.split(' (')[0];
}
}
function fftait(ano) {
if (ano.value == '') {
document.getElementById('myta').style.fontFamily='' + ano.getAttribute('data-ff');
} else {
document.getElementById('myta').style.fontFamily='' + ano.value.split(' (')[0];
}
}
function ffdivit(ano) {
if (ano.value == '') {
document.getElementById('mydiv').style.fontFamily='' + ano.getAttribute('data-ff');
} else {
document.getElementById('mydiv').style.fontFamily='' + ano.value.split(' (')[0];
}
}
function coltait(ano) {
document.getElementById('myta').style.color='' + ano.value;
}
function bcoltait(ano) {
document.getElementById('myta').style.backgroundColor='' + ano.value;
}
function coldivit(ano) {
document.getElementById('mydiv').style.color='' + ano.value;
}
function bcoldivit(ano) {
document.getElementById('mydiv').style.backgroundColor='' + ano.value;
}
function contit(tado) {
if (('' + tado.id) == 'myta') {
contis=('' + tado.value);
document.getElementById('mydiv').innerHTML=contis;
} else if (('' + tado.id) == 'mydiv') {
contis=('' + (tado.innerText || tado.contentWindow || tado.contentDocument));
document.getElementById('myta').value=contis;
}
}
function resit(tao) {
rectis=tao.getBoundingClientRect();
document.getElementById('mydiv').style.width='' + rectis.width + 'px';
document.getElementById('mydiv').style.height='' + eval(0 + rectis.height) + 'px';
bscss='box-shadow: ' + eval(10 + rectis.width - origrectis.width) + 'px ' + eval(10 + rectis.height - origrectis.height) + 'px;';
document.getElementById('dstyle').innerHTML+='<style> #myta, #mydiv { ' + bscss + ' } </style>';
}
function onl() {
document.getElementById('mydiv').innerHTML=contis;
rectis=document.getElementById('mydiv').getBoundingClientRect();
document.getElementById('myta').style.width='' + rectis.width + 'px';
document.getElementById('myta').style.height='' + eval(80 + rectis.height) + 'px';
document.getElementById('mydiv').style.height='' + eval(80 + rectis.height) + 'px';
rectis=document.getElementById('mydiv').getBoundingClientRect();
origrectis=rectis;
document.getElementById('myta').innerHTML=contis;
document.getElementById('mydiv').style.fontFamily = window.getComputedStyle(document.getElementById('myta'),null).fontFamily || document.getElementById('myta').style.fontFamily || document.getElementById('myta').currentStyle.getCurrentProperty('font-family');
document.getElementById('mydiv').setAttribute('data-ff', '' + document.getElementById('mydiv').style.fontFamily);
document.getElementById('myta').setAttribute('data-ff', '' + document.getElementById('mydiv').style.fontFamily);
//document.getElementById('optffta').innerText+='' + document.getElementById('mydiv').style.fontFamily;
//document.getElementById('optffdiv').innerText+='' + document.getElementById('mydiv').style.fontFamily;
document.getElementById('mydiv').style.fontSize = window.getComputedStyle(document.getElementById('myta'),null).fontSize || document.getElementById('myta').style.fontSize || document.getElementById('myta').currentStyle.getCurrentProperty('font-size');
document.getElementById('mydiv').setAttribute('data-fs', '' + document.getElementById('mydiv').style.fontSize);
document.getElementById('myta').setAttribute('data-fs', '' + document.getElementById('mydiv').style.fontSize);
document.getElementById('mydiv').style.padding = window.getComputedStyle(document.getElementById('myta'),null).padding || document.getElementById('myta').style.padding || document.getElementById('myta').currentStyle.getCurrentProperty('padding');
document.getElementById('mydiv').style.margin = window.getComputedStyle(document.getElementById('myta'),null).margin || document.getElementById('myta').style.margin || document.getElementById('myta').currentStyle.getCurrentProperty('margin');
document.getElementById('fsta').placeholder='' + document.getElementById('mydiv').style.fontSize;
document.getElementById('fsdiv').placeholder='' + document.getElementById('mydiv').style.fontSize;
}
</script>
</head>
<body onload=onl();>
<h1>Textarea and Div Box Shadow Interactions</h1>
<h3>RJM Programming - October, 2024 ... thanks to <a target=_blank title='https://stackoverflow.com/questions/15495936/textarea-onresize-not-working' href='//stackoverflow.com/questions/15495936/textarea-onresize-not-working'>Textarea Onresize Not Working</a> and <a target=_blank title='https://www.w3schools.com/css/css3_shadows_box.asp' href='//www.w3schools.com/css/css3_shadows_box.asp'>CSS3 Box Shadows</a></h3>
<h4>Match Content and Change Box Shadows via Textarea Resizing</h4>
<table style=width:98%;height:100vh; border=1>
<tr><th style=width:40%;>Textarea</th><th style=width:20%;> ... controls ...</th><th style=width:40%;>Div</th></tr>
<tr><td id=tdta><textarea onblur=contit(this); onmousemove=resit(this); ontouchend=resit(this); onmouseup=resit(this); id=myta></textarea></td>
<td id=tdcontrols>
<input onchange="coltait(this);" id=colta type=color value='#000000'></input> ... <input onchange="coldivit(this);" id=coldiv type=color value='#000000'></input><br>
<input onchange="bcoltait(this);" id=bcolta type=color value='#ffc0cb'></input> ... <input onchange="bcoldivit(this);" id=bcoldiv type=color value='#ffff00'></input><br><br>
<select onchange=fftait(this); id=ffta>
<option value='' id=optffta>Font Family ... </option>
<option value='Arial (sans-serif)'>Arial (sans-serif)</option>
<option value='Verdana (sans-serif)'>Verdana (sans-serif)</option>
<option value='Tahoma (sans-serif)'>Tahoma (sans-serif)</option>
<option value='Trebuchet MS (sans-serif)'>Trebuchet MS (sans-serif)</option>
<option value='Times New Roman (serif)'>Times New Roman (serif)</option>
<option value='Georgia (serif)'>Georgia (serif)</option>
<option value='Garamond (serif)'>Garamond (serif)</option>
<option value='Courier New (monospace)'>Courier New (monospace)</option>
<option value='Brush Script MT (cursive)'>Brush Script MT (cursive)</option>
</select> ... <select onchange=ffdivit(this); id=ffdiv>
<option value='' id=optffdiv>Font Family ... </option>
<option value='Arial (sans-serif)'>Arial (sans-serif)</option>
<option value='Verdana (sans-serif)'>Verdana (sans-serif)</option>
<option value='Tahoma (sans-serif)'>Tahoma (sans-serif)</option>
<option value='Trebuchet MS (sans-serif)'>Trebuchet MS (sans-serif)</option>
<option value='Times New Roman (serif)'>Times New Roman (serif)</option>
<option value='Georgia (serif)'>Georgia (serif)</option>
<option value='Garamond (serif)'>Garamond (serif)</option>
<option value='Courier New (monospace)'>Courier New (monospace)</option>
<option value='Brush Script MT (cursive)'>Brush Script MT (cursive)</option>
</select><br><br>
<input onchange="fstait(this);" ondblclick="this.value=this.placeholder;" id=fsta type=text placeholder='' value=''></input> ... <input onchange="fsdivit(this);" ondblclick="this.value=this.placeholder;" id=fsdiv type=text placeholder='' value=''></input><br><br>
</td>
<td id=tddiv><div onblur=contit(this); contenteditable="true" id=mydiv></div></td>
</table>
<div id=dstyle style=display:none;>
</div>
</body>
</html>