When scrolling on an IOS mobile device, the .on(click) event is triggered for fixed position elements

Whenever I click on an li element or menu, a function is triggered that moves the nav container to the left by the width of the window. However, on my iPhone, after I click to slide the container off the screen, the event gets triggered repeatedly every time I scroll up or down. The event should only be fired when I click on the menu button or li element. I have noticed that this issue is related to the position:fixed property on the header that contains the menu. If I remove the position fixed, everything works fine. How can I prevent the click event from being triggered every time I scroll on an iOS device while keeping the position fixed?

For reference, here is a link to the site:

Answer №1

Unfortunately, the link you provided is broken. It appears that the issue may be related to the fluctuation in screen height on an iPhone, which can change by 44px due to the presence of the bottom tool bar. To address this issue, I implemented a solution by using prevent default when animating any element on the screen. This involved setting the bottom, top, and left properties to ensure proper positioning.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic data-* attributes in Meteor are being set and retrieved when clicked

Using Meteor, I am developing a website for Campus Recruitment. Within my mongo collection, I have a list of companies scheduled to visit various colleges. The HTML structure is as follows: [{#each jobs}} <li class="list-group-item college-list"> ...

"Discovering a button press using the Gamepad API: A Step-by-Step Guide

I'm currently building a web page that can detect button presses on an Xbox controller and display a boolean value based on the pressed button. Right now, I have successfully managed to detect when a controller is connected and show it as a string. Ho ...

NodeJS API Language Configuration

I'm currently working on integrating the DuckDuckGo Instant Answer Api into my NodeJS application. To do so, I am making a data request from the API using Node Request. var request = require('request'); request('http://api.duckduckgo.c ...

Assign values to variables in a JavaScript file using node.js

My tech stack includes node.js, express.js, and either pug or jade. Within my server, I inject a variable called pageId into a view. In the pug view, I utilize this variable using the following script: script. document.addEventListener('DOMConten ...

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

I am currently facing an issue with bringing the toolbar to the forefront of the page. When I scroll down, the elements on the page end up covering the toolbar which is not the desired behavior. Below is the CSS code for the toolbar: .maintoolbar.mat-tool ...

Dynamic v-if condition based on data binding

Is it possible to bind a v-if directive to data? I have an array of objects that represent navigation links or buttons, such as login and logout. Each object in this array has a 'v-if' property where the condition is defined as a string. Sample ...

The equivalent to using $("div").toggle() in jQuery in plain JavaScript would be something like togg

I'm currently utilizing jQuery and am interested in converting certain methods to native JavaScript. When using jQuery, the code looks something like this: $("div").toggle() Is there a way to convert this to native JavaScript, perhaps like below? ...

Google Chrome has trouble displaying the body element at 100% height

Having an issue with Google Chrome – the body element is not reaching 100% height. In my website samples, at 100% zoom when hovering over a menu element (such as "O nás"), I change the background color of the body element. However, in Chrome, the botto ...

Issue with jQuery selector in Internet Explorer, but functions correctly in Firefox

Why is it that this code functions in FF but not IE? Any insights would be appreciated. The issue appears to lie with $(".ui-tabs-nav li a"). In IE, this.text returns undefined. Check out the code here. ...

Instructions on activating dark mode with the darkreader plugin on a Vue.js website

Is there a way to implement DarkMode in a Vue.js application? I attempted to integrate darkmode using this npm package, but I kept encountering the error message: DarkMode not defined. ...

What is causing the issue of my oversized images not showing up on GoDaddy?

I recently uploaded my website on GoDaddy and I am facing an issue where some of my small images (sizes: 872 × 546px) are displaying perfectly fine, but the large ones (banners with a size of 2700 × 900px) aren't showing up. Does anyone have ...

Disregard Cloudflare's Automatic RocketLoader feature for certain JavaScript scripts

After extensive research and failed attempts, I am seeking help to disable Cloudflare Rocketloader for a specific JavaScript file on my WordPress website. Specifically, I need to exclude the Automatic Rocket Loader for a particular .js file. I attempted t ...

JavaScript implementation of Ancient Egyptian Multiplication using PHP code

Let's dive into the algorithm. If we have two integers, A and B (remember, only integers), that need to be multiplied, here is how it works: we continuously multiply A by 2 and divide B by 2 until B cannot be divided any further, or in other words, un ...

When imported, Node / JS instantly generates a new instance

Is there a way to instantiate a class without importing it first and using new afterward? Instead of var mainClass = require('../dist/main'); // has "class Main { ... }" var mainInstance = new mainClass(); I am looking for something like var ...

It appears that AsyncStorage.getItem() is not functioning as expected

Whenever I attempt to use AsyncStorage.getItem() to assign a value, I encounter difficulties retrieving it afterwards. let tokenData = null; const getData = async () => { let token; try { token = await AsyncStorage.getItem('token'); ...

The jsPDF tool captures only the visible frame in a screenshot instead of printing the entire content on the screen

Recently, I integrated the jsPDF npm module into my Angular application to convert HTML to PDF. However, I encountered an issue where printing a website page to PDF only captures a screenshot of the visible area in Firefox and Chrome, as well as in Interne ...

What could be causing React to throw an invalid hook error when using useRoutes?

I encountered an error while attempting to add a new route to my project. import React from "react"; import News from "./NewsComponents/News"; import Photos from "./PhotosComponents/Photos"; import Contact from "./Contact"; import Home from "./Home"; ...

Turn off the whole DIV container and its contents once the button is clicked

Here's an example of the HTML markup: <div id="picing-selection" class="disableMe"> <a class="upgradeSub" value="@ViewBag.Id"> Upgrade <i class="fa fa-money"></i> </a> </div> The onclick event is d ...

Order table column by checkbox status using Jquery

My datatable includes a column named Waive Fee containing checkboxes. I need the ability to sort this column so that when the header is clicked, all checked checkboxes move up or down accordingly. Is there a method in jQuery to achieve this functionality? ...

How can I prevent clicks on child links using the :not() selector?

I am working on a script using JQuery where I want to add a click handler to a div while ignoring clicks on the children a tags within it. You can check out my attempt (which is not working as expected) on this JSFiddle link: http://jsfiddle.net/q15s25Lx/ ...