Hello there,
I would like to share this implementation that I did for mobile devices. In this case, I had to create a custom radio button using an HTML Container with CSS and JavaScript to change the panels of a panel stack.
The trick is to create anchors with your URL API parameters to change the panels based on the click of the radio button.
I have one function per button in this case, but you can improve it to use only one.
You just need to create an HTML Container and past this code below:
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<style>
.buttons{
margin-bottom : 1.5em;
}
input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
}
input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : #000;
}
</style>
<script>
function clickLvl() {
var event = document.createEvent('MouseEvent');
event = new CustomEvent('click');
var a = document.getElementById('lvlLink');
a.dispatchEvent(event);
}
function clickVP() {
var event = document.createEvent('MouseEvent');
event = new CustomEvent('click');
var a = document.getElementById('vpLink');
a.dispatchEvent(event);
}
function clickDivision() {
var event = document.createEvent('MouseEvent');
event = new CustomEvent('click');
var a = document.getElementById('divisionLink');
a.dispatchEvent(event);
}
function clickDepartment() {
var event = document.createEvent('MouseEvent');
event = new CustomEvent('click');
var a = document.getElementById('departmentLink');
a.dispatchEvent(event);
}
function clickClass() {
var event = document.createEvent('MouseEvent');
event = new CustomEvent('click');
var a = document.getElementById('classLink');
a.dispatchEvent(event);
}
</script>
</head>
<body>
<a id="lvlLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3531|Panel3531"></a>
<a id="vpLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3535|Panel3535"></a>
<a id="divisionLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3534|Panel3534"></a>
<a id="departmentLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3533|Panel3533"></a>
<a id="classLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel4483|Panel4431"></a>
<div class="buttons">
<div>
<input id="radio1" type="radio" name="radio" value="1" checked="checked" onclick="clickLvl()"><label for="radio1"><span><span></span></span>Button 1</label></div>
<div>
<input id="radio2" type="radio" name="radio" value="2"><label for="radio2" onclick="clickVP()"><span><span></span></span>Button 2</label></div>
<div>
<input id="radio3" type="radio" name="radio" value="3"><label for="radio3" onclick="clickDivision()"><span><span></span></span>Button 3</label></div>
<div>
<input id="radio4" type="radio" name="radio" value="4"><label for="radio4" onclick="clickDepartment()"><span><span></span></span>Button 4</label></div>
<div>
<input id="radio5" type="radio" name="radio" value="5"><label for="radio5" onclick="clickClass()"><span><span></span></span>Button 5</label></div>
</div>
</body>
</html>
Each input is a different radio button.
Just let me know if you need help with this code.
Hope it helps.
God bless you!
