<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/fontawesome-free-7.0.1-web/js/all.js"></script>
<script type='text/javascript'>
function leftchange(iotb) {
document.getElementById('animg').style.marginLeft='' + iotb.value + 'px';
}

function topchange(iotb) {
document.getElementById('animg').style.marginTop='' + iotb.value + 'px';
}

function cdov(iotb) {
document.getElementById('divencaser').style.overflow='' + iotb.value;
}

function domit(incl) {
var bits=incl.split('-');
var retval=bits[0];
for (var ibits=1; ibits<bits.length; ibits++) {
retval+=(bits[ibits] + ' ').substring(0,1).trim().toUpperCase() + (bits[ibits] + ' ').substring(1).trim().toLowerCase();
}
return retval;
}

function cssdiv(iotb) {
var clauses=iotb.value.split(';');
for (var ic=0; ic<clauses.length; ic++) {
if (clauses[ic].indexOf(':') != -1) {
eval("document.getElementById('divencaser').style." + domit(clauses[ic].split(':')[0]) + '="' + clauses[ic].split(':')[1].replace(/\"/g,'').replace(/\'/g,'') + '";');
}
}
}

function cssimg(iotb) {
var clauses=iotb.value.split(';');
for (var ic=0; ic<clauses.length; ic++) {
if (clauses[ic].indexOf(':') != -1) {
eval("document.getElementById('animg').style." + domit(clauses[ic].split(':')[0]) + '="' + clauses[ic].split(':')[1].replace(/\"/g,'').replace(/\'/g,'') + '";');
}
}
}

function mobilecheck() {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//document.getElementById('cdov').value='hidden';
//cdov(document.getElementById('cdov'));
document.getElementById('topc').value='5';
topchange(document.getElementById('topc'));
}
}

setTimeout(mobilecheck, 2000);
</script>
</head>
<body>
<table data-onclick="alert('<di' + 'v' + document.body.innerHTML.split('<di' + 'v')[1]);" style='width:100%;'><tr><td><h1 style='z-index:200;'>Negative Margins Etcetera - RJM Programming - April, 2020 ... <i class="fas fa-border-style" style="font-size:96px;color:blue;"></i></h1></td><td style='align:right;'><font size=1>Left Margin: <input style='z-index:200;width:60px;' onchange=leftchange(this); onblur=leftchange(this); type=number value='-200' step=1></input>px;<br>Top Margin: <input id=topc style='z-index:200;width:60px;' onchange=topchange(this); onblur=topchange(this); type=number value='-200' step=1></input>px;<br>Overflow: <select style='z-index:200;' onchange=cdov(this);><option value='visible'>visible</option><option value='hidden'>hidden</option><option value='scroll'>scroll</option><option value='auto'>auto</option></select><br>Nester DIV CSS: <input placeholder="eg: border-bottom: 5px dashed green; background-color: yellow;" type=text onblur=cssdiv(this); value=''></input><br>Nested IMG CSS: <input placeholder="eg: border-left: 2px solid green; background-color: pink;" type=text onblur=cssimg(this); value=''></input></font></td></tr></table>
<input type=text style="position:absolute;left:-200px;top -200px;" value=""></input>
<div onclick="alert('<di' + 'v' + document.body.innerHTML.split('<di' + 'v')[1]);" id=divencaser style='z-index:100;'>
<img onclick="alert('<di' + 'v' + document.body.innerHTML.split('<di' + 'v')[1]);" id=animg src=http://www.rjmprogramming.com.au/Mac/PhotoBooth_flickr.jpeg style='z-index:100;opacity:0.5;margin-left:-200px;margin-top:-200px;'></img>
</div>
</body>
</html>