I am interested in implementing a delay when a user clicks on a button that redirects to another website, with the intention of enhancing the overall user experience

I have a unique feature on my website where there are three buttons stacked on top of each other, in different colors, on the right side. When a user clicks on one of these buttons, I want a div to slide in from the right with the same color as the button selected, covering the screen before redirecting the user to the next page.

My initial thought is to use JavaScript to delay the redirection while utilizing standard CSS animations for the visual effect. Has anyone tried this approach before? Is there a way to implement a delay action after a user clicks on a button?

Answer №1

Assume for a moment that the button is actually an anchor element (a href=..).

You could attach an eventListener to it and if it's clicked, use preventDefault to stop its default action from executing. This way, you can implement the desired animation logic.

Add a second eventListener to handle when the animationEnds and define the intended behavior in that function.

For more details, check: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

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

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

modifying the width of the primary container following the display or concealment of an alternate container

I am working on a main div that contains two separate divs for main content and sidebar content. The sidebar content can be hidden or shown by clicking a link. When the sidebar is hidden, I want the content div to occupy the entire space within the conta ...

How to use Javascript to pause an HTML5 video when closed

I am new to coding and currently working on a project in Adobe Edge Animate. I have managed to create a return button that allows users to close out of a video and go back to the main menu. However, I am facing an issue where the video audio continues to p ...

ng2-idle server side rendering problem - Uncaught ReferenceError: document is undefined

Can ng2-idle be used for idle timeout/keepalive with pre-rendering in Angular 4? I followed this link for implementation: It works fine without server pre-rendering, but when I add rendering back to my index.html, I keep getting the following error: Exce ...

Is there a method to place two items in a flex container while only centering one of them?

I managed to achieve the desired effect using absolute positioning, but I know this is not the most elegant solution and it lacks re-usability. Is there a way for me to group these two elements in a flex container and center only the text? Also, I'm f ...

Deleting a particular tag with regular expressions: a step-by-step guide

I'm attempting to remove a ul tag along with any nested tags inside it. <ul class="related"> <li><a href="/related-1.html" target="_blank">Related article</a></li> <li><a href="/related-2.html" target="_blank"&g ...

Issue with Bootstrap 4.6 Collapse Feature Failing to Toggle (Opening or Closing)

Take a look at the code snippet below. I'm facing an issue with my Bootstrap 4.6 collapse feature not opening when I click the button. Interestingly, running $("#30-50hp").collapse('show') in the JavaScript console does make it op ...

Changing the destination URL containing a hash using Next JS

In my project built with Next.js, I am facing a challenge where I need to set up a redirect for URLs containing the character "#" symbol. For instance, when a user visits /contact#support, I want it to automatically redirect to /contact-us/support First ...

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS: body { height: 95%; width: 100%; ma ...

What is the best way to create a loop within a JavaScript function?

I'm having some trouble with looping inside a function. It seems like my looping is not working properly and I need help fixing it, along with suggestions for the problem. :) Here's what I've tried: <script> function getImage1( ...

Vuejs: Limiting the number of items in an li tag to 5

selectPreviousSearch(index) { this.search = this.searchHistory[index]; this.showSearchHistory = false; }, <input class="form-control bg-light-blue" id="SearchText" type="text" v-model="search" @keydown.enter = 'ent ...

Is there a way to utilize a POST request to pass a React component from server.js to App.js for rendering?

I am new to React and JavaScript and still in the learning process :) I'm working on a magic 8 ball application where, upon clicking the button using the post method, I aim to retrieve a random answer (one of the 20 in my server.js) back to the same ...

What is the best way to obtain a distinct client identifier on the server?

Currently, I am in the process of creating an EventLog to track transaction logs on my website. This log will contain details such as the Public IP address where the transaction originated and also the local IP address associated with that public IP. I ha ...

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

Attempting to wipe out a request using ajax to access relationship entities in a ruby on rails framework

I'm currently working on implementing an ajax request to delete a "budget" (known as "orçamento" in Portuguese). These budgets are associated with a "cadastre", where each cadastre can have multiple budgets. Below, you can find the components involve ...

Navigating between various arrays

I'm struggling to create a basic slideshow using the JavaScript code below, but it doesn't seem to be functioning correctly. I have meticulously checked for any errors in spelling and made sure all elements are correctly linked to my HTML. JavaS ...

"The Divine Chalice" trichotomy format employing flexbox styling

My goal is to create a three-column layout known as the "holy grail" using the new display: flex syntax, as outlined in this ALA article. The setup requirements are: A header and footer with three columns in between The outer columns have fixed widths T ...

Unable to utilize navigator.camera.getPicture in iOS while using PhoneGap Adobe Build

I've spent hours searching, trying to troubleshoot my PhoneGap app (compiled by Adobe PhoneGap Build) and I suspect there's something crucial about PhoneGap that I'm missing. I've added the following lines to the config.xml file: <f ...

Passing data retrieved from fetch requests in ReactJS using context: Best practices

Just started learning React and need some help. I'm trying to pass variables with json data to a component for further use but running into errors. What changes should I make to use variables with json data from Store.js in the product.js component? T ...

Discovering the dimensions of an image using jQuery on various browsers like Chrome and Safari

I am new to jQuery and I am currently trying to retrieve the height of an image using jQuery. Here's the code I have written: $(document).ready(function ($) { var height = $('#testor').height(); $('.slider-container').css("h ...