<!doctype html>
<html>
<head>
<title>No Content Bordered DIV Versus HR - RJM Programming - January, 2018</title>
<script type='text/javascript'>

var orderof=['overallbordercolour','overallborderthicknesspx','overallborderstyle','overallborderopacity',
'divbordercolour','divborderthicknesspx','divborderstyle','divborderopacity',
'hrbordercolour','hrborderthicknesspx','hrborderstyle','hrborderopacity'];
var ourdiv=null, ourhr=null;
var ourdohdiv=null, ourdohhr=null;
var ourohdiv=null, ourohhr=null;
var pendingfocus=false;

function get_outerHTML(owhat) {
if (owhat.outerHTML) {
return '' + owhat.outerHTML;
} else {
var ih=document.body.innerHTML;
if (ih.indexOf(' id="' + owhat.id + '"') != -1) {
if (owhat.id.indexOf('div') != -1) {
return '<div id="' + owhat.id + '"' + ih.split(' id="' + owhat.id + '"')[1].split('</td>')[0];
} else if (owhat.id.indexOf('hr') != -1) {
return '<hr id="' + owhat.id + '"' + ih.split(' id="' + owhat.id + '"')[1].split('</td>')[0];
}
} else if (ih.indexOf(" id='" + owhat.id + "'") != -1) {
if (owhat.id.indexOf('div') != -1) {
return "<div id='" + owhat.id + "'" + ih.split(" id='" + owhat.id + "'")[1].split('</td>')[0];
} else if (owhat.id.indexOf('hr') != -1) {
return "<hr id='" + owhat.id + "'" + ih.split(" id='" + owhat.id + "'")[1].split('</td>')[0];
}
}
}
return '';
}

function repopdoh() {
var was=ourdohdiv.innerHTML;
ourdohdiv.innerHTML='';
ourdohdiv.innerHTML=was;
was=ourdohhr.innerHTML;
ourdohhr.innerHTML='';
ourdohhr.innerHTML=was;
ourohdiv=document.getElementById('ohdiv');
ourohhr=document.getElementById('ohhr');
}

