<!doctype html>
<html>
<head>
<title>HTML input Element Types Randomized - RJM Programming - September, 2017</title>
<style>
body { background-color: #f0f0f0; }
select { display: inline-block; position: absolute; top: 10px; }
span { display: none; }
div {
color: blue;
white-space: pre;
display: inline-block;
text-align: center;
border: 5px solid purple;
background-color: yellow;
padding: 5px 5px 5px 5px;
top: 100px;
width: 98%;
}
textarea {
position: absolute;
color: magenta;
white-space: pre;
display: inline-block;
text-align: center;
border: 5px solid brown;
background-color: rgba(0,255,0,0.4);
padding: 5px 5px 5px 5px;
top: 250px;
width: 98%;
}
h1 {
display: inline-block;
position: absolute;
width: 600px;
top: 0px;
}
h3 {
display: inline-block;
position: absolute;
width: 400px;
top: 50px;
}
#dbutton::after { content:'\A\A Button\A\A <input type=button value=Button></input>'; }
#dbutton {
position: absolute;
left: 0%;
}
#dcheckbox::after { content:'\A\A Checkbox\A\A <input type=checkbox value=Checkbox></input>'; }
#dcheckbox {
position: absolute;
left: 100%;
}
#dcolour::after { content:'\A\A Colour\A\A <input type=color value=Colour></input>'; }
#dcolour {
position: absolute;
left: 200%;
}
#ddate::after { content:'\A\A Date\A\A <input type=date value=Date></input>'; }
#ddate {
position: absolute;
left: 300%;
}
#ddatetime::after { content:'\A\A Datetime\A\A <input type=datetime value=Datetime></input>'; }
#ddatetime {
position: absolute;
left: 400%;
}
#ddatetime-local::after { content:'\A\A Datetime-Local\A\A <input type=ddatetime-local value="Datetime Local"></input>'; }
#ddatetime-local {
position: absolute;
left: 500%;
}
#demail::after { content:'\A\A Email\A\A <input type=email value=Email></input>'; }
#demail {
position: absolute;
left: 600%;
}
#dfile::after { content:'\A\A File\A\A <input type=file value=File></input>'; }
#dfile {
position: absolute;
left: 700%;
}
#dhidden::after { content:'\A\A Hidden\A\A <input type=hidden value=Hidden></input>'; }
#dhidden {
position: absolute;
left: 800%;
}
#dimage::after { content:'\A\A Image\A\A <input type=image value=Image></input>'; }
#dimage {
position: absolute;
left: 900%;
}
#dmonth::after { content:'\A\A Month\A\A <input type=month value=Month></input>'; }
#dmonth {
position: absolute;
left: 1000%;
}
#dnumber::after { content:'\A\A Image\A\A <input type=number value=Number></input>'; }
#dnumber {
position: absolute;
left: 1100%;
}
#dpassword::after { content:'\A\A Password\A\A <input type=password value=Password></input>'; }
#dpassword {
position: absolute;
left: 1200%;
}
#dradio::after { content:'\A\A Radio\A\A <input type=radio value=Radio></input>'; }
#dradio {
position: absolute;
left: 1300%;
}
#drange::after { content:'\A\A Range\A\A <input type=range value=Range></input>'; }
#drange {
position: absolute;
left: 1400%;
}
#dreset::after { content:'\A\A Reset\A\A <input type=reset value=Reset></input>'; }
#dreset {
position: absolute;
left: 1500%;
}
#dsearch::after { content:'\A\A Search\A\A <input type=search value=Search></input>'; }
#dsearch {
position: absolute;
left: 1600%;
}
#dsubmit::after { content:'\A\A Submit\A\A <input type=submit value=Submit></input>'; }
#dsubmit {
position: absolute;
left: 1700%;
}
#dtext::after { content:'\A\A Text\A\A <input type=text value=Text></input>'; }
#dtext {
position: absolute;
left: 1800%;
}
#dtime::after { content:'\A\A Time\A\A <input type=time value=Time></input>'; }
#dtime {
position: absolute;
left: 1900%;
}
#durl::after { content:'\A\A Url\A\A <input type=url value=Url></input>'; }
#durl {
position: absolute;
left: 2000%;
}
#dweek::after { content:'\A\A Week\A\A <input type=week value=Week></input>'; }
#dweek {
position: absolute;
left: 2100%;
}
</style>
<script type='text/javascript'>
var bihi='', bih='', tohash='', diarray=[], choice=-1, taoh=[], dimthing='%', taos=null, myHistory = [], sofar=';';
var cats = { hash: '', ih: '' };
function randomize() {
var times=1, i, was='', iss='', wasn=0, taval='', tarect, issalt='';
if (document.getElementById('myhistory')) {
document.getElementById('myhistory').addEventListener('change', fixbih, false);
}
if ((111 == 111 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('in=iframe') != -1) && choice >= 0) {
diarray[choice].style.zIndex='' + choice;
}
if (choice >= 0) {
document.getElementById('dtaos1').style.zIndex='0';
document.getElementById('dtaos1').style.display='none';
document.getElementById('myta').style.zIndex=5;
}
if (!document.getElementById('clicka')) {
document.body.innerHTML+="<a title='' id='clicka' style='display:none;' onclick='clickHandler(event);'>ClickMe</a>";
}
if (diarray.length < 1) {
diarray=document.getElementsByTagName('div');
for (i=0; i<diarray.length; i++) {
if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('in=iframe') != -1) {
diarray[i].style.left='0%';
diarray[i].style.zIndex='' + i;
}
if (document.getElementById(diarray[i].id.replace('d','i')).outerHTML.indexOf('></input>') != -1) {
taoh.push(document.getElementById(diarray[i].id.replace('d','i')).outerHTML.replace('></input>',' title="Displayed ' + times + ' times."></input>'));
} else {
taoh.push(document.getElementById(diarray[i].id.replace('d','i')).outerHTML.replace('>',' title="Displayed ' + times + ' times.">'));
}
times=0;
}
taoh.sort;
taos=document.getElementsByTagName('textarea');
if (taos.length > 0) {
taos[0].style.zIndex='5';
tarect = taos[0].getBoundingClientRect();
//alert("<div id='dtaos1' style='position:absolute;z-index:-1;left:0px;top:" + window.getComputedStyle(taos[0], null).getPropertyValue('top').replace('px','') + "px;height:" + Math.floor(eval(tarect.bottom - tarect.top)) + "px;width:" + Math.floor(eval(tarect.right - tarect.left)) + "px;text-align:center;display:inline-block;'></div>");
if (!document.getElementById('dtaos1')) {
document.body.innerHTML+="<div id='dtaos1' style='background-color:#f0f0f0;font-size:12px;position:absolute;z-index:-1;left:0px;top:" + window.getComputedStyle(taos[0], null).getPropertyValue('top').replace('px','') + "px;height:" + Math.floor(eval(tarect.bottom - tarect.top)) + "px;width:" + Math.floor(eval(tarect.right - tarect.left)) + "px;text-align:center;display:inline-block;'></div>";
} else {
document.getElementById('myta').value='';
document.getElementById('dtaos1').value='';
document.getElementById('dtaos1').style="background-color:#f0f0f0;font-size:12px;position:absolute;z-index:-1;left:0px;top:" + window.getComputedStyle(taos[0], null).getPropertyValue('top').replace('px','') + "px;height:" + Math.floor(eval(tarect.bottom - tarect.top)) + "px;width:" + Math.floor(eval(tarect.right - tarect.left)) + "px;text-align:center;display:inline-block;";
}
}
for (i=0; i<taoh.length; i++) {
document.getElementById('myta').value+=taoh[i] + String.fromCharCode(10);
document.getElementById('dtaos1').value+=taoh[i].replace(/</g,'<').replace(/>/g,'>') + '<br>';
}
} else if (bih != "") {
document.body.innerHTML=bih;
document.getElementById('myhistory').value=document.getElementById('imyhistory').innerHTML;
bih='';
} else if (bihi != "") {
document.getElementById('imyhistory').innerHTML=bihi;
document.getElementById('myhistory').value=document.getElementById('imyhistory').innerHTML;
bihi='';
}
var but=-1;
while (but < 0) {
choice=Math.floor(Math.random() * diarray.length);
if (diarray[choice].id.indexOf('dtaos') != 0) but=0;
}
if (111 == 111 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('in=iframe') != -1) {
diarray[choice].style.zIndex='' + eval(100 + choice);
}
for (i=0; i<taoh.length; i++) {
if (diarray[choice].innerHTML.indexOf(taoh[i].substring(0,30)) != -1) {
was=taoh[i];
wasn=eval(('' + taoh[i]).split('isplayed ')[1].split(' ')[0]);
iss=taoh[i].replace('isplayed ' + wasn + ' ','isplayed ' + eval(1 + wasn) + ' ');
issalt=taoh[i].replace('isplayed ' + wasn + ' ','isplayed <b><i><font color=red size=4>' + eval(1 + wasn) + '</font></i></b> ');
taoh[i]=iss;
if (document.getElementById('dtaos1')) {
document.getElementById('dtaos1').innerHTML=document.getElementById('myta').value.replace(was,issalt).replace(/</g,'<').replace(/>/g,'>').replace('<b>','<b>').replace('</b>','</b>').replace('<i>','<i>').replace('</i>','</i>').replace('<font color=red size=4>','<font color=red size=4>').replace('</font>','</font>');
document.getElementById('dtaos1').style.zIndex='9';
document.getElementById('dtaos1').style.display='inline-block';
}
document.getElementById('myta').value=document.getElementById('myta').value.replace(was,iss);
}
}
document.getElementById('myh1').innerHTML=and('HTML input Element Types Randomized'); //.';
if (1 == 1) {
document.getElementById('clicka').title='#' + diarray[choice].id;
document.getElementById('clicka').click();
} else {
bih=document.body.outerHTML.replace('</body>','').replace(document.body.outerHTML.split('>')[0] + '>','');
}
var myWidth = 0,xerr='. .',qeww=null,qqeww=null,prect,rect, precl='',rectl='', isl=0, sl=('' + window.scrollX).replace('px','');
var numw=-1,psl='', opsl='', osl='';
var ii=-1, ew=null, eww=null, eew=null, eeww=null;
if (sl != '') isl=eval(sl);
try {
psl=('' + parent.window.scrollX).replace('px',''); // pageXOffset
//top.document.title=psl + ' ? ';
if (psl.replace('0','') != '') {
//top.document.title=psl + ' ' + sl + ' ';
//isl+=eval(psl);
psl='' + psl;
} else {
psl='';
}
} catch(eww) {
psl='';
}
xerr+='+';
try {
document.getElementById('myh1').innerHTML=and('HTML input Element Types Randomized'); //..';
try {
opsl=('' + parent.window.pageXOffset).replace('px',''); // pageXOffset
} catch(eew) {
opsl=' ';
}
xerr+='+';
try {
osl=('' + window.pageXOffset).replace('px',''); // pageXOffset
} catch(eeww) {
osl=' ';
}
xerr+='+';
try {
rect = diarray[choice].getBoundingClientRect();
recl=rect.left;
if (isl == 0 && eval(recl) > 0) {
isl+=eval(recl);
sl='' + isl;
}
} catch(qeww) {
recl='';
}
xerr+='+';
//if (parent.document.getElementById('ihti')) {
//xerr+='?';
//precl = parent.document.getElementById('ihti').style.width.replace('px',''); //parent.window.getComputedStyle(parent.document.getElementById('ihti'), null).getPropertyValue('width').replace('px',''); //document.getElementById('ihti').getBoundingClientRect();
//precl=prect.left;
//}
xerr+='!';
ii=('' + window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('px','')).indexOf(dimthing);
xerr+='+';
if (ii != -1 && isl == 0) {
//numw=window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('px','').split('%')[0];
xerr+='?';
numw=eval(eval(window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('px','').split(dimthing)[0]) / 100);
xerr+='1';
try {
myWidth = 0; // thanks to https://stackoverflow.com/questions/7808729/detect-iframe-height-and-width-from-inside-the-iframe
xerr+='2';
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
if(1 == 2 && typeof( window.screen.width ) == 'number' ) {
myWidth = Math.floor(Math.min(window.screen.width,window.innerWidth) / (22 / 22));
} else {
myWidth = Math.floor(eval(eval(window.innerWidth) / 22));
}
xerr+='3is' + myWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
xerr+='4';
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
xerr+='5';
}
} catch(qqeww) {
myWidth=0;
xerr+='6';
}
xerr+=' 7with ' + '' + myWidth;
isl=Math.floor(eval(eval(('' + myWidth).replace('px','')) * numw));
xerr+='8is' + isl;
sl='' + isl;
}
document.getElementById('myh1').innerHTML=and('HTML input Element Types Randomized'); //...';
xerr+='@!$#';
if (opsl != psl) document.getElementById('myh1').innerHTML=and('HTML input Element Types Randomized'); //....' + sl + ii + '-' + numw + ' -' + precl + ' -' + recl + ' ' + opsl + ' ' + psl;
} catch(ew) {
document.getElementById('myh1').innerHTML=and('HTML input Element Types Randomized'); // + xerr;
ii=-1;
}
if (111 == 111 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('in=iframe') == -1) {
if (ii != -1) {
document.getElementById('myta').style.left=sl + 'px';
document.getElementById('dtaos1').style.left=sl + 'px';
document.getElementById('myh1').style.left=sl + 'px';
document.getElementById('myhistory').style.left=eval(595 + eval(sl)) + 'px';
document.getElementById('myh3').style.left=sl + 'px';
} else {
document.getElementById('myta').style.left=window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('px','') + 'px';
document.getElementById('dtaos1').style.left=window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('px','') + 'px';
document.getElementById('myh1').style.left=window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('px','') + 'px';
document.getElementById('myhistory').style.left=eval(595 + eval(window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('auto','0').replace('px',''))) + 'px';
document.getElementById('myh3').style.left=window.getComputedStyle(diarray[choice], null).getPropertyValue('left').replace('px','') + 'px';
}
}
//setTimeout(biho,2700);
setTimeout(randomize,3000);
}

