 Posted - 04/05/2021 : 21:49:12
Clicking a tiny radio button on a small touch screen can be difficult... These days it's a good idea to add the <label> tag to the inputs and then a user can just click the text and need not click the tiny dot. Here is some simple Javascript that will do that on all of your product options on the product details pages. This is tested to work on .asp and .php versions. Open your proddetail.asp (or .php) file in your html editor and add the following code below the include line that call the products. (<!--#include file="vsadmin/inc/incproddetail.asp"--> or <?php include "vsadmin/inc/incproddetail.php" ?> ) <script>
//ADD LABEL TAG for options
if (document.getElementsByClassName("rcoption")) {
var prelabel = document.getElementsByClassName("rcoption")
var i;
for (i = 0; i < prelabel.length; i++) {
var preinput = prelabel[i].innerHTML;
prelabel[i].innerHTML = "<label>"+preinput+"</label>";
}}
</script> The code looks for radio options and if found, loops through them the adds an opening and closing <label> tag around each. DEMO HERE - https://www.floridasurpluswarehouse.com/dev/proddetail.php?prod=pc001Click the text associated with the Monitor option. Enjoy, David
Edited by - dbdave on 04/05/2021 21:50:51
| 
All Forums
Instant Mobile Friendly radio input options