function fixotherway(owhatid) {
var origid=owhatid;
var owhat=document.getElementById(owhatid.replace('oh','my'));
var oval=document.getElementById(owhatid).innerHTML;
while (oval.indexOf('<') != -1 || oval.indexOf('>') != -1) {
oval=oval.replace('<','<').replace('>','>');
}
var ih=document.body.innerHTML;
if (ih.indexOf(' id="' + owhat.id + '"') != -1) {
if (owhat.id.indexOf('div') != -1) {
//ourohdiv.removeAttribute('contenteditable'); //,'false');
//ourohhr.removeAttribute('contenteditable'); //,'false');
//repopdoh();
document.getElementById('trtc').innerHTML=document.getElementById('trtc').innerHTML.replace('<div id="' + owhat.id + '"' + ih.split(' id="' + owhat.id + '"')[1].split('</td>')[0], oval);
} else if (owhat.id.indexOf('hr') != -1) {
//ourohdiv.removeAttribute('contenteditable'); //,'false');
//ourohhr.removeAttribute('contenteditable'); //,'false');
//repopdoh();
document.getElementById('trtc').innerHTML=document.getElementById('trtc').innerHTML.replace('<hr id="' + owhat.id + '"' + ih.split(' id="' + owhat.id + '"')[1].split('</td>')[0], oval);
}
} else if (ih.indexOf(" id='" + owhat.id + "'") != -1) {
if (owhat.id.indexOf('div') != -1) {
//ourohdiv.removeAttribute('contenteditable'); //,'false');
//ourohhr.removeAttribute('contenteditable'); //,'false');
//repopdoh();
document.getElementById('trtc').innerHTML=document.getElementById('trtc').innerHTML.replace("<div id='" + owhat.id + "'" + ih.split(" id='" + owhat.id + "'")[1].split('</td>')[0], oval);
} else if (owhat.id.indexOf('hr') != -1) {
//ourohdiv.removeAttribute('contenteditable'); //,'false');
//ourohhr.removeAttribute('contenteditable'); //,'false');
//repopdoh();
document.getElementById('trtc').innerHTML=document.getElementById('trtc').innerHTML.replace("<hr id='" + owhat.id + "'" + ih.split(" id='" + owhat.id + "'")[1].split('</td>')[0], oval);
}
}
ourdiv=document.getElementById('mydiv');
ourhr=document.getElementById('myhr');
ourdohdiv=document.getElementById('dohdiv');
ourdohhr=document.getElementById('dohhr');
ourohdiv=document.getElementById('ohdiv');
ourohhr=document.getElementById('ohhr');
// border: 47px solid rgb(255, 0, 0); opacity: 1;
var spare='', spareopacity='', sparepre='', sparepost='';
var ordert=[origid.replace('oh','') + 'bordercolour',origid.replace('oh','') + 'borderthicknesspx',origid.replace('oh','') + 'borderstyle',origid.replace('oh','') + 'borderopacity'];
for (var iii=0; iii<ordert.length; iii++) {
if (ordert[iii].indexOf('bordercol') != -1) {
if (oval.indexOf(' rgb(') != -1) {
sparepre=oval.split(' rgb(')[0].trim().split(' ')[eval(-1 + oval.split(' rgb(')[0].trim().split(' ').length)];
spare='#' + ('000' + ('' + eval( ('' + oval.split(' rgb(')[1].replace(')',',')).split(',')[0] ).toString(16))).slice(-2) + ('000' + ('' + eval( ('' + oval.split(' rgb(')[1].replace(')',',')).split(',')[1] ).toString(16))).slice(-2) + ('000' + ('' + eval( ('' + oval.split(' rgb(')[1].replace(')',',')).split(',')[2] ).toString(16))).slice(-2);
} else if (oval.indexOf(' rgba(') != -1) {
sparepre=oval.split(' rgba(')[0].trim().split(' ')[eval(-1 + oval.split(' rgba(')[0].trim().split(' ').length)];
spare='#' + ('000' + ('' + eval( ('' + oval.split(' rgba(')[1].replace(')',',')).split(',')[0] ).toString(16))).slice(-2) + ('000' + ('' + eval( ('' + oval.split(' rgba(')[1].replace(')',',')).split(',')[1] ).toString(16))).slice(-2) + ('000' + ('' + eval( ('' + oval.split(' rgba(')[1].replace(')',',')).split(',')[2] ).toString(16))).slice(-2);
spareopacity=('' + oval.split(' rgba(')[1].replace(')',',')).split(',')[3];
} else if (oval.indexOf(' #') != -1) {
sparepre=oval.split(' #')[0].trim().split(' ')[eval(-1 + oval.split(' #')[0].trim().split(' ').length)];
spare='#' + oval.split(' #')[1].split(';')[0];
}
//alert('sparepre=' + sparepre);
if (spare != '') {
document.getElementById(ordert[iii]).value=spare;
spare='';
}
} else if (ordert[iii].indexOf('borderthick') != -1) {
if (oval.indexOf('px ') != -1) {
spare=oval.replace('border:','border ').split('px ')[0].split(' ')[eval(-1 + oval.replace('border:','border ').split('px ')[0].split(' ').length)].trim();
sparepost=oval.replace('border:','border ').split('px ')[1].trim().split(' ')[0];
}
//alert('sparepost=' + sparepost);
if (spare != '') {
document.getElementById(ordert[iii]).value=spare;
spare='';
}
} else if (ordert[iii].indexOf('borderstyle') != -1) {
if (sparepre != '') {
spare=sparepre;
sparepre='';
} else if (sparepost != '') {
spare=sparepost;
sparepost='';
}
if (spare != '') {
document.getElementById(ordert[iii]).value=spare;
spare='';
}
} else if (ordert[iii].indexOf('borderopacity') != -1) {
if (oval.indexOf('opacity:') != -1) {
spare=oval.split('opacity:')[1].split(';')[0].trim();
} else if (spareopacity != '') {
spare=spareopacity;
spareopacity='';
}
if (spare != '') {
document.getElementById(ordert[iii]).value=spare;
spare='';
}
}
}
}


