Is there a way to temporarily toggle classes with jQuery?

Incorporating ZeroClipboard, I have implemented the following code to alter the text and class of my 'copy to clipboard button' by modifying the innerHTML. Upon clicking, this triggers a smooth class transition animation.

client.on( "complete", function(client, args) {
            this.innerHTML = 'Copied to Clipboard';
            $( this ).removeClass( "btn-info" ).addClass( "btn-success", 357 );         
            });

I am looking for a solution that would enable me to make this class and innerHTML modification temporary. For instance, changing the class (to btn-success) only for a few seconds to indicate that the button was clicked, then automatically reverting back to its original class (btn-info). Also, removing the additional innerHTML = 'Copied to Clipboard'.

The desired class transition sequence would be: btn-info > btn-success > btn-info. Additionally, it should revert the innerHTML back to its original content (as each button has different innerHTML).

I attempted experimenting with toggleClass without much success so far.

javascriptjquerycsszeroclipboard

Answer №1

One effective method is to implement a basic timeout feature

client.on("complete", function (client, args) {
    var html = this.innerHTML;
    this.innerHTML = 'Content Copied';
    var $this = $(this).removeClass("btn-info").addClass("btn-success");

    //clearing previous timer
    clearTimeout($this.data('completeToggler'))
    var timer = setTimeout(function () {
        $this.addClass("btn-info").removeClass("btn-success");
        $this.html(html)
    }, 2000);
    $this.data('completeToggler', timer);
});

To see it in action: Try the Fiddle

Another approach is using toggleClass()

client.on("complete", function (client, args) {
    this.innerHTML = 'Content Copied';
    var $this = $(this).toggleClass("btn-info btn-success");
    setTimeout(function () {
        $this.toggleClass("btn-info btn-success");
    }, 2000)
});

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

Issue with Laravel ReactJs: My changes in the ReactJs file are not being reflected on the website

I've been utilizing Reactjs within Laravel. Recently, I made some modifications to my React Component and upon refreshing my browser, the changes did not reflect. Here are the files involved: resources/views/welcome.blade.php <!doctype html&g ...

javascriptreactjslaravelmaterial-ui

Creating a Validation Form using either PHP or JavaScript

I need to create a form with the following columns: fullname, email, mobile, and address. If the visitor fills out the mobile field, they should only be allowed to enter numbers. And if the visitor fills out the email field, they should only be allowed to ...

javascriptphphtmlajax

Tips on making anchor links using the unique ids for individual blog posts

I've encountered a challenge with what I initially believed to be a straightforward issue. I'm attempting to automate the generation of anchor links for a set of blog posts. I've been experimenting with the each() command to iterate through ...

jqueryloopseach

Leveraging multiple ">" CSS selectors

Here is the HTML code to style: <table id="my-table"> <tr> <td> I would like to customize this </td> <td> <table> <tr> <td> Not looking to customize t ...

htmlcss

iOS CORS ajax request is stuck at state 0 during processing

I am facing an issue with making a CORS login AJAX call from my iPhone using $.ajax. The request fails and reaches the fail callback, showing the jqXHR object state as: { readyState: 0, status: 0, statusText: "error" } Strangely, on my PC the request ...

javascriptjqueryajaxnode.jscors

Transform a numerical variable into a string data type

I am faced with a situation where I have a variable named val which is currently set to the number 5. Now, my goal is to update the value of val so that it becomes a string containing the character "5". Could someone guide me on how to achieve this? ...

javascriptnode.js

Retrieve the scrollTop, scrollLeft properties, and other scroll-related data from an element using Selenium

When testing a Python/Django element that is scrolled using scrollTop, I am trying to retrieve the value of scrollTop. In JavaScript, I can access this value with: element.scrollTop I attempted to do this in Python using: element.get_attribute('sc ...

javascriptpythondjangoseleniumwebdriver

Custom jQuery plugin does not trigger click event

I recently discovered JQuery and decided to incorporate a plugin I stumbled upon for flipping images. The plugin can be found here. After adding the JavaScript library to my asp.net project, I utilized the flipOut method specified in the plugin. <scri ...

jqueryasp.netjquery-uijquery-plugins

Incorporate attributes into object properties in a dynamic manner

Currently, I am experimenting with bootstrap-multiselect and my goal is to incorporate data attributes into the dataprovider method. Existing Data Structure: var options = [ {label: 'Option 1', title: 'Option 1', value: ' ...

javascriptjquerybootstrap-multiselect

Issue encountered with SQL server 2008 due to connection error

My current struggle lies in the connection I am attempting to establish with SQL Server. Unfortunately, whenever I try pressing the period key or entering the server name, I encounter difficulty connecting to SQL Server. ...

javascriptc#asp.net

Save user information to initialize rootScope upon refreshing the page

I'm looking for a way to retain a User Json Object in such a manner that I can use it to initialize my $rootScope.user Json Object with the saved information even after refreshing the page. The storage should persist as long as the browser window rem ...

javascriptangularjsjson

Could someone please explain why my ajax is not functioning properly?

I have been working on an AJAX function to pass input values from one page to another. However, I am facing a challenge where the value is not being passed as expected after redirection. Despite my efforts, I cannot figure out why it's not functionin ...

javascriptjqueryhtmlajax

Mocha: A Unique Perspective on Testing the express.Router Instance

As I was developing a JavaScript controller file, I came across the need to test if my controller instance contains an instance of the express method called Router(). import {assert} from 'chai'; import {UF_Controller} from '../../controlle ...

javascriptunit-testingecmascript-6mocha.js

What is the process for incorporating multiple HTML pages into an Ionic hybrid mobile application?

Struggling to combine my sign in and sign up pages into a single index.html page. I'm currently working on a project involving Hybrid mobile app development. ...

javascripthtmlangularjsionic-framework

What is the best way to combine two JSON objects within the same array based on their IDs located in another array?

I am dealing with a large JSON array that contains multiple objects and arrays. I need to combine two types of objects together. For example, numbers 1-10 represent "Froms" and numbers 11-20 represent "Tos". I want to merge Froms and Tos, displaying them ...

javascriptangularjsjsonionic-frameworkangular

Having trouble integrating the circular progress bar into the movie card and getting it to align properly

Struggling to position my react circular bar for movie rating in the bottom corner of the movie card. The classes are not working as expected, even though I tried to replicate it from another website using React and SCSS while I'm utilizing Material-U ...

javascriptreactjssassmaterial-ui

Ways to determine if the keys of an object are present in an array, filtered by the array key

Working on an Angular 2 Ionic application and I'm wondering if there's a straightforward way to filter individuals by age in a specific array and then verify if any key in another object matches the name of a person in the array, returning a bool ...

javascripttypescript

Persist form input data using ajax without any back-end server logic involved

Is there a solution for saving basic form data from a static webpage without using any server-side code? I have thought about potentially using MongoLab through a RESTful interface, but that would mean exposing API credentials on the client side and the ...

javascriptajax

Error in .ajax - 'a' is not defined. If 'a' exists, call it, otherwise, display an

I am trying to understand why the following code works: var addresses = {"2-avenue-bir-hakiem": "2 Avenue Bir Hakiem", "56-rue-marcel-pagnol": "56 rue Marcel Pagnol"}; but this code does not work: var addresses = json.val; Even though my JSON output is ...

jqueryajaxeach

NodeJS/express: server became unresponsive after running for some time

Initially, my service using express and webpack ran smoothly. However, I started encountering an issue where the server would hang with no message code being received, as shown in the server message screenshot (server message screenshot). This problem kept ...

javascriptnode.jsreactjsexpresswebpack