iPhone - touchstart event not functioning in JavaScript

Question

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone.

Let's start with a basic link:

<a href="#" onfocus="menu()">MENU</a>

When this link is clicked, it expands a specific div to fill the screen and displays content. Inside that div, there's another link to close the expanded area:

<a href="#" onfocus="revert()">close</a>

Here's the corresponding JavaScript code:

<script>
        var headerHeight = document.getElementById("header_container").clientHeight;
        function menu() {
            document.getElementById("nav_container").style = "display:block;";
            document.getElementById("header_container").style = "height:100%";
            document.getElementById("header").style = "height:100%";
        }
        function revert(){
            document.getElementById("nav_container").style = "display:none;";
            document.getElementById("header_container").style = "height:"+headerHeight+";";
            document.getElementById("header").style = "height:"+headerHeight+";";
        }
</script>

Although this code works perfectly on desktop browsers like Firefox Developer Edition in responsive design mode with touch events simulated, it fails to perform as expected on my mobile device 😞

Upon clicking the button, nothing happens. Any suggestions or insights on how to resolve this issue?

javascript html ios css iphone

Answer 1

Answer №1

When an element is prepared to accept keyboard input, it is considered 'focused'. Perhaps using onclick would be more suitable for your needs.

If you are not directing to another page, it's recommended to use a button in your HTML code:

<button onclick="menu()">MENU</button>
<button onclick="revert()">close</button>

The above code will function correctly, but it can be improved. In order to make this work smoothly, ensure that the functions menu and revert are defined first, prior to including your buttons. This requires loading your JavaScript before the DOM, which prevents referencing the DOM within your script.

To enhance performance, place your JavaScript after all DOM elements have loaded and bind your events accordingly:

function menu() {
  document.getElementById("msg").innerHTML = 'Showing menu';
}

function revert(){
  document.getElementById("msg").textContent = 'Not showing menu';
}

// Bind all events
document.getElementById('open-menu-button').addEventListener('click', menu);
document.getElementById('close-menu-button').addEventListener('click', revert);

<button id="open-menu-button">MENU</button>
<button id="close-menu-button">close</button>
<div id="msg"></div>

Many resources suggest waiting for a domloaded event or enclosing everything in $( document ).ready(), but this isn't necessary if your JavaScript is positioned at the bottom of the page.

Answer 2

When an element is prepared to accept keyboard input, it is considered 'focused'. Perhaps using onclick would be more suitable for your needs.

If you are not directing to another page, it's recommended to use a button in your HTML code:

<button onclick="menu()">MENU</button>
<button onclick="revert()">close</button>

The above code will function correctly, but it can be improved. In order to make this work smoothly, ensure that the functions menu and revert are defined first, prior to including your buttons. This requires loading your JavaScript before the DOM, which prevents referencing the DOM within your script.

To enhance performance, place your JavaScript after all DOM elements have loaded and bind your events accordingly:

function menu() {
  document.getElementById("msg").innerHTML = 'Showing menu';
}

function revert(){
  document.getElementById("msg").textContent = 'Not showing menu';
}

// Bind all events
document.getElementById('open-menu-button').addEventListener('click', menu);
document.getElementById('close-menu-button').addEventListener('click', revert);

<button id="open-menu-button">MENU</button>
<button id="close-menu-button">close</button>
<div id="msg"></div>

Many resources suggest waiting for a domloaded event or enclosing everything in $( document ).ready(), but this isn't necessary if your JavaScript is positioned at the bottom of the page.

iPhone - touchstart event not functioning in JavaScript

Answer №1

Similar questions

Is it truly impossible to align text around an image using flexbox?

Issue with Material-UI Dialog Reusable Component: No error messages in console and app remains stable

AngularJS bidirectional binding with numerous select choices

Ways to validate an element in an Array using Cypress dynamically

Issue with passing reactive property to component in Vue 3 application

The total number of rows in each section is determined by the count specified in the "numberOfRowsInSection

What is the best way to implement Bootstrap in Coda2?

Authentication failed due to Bcrypt.compare() returning invalid credentials

Discover how to apply unique styles to specific HTML elements using their index values in jQuery

Add a CSS file to the browser-sync with proxy functionality

Attribute specified does not belong to type 'DetailedHTMLProps<ButtonHTMLAttributes

Error in three.js: Attempting to access the 'rotation' property of an undefined object

The surprising height discrepancy in the li element while using the jQuery sortable plugin

What could be the reason for the HTML canvas not displaying anything after a new element is added?

Here's a tutorial on creating a dropdown menu containing a list of years. When a specific year is selected, the table will display the individuals who registered during that year using PHP

Encountering an issue in a Next.js application while building it, where an error is triggered because the property 'protocol' of 'window.location' cannot be destructured due to being undefined

jQuery toggle buttons to show or hide on radio button selection

Safari displaying incorrect sizing for table nested in inline-flex container

The use of a Bootstrap row is leading to incorrect dimensions for FullPageJS

The JQuery duplication process did not function as anticipated