function styleit(inid) {
if (ourdiv == null) ourdiv=document.getElementById('mydiv');
if (ourhr == null) ourhr=document.getElementById('myhr');
if (ourdohdiv == null) ourdohdiv=document.getElementById('dohdiv');
if (ourdohhr == null) ourdohhr=document.getElementById('dohhr');
if (ourohdiv == null) ourohdiv=document.getElementById('ohdiv');
if (ourohhr == null) ourohhr=document.getElementById('ohhr');

if ((inid + ' ').indexOf('overall') == 0) {
if (pendingfocus || 1 == 1) {
if (document.getElementById('myta').value == 'No Content' || document.getElementById('myta').innerHTML == 'No Content') {
document.getElementById('myta').value = "";
document.getElementById('myta').innerHTML = "";
}
document.getElementById(inid.replace('overall','div')).value=document.getElementById(inid).value;
document.getElementById(inid.replace('overall','hr')).value=document.getElementById(inid).value;
}
} else {
pendingfocus=false;
}

for (var i=0; i<orderof.length; i++) {
if (orderof[i].indexOf('overall') == 0) {
if (orderof[i].indexOf('bordercol') != -1) {
ourdiv.style.borderColor=document.getElementById(orderof[i]).value;
ourhr.style.borderColor=document.getElementById(orderof[i]).value;
} else if (orderof[i].indexOf('borderthick') != -1) {
ourdiv.style.borderWidth='' + document.getElementById(orderof[i]).value + 'px';
ourhr.style.borderWidth='' + document.getElementById(orderof[i]).value + 'px';
} else if (orderof[i].indexOf('borderstyle') != -1) {
ourdiv.style.borderStyle=document.getElementById(orderof[i]).value;
ourhr.style.borderStyle=document.getElementById(orderof[i]).value;
} else if (orderof[i].indexOf('borderopacity') != -1) {
ourdiv.style.opacity=eval(document.getElementById(orderof[i]).value / 1.0); //100.0);
ourhr.style.opacity=eval(document.getElementById(orderof[i]).value / 1.0); //100.0);
}
} else if (orderof[i].indexOf('div') == 0) {
if (orderof[i].indexOf('bordercol') != -1) {
ourdiv.style.borderColor=document.getElementById(orderof[i]).value;
} else if (orderof[i].indexOf('borderthick') != -1) {
ourdiv.style.borderWidth='' + document.getElementById(orderof[i]).value + 'px';
} else if (orderof[i].indexOf('borderstyle') != -1) {
ourdiv.style.borderStyle=document.getElementById(orderof[i]).value;
} else if (orderof[i].indexOf('borderopacity') != -1) {
ourdiv.style.opacity=eval(document.getElementById(orderof[i]).value / 1.0); //100.0);
}
} else if (orderof[i].indexOf('hr') == 0) {
if (orderof[i].indexOf('bordercol') != -1) {
ourhr.style.borderColor=document.getElementById(orderof[i]).value;
} else if (orderof[i].indexOf('borderthick') != -1) {
ourhr.style.borderWidth='' + document.getElementById(orderof[i]).value + 'px';
} else if (orderof[i].indexOf('borderstyle') != -1) {
ourhr.style.borderStyle=document.getElementById(orderof[i]).value;
} else if (orderof[i].indexOf('borderopacity') != -1) {
ourhr.style.opacity=eval(document.getElementById(orderof[i]).value / 1.0); //100.0);
}
}
}
ourohdiv.innerHTML=get_outerHTML(ourdiv).replace(/\</g,'<').replace(/\>/g,'>');
ourohhr.innerHTML=get_outerHTML(ourhr).replace(/\</g,'<').replace(/\>/g,'>');
}

function massage(cstr) {
var ocstr=cstr;
while (ocstr.indexOf(String.fromCharCode(10)) != -1) {
ocstr=ocstr.replace(String.fromCharCode(10),'<br>');
}
return ocstr;
}

function makeeditable(otd) {
if (document.getElementById('myta').value == 'No Content' || document.getElementById('myta').innerHTML == 'No Content') {
document.getElementById('myta').value = "";
document.getElementById('myta').innerHTML = "";
}
ourohdiv.setAttribute('contenteditable','true');
ourohdiv.style.backgroundColor='#f0f0f0';
ourohhr.setAttribute('contenteditable','true');
ourohhr.style.backgroundColor='#f0f0f0';
otd.innerHTML=otd.innerHTML.replace(/\-/g,"=");
}


