Why does jQuery only load once the loading process has been completed?

I want to enhance user experience by adding a blue rectangle with a :focus class when a product is clicked on before the next page loads.

To achieve this, I implemented jQuery functionality that changes the class of the clicked product and adds a new class with a box shadow effect.

However, I'm facing an issue as this feature only seems to work on desktop devices and not on mobile devices.

$(document).ready(function() {
  $('div.product-container').on('click', function() {
    $(this).addClass('aftertap');
  });
});
.aftertap {
  -webkit-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  -moz-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
}
<div class="product-container style1 clearfix" itemscope="" itemtype="http://schema.org/Product">
  <div class="left-block">

    <div class="product-image-container">

      <a class="product_img_link" href="http://localhost/prestawebserver/forward/102-cropped-leggings-performance-cotton.html" title="Cropped Leggings - Performance Cotton" itemprop="url">
        <img class=" img-responsive" src="http://localhost/prestawebserver/1065-home_default/cropped-leggings-performance-cotton.jpg" alt="cropped-leggings-performance-cotton" title="cropped-leggings-performance-cotton" itemprop="image">
      </a>
    </div>
  </div>

javascriptjqueryhtmlcss

Answer №1

Here's a suggestion to improve your code: instead of using the click event on a div, try using it on an anchor's click event.

