<!DOCTYPE html>
<html>
<head>
<title>The Scrolling Parallax Levelling Game - RJM Programming - August, 2019 ... thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/javascript'>
var gscrollTop=0, gscrollLeft=0, factor=1;
var trnum=1;
var obmid='r1';
var nextoff=0.0;
var diff56='-1290.0'; //'-1280.0';
var fiveval='-430.0'; //'428.4375';
var firstrect=null;
var nextrect=null;
var point29=0.06; //vs 1.056 -0.056
var factor=0.95;
function scaleit(invl, modereading) {
zourask();
//alert('-invl=' + invl + '+fiveval=' + fiveval + ' ... /diff56 ' + diff56 + ' ... *factor=' + factor);
var staffreading=eval(fiveval); //eval(eval(eval(fiveval) - eval(eval(eval('' + invl)) / eval(diff56)) * factor) + point29);
staffreading-=eval('' + invl);
//alert('interim:' + staffreading + ' vs ' + diff56);
staffreading/=eval(diff56);
staffreading*=factor;
staffreading+=point29;
//var staffreading=eval(eval(eval(fiveval) - eval(eval(eval('' + invl)) / eval(diff56)) * factor) + point29);
staffreading+=eval('' + document.getElementById('ioff').value);
//alert('' + staffreading);
if (modereading == 'Backsight') {
document.getElementById('tr' + trnum + '_bs').title='' + staffreading;
document.getElementById('ztr' + trnum + '_bs').title='' + staffreading;
document.getElementById('tr' + trnum + '_bs').innerHTML='' + eval('' + staffreading).toFixed(3);
document.getElementById('ztr' + trnum + '_bs').innerHTML='' + eval('' + staffreading).toFixed(3);
if (obmid == 'r1') {
document.getElementById('tr' + trnum + '_rl').title='' + document.getElementById(obmid).value;
document.getElementById('ztr' + trnum + '_rl').title='' + document.getElementById(obmid).value;
document.getElementById('tr' + trnum + '_rl').innerHTML='' + eval('' + document.getElementById(obmid).value).toFixed(3);
document.getElementById('ztr' + trnum + '_rl').innerHTML='' + eval('' + document.getElementById(obmid).value).toFixed(3);
nextoff=eval(eval('' + document.getElementById(obmid).value) + eval('' + staffreading));
document.getElementById('r1').readOnly = true;
document.getElementById('zr1').readOnly = true;
obmid='';
} else {
nextoff=eval(eval('' + document.getElementById('tr' + trnum + '_rl').title) + eval('' + staffreading));
}
trnum++;
} else if (modereading.indexOf('Inter') == 0) {
document.getElementById('tr' + trnum + '_is').title='' + staffreading;
document.getElementById('ztr' + trnum + '_is').title='' + staffreading;
document.getElementById('tr' + trnum + '_is').innerHTML='' + eval('' + staffreading).toFixed(3);
document.getElementById('ztr' + trnum + '_is').innerHTML='' + eval('' + staffreading).toFixed(3);
document.getElementById('tr' + trnum + '_rl').title='' + eval(eval('' + nextoff) - eval('' + staffreading));
document.getElementById('ztr' + trnum + '_rl').title='' + eval(eval('' + nextoff) - eval('' + staffreading));
document.getElementById('tr' + trnum + '_rl').innerHTML='' + eval('' + eval(eval('' + nextoff) - eval('' + staffreading))).toFixed(3);
document.getElementById('ztr' + trnum + '_rl').innerHTML='' + eval('' + eval(eval('' + nextoff) - eval('' + staffreading))).toFixed(3);
trnum++;
} else if (modereading == 'Foresight') {
document.getElementById('tr' + trnum + '_fs').title='' + staffreading;
document.getElementById('ztr' + trnum + '_fs').title='' + staffreading;
document.getElementById('tr' + trnum + '_fs').innerHTML='' + eval('' + staffreading).toFixed(3);
document.getElementById('ztr' + trnum + '_fs').innerHTML='' + eval('' + staffreading).toFixed(3);
document.getElementById('tr' + trnum + '_rl').title='' + eval(eval('' + nextoff) - eval('' + staffreading));
document.getElementById('ztr' + trnum + '_rl').title='' + eval(eval('' + nextoff) - eval('' + staffreading));
document.getElementById('tr' + trnum + '_rl').innerHTML='' + eval('' + eval(eval('' + nextoff) - eval('' + staffreading))).toFixed(3);
document.getElementById('ztr' + trnum + '_rl').innerHTML='' + eval('' + eval(eval('' + nextoff) - eval('' + staffreading))).toFixed(3);
//alert('here');
}
return staffreading;
}
function scrollxy() {
var idocument=document.getElementById('ijigsaw');
var ttable=idocument.getBoundingClientRect();
//document.title=('' + ttable.top).replace('px','');
return ('' + ttable.top).replace('px','');
}
function recordthis(iois) {
//alert(iois.id.replace('Sight',' Sight') + ': ' + scrollxy());
var reading=scaleit(scrollxy(), iois.id);
if (iois.id == 'Backsight') {
document.getElementById('Backsight').style.display='none';
document.getElementById('Foresight').style.display='inline-block';
document.getElementById('InterSight').style.display='inline-block';
document.getElementById('parallax').filter='none'; //.setAttribute("style","filter:'none'"); //.style.filter='';
document.getElementById('parallax').style.webkitFilter='none'; //.setAttribute("style","-webkit-filter:'none'");
} else if (iois.id == 'Foresight') {
document.getElementById('Foresight').style.display='none';
document.getElementById('InterSight').style.display='none';
document.getElementById('Backsight').style.display='inline-block';
document.getElementById('parallax').style.filter='brightness(50%) sepia(100%) saturate(100%) hue-rotate(25deg)';
document.getElementById('parallax').style.webkitFilter='brightness(50%) sepia(100%) saturate(100%) hue-rotate(25deg)';
}
}
function zourask() {
//alert(1); //646 (128) then 435, 60 ... 60 then 5: -232 6: -360 ... 5: 292 of 646 represents 428.4375 368
firstrect=document.getElementById('parallax').getBoundingClientRect();
//factor=eval(('' + firstrect.height).replace('px',''));
nextrect=document.body.getBoundingClientRect();
//alert('' + ' ... ' + nextrect.height + ',' + nextrect.top);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('ourtable').style.display='none';
document.getElementById('parallax').style.backgroundSize='100% 100%';
}
if (fiveval.indexOf('-') != -1) { fiveval='' + eval(eval(('' + firstrect.top).replace('px','')) + eval(('' + firstrect.height).replace('px',''))); }
diff56='' + eval(('' + firstrect.height).replace('px',''));
//diff56='-1290.0'; //'-1280.0';
//fiveval='430.0'; //'428.4375';
//diff56='-' + eval(eval(('' + firstrect.height).replace('px','')) * 1280.0 / 646.0); // 1280.0';
//alert(diff56);
//fiveval='' + eval(eval(('' + firstrect.top).replace('px','')) + eval(eval(('' + firstrect.height).replace('px','')) * 368.0 / 646.0)); // 428.4375';
//alert(fiveval);
}
function whbit() {
}
</script>
<style>
th { color: blue; }
.parallax {
/* The image used */
background-image: url("//www.lasersurveyingequipment.com.au/1479-tm_thickbox_default/5-metre-leveling-staff-1-2-cm.jpg");
/* Set a specific height */
min-height: calc(100vh - 100px);
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain; /* cover; */
-moz-box-shadow: 0 0 50px #ff0000;
-webkit-box-shadow: 0 0 50px #ff0000;
box-shadow: 0px 0px 50px #ff0000;
border-radius: 200px;
filter: brightness(50%) sepia(100%) saturate(100%) hue-rotate(25deg);
-webkit-filter: brightness(50%) sepia(100%) saturate(100%) hue-rotate(25deg);
}
#ijigsaw {
overflow: scroll;
-webkit-overflow-scrolling:touch;
}
</style>
</head>
<body onload='zourask(); whbit();' onresize='whbit();'>
<h3 style='color:purple;'>The Scrolling Parallax Levelling Game - RJM Programming - August, 2019 ... thanks to <a target=_blank title='Parallax information from W3schools, thanks' href='//www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax'>W3schools</a> and <a target=_blank title='Laser Survey Equipment' href='//www.lasersurveyingequipment.com.au/'>Cody</a></h3>
<div id="parallax" class="parallax"></div>
<div id=ijigsaw style="border:1px dashed black;height:1000px;background-color:rgba(255,0,0,0.1);font-size:16px;">
Scroll Up and Down to take a (optionally offsetted <input id=ioff type=number value=0.0 step=0.1></input>) <input style='display:inline-block;background-color:red;' id=Backsight type=button onclick='recordthis(this);' value='Backsight reading'></input><input style='display:none;background-color:yellow;' id=InterSight type=button onclick='recordthis(this);' value='Inter Sight reading'></input> <input style='display:none;background-color:green;' id=Foresight type=button onclick='recordthis(this);' value='Foresight reading'></input> with your level.
<table style='width:100%;text-align:center;background-color:#f0f0f0;font-size:8px;' cellpadding=3 cellspacing=3 id=zourtable border=2>
<tr><th>Backsight</th><th>Inter Sight</th><th>Foresight</th><th>Height of<br>Collimation</th><th>Reduced Level</th><th>Remarks</th></tr>
<tr id=ztr1><td id=ztr1_bs></td><td id=ztr1_is></td><td id=ztr1_fs></td><td id=ztr1_hc><div style=display:inline-block; contenteditable=true id=ztr1_hcd></div></td><td id=ztr1_rl></td><td id=ztr1_r><div style=display:inline-block; contenteditable=true id=ztr1_r_p>OBM</div> <input onchange="document.getElementById('r1').value=this.value; obmid='zr1';" onblur="document.getElementById('r1').value=this.value; obmid='zr1';" style='display:inline-block;width:80px;' id=zr1 value='0.000' style=number step=0.001></input></td></tr>
<tr id=ztr2><td id=ztr2_bs></td><td id=ztr2_is></td><td id=ztr2_fs></td><td id=ztr2_hc><div style=display:inline-block; contenteditable=true id=ztr2_hcd></div></td><td id=ztr2_rl></td><td id=ztr2_r><div style=display:inline-block; contenteditable=true id=ztr2_r_p></div></td></tr>
<tr id=ztr3><td id=ztr3_bs></td><td id=ztr3_is></td><td id=ztr3_fs></td><td id=ztr3_hc><div style=display:inline-block; contenteditable=true id=ztr3_hcd></div></td><td id=ztr3_rl></td><td id=ztr3_r><div style=display:inline-block; contenteditable=true id=ztr3_r_p></div></td></tr>
<tr id=ztr4><td id=ztr4_bs></td><td id=ztr4_is></td><td id=ztr4_fs></td><td id=ztr4_hc><div style=display:inline-block; contenteditable=true id=ztr4_hcd></div></td><td id=ztr4_rl></td><td id=ztr4_r><div style=display:inline-block; contenteditable=true id=ztr4_r_p></div></td></tr>
<tr id=ztr5><td id=ztr5_bs></td><td id=ztr5_is></td><td id=ztr5_fs></td><td id=ztr5_hc><div style=display:inline-block; contenteditable=true id=ztr5_hcd></div></td><td id=ztr5_rl></td><td id=ztr5_r><div style=display:inline-block; contenteditable=true id=ztr5_r_p></div></td></tr>
<tr id=ztr6><td id=ztr6_bs></td><td id=ztr6_is></td><td id=ztr6_fs></td><td id=ztr6_hc><div style=display:inline-block; contenteditable=true id=ztr6_hcd></div></td><td id=ztr6_rl></td><td id=ztr6_r><div style=display:inline-block; contenteditable=true id=ztr6_r_p></div></td></tr>
<tr id=ztr7><td id=ztr7_bs></td><td id=ztr7_is></td><td id=ztr7_fs></td><td id=ztr7_hc><div style=display:inline-block; contenteditable=true id=ztr7_hcd></div></td><td id=ztr7_rl></td><td id=ztr7_r><div style=display:inline-block; contenteditable=true id=ztr7_r_p></div></td></tr>
<tr id=ztr8><td id=ztr8_bs></td><td id=ztr8_is></td><td id=ztr8_fs></td><td id=ztr8_hc><div style=display:inline-block; contenteditable=true id=ztr8_hcd></div></td><td id=ztr8_rl></td><td id=ztr8_r><div style=display:inline-block; contenteditable=true id=ztr8_r_p></div></td></tr>
<tr id=ztr9><td id=ztr9_bs></td><td id=ztr9_is></td><td id=ztr9_fs></td><td id=ztr9_hc><div style=display:inline-block; contenteditable=true id=ztr9_hcd></div></td><td id=ztr9_rl></td><td id=ztr9_r><div style=display:inline-block; contenteditable=true id=ztr9_r_p></div></td></tr>
</table>
</div>
<table cellpadding=3 cellspacing=3 id=ourtable style='background-color:#f0f0f0;position:absolute;opacity:0.8;top:85px;left:60%;font-size:8px;' border=2>
<tr><th>Backsight</th><th>Inter Sight</th><th>Foresight</th><th>Height of<br>Collimation</th><th>Reduced Level</th><th>Remarks</th></tr>
<tr id=tr1><td id=tr1_bs></td><td id=tr1_is></td><td id=tr1_fs></td><td id=tr1_hc><div style=display:inline-block; contenteditable=true id=tr1_hcd></div></td><td id=tr1_rl></td><td id=tr1_r><div style=display:inline-block; contenteditable=true id=tr1_r_p>OBM</div> <input onchange="document.getElementById('zr1').value=this.value; obmid='r1';" onblur="document.getElementById('zr1').value=this.value; obmid='r1';" style='display:inline-block;width:80px;' id=r1 value='0.000' style=number step=0.001></input></td></tr>
<tr id=tr2><td id=tr2_bs></td><td id=tr2_is></td><td id=tr2_fs></td><td id=tr2_hc><div style=display:inline-block; contenteditable=true id=tr2_hcd></div></td><td id=tr2_rl></td><td id=tr2_r><div style=display:inline-block; contenteditable=true id=tr2_r_p></div></td></tr>
<tr id=tr3><td id=tr3_bs></td><td id=tr3_is></td><td id=tr3_fs></td><td id=tr3_hc><div style=display:inline-block; contenteditable=true id=tr3_hcd></div></td><td id=tr3_rl></td><td id=tr3_r><div style=display:inline-block; contenteditable=true id=tr3_r_p></div></td></tr>
<tr id=tr4><td id=tr4_bs></td><td id=tr4_is></td><td id=tr4_fs></td><td id=tr4_hc><div style=display:inline-block; contenteditable=true id=tr4_hcd></div></td><td id=tr4_rl></td><td id=tr4_r><div style=display:inline-block; contenteditable=true id=tr4_r_p></div></td></tr>
<tr id=tr5><td id=tr5_bs></td><td id=tr5_is></td><td id=tr5_fs></td><td id=tr5_hc><div style=display:inline-block; contenteditable=true id=tr5_hcd></div></td><td id=tr5_rl></td><td id=tr5_r><div style=display:inline-block; contenteditable=true id=tr5_r_p></div></td></tr>
<tr id=tr6><td id=tr6_bs></td><td id=tr6_is></td><td id=tr6_fs></td><td id=tr6_hc><div style=display:inline-block; contenteditable=true id=tr6_hcd></div></td><td id=tr6_rl></td><td id=tr6_r><div style=display:inline-block; contenteditable=true id=tr6_r_p></div></td></tr>
<tr id=tr7><td id=tr7_bs></td><td id=tr7_is></td><td id=tr7_fs></td><td id=tr7_hc><div style=display:inline-block; contenteditable=true id=tr7_hcd></div></td><td id=tr7_rl></td><td id=tr7_r><div style=display:inline-block; contenteditable=true id=tr7_r_p></div></td></tr>
<tr id=tr8><td id=tr8_bs></td><td id=tr8_is></td><td id=tr8_fs></td><td id=tr8_hc><div style=display:inline-block; contenteditable=true id=tr8_hcd></div></td><td id=tr8_rl></td><td id=tr8_r><div style=display:inline-block; contenteditable=true id=tr8_r_p></div></td></tr>
<tr id=tr9><td id=tr9_bs></td><td id=tr9_is></td><td id=tr9_fs></td><td id=tr9_hc><div style=display:inline-block; contenteditable=true id=tr9_hcd></div></td><td id=tr9_rl></td><td id=tr9_r><div style=display:inline-block; contenteditable=true id=tr9_r_p></div></td></tr>
</table>
</body>
</html>