<html>
<head>
<title>Outline CSS - RJM Programming - July, 2026</title>
<meta charset="UTF-8"/>
<style>

</style>
<script type='text/javascript'>

var mybval='', basebval='', baseoutidea='', newoutidea='', mydih='', newdih='';

function changeit(taovalue) {
var myval=taovalue;
mybval=document.getElementById('dbottom').outerHTML;
myval=taovalue.split(mybval)[0];
//alert('myval=' + myval);
if (myval != document.body.innerHTML) { document.body.innerHTML=myval + mybval; }
if (eval('' + mybval.split('</option>').length) == 2) {
mydih=document.getElementById('dtop').innerHTML;
newdih=mydih;
basebval=myval;
baseoutidea='outline:' + basebval.split('outline:')[1].split(';')[0] + ';';
var rectdiv=document.getElementById('dtop').getBoundingClientRect();
newoutidea='outline:' + Math.floor(Math.max(rectdiv.top,rectdiv.left,eval(screen.height - rectdiv.bottom),eval(screen.width - rectdiv.right))) + 'px solid purple;';
document.getElementById('mysel').innerHTML+="<option value='" + basebval.replace(baseoutidea, newoutidea) + "'>Purple Outline to Screen Edges</option>";
document.getElementById('mysel').innerHTML+="<option value='" + basebval + "'>Purple Outline Default</option>";
document.getElementById('mysel').innerHTML+="<option value='lg'>Linear Gradient</option>";
document.getElementById('mysel').innerHTML+="<option value='LG'>Linear Gradient and Outline</option>";
document.getElementById('mysel').innerHTML+="<option value='" + basebval.replace('border:2px dotted green;', 'border:2px dashed green;') + "'>Border Dashed</option>";
document.getElementById('mysel').innerHTML+="<option value='" + basebval.replace(baseoutidea, 'outline:5px dotted green;').replace('34px','0px') + "'>Thicken Border</option>";

mybval=document.getElementById('dbottom').outerHTML;
}
//alert('mybval=' + mybval);
if (newdih != mydih) {
document.getElementById('dtop').innerHTML=newdih;
if (newdih.replace(' was ',' is ') == mydih) {
newdih=mydih;
} else if (newdih.replace(' Green',' Purple') == mydih) {
newdih=mydih;
}
}
document.getElementById('myta').value=document.getElementById('dtop').outerHTML;
}

function remember(divo) {
newdih=divo.innerHTML;
}

function populate(selo) {
if ((selo.value.indexOf('outline:5px dotted') != -1 ? 'lg' : selo.value) == 'lg') {
if (selo.value == 'lg') {
document.getElementById('dstyle').innerHTML='<style> body { background-image: linear-gradient(to right, red, orange, green, brown) !important; } </style>';
document.getElementById('dbottom').title=document.getElementById('dstyle').innerHTML;
if (newdih == mydih) {
newdih=mydih.replace(' is ',' was ');
}
changeit(basebval.replace('34px','0px'));
} else {
if (newdih == mydih) {
newdih=mydih.replace(' Purple',' Green');
}
document.getElementById('dbottom').title='Menu';
changeit(selo.value);
}
} else if (selo.value == 'LG') {
document.getElementById('dstyle').innerHTML='<style> body { background-image: linear-gradient(to right, red, orange, green, brown) !important; } </style>';
document.getElementById('dbottom').title=document.getElementById('dstyle').innerHTML;
changeit(basebval);
} else if (selo.value != '') {
document.getElementById('dstyle').innerHTML='';
document.getElementById('dbottom').title='Menu';
changeit(selo.value);
}
}

</script>
</head>
<body style="background-color:yellow;" onload="changeit(document.body.innerHTML);">
<div id=dtop contenteditable=true onblur=remember(this); title="Editable, with purple outline, by default" style="background-color:white;width:33%;height:33%;position:absolute;top:33%;left:33%;display:inline-block;border:2px dotted green;outline:34px solid purple;text-align:center;"><br><br><br>My Outline is Purple</div>
<div id=dbottom title="Menu" style="padding-left:2px;background-color:yellow;width:22%;height:100%;position:absolute;top:0%;left:78%;z-index:78;"><h1>Outline CSS</h1><h4>RJM Programming - July, 2026</h4><select style="width:95%;" onchange=populate(this); id=mysel><option value=''>Optional other ideas ...</option></select><br><br><textarea rows=19 style="width:95%;font-size:8px;" onblur="changeit(this.value);" id=myta></textarea><div id=dstyle></div></div>
</body>
</html>