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

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

The number of nodes and edges I calculated manually and by a method provided by networkx library dont match

I am trying to analyse a graph using networkx library in Python. I have implemented a function that returns the nodes and edges of that graph. After that I counted the number of nodes and edges by implementing the len() function for nodes and edges, which gave me 17 for both nodes and edges. However, when I used the method graph.number_of_nodes() of networkx library it gave me 53. My code: import pandas as pd import networkx as nx import matplotlib.pyplot as plt header_list = ["a","b","w"] E =pd.read_csv("aves-barn-swallow-contact-network.edges",sep=" ",header= None,names=header_list) # print(E.head()) # prints first few rows of the csv file G = nx.from_pandas_edgelist(E,"a","b",["w"]) nx.draw(G) plt.show() class GraphAnalyse: #finding nodes and edges def nodeEdge(self,Graph): nodes = Graph.nodes() edges = Graph.edges() ...

StacksPedia

Search This Blog