$(document).ready(function() {
  $('a.product_img_link').on('click', function() {
    $(this).parents('div.product-container').addClass('aftertap');
  });
});
.aftertap {
  -webkit-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  -moz-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-container" tabindex="1">
  <a class="product_img_link" href="http://localhost/prestawebserver/forward/102-cropped-leggings-performance-cotton.html" title="Cropped Leggings - Performance Cotton" itemprop="url">
    <img class=" img-responsive" src="http://localhost/prestawebserver/1065-home_default/cropped-leggings-performance-cotton.jpg" alt="cropped-leggings-performance-cotton" title="cropped-leggings-performance-cotton" itemprop="image">
  </a>
</div>

Answer №2

If you want to add a delay before moving to the next page, you can create a simulated delay using setTimeout (you can adjust the delay time based on your needs, in this example it's set to 800 milliseconds)

$('div.product-container').on('click', function(){
    $(this).addClass('aftertap');
    setTimeout(function(){
         $(this).closest('a').click();
      },800);
});

Check out this working jsfiddle for reference

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

The camera isn't placed within the three.js Skybox

I'm currently working on a 3D solar system project that involves a rocket orbiting around a planet. I attempted to follow this tutorial (https://www.youtube.com/watch?v=7fJgVyq0OYo) to create a skybox for my planets to exist within. Although no errors ...

javascriptthree.js

Using JavaScript with Node.js to wait for a promised array to resolve

I'm encountering an issue with the promised array in my code: I have a function inside a switch statement that loads an array from an API Here is an example: let sorted = [] let limit = 10 async function loadPage(slcLimit) { let i let filter = ...

javascriptnode.jsarraysasync-await

How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: https://i ...

htmlcss

Unusual CSS media queries behavior

During my project work, I faced a puzzling issue which can be illustrated with the following example: Here is the sample CSS code: *, *::after, *::before { box-sizing: border-box; margin: 0; border: 0; } @media only screen and (max-width ...

htmlcssmedia-queries

Unlock the power of Validate.js with custom validation promises

I'm still fairly new to promises and I was wondering how I can achieve something similar to await in C#. The issue I'm facing is that while my payload validation for product does check if it exists, it seems to skip the database validation step ...

javascriptnode.jspromisebluebird

Turn off link preview feature on Android messages

As a developer, I am looking for a way to disable or hide link previews on Android devices when someone receives a text message with a link to our website. I still want the URL address to be visible, but I prefer to keep the link previews on IOS devices. I ...

javascriptjqueryhtml

What could be the reason that I am unable to absolutely position generated content in Firefox?

I am currently designing a horizontal navigation bar and here is the CSS I have used: #topnav { clear: both; overflow: hidden; display: table; } #topnav ul { display: table-row; } #topnav ul li { display: table-cell; vertical-ali ...

cssfirefoxcss-selectors

Adjusting the height of the Bootstrap Modal Container can be a challenging task, especially when there are changes in the

I've been struggling to figure out why my initial modal step is not initializing at the correct height. The angular directive I'm using to set the parent div's height doesn't seem to work on the first modal step. Any ideas why? You can ...

jqueryangularjsangularjs-directivebootstrap-modal

Achieving a tidy layout with child divs inside a parent div

I'm struggling to figure out how to arrange objects with margins inside a parent div. Initially, I thought using float would do the trick, but I quickly realized it wasn't the solution. This results in an unsightly amount of space. The divs that ...

htmlcss

Troubleshooting: Difficulty with jQuery script to change images

I am trying to modify the src attribute of an img tag using the code below, but it doesn't seem to be working. Can anyone help me figure out what's wrong? <img id='logo_image'/> <span onclick='$(logo_image).attr("src", "i ...

javascriptjqueryhtml

Incorporating HTML5 Video Using an AJAX Request

I am attempting to fetch a video using an ajax query, but it seems that the video player control buttons are missing. Here is the code I am using: $.ajax({ context: document.body, url: "/?get=json&act=video", type: "get", success: fu ...

javascriptjqueryajaxhtmlhtml5-video

Is it possible for jcarousel to interact with a database as well?

Hey there, I've been searching everywhere but couldn't find any information on how to make jcarousel work with a database. That's why I'm reaching out here for some help. I have a page where I'm using jcarousel. css js Currently ...

javascriptcssasp.netc#-4.0jcarousel

HTML formatting for text

I recently created an HTML website using Dreamweaver. I faced an issue while trying to design a section within an article using tables to incorporate both text and images. Unfortunately, the tables did not have rounded edges as I desired. I am reaching out ...

htmlcsshtml-tableformatting

What is the method for providing a date format choice in JSON?

I am encountering an issue in my PHP script where I use JSON to pass parameters. When I pass the date as "09-09-2015", it functions correctly. However, when I try to pass the date as $date, it does not work. How can I resolve this problem? $item1 = "test ...

javascriptphpjson

CSS-enhanced automatic scrolling

On my WordPress website, there is a project slider that consists of images with text. Currently, the slider does not auto-scroll and requires manual navigation using buttons. If I want to eliminate the need for buttons and make the slider scroll automatic ...

cssanimationscroll

Angular 2 Integration for Slick Carousel

Greetings! I have recently ventured into Angular 2 and am currently attempting to get a carousel plugin called slick up and running. After some trial and error, I have successfully implemented it as a Component in the following manner: import { Component ...

javascriptangularslick.js

Set the page to be rigid instead of flexible

I'm struggling to lock this webpage in place, so it doesn't resize when the browser window changes. The text keeps collapsing whenever I adjust the size of the browser, and I can't figure out what's going wrong. Can someone please help ...

htmlcss

Issue with AngularJS for loop incorrectly incrementing when there is a single item in the array

Within my Angular application, there is a snippet of code that looks like this: for (var i = 0; i < $scope.itemList.length; i++) { if ($scope.itemList[i].serialNumber == quickCode) { console.log(i) returnsService.getNoReceiptErrorMe ...

javascriptangularjsangular-services

Building Nested Divs with JavaScript

I've encountered an issue with this code snippet. While it works perfectly fine in jsfiddle, I faced a problem when testing it on my local file. Only the first three lines created by html are displayed: test h1 test h2 test p (I tested the code ...

javascripthtmlcross-browser

Insert a hyperlink into a button through Javascript by modifying the window

For my text adventure game, I need one of the option buttons to act as a hyperlink that directs players to another webpage. Currently, my code looks like this: <article> <div id="text"></article> </div> <input id=" ...

javascripthtmlbuttonhyperlink