Activate dropdown menu link when tapped twice on tablet devices

I am trying to implement a dropdown navigation link feature on tablets where the child menu div drops down only on the second click. This functionality already works on iPads, but on Android and Windows tablets, the link is triggered at the same time as the dropdown occurs.

Here is the code I am currently using:


jQuery("ul.menuTop > li a.students" ).mouseenter(function( event ){
    event.stopImmediatePropagation()
    
    jQuery("#studentsMenu" ).fadeIn();
    jQuery("#facultyMenu" ).hide();
    jQuery("#staffMenu" ).hide();
    jQuery("#alumniMenu" ).hide();
    jQuery("#aboutMenu" ).hide(); 
});

jQuery(".menuWrapper" ).mouseleave(function (){
    jQuery("#studentsMenu" ).hide();
});

Any help or suggestions would be greatly appreciated. Thank you!

javascriptandroidjqueryhtmlcss

Answer №1

Successfully came up with a resolution. 

         var isMobile = navigator.userAgent.match(/(iPhone|iPad|Android|BlackBerry)/);
         var link = jQuery("ul.menuTop > li a.students")

         if (isMobile) {
             jQuery(link).one("click", function (ev) {

                 ev.preventDefault();
             });

             if (jQuery("#studentsMenu").is(":visible")) {

                 jQuery(link).click(function (ev) {

                     ev.window.location = "/students";

                 });

             }
         }

Encountering issues on Windows Tablet IE despite including "Windows" in the userAgent match. Seeking suggestions for a fix on that particular problem.

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

Can you clarify the purpose of response.on('data', function(data) {}); in this context?

I am curious about the inner workings of response.on("data"). After making a request to a web server, I receive a response. Following that, I utilize response.on("data" ...); and obtain some form of data. I am eager to uncover what kind of data is being p ...

javascriptnode.jsexpresshttps

Sending and storing data through URLs with Retrofit and Django Rest Framework

I'm currently developing an Android Application and my objective is to have full control over the user management process (adding, updating, deleting, displaying). I am utilizing Retrofit Client along with Django-Rest-Framework for this purpose. All t ...

androidjsondjango-rest-frameworkretrofit2

Is this example showcasing the use of JavaScript closures?

I have a JavaScript query that may be geared towards beginners: var countries = [ "Bangladesh", "Germany", "Pakistan"]; function checkExistence(arr, input) { for (var i = 0; i < arr.length; i++) { if (arr[i] != input) { a ...

javascriptarraysclosures

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

htmlcss

Submitting the form without utilizing Ajax, but instead sending data directly to a PHP script

I've encountered an issue while posting a form to a PHP file using AJAX. Despite my efforts, the form is bypassing AJAX and posting directly to the PHP file. Here is my form: <form id="editform" name="editform" action="ajaxeditform.php" method= ...

javascriptphpjqueryajax

Disabled Button for Updating Heap in Android Eclipse DDMS

While attempting to analyze the memory usage of my Android app with DDMS, I noticed that the "Update Heap" button/tab was greyed out and disabled. Even after connecting my device, the issue persisted. Does anyone have any insight into why this might be h ...

androideclipseprofilingheap-memoryddms

Attention all beginners: there is an issue with the navigation bar where the section below is overlapping it. Additionally, assistance is needed in understanding how to set limits for

Greetings to all. I'm encountering an issue while setting up my first Bootstrap Nav bar. Although I've managed to make it work, the section right below it is overlapping the navbar (I can only see the navbar if I use a z-index of -1, but then the ...

htmljquerycssbootstrap-4navbar

The camera's rotation remains unchanged even after applying the transformation matrix

Is there a way to effectively apply a transformation matrix to a PerspectiveCamera? I have the transformation matrix and I am applying it to the Perspective camera using camera.applyMatrix(transformationMatrix); The camera.position is updated correctly, ...

javascript3dthree.js

Display the Express response in an HTML element by utilizing the fetch API

I am currently developing a small node/express project that showcases the bcyrpt hashed value of user input. While I have been successful in displaying the hashed value in the server's console.log, I am facing difficulties in injecting this value into ...

javascriptnode.jsexpressfetch

Tips for utilizing an Array of FileWriter in an Android application: Dealing with java.lang.NullPointerException when attempting to write to a null array

When attempting to write to multiple files using an array of FileWriter and PrintWriter, I made sure to surround the statements with try and catch blocks. However, the app still crashes and presents the following error: java.lang.NullPointerException: A ...

javaandroidarraysfilenullpointerexception

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

I am struggling with this TypeScript code that contains comments and seems a bit messy: function getPlacesToStopExchange(): { our: { i: number; val: number; }[]; enemy: { i: number; val: number; }[]; //[party in 'our' | 'enemy' ]: ...

javascripttypescriptdebuggingcompiler-errorstsc

Is there a method to make this package compatible with Angular version 16?

I recently integrated the ngx-hotjar package version 11.0.0 into my Angular 10 project with success. However, when trying to use it in a new Angular 16 project, I encountered the following error during ng serve: Error: src/app/app.module.ts:275:12 - error ...

javascriptangulartypescript

Guide on incorporating Bootstrap 4 beta.2 into an Angular 4 project

After attempting to install Bootstrap 4 version beta.2 along with its dependencies (jquery and popper.js), I encountered a strange problem. A SyntaxError message kept appearing in the console, specifically stating "SyntaxError: export declarations may only ...

jqueryangulartypescriptbootstrap-4popper.js

How can I utilize data retrieved from $http.get in Vue.js once the page has finished loading?

I'm having trouble figuring out how to trigger a function in Vue.js after an $http.get request has completed. In the example below, I want to automatically select an element of foobar right after the page loads, but it only works when there's an ...

javascriptajaxvue.js

Troubleshooting problems with footer size in wkhtmltopdf

I am facing an issue while trying to convert an HTML file to a PDF format. Specifically, when attempting to include a footer, the size rendered in the PDF does not match the one specified in the CSS. The designated size for the footer should be exactly 15 ...

phphtmlwkhtmltopdf

What are some potential causes of webpack-dev-server's hot reload feature not working properly?

Having an issue with my React project. When I try to use hot reload by running "npm start" or "yarn start" with webpack-dev-server configured (--hot flag), I'm getting the error message: [error message here]. Can anyone assist me in troubleshooting th ...

javascriptnode.jsreactjsreact-nativereactive-programming

What are the different scenarios in AngularJS where $scope is utilized versus when var is utilized?

Which is more efficient in AngularJS: using var or $scope. for variables inside functions? I am asking this question because I recently came across information about $watch, $digest, and $apply in AngularJS. While I may not have fully grasped the concept ...

javascriptangularjsangularjs-scope

The issue of selecting multiple classes simultaneously is not being resolved

Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...

javascriptjqueryhtmlcssangularjs

Encountering a null JSON response while using Retrofit library

I am utilizing the Retrofit library to parse the JSON response from the TMDB API for the Now Playing Movies category and my goal is to showcase the outcomes in a RecyclerView. The raw JSON data I am receiving from the API is as follows: { "page": 1, ...

javaandroidjsonnullpointerexceptionretrofit2

Transferring information via a function to a modal component in VueJS

Seeking advice on passing data to a modal. I'm attempting to pass data to a modal, where a function within a v-for loop gathers the video URL for later opening. The modal is placed outside the v-for loop to prevent all videos from playing the same o ...

javascriptvue.js