This code is not working on webview .
i am trying to create a slide bar menu by using html css and js
it works fine on Fire fox for android and chrome but its not working on webview.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<style>
body {
font-family: "Lato", sans-serif;
transition: 0.3s;
font-size: 18px;
background: #ccc;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
#page {
z-index: 999;
}
.sidenav {
margin: 0;
padding: 0;
height: 100%;
width: 43vh;
max-width: 43vh;
min-width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
overflow-x: hidden;
transition: 0.4s;
border-top-right-radius: 2vh;
}
.slideTopMenu{
position: absolute;
top: 0px;
right: 0vh;
width: 43vh;
background: #ffce33;
display: inline-flex;
padding: 2vh 0;
}
.slideTopMenu .Circle {
width: 22%;
height: 4vh;
padding: 2.8vh 0vh;
margin-left: 1vh;
font-size: 1.3em;
color: #fff;
background: #090909;
border-radius: 50%;
text-align: center;
}
.slideTopMenu .details {
width: 67%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
list-style: none;
font-size: .7em;
color: #000;
background: none;
padding: 1vh 1vh;
}
.details .pri{
font-size: 1.2em;
}
.details li{
padding: .5vh 0;
}
.sidenav .closebtn {
position: absolute;
top: -40px;
right: 10px;
font-size: 36px;
margin-left: 50px;
color: #000;
z-index: 999
}
#list{
position: absolute;
top: 20%;
right: 23vh;
font-size: .8em;
font-weight: bold;
color: #000;
list-style: none;
white-space: nowrap;
}
#list li {
padding: 2.2vh 0px;
}
#list li:hover {
color: green;
background: black;
}
.Slidefooter li:hover {
color: green;
background: black;
}
#f {
padding: 0vh 2vh;
font-size: 2.5vh;
}
.Slidefooter{
position: absolute;
top: 80%;
right: 19vh;
font-size: .8em;
font-weight: bold;
color: #4c4a4a;
list-style: none;
white-space: nowrap;
}
.Slidefooter li {
padding: 2.2vh 0px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="page">
<div id="mySidenav" class="sidenav">
<p class="closebtn" onclick="closeNav()">×</p>
<div class="slideTopMenu">
<p class="Circle" >F</p>
<ul class="details">
<li class="pri"><strong>Fire Strorm</strong></li>
<li class="pri">6125463836</li>
<li>[email protected]</li>
</ul>
</div>
<ul id="list">
<li></i>Home</li>
<li></i>My Profile</li>
<li></i>Feedback</li>
<li>Contact US</li>
<li></i>Share</li>
<li>Logout</li>
</ul>
<ul class="Slidefooter">
<li>About</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<h2>Animated Sidenav Example 3</h2>
<p>This code is not working on webview .
i am trying to create a slide bar menu by using html css and js
it works fine on Fire fox for android and chrome but its not working on webview.</p>
Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.Click on the element below to open the side navigation menu.</p>
</div>
<script>
let mySidenav = document.getElementById("mySidenav");
let list = document.getElementById("list");
function openNav() {
mySidenav.style.width = "43vh";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
mySidenav.style.width = "0";
document.body.style.backgroundColor = "white";
}
</script>
<script type="text/javascript">
var startingx;
let page = document.getElementById("page");
page.addEventListener('touchstart', a);
function a(ev){
startingx = Math.round(ev.touches[0].clientX);
console.log( startingx , ev.type );
}
page.addEventListener('touchmove', f);
function f(ev){
var touch = Math.round(ev.touches[0].clientX);
var threshold = screen.width / 20;
var diff = Math.round(touch / 8 - startingx);
//console.log( touch , ev.type );
//console.log( change , ev.type );
if (startingx <= threshold && startingx < touch ) {
//mySidenav.style.width = '+' + change + 'px';
mySidenav.style.width = '1.5' * touch + 'px';
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
} else if (startingx > touch + 40 ) {
mySidenav.style.width = '1.5' * touch + 'px';
document.body.style.backgroundColor = "white";
/* if ( touch > screen.width / 4 ) {
list.style.left = "-30px";
}else{
list.style.left = "-100px";
} */
}
}
page.addEventListener('touchend', z);
function z(ev){
var change = startingx + ev.changedTouches[0].clientX;
var chill = Math.round(ev.changedTouches[0].clientX);
var threshold = screen.width / 20;
var end = ev.touches;
console.log( chill , ev.type );
if (startingx <= threshold && startingx + 10 < chill) {
mySidenav.style.width = "43vh";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
} else if (startingx !== chill && threshold + 40 >= chill) {
mySidenav.style.width = "0";
document.body.style.backgroundColor = "white";
}else{
mySidenav.style.width = "43vh";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
}
</script>
</body>
</html>