function biho() {
bih=document.body.outerHTML.replace('</body>','').replace(document.body.outerHTML.split('>')[0] + '>','');
}

function updateContent(data) {
if (data == null)
return;

if (1 == 15) {
if (1 == 2) setTimeout(randomize,3000);
} else {
//location.hash=document.URL.split('#')[0] + '#' + diarray[choice].id; //data.hash;
//window.location=document.URL.split('#')[0] + '#' + diarray[choice].id; //data.hash;
//document.getElementById('clicka').href=document.URL.split('#')[0] + '#' + diarray[choice].id;
//document.getElementById('clicka').click();
andthen();
}
}

function clickHandler(event) {
cats.hash = event.target.getAttribute('title').split('/').pop();
//data = cats[cat] || null; // In reality this could be an AJAX request
//alert(cats.hash);
updateContent(cats);

// Add an item to the history log
document.getElementById('imyhistory').innerHTML=document.getElementById('myhistory').value;
bihi=document.getElementById('imyhistory').innerHTML;
if (1 == eval(document.getElementById('imyhistory').innerHTML)) {
if (sofar.indexOf(';' + document.URL.split('#')[0] + '#' + diarray[choice].id + ';') == -1) {
sofar+=document.URL.split('#')[0] + '#' + diarray[choice].id + ';';
}
history.pushState(cats, document.URL.split('#')[0] + '#' + diarray[choice].id, document.URL.split('#')[0] + '#' + diarray[choice].id); //event.target.href);
} else if (3 == eval(document.getElementById('imyhistory').innerHTML)) {
if (sofar.indexOf(';' + document.URL.split('#')[0] + '#' + diarray[choice].id + ';') == -1) {
sofar+=document.URL.split('#')[0] + '#' + diarray[choice].id + ';';
history.pushState(cats, document.URL.split('#')[0] + '#' + diarray[choice].id, document.URL.split('#')[0] + '#' + diarray[choice].id); //event.target.href);
}
}

return event.preventDefault();
}

