<html>
<head>
<title>Element.scrollIntoView Find a Lost Element - RJM Programming - January, 2022</title>
<style>
td {
text-align: center;
}
.thecur {
border: 3px dotted red;
}
::selection {
background: yellow;
}
</style>
<script type='text/javascript'>
var lasti=1, prevlast=-1;
var gridx=2;
var gridy=745;
var cgridx=location.search.split('gridx=')[1] ? decodeURIComponent(location.search.split('gridx=')[1]).split('&')[0] : '2';
var cgridy=location.search.split('gridy=')[1] ? decodeURIComponent(location.search.split('gridy=')[1]).split('&')[0] : '745';
//alert(1);
if (cgridx != '2') { gridx=eval(cgridx); }
//alert(11);
if (cgridy != '745') { gridy=eval(cgridy); }
//alert(111);
var bcols=['red','#ff0000'
,'green','#00ff00'
,'white','#FFFFFF'
,'black','#000000'
,'blue','#0000ff'
,'pink','#ffc0cb'
,'lightpink','#ffb6c1'
,'hotpink','#ff69b4'
,'deeppink','#ff1493'
,'palevioletred','#db7093'
,'mediumvioletred','#c71585'
,'lightsalmon','#ffa07a'
,'salmon','#fa8072'
,'darksalmon','#e9967a'
,'lightcoral','#f08080'
,'indianred','#cd5c5c'
,'crimson','#dc143c'
,'firebrick','#b22222'
,'darkred','#8b0000'
,'red','#ff0000'
,'orangered','#ff4500'
,'tomato','#ff6347'
,'coral','#ff7f50'
,'darkorange','#ff8c00'
,'orange','#ffa500'
,'yellow','#ffff00'
,'lightyellow','#ffffe0'
,'lemonchiffon','#fffacd'
,'lightgoldenrodyellow','#fafad2'
,'papayawhip','#ffefd5'
,'moccasin','#ffe4b5'
,'peachpuff','#ffdab9'
,'palegoldenrod','#eee8aa'
,'khaki','#f0e68c'
,'darkkhaki','#bdb76b'
,'gold','#ffd700'
,'cornsilk','#fff8dc'
,'blanchedalmond','#ffebcd'
,'bisque','#ffe4c4'
,'navajowhite','#ffdead'
,'wheat','#f5deb3'
,'burlywood','#deb887'
,'tan','#d2b48c'
,'rosybrown','#bc8f8f'
,'sandybrown','#f4a460'
,'goldenrod','#daa520'
,'darkgoldenrod','#b8860b'
,'peru','#cd853f'
,'chocolate','#d2691e'
,'saddlebrown','#8b4513'
,'sienna','#a0522d'
,'brown','#a52a2a'
,'maroon','#800000'
,'olive','#808000'
,'olivedrab','#6b8e23'
,'yellowgreen','#9acd32'
,'limegreen','#32cd32'
,'lime','#00ff00'
,'lawngreen','#7cfc00'
,'chartreuse','#7fff00'
,'greenyellow','#adff2f'
,'springgreen','#00ff7f'
,'mediumspringgreen','#00fa9a'
,'lightgreen','#90ee90'
,'palegreen','#98fb98'
,'darkseagreen','#8fbc8f'
,'mediumseagreen','#3cb371'
,'seagreen','#2e8b57'
,'forestgreen','#228b22'
,'green','#008000'
,'darkgreen','#006400'
,'mediumaquamarine','#66cdaa'
,'aqua','#00ffff'
,'cyan','#00ffff'
,'lightcyan','#e0ffff'
,'paleturquoise','#afeeee'
,'aquamarine','#7fffd4'
,'turquoise','#40e0d0'
,'mediumturquoise','#48d1cc'
,'darkturquoise','#00ced1'
,'lightseagreen','#20b2aa'
,'cadetblue','#5f9ea0'
,'darkcyan','#008b8b'
,'teal','#008080'
,'lightsteelblue','#b0c4de'
,'powderblue','#b0e0e6'
,'lightblue','#add8e6'
,'skyblue','#87ceeb'
,'lightskyblue','#87cefa'
,'deepskyblue','#00bfff'
,'dodgerblue','#1e90ff'
,'cornflowerblue','#6495ed'
,'steelblue','#4682b4'
,'royalblue','#4169e1'
,'blue','#0000ff'
,'mediumblue','#0000cd'
,'darkblue','#00008b'
,'navy','#000080'
,'midnightblue','#191970'
,'thistle','#d8bfd8'
,'plum','#dda0dd'
,'violet','#ee82ee'
,'orchid','#da70d6'
,'fuchsia','#ff00ff'
,'magenta','#ff00ff'
,'mediumorchid','#ba55d3'
,'mediumpurple','#9370db'
,'blueviolet','#8a2be2'
,'darkviolet','#9400d3'
,'darkorchid','#9932cc'
,'darkmagenta','#8b008b'
,'purple','#800080'
,'indigo','#4b0082'
,'darkslateblue','#483d8b'
,'rebeccapurple','#663399'
,'slateblue','#6a5acd'
,'mediumslateblue','#7b68ee'
,'snow','#fffafa'
,'honeydew','#f0fff0'
,'mintcream','#f5fffa'
,'azure','#f0ffff'
,'aliceblue','#f0f8ff'
,'ghostwhite','#f8f8ff'
,'whitesmoke','#f5f5f5'
,'seashell','#fff5ee'
,'beige','#f5f5dc'
,'oldlace','#fdf5e6'
,'floralwhite','#fffaf0'
,'ivory','#fffff0'
,'antiquewhite','#faebd7'
,'linen','#faf0e6'
,'lavenderblush','#fff0f5'
,'mistyrose','#ffe4e1'
,'gainsboro','#dcdcdc'
,'lightgrey','#d3d3d3'
,'silver','#c0c0c0'
,'darkgray','#a9a9a9'
,'gray','#808080'
,'dimgray','#696969'
,'lightslategray','#778899'
,'slategray','#708090'
,'darkslategray','#2f4f4f'];
var usecols=[], usesofar='';
var lm=0, bless='';
for (var m=1; m<=9; m++) {
lm=Math.floor(Math.random() * bcols.length);
if (eval(lm % 2) == 0) { lm++; }
bless=('' + bcols[lm]).replace(/0/g,'');
//alert(bless + ' via ' + ('' + bcols[lm]));
while (eval('' + lm) >= eval('' + bcols.length)) {
lm=Math.floor(Math.random() * bcols.length);
}
bless=('' + bcols[lm]).replace(/0/g,'');
while (('' + bcols[lm]) == 'black' || ('' + bcols[lm]).substring(1) == '000000' || ('' + bcols[lm]) == 'white' || ('' + bcols[lm]).toUpperCase().substring(1) == 'FFFFFF' || eval('' + eval('' + bless.length)) <= 3 || usesofar.indexOf(('' + bcols[lm])) != -1) {
lm=Math.floor(Math.random() * bcols.length);
while (eval('' + lm) >= eval('' + bcols.length)) {
lm=Math.floor(Math.random() * bcols.length);
}
bless=('' + bcols[lm]).replace(/0/g,'');
}
//alert('end of ' + bless);
usecols.push(bcols[lm]);
usesofar+=('' + bcols[lm]);
}
var tcn=0;
var htmltableetc='<table border=20 id=mytable style="width:60%;"><tbody id=mytbody></tbody></table>';
htmltableetc+='<input id=isiv style="background-color:' + usecols[0] + ';position:fixed;top:240px;left:62%;max-width:15%;" onchange=siv(this); onblur=siv(this); type=number value=1 min=1 max=' + eval(gridx * gridy) + ' title="Please select a table cell number from 1 to ' + eval(gridx * gridy) + ' to scroll into view ..."></input> <select id=selsiv onchange=siv(this); style="background-color:' + usecols[0] + ';position:fixed;top:240px;left:77%;max-width:23%;" title="Please select a table cell number from 1 to ' + eval(gridx * gridy) + ' to scroll into view ..."><option value="">Please select a table cell number from 1 to ' + eval(gridx * gridy) + ' to scroll into view ...</option></select>';
htmltableetc+='<select id=selx onchange=six(this); style="position:fixed;top:290px;left:62%;max-width:38%;" title="Please select number of table cells across (currently ' + gridx + ') ..."><option value="">Please select number of table cells across (currently ' + gridx + ') ...</option></Select>';
htmltableetc+='<select id=sely onchange=siy(this); style="position:fixed;top:340px;left:62%;max-width:38%;" title="Please select number of table rows down (currently ' + gridy + ') ..."><option value="">Please select number of table rows down (currently ' + gridy + ') ...</option></SELECT>';
function reduce(invl) {
var retval=0, ij=0;
var cinvl='' + invl;
var xcinvl='';
for (ij=0; ij<cinvl.length; ij++) {
retval+=eval(cinvl.substring(ij).substring(0,1));
}
xcinvl='' + retval;
while (xcinvl.length > 1) {
retval=0;
for (ij=0; ij<xcinvl.length; ij++) {
retval+=eval(xcinvl.substring(ij).substring(0,1));
}
xcinvl='' + retval;
}
return retval;
}
function createtable() {
document.body.style.cursor='progress';
document.getElementById('therest').style.cursor='progress';
if (document.getElementById('selx')) { document.getElementById('selx').style.cursor='progress'; }
if (document.getElementById('sely')) { document.getElementById('sely').style.cursor='progress'; }
if (document.getElementById('selsiv')) { document.getElementById('selsiv').style.cursor='progress'; }
if (document.getElementById('isiv')) { document.getElementById('isiv').style.cursor='progress'; }
htmltableetc='<table border=20 id=mytable style="width:60%;"><tbody id=mytbody></tbody></table>';
htmltableetc+='<input id=isiv style="background-color:' + usecols[0] + ';position:fixed;top:240px;left:62%;max-width:15%;" onchange=siv(this); onblur=siv(this); type=number value=1 min=1 max=' + eval(gridx * gridy) + ' title="Please select a table cell number from 1 to ' + eval(gridx * gridy) + ' to scroll into view ..."></input> <select id=selsiv onchange=siv(this); style="background-color:' + usecols[0] + ';position:fixed;top:240px;left:77%;max-width:23%;" title="Please select a table cell number from 1 to ' + eval(gridx * gridy) + ' to scroll into view ..."><option value="">Please select a table cell number from 1 to ' + eval(gridx * gridy) + ' to scroll into view ...</option></select>';
htmltableetc+='<select id=selx onchange=six(this); style="position:fixed;top:290px;left:62%;max-width:38%;" title="Please select number of table cells across (currently ' + gridx + ') ..."><option value="">Please select number of table cells across (currently ' + gridx + ') ...</option></Select>';
htmltableetc+='<select id=sely onchange=siy(this); style="position:fixed;top:340px;left:62%;max-width:38%;" title="Please select number of table rows down (currently ' + gridy + ') ..."><option value="">Please select number of table rows down (currently ' + gridy + ') ...</option></SELECT>';
tcn=1;
var addcomps=1;
var thisrow='';
for (var j=0; j<eval('' + gridy); j++) {
thisrow='<tr></tr>';
if (htmltableetc.indexOf('</SELECT>') != -1) {
htmltableetc=htmltableetc.replace('</SELECT>', '<option value=' + eval(1 + j) + '>' + eval(1 + j) + '</option></SELECT>');
}
for (var i=0; i<eval('' + gridx); i++) {
if (htmltableetc.indexOf('</Select>') != -1 && j == 0) {
htmltableetc=htmltableetc.replace('</Select>', '<option value=' + eval(1 + i) + '>' + eval(1 + i) + '</option></Select>');
}
thisrow=thisrow.replace('</tr>', '<td style="background-color:' + usecols[eval(-1 + addcomps)] + ';" id=tc' + tcn + '><span style="border:1px dashed transparent;">' + tcn + '</span></td>' + '</tr>')
htmltableetc=htmltableetc.replace('</select>', '<option value=' + eval(0 + tcn) + '>' + eval(0 + tcn) + '</option></select>');
tcn++;
addcomps=reduce(tcn);
}
htmltableetc=htmltableetc.replace('</tbody>', thisrow + '</tbody>');
//htmltableetc=htmltableetc.replace('</Select>', '</seLect>');
}
if (eval('745') > eval('' + gridy)) {
for (var jjj=eval(1 + eval('' + gridy)); jjj<=eval('745'); jjj++) {
htmltableetc=htmltableetc.replace('</SELECT>', '<option value=' + eval(1 + jjj) + '>' + eval(1 + jjj) + '</option></SELECT>');
}
}
if (eval('745') > eval('' + gridx)) {
for (var jjjj=eval(1 + eval('' + gridx)); jjjj<=eval('745'); jjjj++) {
htmltableetc=htmltableetc.replace('</Select>', '<option value=' + eval(0 + jjjj) + '>' + eval(0 + jjjj) + '</option></Select>');
}
} else if (eval('' + gridy) > eval('' + gridx)) {
for (var jj=eval(1 + eval('' + gridx)); jj<=eval('' + gridy); jj++) {
htmltableetc=htmltableetc.replace('</Select>', '<option value=' + eval(0 + jj) + '>' + eval(0 + jj) + '</option></Select>');
}
}
htmltableetc=htmltableetc.replace('</SELECT>', '</select>').replace('</seLect>', '</select>').replace('</Select>', '</seLect>');
document.getElementById('therest').innerHTML=htmltableetc;
document.body.style.cursor='pointer';
document.getElementById('therest').style.cursor='pointer';
//window.scrollTo(0,0); //document.getElementById('tc1').scrollIntoView();
lasti=1;
document.getElementById('tc' + lasti).className='thecur';
prevlast=lasti;
}
function six(inv) {
if (inv.value != '') {
gridx=eval('' + inv.value);
createtable();
document.getElementById('tc1').scrollIntoView(); //window.scrollTo(0,0);
}
}
function siv(inv) {
if (inv.value != '') {
if (prevlast >= 1) { if (document.getElementById('tc' + prevlast)) { document.getElementById('tc' + prevlast).className=''; } }
document.getElementById('tc' + inv.value).scrollIntoView();
lasti=eval('' + inv.value);
document.getElementById('tc' + lasti).className='thecur';
prevlast=lasti;
if (inv.id == 'selsiv') {
document.getElementById('isiv').value='' + inv.value;
document.getElementById('isiv').style.backgroundColor=usecols[eval(-1 + reduce(inv.value))];
document.getElementById('selsiv').style.backgroundColor=usecols[eval(-1 + reduce(inv.value))];
} else {
document.getElementById('selsiv').value='' + inv.value;
document.getElementById('isiv').style.backgroundColor=usecols[eval(-1 + reduce(inv.value))];
document.getElementById('selsiv').style.backgroundColor=usecols[eval(-1 + reduce(inv.value))];
}
}
}
function siy(inv) {
if (inv.value != '') {
gridy=eval('' + inv.value);
createtable();
document.getElementById('tc1').scrollIntoView(); //window.scrollTo(0,0);
}
}
</script>
</head>
<body id=xbody onload='createtable(gridx,gridy);'>
<h1 style="position:fixed;top:0px;left:62%;max-width:38%;">Element<sub>.</sub> scrollIntoView Find a Lost Element</h1>
<h3 style="position:fixed;top:160px;left:62%;max-width:38%;">RJM Programming - January, 2022</h3>
<div id=therest></div>
</body>
</html>