<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multipurpose Buttons - RJM Programming - January, 2021</title>
<script type='text/javascript' src='//www.rjmprogramming.com.au/HTMLCSS/multipurpose_buttons.js?rand=645346545876433'></script>
<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; vertical-align: top; }
span:active { border:1px solid red; }
input { border:0; padding:0; font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; border-radius: 0 !important; -webkit-appearance: none; }
button { text-align: left; }
.glow {
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
/* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */
@-webkit-keyframes glow {
from {
box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
}
to {
box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
}
}
</style>
</head>
<body onload='onl();'>
<script type='text/javascript'>
document.write(docwrite1);
</script>
<h3>RJM Programming - January, 2021</h3>
<h4>Thanks to <a target=_blank title='Useful link, thanks' href='//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><a target=_self style='cursor:pointer;text-decoration:none;' title='Restart' href='./multipurpose_buttons.html'>🆕</a> <a id=aiemail style='cursor:pointer;text-decoration:none;display:none;' title='Email' onclick=" doemail(document.getElementById('iemail').value); ">📧</a> <input onblur="if (this.value.indexOf('@') != -1) { doemail(this.value); }" type=email value='' placeholder='📧' id=iemail></input></th><th>Button <a id=ct1 onclick=dodivstyle(); style='cursor:pointer;text-decoration:none;' title='Circular borders'>⭕</a> <a id=ct2 onclick=doglow(true); style='cursor:pointer;text-decoration:none;' title='Glow'>🌟</a></th><th>Input type=button <a id=ct3 onclick=doglow(false); style='cursor:pointer;text-decoration:none;' title='Glow'>🌟</a></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 or double click to define onclick logic.' id=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick=iclicked(event);><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>1</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>2</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>3</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>4</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>5</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>6</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>7</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>8</span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bx ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>9</span></button>
</td><td>
<script type='text/javascript'>
document.write(docwrite2);
</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 or double click to define onclick logic.' id=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick=iclicked(event);>
<span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>1</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>2</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>3</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><br>
<span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>4</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>5</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>6</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><br>
<span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>7</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>8</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'>9</span><span class=bxandy ontouchend=defineclick(this); ondblclick=defineclick(this); onclick='gval=this.innerHTML;'> </span>
</button>
</td><td>
<script type='text/javascript'>
document.write(docwrite3);
</script>
</td></tr>
</table>
<div id=inum style='display:none;'></div>
<input id=audioname style='display:none;' type=hidden value=''></input>
<input id=saysub style='display:none;' type=hidden value=''></input>
<input id=outputname style='display:none;' type=hidden value=''></input>
<input id=path style='display:none;' type=hidden value=''></input>
<input id=opath style='display:none;' type=hidden value=''></input>
<input id=cto style='display:none;' type=hidden value=''></input>
<a target=_blank id=aemailto style='display:none;' href=''>Email</a><a target=_blank id=asmsto style='display:none;' href=''>SMS</a>
<select id=sin style='display:none;position:absolute;left:-500px;top:-500px;'><option style='display:none;' value=''></option></select>
<div id=thewords style='display:none;'></div>
<div id=result style='display:none;'></div>
<div id=resultav style='display:none;'></div>
<div id=topleftx style='display:none;'></div>
<div id=videoag style='display:none;'></div><br>
<div id=divmore></div>
<div id=divmymsr style='display:none;width:100%;height:600px;'>
<div id=divstyle></div>
<input type=text style='position:absolute;left:-300px;top:-300px;' value=''></input>
</body>
</html>