Continuously tapping on overlapping slides

I encountered an issue where the slide that I set the opacity to 0 on is still clickable, despite setting pointer events to none. In my slideshow, consisting of 2 slides, clicking on the first slide redirects me to the hyperlink of the second slide. Check out this image for reference. The code seems to be correctly changing the pointer event and opacity, yet the problem persists on the website.

        //programming slideshow

        $(function () {
            var slide_index = 1;
            displaySlides(slide_index);
            function nextSlide() {
                displaySlides(slide_index++);
            }
            function prevslide() {
                displaySlides(slide_index--);
            }
            function displaySlides() {
                var i;
                var slides = document.getElementsByClassName("programming-slides");
                if (slide_index > slides.length) { slide_index = 1 }
                if (slide_index < 1) { slide_index = slides.length }
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.opacity = 0;
                }
                slides[slide_index - 1].style.opacity = 1;
                for (var i = 0; i < slides.length; i++) {
                    // If the slide is not visible, set its pointer-events to none
                    if (slides[i].style.opacity === '0') {
                        slides[i].style.pointerEvents = 'none';
                    } else {
                        // Otherwise, set its pointer-events to auto
                        slides[i].style.pointerEvents = 'auto';
                    }
                }
            }
            var next = document.getElementById('programming-next');
            next.addEventListener('click', nextSlide);

            var prev = document.getElementById('programming-prev');
            prev.addEventListener('click', prevslide);
        })

Answer №1

After implementing a z-index adjustment in the JavaScript code for the slides and making some modifications to other CSS elements, the issue of overlapping was successfully resolved. As a result, all features are now functioning properly.

for (let i = 0; i < slides.length; i++) {
  // Check if the slide is visible
  if (slides[i].style.opacity === '0') {
    slides[i].style.pointerEvents = 'none';
    slides[i].style.zIndex = 0;
  } else {
    slides[i].style.pointerEvents = 'auto';
    slides[i].style.zIndex = 1;
  }

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

End of ImageButton tag

I am currently working on this code : <div runat="server" class="slide"> <img src="images/picto_detail.gif" onclick='<%# Eval("CampagneRappelId","hideshow(\"details{0}\")")%>' /> <div id='details<%# Eval("C ...

Modify the layout of a JSON data structure

Here is an example of an array: let array = [ {1: { "date": "2014-04-23 00:00:00", "volumetrie": "22458" }}, {2: { "date": "2014-05-02 00:00:00", "volumetrie": "30585" }}, {3: { "date" ...

Is there a method to bypass the need for app.get() for each static file in express?

As I delve into using express.js, I'm faced with the task of serving numerous static files from my server - whether it's a .css, .jpg, .svg, .js, or any other file type. Is there a way to accomplish this without having to manually use app.get() f ...

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

I am facing an issue with the asynchronous function as it is displaying an error message

**I am facing an issue with displaying categories. I have attempted to do this using async function, however the data is not showing up** <div class="form-group"> <label for="category">Category</label> <select id="categor ...

Developing user registration and authentication using Backbone.js in conjunction with Django Rest Framework

In the process of developing my app, I am utilizing backbone.js for the frontend and django-rest-framework for the backend. My goal is to enable user registration, login, logout functionality, and be able to verify whether a user is logged in using backbon ...

Parsing Json data efficiently by utilizing nested loops

I have 2 different collections of JSON data, but I'm unsure of how to utilize JavaScript to parse the information. Data from API1 is stored in a variable named response1: [{"placeid":1,"place_name":"arora-square","city":"miami","state":"florida","c ...

How to store and retrieve images using the Google Drive API in a Node.js application

I am new to working with Node.js. I have been exploring how to route an incoming image from the Google Drive API without having to download it first, as that process takes too long. My goal is to send the image directly to the client once I receive it. I ...

Error Encountered While Submitting Email Form

I'm having trouble with my email submission form on my website. I've checked the code and it seems fine, but for some reason, the submissions are not going through successfully. Even when bypassing the JavaScript and directly using the PHP script ...

javascript problem with class method for loading json file

I've encountered an issue with my class setup below. Despite most things working, the console keeps throwing an error when json.onload is triggered. The error message reads "Uncaught TypeError: Cannot read property of 'push' of undefined". ...

Dragging and dropping elements on the HTML Canvas with the added feature of snap functionality

I have implemented a drag-and-drop circle feature inside an HTML canvas with the following code: var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); width = c.width = window.innerWidth * 0.9; height = c.height ...

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

I need help with a jQuery sortable feature where I have two lists and can move items between them: $( '#productsList, #orderList' ) .sortable({connectWith: '.containerDiv'}) .disableSelection(); My issue arises when I try to implement ...

CSS hover effects are not displayed when using the input type button

I'm having issues with my hover effects not showing: <input type="button" class="button" value="Click"> However, this code works fine: <button class="button">Click</button> The CSS codes are ...

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

I'm currently experiencing a challenge with adjusting the text on two specific pages. On one side, there is a box with text, while on the other are two MDL cards displaying dialogues. The trouble arises when I try to set a fixed position for the text ...

Issue with onClick event not firing when using option tag in React

onClick event seems to have an issue with the <option> tag. How can we successfully use the onClick event with the select option tags while assigning different parameters to each option? async function setLanguage(language) { ...

Example of a simple router template without URL access

I am currently working on a basic example of react router with two simple routes, greetings and signup, set up within a template. Everything seems to be loading fine without any errors, but when I manually enter the /signup route in the address bar, I enco ...

Is it possible to modify the appearance of the element that was just clicked on?

Hello everyone, I'm currently working on a form with different inputs, all with the same class: <input type="text" name="username" class="field" /> <input type="text" name="email" class="field" /> I'm trying to figure out how to ch ...

The request made in Node.js encountered an error with a status code of

I can't figure out why I keep receiving the status code 403 when running this code. My objective is to authenticate with Instagram. var request = require("request"); var options = { url:'https://www.instagram.com/accounts/login/', ...

Tips for continuing code execution in an ajax success function following the completion of a nested ajax call within the success block

I am facing an issue with a function that utilizes $.ajax. In the success section of the function, I have three nested functions. The first one executes properly, but the second one contains another $.ajax call. While the internal $.ajax call works fine, t ...

My goal is to utilize CSS grid to craft a unique layout by establishing a grid area. However, the layout is not functioning as anticipated

Currently, I am in the process of mastering CSS grid layout design. If you are curious to see my progress so far, check out this Codepen link showcasing my code. Additionally, for a visual representation of the layout, feel free to view the layout image ...