function andthen() {
if (location.hash != '' && 1 == 2) {
//alert(document.location.href + '+' + location.hash);
// Store the initial content so we can revisit it later
history.replaceState({
hash: document.URL.split('#')[0]
}, document.title, document.location.href);
}
}

function fixbih() {
document.getElementById('imyhistory').innerHTML=document.getElementById('myhistory').value;
bihi=document.getElementById('imyhistory').innerHTML;
}

function athn() {
document.getElementById('myhistory').addEventListener('change', fixbih, false);
}

function and(onto) {
if (bihi != '') {
//alert(bihi);
document.getElementById('imyhistory').innerHTML=bihi;
bihi='';
}
setTimeout(athn,500);
if (document.getElementById('imyhistory').innerHTML == "2") {
return onto + ' ' + "<select style=' display: inline-block; position: absolute; top: 10px; left: " + eval(595 + eval(window.getComputedStyle(document.getElementById('myh1'), null).getPropertyValue('left').replace('auto','0').replace('px',''))) + "px;' id=myhistory><option value=2>with Minimal History</option><option value=3>with Unique History this Session</option><option value=1>with Maximum History</option></select> <span id=imyhistory>" + document.getElementById('imyhistory').innerHTML + "</span>";
}
if (document.getElementById('imyhistory').innerHTML == "3") {
return onto + ' ' + "<select style=' display: inline-block; position: absolute; top: 10px; left: " + eval(595 + eval(window.getComputedStyle(document.getElementById('myh1'), null).getPropertyValue('left').replace('auto','0').replace('px',''))) + "px;' id=myhistory><option value=3>with Unique History this Session</option><option value=2>with Minimal History</option><option value=1>with Maximum History</option></select> <span id=imyhistory>" + document.getElementById('imyhistory').innerHTML + "</span>";
}
return onto + ' ' + "<select style=' display: inline-block; position: absolute; top: 10px; left: " + eval(595 + eval(window.getComputedStyle(document.getElementById('myh1'), null).getPropertyValue('left').replace('auto','0').replace('px',''))) + "px;' id=myhistory><option value=1>with Maximum History</option><option value=3>with Unique History this Session</option><option value=2>with Minimal History</option></select> <span id=imyhistory>" + document.getElementById('imyhistory').innerHTML + "</span>";
}

