Skip to main content

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
Labels:

Comments

Post a Comment

Popular posts from this blog

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...
Post a Comment
Read more

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...
Post a Comment
Read more

Confusion between commands.Bot and discord.Client | Which one should I use?

Whenever you look at YouTube tutorials or code from this website there is a real variation. Some developers use client = discord.Client(intents=intents) while the others use bot = commands.Bot(command_prefix="something", intents=intents) . Now I know slightly about the difference but I get errors from different places from my code when I use either of them and its confusing. Especially since there has a few changes over the years in discord.py it is hard to find the real difference. I tried sticking to discord.Client then I found that there are more features in commands.Bot . Then I found errors when using commands.Bot . An example of this is: When I try to use commands.Bot client = commands.Bot(command_prefix=">",intents=intents) async def load(): for filename in os.listdir("./Cogs"): if filename.endswith(".py"): client.load_extension(f"Cogs.{filename[:-3]}") The above doesnt giveany response from my Cogs ...
Post a Comment
Read more