Move side nav bar with finger ontouchevent

Here is the code

function myFunction(event) {
    var x1 = event.touches[0].clientX;
    var y1 = event.touches[0].clientY;
    document.getElementById("nav").innerHTML = x1 + ", " + y1;

    if (x1 / 8 > 51 && nav.visibility == false){
        nav.style.left = '0';
    }

    if (x1 > 10 && x1 / 8 < 51) {
        nav.style.left = x1 / 8 + 'px';
    } else {
        nav.style.left = '-75%';
        nav.visibility = 'false';
    }
}

body {
    background-color: black;
    color: white;
    font-family: sans-serif;
}

nav {
    width: 70%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: white;
    color: black;
    transition: 1s;
}

<body ontouchmove="myFunction(event)">
    <header>
        <nav id="nav">
            hi
        </nav>
    </header>
    <main>
        <article>
            <p align="left">
                &emsp;&emsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis porttitor convallis. Nulla facilisi. Nullam in lectus risus. Phasellus a turpis non arcu porta tempus a id nibh. Aenean sed volutpat risus. Aenean ornare et risus vitae aliquam. Fusce ac molestie urna. Duis accumsan leo libero, sit amet elementum ligula imperdiet posuere. Nunc volutpat sit amet tortor eu maximus. Suspendisse ultrices felis in lacus consequat, sit amet laoreet purus malesuada. Praesent sit amet felis cursus, lobortis sapien at, sollicitudin neque. Mauris pellentesque viverra tristique. Nam eu aliquam ligula. In ut volutpat enim, at tincidunt erat.
                <br /><br />
                &emsp;&emsp;Ut id commodo sem. Nunc aliquet mattis ipsum eget malesuada. Nullam vel elit felis. Proin placerat, diam nec cursus condimentum, ligula augue iaculis sem, nec eleifend purus diam ut purus. Curabitur lacinia laoreet scelerisque. Donec suscipit nibh ac neque gravida facilisis. Sed fermentum congue diam et ultricies. Vivamus nec leo nisi. Sed eleifend ex quam, ut lacinia tellus accumsan id. Phasellus nec enim libero. Nulla eu elit in mi gravida varius. Integer vel leo nulla. Sed a sem sem.
                <br /><br />
                &emsp;&emsp;Aliquam consectetur ante nec tellus varius gravida. Duis accumsan, sem quis mattis aliquam, enim quam fringilla nisl, ut ornare enim tortor ut odio. Phasellus dictum ligula nec mattis ultricies. Proin imperdiet ante vitae arcu viverra, gravida lacinia ex commodo. Duis at mauris elit. Etiam pretium a nunc id rutrum. Nunc vitae molestie purus.
                <br /><br />
                &emsp;&emsp;Morbi aliquet leo at viverra ornare. Suspendisse ullamcorper quam maximus nisl maximus vulputate. Maecenas arcu ante, maximus ac odio tincidunt, blandit consectetur est. Quisque volutpat est non leo mattis auctor. Nunc eget magna et ante luctus volutpat. Fusce lobortis dui id quam placerat, vitae maximus nulla tincidunt. Fusce dapibus et diam ut egestas. Proin eget magna vel neque faucibus dignissim. Aliquam sagittis risus nec libero aliquet hendrerit. Donec ut leo consectetur, pharetra arcu consequat, pharetra ligula. Fusce dignissim porta elit vel auctor. Mauris id velit quis tortor venenatis molestie. Aliquam vulputate bibendum enim vel commodo. Phasellus condimentum at metus a maximus. Sed fringilla elementum dapibus.
                <br /><br />
                &emsp;&emsp;In pretium vel justo non interdum. Maecenas faucibus dignissim rhoncus. Nulla fermentum dui tellus, sit amet porttitor est semper at. Praesent tristique gravida scelerisque. Pellentesque ultrices dui vel pellentesque luctus. Suspendisse finibus urna eu ante sodales bibendum. In arcu nunc, euismod vel pretium nec, euismod sed orci. Proin fringilla euismod nisl vitae sollicitudin. Ut et blandit nulla, sit amet vehicula tortor. Quisque risus augue, eleifend tristique tincidunt eget, posuere et nunc.
            </p>
        </article>
    </main>
</body>

Specification Please run the code in mobile screen size.

What I want to achieve is that the nav bar should be just like an Android app. But I don't the logic that I need to perform on firing of ontouchevent. The position of the navbar should move with finger.

Perfect logic to match the Android nav bar using JS.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/dXslVyi

Where and how is this Laravel kernel constructor called? [closed]

Where and how is this Laravel kernel constructor called? public fucntion __construct(Application $app, $Router $roouter) { } I have read the documentation and some online tutorial but I can find any clear explanation. I am learning Laravel and I am wondering where does this kernel constructor receives its arguments from. "POSTMOTERM" CLARIFICATION: Here is more clarity.I have checked the boostrap/app.php and it is only used for boostrapping the interfaces into the container class. What is not clear to me is where and how the Kernel class is instatiated and the arguments passed to the object calling the constructor.Something similar to; obj = new kernel(arg1,arg2) or, is the framework using some magic functions somewhere? Special gratitude to those who burn their eyeballs and brain cells on this trivia before it goes into a full blown menopause alias "MARKED AS DUPLICATE". To some of the itchy-finger keyboard warriors, a.k.a The mods,because I believe in th...

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype

StacksPedia

Search This Blog