Issues with jQuery toggle functionality have been reported specifically on the iPhone8 and other iOS devices

Hi everyone, I'm facing an issue with the header on my website. It displays a hamburger menu on small screens, and while it works perfectly on PCs and Android phones, it's unresponsive on iOS, specifically on my iPhone 8. I've tried using various jQuery methods like slideToggle, toggle, and hide/show, but none of them seem to work on iOS. I even added an alert to check if the touch event is being recognized, which it is. I've tried surrounding it with anchor tags, setting cursor:pointer in the CSS, clearing the browser cache, and even using different CDNs from Github, but nothing has worked so far. I read about Ajax causing issues and made sure it's set to false, but that didn't solve the problem either. I've checked display settings and tried multiple CDNs, but nothing seems to fix the issue on iOS. I would greatly appreciate any help or suggestions.

You can find my code on jsfiddle here: https://jsfiddle.net/62pmq7ju/9/

<div class="header">

<a><div><img src="img/icon.png" alt="" width="40px" height="45px" class="myMenu"/></div></a>
<div class="hiddenMenu"></div>
</div>

.hiddenMenu {
position: fixed;
width: 100%;
background-image: url(img/headerBackground.jpg);
top:45px;
display: block;
cursor: pointer;
}

.myMenu {
position: relative;
float: left;
padding-left: 5px;
display: block;
cursor: pointer;
}

    <script>
    $(document).bind("mobileinit", function () {
    // jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
    // when navigating from a mobile to a non-mobile page), especially when going back, hence disabling it.
    $.extend($.mobile, {
        ajaxEnabled: false
    });
    }); 
    $(".hiddenMenu").hide();
    $(".myMenu").on("click", function(){
       $(".hiddenMenu").toggle(); 
    });
    </script>

The jsfiddle works on Android and Windows, but not on iOS devices when using Chrome or Safari. I've been troubleshooting this for days and would appreciate any help or guidance. If I missed out on any crucial details, please let me know.

Answer №1

This is the method I employed

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {

    
    $('.head_download').on('click', function(){
$('.f_list_season').removeClass('show');
$(this).addClass('show');
});
}

Here is a demonstration:

       if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
        $('.header img').on('click', function(){
             $('.hiddenMenu').removeAttr('style');
             $(this).css("display", "none");
                });
         }

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

Tips for cropping an image using CSS with dimensions specified for width, height, and x and y coordinates

As I work on implementing a cropping feature using react-easy-crop, my goal is to store the user's image along with pixel coordinates that dictate their preferred cropping area. My objective is to utilize the parameters provided by react-easy-crop in ...

IE randomly aborts Ajax requests

I'm encountering an intermittent issue with my Ajax call specifically in IE9. Let me share the code snippet that I am using: $.ajax({ url: buildUrl('ActiveTasksTable/' + $('#Id').val()), type: "POST", cache: false, ...

Deleting a tag from a Flask document

Styling my form has been a challenge with Flask, particularly in regards to the picture field. I'm struggling to remove the "No file chosen" text and style the upload button using CSS, despite incorporating Bootstrap into my file. When hovering over ...

Overlapping background images of flex elements in Safari

This webpage is designed as a single-page layout using Gatsby: <div className='mainContent'> <section className='contentSection'> <h1 className='header'>Heading</h1> <div c ...

Using jQuery Mobile to dynamically load content into a specific div element

Jquery Mobile operates by seizing control of a page and fetching content to inject into it. However, this poses an issue when attempting to inject additional content into the page. In my setup, I have an index.html and a page2.html file. I am configuring ...

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

Display the source code of an HTML element when clicked

Is there a way to show the source code of an element on a webpage in a text box when that specific element is clicked? I am wondering if it is feasible to retrieve the source code of an element upon clicking (utilizing the onClick property), and subseque ...

"Performs smoothly in Postman, but doesn't function as effectively in

I have a requirement to showcase a dynamically generated variable from views.py in my login.html. The username (voucher) is being generated in views.py and I need it to be automatically populated in my login.html. Please note that the mpesa_body contains d ...

Encountering issues with Bootstrap modal functionality within a Laravel blade template

I am facing an issue with displaying a modal when a specific link is clicked. The problem is that the modal appears briefly for less than a second and then disappears again. How can I ensure that the modal remains stable? Below is my code: <!DOCTYPE ...

Steps to invoke a function repeatedly for an animation

I found this code snippet while browsing a forum post about CSS animations. The question asked if it was possible to create a button that would restart the animation when clicked, even if it is in the middle of playing. They specifically requested no jQu ...

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

When the iframe window is visible, there are no issues. However, if the iframe window is set to 0px X 0px in order to hide it while still loading, consider redirecting the iframe or not displaying it at all. In case something is loaded within an iframe or ...

Display dynamic web content developed with JavaScript for public viewing

As a newcomer to the world of web development, I'm not sure if it's possible to achieve what I have in mind without using PHP. However, I'm willing to give it a shot. Currently, my webpage functions perfectly with JavaScript, HTML, and CSS, ...

When attempting to print using React, inline styles may not be effective

<div styleName="item" key={index} style={{ backgroundColor: color[index] }}> The hex color code stored in color[index] displays correctly in web browsers, but fails to work in print preview mode. Substituting 'blue' for color[index] succe ...

How can one access the owner function from a different function?

Check out the example on jsfiddle: https://jsfiddle.net/cg33ov4g/3/ (function($){ var foo='foo_value'; var bar='bar_value'; function getVar(theVar){ console.log(this[foo]); console.log(this[bar]); //the c ...

Managing PHP multiple follow-up options in HTML select fields

My goal is to design a form that includes multiple follow-up select fields. These fields will be populated from an array with 3 elements: ID, Name, and followingID. The followingID corresponds to an ID in the array, helping us determine the hierarchical la ...

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Imagine you have an image file in the format of a PNG which includes various icons intended for use on a website. How can JavaScript be utilized to choose and showcase a specific icon from that image? It's a technique I've observed in practice, b ...

Missing Bootstrap 3 Options Menu trip away

I created a table with 4 columns using the Bootstrap 3 grid system. Instead of utilizing the col-xs-* classes, which work well on mobile devices, I opted for the col-md-* classes. This decision was based on my preference to have larger and more visible ico ...

Passing the element ID from the controller to the Ajax response

I'm trying to create a new review using an Ajax POST call, and I want my controller to send back the ID of the newly created object so that I can update specific elements on my webpage with it. However, all I'm getting in return is the full webpa ...

Ways to retrieve the value of the chosen radio button using Prototype or JQuery

Looking for a way to retrieve the value of the selected radio button using either JQuery or Prototype? Check out this sample form: <label for="deliveryChoice">Courier&nbsp;<b>&pound;3.00</b></label> <input type="radio" ...

Easy Div Centering with jQuery Toggle for Internet Explorer 6

Press the button to center the div, press it again to align it to the left. This feature is compatible with all browsers except for IE6, which does not support margin: 0 auto;. How can I find a solution to this issue? The width of the div is not fixed and ...