<!doctype html>
<html>
<head>
<title>Highlight the Uneditable Parts - RJM Programming - October, 2020</title>
<style>

/* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */

.glow {
font-size: 16px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
color: black;
}


@-webkit-keyframes glow {
from {
text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
}

to {
text-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
}
}


.wolg {
font-size: 16px;
color: #fff;
text-align: center;
-webkit-animation: wolg 1s ease-in-out infinite alternate;
-moz-animation: wolg 1s ease-in-out infinite alternate;
animation: wolg 1s ease-in-out infinite alternate;
color: black;
}


@-webkit-keyframes wolg {
from {
text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #6e0073, 0 0 9px #6e0073, 0 0 11px #6e0073, 0 0 13px #6e0073, 0 0 15px #6e0073;
}

to {
text-shadow: 0 0 24px #fff, 0 0 6px #4dffa6, 0 0 8px #4dffa6, 0 0 10px #4dffa6, 0 0 12px #4dffa6, 0 0 14px #4dffa6, 0 0 16px #4dffa6;
}
}

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

var nonmobile="false";
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
nonmobile="false"; //"true";
}

var premark='', postmark='';
var inmark=' contenteditable=' + nonmobile;
var phight=' ';
var cbackc='';
var cookcnt=0;
var cookblank=' ';
var zoharr=[];
var aglow=' class="glow"', bglow='';
var eletype='mark';

function toggleglow() {
if (aglow == '') {
aglow=bglow;
} else {
bglow=aglow;
aglow='';
}
}

function plookforhighlight() {
var usualdelay=2000;
setTimeout(plookforhighlight, usualdelay);
var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
while (xsel.indexOf(String.fromCharCode(10)) != -1) {
xsel=xsel.replace(String.fromCharCode(10), '<br>');
//alert('xsel=' + xsel);
}
//xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
//xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
while (xsel.indexOf(String.fromCharCode(10)) != -1) {
xsel=xsel.replace(String.fromCharCode(10), '<br>');
//alert('xsel=' + xsel);
}
//xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
//xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
}
if (xsel != phight && xsel != '') {
phight=xsel;
//alert(phight + ' ... ' + document.getElementById('phfloater').innerHTML);
var lines=phight.split('<br>');
for (var ilines=0; ilines<lines.length; ilines++) {
if (eval(1 + ilines) == lines.length && document.getElementById('phfloater')) {
document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '', premark + '<' + eletype + aglow + inmark + '>' + lines[ilines] + '</' + eletype + '>' + postmark);
} else if (document.getElementById('phfloater')) {
document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '<br>', premark + '<' + eletype + aglow + inmark + '>' + lines[ilines] + '</' + eletype + '>' + postmark + '<br>');
}
}
} else if (xsel == '') {
phight='';
}
if (document.getElementById('showhtml') && document.getElementById('phfloater')) {
document.getElementById('showhtml').innerHTML=document.getElementById('phfloater').innerHTML.replace(/\>/g,'>').replace(/\</g,'<').replace(/\<\;br\>\;/g, '<br><br>');
}
}

function swap(tv) {
if (tv == 'mark') {
eletype='mark';
aglow=' class="glow"';
document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(/\<\/kbd/g, '</mark').replace(/\<kbd/g, '<mark').replace(/wolg/g, 'glow');
document.getElementById('showhtml').innerHTML=document.getElementById('showhtml').innerHTML.replace(/\<\/kbd/g, '</mark').replace(/\<kbd/g, '<mark').replace(/wolg/g, 'glow');
} else if (tv == 'kbd') {
eletype='kbd';
aglow=' class="wolg"'
document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(/\<\/mark/g, '</kbd').replace(/\<mark/g, '<kbd').replace(/glow/g, 'wolg');
document.getElementById('showhtml').innerHTML=document.getElementById('showhtml').innerHTML.replace(/\<\/mark/g, '</kbd').replace(/\<mark/g, '<kbd').replace(/glow/g, 'wolg');
}
}

plookforhighlight();


</script>
</head>
<body>
<h1>Highlight the Uneditable Parts</h1>
<h3>RJM Programming - October, 2020</h3>
<h4>Highlight, via <select id=selmark onchange=swap(this.value); size=2><option value=mark selected>mark</option><option value=kbd>kbd</option></select> the parts you do not want to change, else add or change as required.</h4>

<div id=phfloater contenteditable=true style='width:100%;height:70vh;border:2px solid red;'>
The rain <br>
in Spain <br>
falls mainly <br>
on the plain.<br>
<br><br>
<script type='text/javascript'>
document.write("<div contenteditable=" + nonmobile + ">Yours sincerely,<br><br>RJM Programming</div></div>");
</script>
<div id=showhtml style='border:1px solid green; background-color:yellow;display:none;'></div>
</body>
</html>