After my data rows are filled, I add jQuery and CSS striping animations to enhance their appearance

Question

After my data rows are filled, I add jQuery and CSS striping animations to enhance their appearance

Before any click, they have this appearance:

Clicking on Sales in the business section reveals a drop-down select box. If I click on "Sales" and modify the text area, it will transition to grey. While the grey rows change accordingly, the black rows should fade to black, not grey.

After making a selection:

I changed Sales to property, and after applying the animate() function, it turned grey and disrupted the striping pattern.

This is my function:


success: function (result) {
if (result) {
//Update the verbiage of the ".look" element to match the new value from the ".touch" element
theLook.text(newDes);

//Switch out the elements so that it resembles a normal table cell again
back_to_look();

//Briefly highlight the span within it so that the user knows the modification was successful
theTd.css('background-color','#59b4d4').animate({ backgroundColor: "#333333" }, 1500);
} else {
//Flash the ".touch" element in red without reverting back to the ".look" element as there was an issue with updating the data
var oldColor = theTouch.css('background-color');
theTouch.css('background-color','#ff0000').animate({ backgroundColor: oldColor }, 1500);

How can I retrieve the original background color setting and restore it? Do I need to specifically target the CSS using jQuery's css() method?

jquery css jquery-animate

Answer 1

Answer №1

Here is a better way to handle the background color change:

theTd.css('background-color','#59b4d4').animate({ backgroundColor: "#333333" }, 1500);

This code snippet changes the background color back to #333333 after the flash effect. To improve this, try using the following code:

var currentColor = theTd.css('backgroundColor');
theTd.css('background-color','#59b4d4').animate({ backgroundColor: currentColor }, 1500);

Instead of directly assigning the backgroundColor: #333333 in the animate function, we create a variable called currentColor to store the current background color of the table cell being edited.

By doing this, we ensure that the table cell reverts to its original color once editing is complete. This modification ensures flexibility and maintains consistency with the original background color. In the updated code, we set the background color to the currentColor variable instead of specifying it as #333333.

Answer 2

Here is a better way to handle the background color change:

theTd.css('background-color','#59b4d4').animate({ backgroundColor: "#333333" }, 1500);

This code snippet changes the background color back to #333333 after the flash effect. To improve this, try using the following code:

var currentColor = theTd.css('backgroundColor');
theTd.css('background-color','#59b4d4').animate({ backgroundColor: currentColor }, 1500);

Instead of directly assigning the backgroundColor: #333333 in the animate function, we create a variable called currentColor to store the current background color of the table cell being edited.

By doing this, we ensure that the table cell reverts to its original color once editing is complete. This modification ensures flexibility and maintains consistency with the original background color. In the updated code, we set the background color to the currentColor variable instead of specifying it as #333333.

Answer 3

Answer №2

If you want to find out the background color, you can simply use this code:

$(document).on('click', 'div', function () {
    var x = $(this).css('background-color');
    hexColor(x);
    alert(color);
});

function hexColor(colorValue) {
    var parts = colorValue.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i], 10).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

Check out an example online

Answer 4

If you want to find out the background color, you can simply use this code:

$(document).on('click', 'div', function () {
    var x = $(this).css('background-color');
    hexColor(x);
    alert(color);
});

function hexColor(colorValue) {
    var parts = colorValue.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i], 10).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

Check out an example online

After my data rows are filled, I add jQuery and CSS striping animations to enhance their appearance

Answer №1

Answer №2

Similar questions

Is there a way to eliminate the default arrow on a list input and replace it with a custom arrow solely with html and css?

Adjust the properties within the component's styles using Angular 2

Sending form information through AjaxPassing information from a form using

The functions Show() and Hide() may not work in all scenarios within jQuery

What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

Staggered Drop-Down Menus

Pass data between JavaScript and PHP using the Phaser framework

I am encountering an issue where my input is moving to the following line after the initial one. What could be

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

"Choosing the text within an <a> tag: A step-by

When you click on an anchor tag, the divs do not automatically move to the top of the page

Does the jQuery selector match an unset class?

What causes the off-canvas menu to displace my fixed div when it is opened?

The .prepend() method receives the variable returned by ajax and adds it

Creating a custom fav icon within a button with CSS styling

Selecting content loaded via Ajax using jQuery

Vue.js - dynamically applying CSS classes based on conditions

Issue with Mobile Touch Screen Preventing Vertical Scrolling

Troubleshooting unexpected character error in jQuery Ajax call with ColdFusion 9: JSON parsing issue

Dynamic Select Box with Display of 2 Buttons