<!doctype html>
<html>
<head>
<title>Multipurpose Buttons - RJM Programming - January, 2021</title>
<style>
table {
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}
#ix {
box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
#ixandy {
font-size: 12px;
width: 36px;
height: 44px;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
white-space: normal;
box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
span { background-color: yellow; padding: 2px 2px 2px 2px; width: 12px; margin-left: -3px; }
td { text-align: left; }
span:active { border:1px solid red; }
input { border:0; padding:0; font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; }
</style>
<script type='text/javascript'>
var gval='';
var cnum=location.search.split('content=')[1] ? decodeURIComponent(location.search.split('content=')[1].split('&')[0]).replace(/\+/g,' ') : "1 2 3 " + String.fromCharCode(10) + "4 5 6 " + String.fromCharCode(10) + "7 8 9 ";
while (cnum.indexOf(' ' + String.fromCharCode(13) + String.fromCharCode(10)) != -1) {
cnum=cnum.replace(' ' + String.fromCharCode(13) + String.fromCharCode(10), ' [13][10]');
}
while (cnum.indexOf(' ' + String.fromCharCode(10) + String.fromCharCode(13)) != -1) {
cnum=cnum.replace(' ' + String.fromCharCode(10) + String.fromCharCode(13), ' [10][13]');
}
while (cnum.indexOf(' ' + String.fromCharCode(10)) != -1) {
cnum=cnum.replace(' ' + String.fromCharCode(10), ' [10]');
}
while (cnum.indexOf(' ' + String.fromCharCode(13)) != -1) {
cnum=cnum.replace(' ' + String.fromCharCode(13), ' [13]');
}
while (cnum.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {
cnum=cnum.replace(String.fromCharCode(13) + String.fromCharCode(10), ' [13][10]');
}
while (cnum.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {
cnum=cnum.replace(String.fromCharCode(10) + String.fromCharCode(13), ' [10][13]');
}
while (cnum.indexOf(String.fromCharCode(10)) != -1) {
cnum=cnum.replace(String.fromCharCode(10), ' [10]');
}
while (cnum.indexOf(String.fromCharCode(13)) != -1) {
cnum=cnum.replace(String.fromCharCode(13), ' [13]');
}
cnum=cnum.replace(/\[13\]\[10\]/g, String.fromCharCode(13) + String.fromCharCode(10));
cnum=cnum.replace(/\[10\]\[13\]/g, String.fromCharCode(10) + String.fromCharCode(13));
cnum=cnum.replace(/\[13\]/g, String.fromCharCode(13));
cnum=cnum.replace(/\[10\]/g, String.fromCharCode(10));
var origcnumx=cnum; //.trim();
var cnumx=cnum; //.trim();
var x=0, y=0, lastx=0,lasty=0;
var propx=0.0, propy=0.0;
var ifstr=" gval=gval; ";
var ifstrone=" gval=gval; ";
var maxlh=0;
var rectis=null;
//cnum="Cge
return
separators";
while (cnumx.indexOf(' ' + String.fromCharCode(13) + String.fromCharCode(10)) != -1) {
cnumx=cnumx.replace(' ' + String.fromCharCode(13) + String.fromCharCode(10), ' ');
}
while (cnumx.indexOf(' ' + String.fromCharCode(10) + String.fromCharCode(13)) != -1) {
cnumx=cnumx.replace(' ' + String.fromCharCode(10) + String.fromCharCode(13), ' ');
}
while (cnumx.indexOf(' ' + String.fromCharCode(10)) != -1) {
cnumx=cnumx.replace(' ' + String.fromCharCode(10), ' ');
}
while (cnumx.indexOf(' ' + String.fromCharCode(13)) != -1) {
cnumx=cnumx.replace(' ' + String.fromCharCode(13), ' ');
}
while (cnumx.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {
cnumx=cnumx.replace(String.fromCharCode(13) + String.fromCharCode(10), ' ');
}
while (cnumx.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {
cnumx=cnumx.replace(String.fromCharCode(10) + String.fromCharCode(13), ' ');
}
while (cnumx.indexOf(String.fromCharCode(10)) != -1) {
cnumx=cnumx.replace(String.fromCharCode(10), ' ');
}
while (cnumx.indexOf(String.fromCharCode(13)) != -1) {
cnumx=cnumx.replace(String.fromCharCode(13), ' ');
}
var cnums=cnumx.replace(/\ /g,'').split('');
function iclicked(event) {
var isok=true;
rectis=null;
if (('' + event.target.id) == 'bxandy') {
setTimeout(agval, 1000);
} else if (('' + event.target.className) == 'bxandy') {
setTimeout(agval, 1000);
} else if (('' + event.target.id) == 'bx') {
setTimeout(agval, 1000);
} else if (('' + event.target.className) == 'bx') {
setTimeout(agval, 1000);
} else if (('' + event.target.id) == 'ixandy') {
rectis=event.target.getBoundingClientRect();
if (event.touches) { // thanks to https://stackoverflow.com/questions/24567441/how-do-i-detect-two-fingers-at-touchstart-in-javascript
if (event.touches.length > 1) { isok=false; }
}
if (isok) {
if (event.touches) {
var touches1 = event.changedTouches;
var first1 = touches1[0];
x = first1.clientX;
y = first1.clientY;
} else if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
lastx=x;
lasty=y;
propx=eval(eval(x - rectis.x) / rectis.width);
propy=eval(eval(y - rectis.y) / rectis.height);
if (cnum != ("1 2 3 " + String.fromCharCode(10) + "4 5 6 " + String.fromCharCode(10) + "7 8 9 ")) {
gval='';
eval(ifstr);
if (gval != '') { setTimeout(agval, 1000); }
} else {
if (eval(propx) <= 0.333 && eval(propy) <= 0.333) {
gval='1';
setTimeout(agval, 1000);
} else if (eval(propx) >= 0.666 && eval(propy) <= 0.333) {
gval='3';
setTimeout(agval, 1000);
} else if (eval(propy) <= 0.333) {
gval='2';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.333 && eval(propy) <= 0.666) {
gval='4';
setTimeout(agval, 1000);
} else if (eval(propx) >= 0.666 && eval(propy) <= 0.666) {
gval='6';
setTimeout(agval, 1000);
} else if (eval(propy) <= 0.666) {
gval='5';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.333) {
gval='7';
setTimeout(agval, 1000);
} else if (eval(propx) >= 0.666) {
gval='9';
setTimeout(agval, 1000);
} else {
gval='8';
setTimeout(agval, 1000);
}
}
//alert('propx=' + propx + ' and propy=' + propy + ' and x=' + x + ' and y=' + y + ' rectis.x=' + rectis.x + ' rectis.left=' + rectis.left + ' rectis.width=' + rectis.width);
}
} else if (('' + event.target.id) == 'ix') {
rectis=event.target.getBoundingClientRect();
if (event.touches) { // thanks to https://stackoverflow.com/questions/24567441/how-do-i-detect-two-fingers-at-touchstart-in-javascript
if (event.touches.length > 1) { isok=false; }
}
if (isok) {
if (event.touches) {
var touches1 = event.changedTouches;
var first1 = touches1[0];
x = first1.clientX;
y = first1.clientY;
} else if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
lastx=x;
lasty=y;
propx=eval(eval(x - rectis.x) / rectis.width);
propy=eval(eval(y - rectis.y) / rectis.height);
if (cnum != ("1 2 3 " + String.fromCharCode(10) + "4 5 6 " + String.fromCharCode(10) + "7 8 9 ")) {
gval='';
eval(ifstrone);
if (gval != '') { setTimeout(agval, 1000); }
} else {
if (eval(propx) <= 0.111) {
gval='1';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.222) {
gval='2';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.333) {
gval='3';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.444) {
gval='4';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.555) {
gval='5';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.666) {
gval='6';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.777) {
gval='7';
setTimeout(agval, 1000);
} else if (eval(propx) <= 0.888) {
gval='8';
setTimeout(agval, 1000);
} else {
gval='9';
setTimeout(agval, 1000);
}
}
//alert('propx=' + propx + ' and propy=' + propy + ' and x=' + x + ' and y=' + y + ' rectis.x=' + rectis.x + ' rectis.left=' + rectis.left + ' rectis.width=' + rectis.width);
}
}
}
function agval() {
if (gval != '') {
if (gval.length == 2) {
if (gval.substring(0,1) == ' ') {
alert('You clicked ' + gval);
} else {
alert('You clicked ' + gval.substring(0,1));
}
} else {
alert('You clicked ' + gval);
}
gval='';
}
}
function boxit(cm) {
var ourdelim=String.fromCharCode(10), blanks='';
if (cnum != ("1 2 3 " + String.fromCharCode(10) + "4 5 6 " + String.fromCharCode(10) + "7 8 9 ")) {
var ih='', jh=0, kh=0, lh=0, onelh=0, zero=0, eight=8;
maxlh=0;
if (cnum != ("1 2 3 " + String.fromCharCode(10) + "4 5 6 " + String.fromCharCode(10) + "7 8 9 ")) {
var ccnums=[];
if (cm.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {
ccnums=cm.split(String.fromCharCode(13) + String.fromCharCode(10));
ourdelim=String.fromCharCode(13) + String.fromCharCode(10);
} else if (cm.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {
ccnums=cm.split(String.fromCharCode(10) + String.fromCharCode(13));
ourdelim=String.fromCharCode(10) + String.fromCharCode(13);
} else if (cm.indexOf(String.fromCharCode(13)) != -1) {
ccnums=cm.split(String.fromCharCode(13));
ourdelim=String.fromCharCode(13) + String.fromCharCode(13);
} else if (cm.indexOf(String.fromCharCode(10)) != -1) {
ccnums=cm.split(String.fromCharCode(10));
ourdelim=String.fromCharCode(13) + String.fromCharCode(10);
} else {
ourdelim='';
}
//alert(ccnums.length);
for (jh=1; jh<=ccnums.length; jh++) {
if (eval('' + ccnums[eval(-1 + jh)].length) > eval('' + maxlh)) { maxlh=ccnums[eval(-1 + jh)].length; }
}
for (jh=1; jh<=ccnums.length; jh++) {
if (eval('' + ccnums[eval(-1 + jh)].length) < eval('' + maxlh)) {
blanks='';
while (eval('' + (ccnums[eval(-1 + jh)] + blanks).length) < eval('' + maxlh)) {
blanks+=' ';
}
if (cm.indexOf(ccnums[eval(-1 + jh)] + ourdelim) != -1) {
cm=cm.replace(ccnums[eval(-1 + jh)] + ourdelim, ccnums[eval(-1 + jh)] + blanks.replace(/\ /g,' ') + ourdelim);
} else {
cm=cm.replace(ccnums[eval(-1 + jh)], ccnums[eval(-1 + jh)] + blanks.replace(/\ /g,' '));
}
}
}
}
}
//alert('' + maxlh + ' ' + cm.replace(/\ /g,'.'));
maxlh=0;
// 7.8.9.......
// a.b.c.d.e
return cm.replace(/\ /g,' ');
}
function onl() {
var ih='', jh=0, kh=0, lh=0, onelh=0, zero=0, eight=0;
maxlh=0;
if (cnum != ("1 2 3 " + String.fromCharCode(10) + "4 5 6 " + String.fromCharCode(10) + "7 8 9 ")) {
var ccnums=[];
if (origcnumx.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {
ccnums=origcnumx.split(String.fromCharCode(13) + String.fromCharCode(10));
document.getElementById('content').rows='' + ccnums.length;
} else if (origcnumx.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {
ccnums=origcnumx.split(String.fromCharCode(10) + String.fromCharCode(13));
document.getElementById('content').rows='' + ccnums.length;
} else if (origcnumx.indexOf(String.fromCharCode(13)) != -1) {
ccnums=origcnumx.split(String.fromCharCode(13));
document.getElementById('content').rows='' + ccnums.length;
} else {
ccnums=origcnumx.split(String.fromCharCode(10));
document.getElementById('content').rows='' + ccnums.length;
}
//alert(ccnums.length);
for (jh=1; jh<=ccnums.length; jh++) {
if (eval('' + ccnums[eval(-1 + jh)].length) > eval('' + maxlh)) { maxlh=ccnums[eval(-1 + jh)].length; }
}
for (jh=1; jh<=cnumx.length; jh++) {
ih+="<span class=bxandy onclick='gval=this.innerHTML;'>" + cnumx.substring(eval(-1 + jh)).substring(0,1) + "</span>";
//if (lh == 0) { alert(cnumx.substring(eval(-1 + jh)).substring(0,1)); }
if ((cnumx + ' ').substring(eval(0 + jh)).substring(0,1)) {
zero=eight;
if (eight > 0) { eight--; }
} else {
zero=0;
}
if (ifstrone.indexOf('if ') == -1) {
ifstrone+=" if (eval(propx) <= eval(" + eval(1 + onelh) + "." + zero + " / " + cnumx.length + ")) { gval='" + cnumx.substring(eval(-1 + jh)).substring(0,2) + "'; } ";
} else {
ifstrone+=" else if (eval(propx) <= eval(" + eval(1 + onelh) + "." + zero + " / " + cnumx.length + ")) { gval='" + cnumx.substring(eval(-1 + jh)).substring(0,2) + "'; } ";
}
if (ccnums.length == 1) {
if (ifstr.indexOf('if ') == -1) {
ifstr+=" if (eval(propx) <= eval(" + eval(1 + lh) + "." + zero + " / " + maxlh + ")) { gval='" + cnumx.substring(eval(-1 + jh)).substring(0,2) + "'; } ";
} else {
ifstr+=" else if (eval(propx) <= eval(" + eval(1 + lh) + "." + zero + " / " + maxlh + ")) { gval='" + cnumx.substring(eval(-1 + jh)).substring(0,2) + "'; } ";
}
} else {
if (ifstr.indexOf('if ') == -1) {
ifstr+=" if (eval(propx) <= eval(" + eval(1 + lh) + "." + zero + " / " + maxlh + ") && eval(propy) <= eval(" + eval(1 + kh) + ".0 / " + ccnums.length + ")) { gval='" + cnumx.substring(eval(-1 + jh)).substring(0,2) + "'; } ";
} else {
ifstr+=" else if (eval(propx) <= eval(" + eval(1 + lh) + "." + zero + " / " + maxlh + ") && eval(propy) <= eval(" + eval(1 + kh) + ".0 / " + ccnums.length + ")) { gval='" + cnumx.substring(eval(-1 + jh)).substring(0,2) + "'; } ";
}
}
lh++;
onelh++;
if (lh == ccnums[kh].length && kh < ccnums.length) {
if (lh < maxlh) {
while (lh < maxlh) {
ih+="<span class=bxandy onclick='gval=this.innerHTML;'> </span>";
if (ccnums.length == 1) {
if (ifstr.indexOf('if ') == -1) {
ifstr+=" if (eval(propx) <= eval(" + eval(1 + lh) + ".0 / " + maxlh + ")) { gval=' '; } ";
} else {
ifstr+=" else if (eval(propx) <= eval(" + eval(1 + lh) + ".0 / " + maxlh + ")) { gval=' '; } ";
}
} else {
if (ifstr.indexOf('if ') == -1) {
ifstr+=" if (eval(propx) <= eval(" + eval(1 + lh) + ".0 / " + maxlh + ") && eval(propy) <= eval(" + eval(1 + kh) + ".0 / " + ccnums.length + ")) { gval=' '; } ";
} else {
ifstr+=" else if (eval(propx) <= eval(" + eval(1 + lh) + ".0 / " + maxlh + ") && eval(propy) <= eval(" + eval(1 + kh) + ".0 / " + ccnums.length + ")) { gval=' '; } ";
}
}
lh++;
}
}
ih+="<br>";
kh++;
lh=0;
}
}
if (maxlh == 0) { maxlh=lh; }
//alert(ifstrone);
document.getElementById('ix').style.marginLeft='1px';
document.getElementById('ix').style.marginRight='3px';
if (/chrome/i.test( navigator.userAgent )) {
document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 8.0) + 'px';
document.getElementById('ixandy').style.width='' + Math.round(eval(0 + maxlh) * 7.5) + 'px';
} else {
document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 6.75) + 'px';
document.getElementById('ixandy').style.width='' + Math.round(eval(0 + maxlh) * 8.0) + 'px';
}
document.getElementById('ixandy').style.height='' + Math.floor(eval(eval('' + ccnums.length) * 14) + 4) + 'px';
document.getElementById('bxandy').innerHTML=ih.replace(/\>\ \<\/span\>/g, '> </span>');
document.getElementById('bx').innerHTML=ih.replace(/\<br\>/g,'');
document.getElementById('ix').title='Please click a character.';
document.getElementById('ixandy').title='Please click a character.';
document.getElementById('n1').innerHTML='character';
document.getElementById('n2').innerHTML='character';
} else {
document.getElementById('ix').style.marginLeft='1px';
document.getElementById('ix').style.marginRight='3px';
if (/chrome/i.test( navigator.userAgent )) {
document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 8.0) + 'px';
document.getElementById('ixandy').style.width='' + Math.round(eval(0 + 6) * 7.5) + 'px';
} else {
document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 6.75) + 'px';
document.getElementById('ixandy').style.width='' + Math.round(eval(0 + 6) * 8.0) + 'px';
}
document.getElementById('ixandy').style.height='' + Math.floor(eval(eval('' + '3') * 14) + 4) + 'px';
}
}
</script>
</head>
<body onload='onl();'>
<script type='text/javascript'>
document.write("<h1>Multipurpose Buttons for <form style=display:inline-block; method=GET action=./multipurpose_buttons.html><textarea rows=3 onblur=\" if (this.value != cnum) { document.getElementById('mysubt').click(); } \" style='display:inline-block;background-color:pink;' name=content id=content>" + cnum + "</textarea><input type=submit id=mysubt style=display:none;</input></form></h1>");
</script>
<h3>RJM Programming - January, 2021</h3>
<h4>Thanks to <a target=_blank title='Useful link, thanks' href='https://stackoverflow.com/questions/10743763/word-wrap-break-word-does-not-work-in-this-example'>html - word-wrap break-word does not work in this example - Stack Overflow</a> and <a target=_blank title='Useful link, thanks' href='https://stackoverflow.com/questions/13048499/wrapping-an-html-input-buttons-text-value-over-multiple-lines'>Wrapping an HTML input button's text value over multiple lines - Stack Overflow</a> and <a target=_blank title='Useful link, thanks' href='https://stackoverflow.com/questions/5419086/button-height-on-chrome'>html - Button height on Chrome - Stack Overflow</a><br><br>
<table border=4>
<tr><th></th><th>Button</th><th>Input type=button</th></tr>
<tr><td>Horizontal Dimension<br><font size=1>(please click a <div style=display:inline-block; id=n1>number</div>)</font></td><td>
<button style='background-color: yellow;' title='Please click a number' id=bx onclick=iclicked(event);><span class=bx onclick='gval=this.innerHTML;'>1</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>2</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>3</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>4</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>5</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>6</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>7</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>8</span><span class=bx onclick='gval=this.innerHTML;'> </span><span class=bx onclick='gval=this.innerHTML;'>9</span></button>
</td><td>
<script type='text/javascript'>
document.write("<input type=button style='background-color: yellow;' title='Please click a number' id=ix onclick=iclicked(event); value='" + cnumx + "'></input>");
</script>
</td></tr>
<tr><td>Horizontal and Vertical Dimensions<br><font size=1>(please click a <div style=display:inline-block; id=n2>number</div>)</font></td><td>
<button style='background-color: yellow;' title='Please click a number' id=bxandy onclick=iclicked(event);>
<span class=bxandy onclick='gval=this.innerHTML;'>1</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><span class=bxandy onclick='gval=this.innerHTML;'>2</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><span class=bxandy onclick='gval=this.innerHTML;'>3</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><br>
<span class=bxandy onclick='gval=this.innerHTML;'>4</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><span class=bxandy onclick='gval=this.innerHTML;'>5</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><span class=bxandy onclick='gval=this.innerHTML;'>6</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><br>
<span class=bxandy onclick='gval=this.innerHTML;'>7</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><span class=bxandy onclick='gval=this.innerHTML;'>8</span><span class=bxandy onclick='gval=this.innerHTML;'> </span><span class=bxandy onclick='gval=this.innerHTML;'>9</span><span class=bxandy onclick='gval=this.innerHTML;'> </span>
</button>
</td><td>
<script type='text/javascript'>
document.write("<input type=button style='background-color: yellow;' title='Please click a number' id=ixandy onclick=iclicked(event); value='" + boxit(cnum) + "'></input>");
</script>
</td></tr>
</table>
</body>
</html>