Creating Hover Effects for Touch Screen Devices with jQuery

Recently, I came across a piece of code that enables a link to become active on the second tap when using touch screen devices.

I found this code snippet from:

hnldesign.nl

(function($) {

var landingLink = '.nav-landing > li';

if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {

    // MAKING LANDING PAGE MEGA NAVIGATION ACTIVE ON TOUCH
    $(landingLink).live('touchstart', function (e) {

        var link = $(this);
        var megaDiv = $(this).find('div');

        // REMOVING 'touch-device' CLASS IF LINK HASN'T BEEN TAPPED
        if (!megaDiv.hasClass('touch-device')) {
            $('.touch-device').removeClass('touch-device');
        }

        if (link.hasClass('hover')) {
            // SECOND TAP
            return true;
        } else {
            // FIRST TAP
            link.addClass('hover');
            megaDiv.addClass('touch-device');
            $(landingLink).not(this).removeClass('hover');
            e.preventDefault();
            return false;
        }
    }); 
}

})(jQuery);

jsfiddle.net

I am currently working on setting it up so that a div element with the class .touch-device appears next to the link when tapped for the first time. However, I am facing challenges in removing the .touch-device class if another link is subsequently tapped. I'm struggling to target the div for removing the 'touch-device' class.

You can view an example of my code at:

Your assistance in resolving this issue would be greatly appreciated.

Answer №1

To eliminate the touch-device class from all tags in your HTML code, insert this snippet at the beginning of your function:

$('.touch-device').removeClass('touch-device');

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

Is the Javascript Browser Plugin currently activated?

I am currently experimenting with Google Earth and I'm trying to figure out whether the Browser Plugin for Google Earth is Enabled or not (Please note: Scenarios such as the Plugin being installed but deactivated). This is my plan on how to achieve t ...

Calculate the percentage variance across two figures (multiple occurrences)

My goal is to execute the result function for each instance of item. The desired output of the result function is the percentage calculated by dividing value / max. However, I am facing issues when using value and max as variables in the function. $(".l ...

DataTables ajax feature is not functioning

Looking to implement AJAX in this table using the following code snippet: $('#example').DataTable({ 'serverSide': true, "bPaginate": false, "info": false, "iDisplayLength":20, "bLengthChange":false, 'ajax&a ...

Every click will nudge the square to the right

I have a square that should move 100px to the right when clicked, but on the next click it moves back to the left. How can I resolve this issue? On JSFiddle, the code works fine. However, when I try to run it in Chrome, I get an error message: Cannot re ...

Insert a new class within the container div

I am looking to insert a 'disabled' class within a parent div named 'anchorxx' https://i.sstatic.net/3KRMQ.png The disabled class div can be located anywhere within the anchorXX divs Is it achievable using jquery? I am unsure how to ...

The CSS style of the Div element is not being displayed properly when embedded with JavaScript

Currently, I am working on a simple page for practice purposes. The main issue I am facing is with a div element that has a red border and a blue background. Inside the div, there is a script tag calling an external JavaScript file. Surprisingly, the JavaS ...

The hover effect on the menu button is not covering the entire button when the screen is resized

It appears that I am encountering a problem with the hover functionality. When my screen is at full size, hovering over a menu option causes the entire background color to change. However, upon resizing the screen, only a part of the background color chang ...

Toggle visibility of div based on current business hours, incorporating UTC time

UPDATE I have included a working JSFiddle link, although it appears to not be functioning correctly. https://jsfiddle.net/bill9000/yadk6sja/2/ original question: The code I currently have is designed to show/hide a div based on business hours. Is there a ...

Vue.js component still not transitioning out despite using mode="out-in"

As I navigate my way through learning about vue.js, one issue that has been puzzling me is how to make routed pages fade in and out when a user switches to a new page. Despite thinking it would be a simple task with vue, I have been struggling quite a bit ...

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

Tips for positioning bootstrap-vue dropdown button items evenly

Can anyone help me align the dropdown button child items horizontally? I've tried customizing it with CSS but no luck. The control link can be found here Check out a sample on Js Fiddle here This is how I expect the design to look like: new V ...

Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, b ...

What is the best way to update the text of a label using jQuery?

I'm currently working on updating a label text based on the input from a textbox. Is there a simpler way to achieve this without using AJAX, jQuery and PHP? Any suggestions or advice would be greatly appreciated! Below is my code snippet and a link to ...

The functionality of the date picker is hindered when a dropdown with multiple selections is activated, and conversely, the multi-selection feature of

I am working on an application where I need to implement a drop-down with multi-selection functionality, as well as a date picker for text boxes. For the drop-down with multi-selection feature, I referred to the code in the following link: . Additionally, ...

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

In order to make the attribute work in a responsive manner, I believe I need to create a class within the h2 tag. However, I am unsure where the issue lies. Could it possibly be related to the browser? Check out the image below for reference: this is my p ...

Refresh doesn't refresh

function updateImage(){ $("#fileImg").attr("src","image.jpg"); $('#fileImg').fadeIn('slow'); } function updateContent(){ $.get('content.php', function(data) { $('#content').html(data); $('#content&apos ...

What is the best way to create a unique custom control in Javascript, potentially utilizing jQuery?

My goal is to develop a custom control using JavaScript that includes methods, properties, and events, and can be rendered within a div element. For example, one such control could be a calendar. It would display in a div, with customizable properties for ...

The stickiness of elements causes scrollbars to disappear in Chrome 77 on OSX

In this scenario, I have set up two tables where the first one has a sticky header achieved with position: sticky; top: 0px; https://codepen.io/seunje/pen/JjjRVLm The sticky header works perfectly fine, but there is an issue with scrollbars disappea ...

Emphasize the center row within a moving table

I am interested in developing a scrolling table where only 10 rows are visible at any given time, with the middle row set to stand out even during scrolling. The concept is that as the user scrolls down, the highlighted row changes progressively as they c ...