</script>
</head>
<body onload="document.getElementById('overallborderthicknesspx').focus(); styleit('');">
<h1 style="filter:Alpha(opacity=50);">No Content Bordered DIV Versus HR</h1>
<h3>RJM Programming - January, 2018</h3>
<table border=20 style='width:100%;'>
<tbody style='width:100%;'>
<tr style='background-color:#fffff0;'><th><textarea id=myta spellcheck="false" title=Content rows=1 cols=40 onchange="document.getElementById('mydiv').innerHTML=massage(this.value); styleit(''); " onblur="document.getElementById('mydiv').innerHTML=massage(this.value); styleit(''); " value="No Content">No Content</textarea> Bordered DIV</th><th> ... versus ...</th><th>HR (horizontal rule)</th></tr>
<tr style='background-color:#fff0ff;'><th colspan=3>style="border: <input onfocus="pendingfocus=true;" style=text-align:right;width:40px; onchange=styleit(this.id); onblur=styleit(this.id); id=overallborderthicknesspx type=number min=0 value=5 title=Thickness></input>px <select onfocus="pendingfocus=true;" title=Style onchange=styleit(this.id); id=overallborderstyle><option value='solid'>solid</option><option value='dashed'>dashed</option><option value='dotted'>dotted</option><option value='none'>none</option><option value='hidden'>hidden</option><option value='double'>double</option><option value='groove'>groove</option><option value='ridge'>ridge</option><option value='inset'>inset</option><option value='outset'>outset</option></select> <input onfocus="pendingfocus=true;" spellcheck="false" style=width:60px; onchange=styleit(this.id); onblur=styleit(this.id); id=overallbordercolour type=color value='#ff0000' title=Colour></input>; opacity:<input onfocus="pendingfocus=true;" onchange=styleit(this.id); onblur=styleit(this.id); id=overallborderopacity type=number min=0.00 max=1.00 step=0.01 value=1.00 title=Opacity></input>;"</th></tr>
<tr style='background-color:#f0ffff;'>
<th>style="border: <input style=text-align:right;width:40px; onchange=styleit(this.id); onblur=styleit(this.id); id=divborderthicknesspx type=number min=0 value=5 title=Thickness></input>px <select title=Style onchange=styleit(this.id); id=divborderstyle><option value='solid'>solid</option><option value='dashed'>dashed</option><option value='dotted'>dotted</option><option value='none'>none</option><option value='hidden'>hidden</option><option value='double'>double</option><option value='groove'>groove</option><option value='ridge'>ridge</option><option value='inset'>inset</option><option value='outset'>outset</option></select> <input spellcheck="false" style=width:60px; onchange=styleit(this.id); onblur=styleit(this.id); id=divbordercolour type=color value='#ff0000' title=Colour></input>; opacity:<input onchange=styleit(this.id); onblur=styleit(this.id); id=divborderopacity type=number min=0.00 max=1.00 value=1.00 step=0.01 title=Opacity></input>;"</th>
<th></th>
<th>style="border: <input style=text-align:right;width:40px; onchange=styleit(this.id); onblur=styleit(this.id); id=hrborderthicknesspx type=number min=0 value=5 title=Thickness></input>px <select title=Style onchange=styleit(this.id); id=hrborderstyle><option value='solid'>solid</option><option value='dashed'>dashed</option><option value='dotted'>dotted</option><option value='none'>none</option><option value='hidden'>hidden</option><option value='double'>double</option><option value='groove'>groove</option><option value='ridge'>ridge</option><option value='inset'>inset</option><option value='outset'>outset</option></select> <input spellcheck="false" style=width:60px; onchange=styleit(this.id); onblur=styleit(this.id); id=hrbordercolour type=color value='#ff0000' title=Colour></input>; opacity:<input onchange=styleit(this.id); onblur=styleit(this.id); id=hrborderopacity type=number min=0.00 max=1.00 value=1.00 step=0.01 title=Opacity></input>;"</th>
</tr>
<tr><td colspan=3> </td></tr>
<tr id='trtc'>
<td><div id="mydiv"></div></td>
<td style='text-align: center;'><-Visual-></td>
<td><hr id="myhr"></hr></td>
</tr>
<tr>
<td id=dohdiv><div id=ohdiv onchange='fixotherway(this.id);' onblur='fixotherway(this.id);'></div></td>
<td style='text-align: center;'><a style='cursor:pointer;text-decoration:underline;' title='Make these editable and able to adjust look above' onclick='makeeditable(this);'><-HTML-></a></td>
<td id=dohhr><div id=ohhr onchange='fixotherway(this.id);' onblur='fixotherway(this.id);'></div></td>
</tr>
<tr><td colspan=3><input style='position:absolute;top:-100px;left:-100px;' value='' type='text'></input></td></tr>
</tbody>
</table>
</body>
</html>