<!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;
}

#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; }
td { text-align: center; }
span:active { border:1px solid red; }
</style>
<script type='text/javascript'>
var gval='';
var cnum="1 2 3 " + String.fromCharCode(10) + "4 5 6 " + String.fromCharCode(10) + "7 8 9 ";
var cnumx="1 2 3 4 5 6 7 8 9";
var x=0, y=0, lastx=0,lasty=0;
var propx=0.0, propy=0.0;

//cnum="Cge return separators";

function iclicked(event) {
var rectis=null, isok=true;;
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 (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 (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 != '') {
alert('You clicked ' + gval);
gval='';
}
}

</script>
</head>
<body>
<h1>Multipurpose Buttons</h1>
<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 number)</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;'>2</span><span class=bx onclick='gval=this.innerHTML;'>3</span><span class=bx onclick='gval=this.innerHTML;'>4</span><span class=bx onclick='gval=this.innerHTML;'>5</span><span class=bx onclick='gval=this.innerHTML;'>6</span><span class=bx onclick='gval=this.innerHTML;'>7</span><span class=bx onclick='gval=this.innerHTML;'>8</span><span class=bx onclick='gval=this.innerHTML;'>9</span></button>
</td><td>
<input type=button style='background-color: yellow;' title='Please click a number' id=ix onclick=iclicked(event); value='1 2 3 4 5 6 7 8 9'></input>
</td></tr>

<tr><td>Horizontal and Vertical Dimensions<br><font size=1>(please click a number)</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;'>2</span><span class=bxandy onclick='gval=this.innerHTML;'>3</span><br>
<span class=bxandy onclick='gval=this.innerHTML;'>4</span><span class=bxandy onclick='gval=this.innerHTML;'>5</span><span class=bxandy onclick='gval=this.innerHTML;'>6</span><br>
<span class=bxandy onclick='gval=this.innerHTML;'>7</span><span class=bxandy onclick='gval=this.innerHTML;'>8</span><span class=bxandy 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=ixandy onclick=iclicked(event); value='" + cnum + "'></input>");
</script>
</td></tr>
</table>
</body>
</html>