setTimeout(randomize,3000);
</script>
</head>
<body>
<h1 id='myh1'>HTML input Element Types Randomized <select id='myhistory'><option value='2'>with Minimal History</option><option value='3'>with Unique History this Session</option><option value='1'>with Maximum History</option></select> <span id=imyhistory>2</span></h1>
<h3 id='myh3'>RJM Programming - September, 2017</h3>
<div id='dbutton'><input id='ibutton' type='button' value='Button'></input></div>
<div id='dcheckbox'><input id='icheckbox' type='checkbox' value='Checkbox'></input></div>
<div id='dcolour'><input id='icolour' type='color' value='Colour'></input></div>
<div id='ddate'><input id='idate' type='date' value='Date'></input></div>
<div id='ddatetime'><input id='idatetime' type='datetime' value='Datetime'></input></div>
<div id='ddatetime-local'><input id='idatetime-local' type='datetime-local' value='Datetime Local'></input></div>
<div id='demail'><input id='iemail' type='email' value='Email'></input></div>
<div id='dfile'><input id='ifile' type='file' value='File'></input></div>
<div id='dhidden'><input id='ihidden' type='hidden' value='Hidden'></input></div>
<div id='dimage'><input id='iimage' type='image' value='Image'></input></div>
<div id='dmonth'><input id='imonth' type='month' value='Month'></input></div>
<div id='dnumber'><input id='inumber' type='number' value='Number'></input></div>
<div id='dpassword'><input id='ipassword' type='password' value='Password'></input></div>
<div id='dradio'><input id='iradio' type='radio' value='Radio'></input></div>
<div id='drange'><input id='irange' type='range' value='Range'></input></div>
<div id='dreset'><input id='ireset' type='reset' value='Reset'></input></div>
<div id='dsearch'><input id='isearch' type='search' value='Search'></input></div>
<div id='dsubmit'><input id='isubmit' type='submit' value='Submit'></input></div>
<div id='dtext'><input id='itext' type='text' value='Text'></input></div>
<div id='dtime'><input id='itime' type='time' value='Time'></input></div>
<div id='durl'><input id='iurl' type='url' value='Url'></input></div>
<div id='dweek'><input id='iweek' type='week' value='Week'></input></div>
<textarea id='myta' rows=22 cols=100></textarea>
</body>
</html>