<!doctype html>
<html>
<head>
<title>HTML5 Mark Element - RJM Programming - May, 2019</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;
}
}
</style>
<script type='text/javascript'>
var phight=' ';
var cbackc='';
var cookcnt=0;
var cookblank=' ';
var zoharr=[];
var aglow=' class="glow"', bglow='';
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').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '', '<mark' + aglow + '>' + lines[ilines] + '</mark>');
} else {
document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '<br>', '<mark' + aglow + '>' + lines[ilines] + '</mark><br>');
}
}
} else if (xsel == '') {
phight='';
}
document.getElementById('showhtml').innerHTML=document.getElementById('phfloater').innerHTML.replace(/\>/g,'>').replace(/\</g,'<').replace(/\<\;br\>\;/g, '<br><br>');
}
plookforhighlight();
</script>
</head>
<body>
<h1>HTML5 Mark Element<span> ... Glows: </span><input onchange=toggleglow(); style=display:inline-block; type=checkbox checked></input></h1>
<h3>RJM Programming - May, 2019</h3>
<div contenteditable=true id=phfloater style='border:1px solid orange;' title='Highlight text to see mark elements highlighting your highlighting'>The rain,<br>
In Spain,<br>
Falls mainly,<br>
On the plain</div><br><br><span> ... versus HTML of this below (perhaps after your highlights become HTML5 mark elements) ...<br><br>
<div id=showhtml style='border:1px solid green; background-color:yellow;'></div>
</body>
</html>