I manage an online shop using WooCommerce that includes a filter for selecting product colors. The available color options are black, blue, and white. When customers choose a color option, only the products in that specific color will be displayed automatically. Each product thumbnail has a border with a grey color. I aim to customize the product image border color based on the selected color option.
Any suggestions would be greatly appreciated :)
One of the main obstacles we face is that WordPress destroys and recreates blocks with paintings, so I implemented a 600ms delay for frames to update in order to overcome this issue. While this workaround does function, it may not be the most optimal solution.
radios = document.querySelectorAll('.jet-color-image-list__item');
function getSetColor(index) {
setTimeout(() => {
buttons = document.querySelectorAll('.jet-color-image-list__row.jet-filter-row');
holder = document.querySelectorAll('.elementor-jet-woo-products');
frames = document.getElementsByClassName('jet-woo-product-thumbnail');
for (i = 0; i < radios.length; i++) {
if (radios[i].firstElementChild.checked) {
activeColor = buttons[i].firstElementChild.lastElementChild.firstElementChild.firstElementChild.style.backgroundColor;
}
}
for (i = 0; i < frames.length; i++) {
frames[i].style.borderColor = activeColor
}
}, 600);
};
for (i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', getSetColor);
};
Imagine a situation where a list of elements is loaded dynamically in chunks at runtime. Whenever you scroll the page, more data is fetched and displayed. I am currently looking for a way to determine if I have reached the bottom of the page after scroll ...
Is there a way to make the navbar active when it is clicked? Below is the jQuery code I am currently using: $(document).ready(function () { $('.navbar li').click(function(e) { $('.navbar li').removeClass('acti ...
In our extensive solution, we are managing various projects with Karma & Jasmine Tests. Utilizing Jenkins for continuous integration, our goal is to streamline the process by running the Karma execute command just once. This means eliminating the need to m ...
I've been experimenting with Ajax and jQuery to create a dynamic menu that displays the top 10 categories of products in my online store. When the user clicks on "Show More," the menu expands to show additional categories. The button labeled "Show Mo ...
After creating a button in a sub-menu that should change color when clicked, I am struggling to make it work. Below is the code for the button: In addition to this code snippet, I have added more code which can be found here I also want to change the co ...
I'm experiencing a small issue where I am unable to remove the link reference from the print view. Below is the HTML code snippet: <table style="width: 436px; height: 374px;" border="0" cellpadding="5"> <tbody> <tr style=" ...
https://i.sstatic.net/nhXHL.png I have implemented tabs in my project, but I am unable to change the background indicator: const theme = createTheme({ MuiTabs: { root: { styleOverrides: { indicator: {backgroundColor: "red !i ...
I need assistance with handling multiple ng-models spread across 2 partial HTML files. Here is the content of partial1.html: <input ng-model="A" /> //user input for A <input ng-model="B" /> //user input for B <input ng-model="C" /> //us ...
I came across a strange issue. Check out the sample gif below. https://i.sstatic.net/VonaW.gif In the gif above, you can see that the images on the right-hand side correctly apply the ease-out filter effect. However, the other images do not. This issue a ...
Currently, I am in the process of developing an isomorphic/universal React + Redux + Express application. The method I use for server-side data fetching is quite standard: I identify the routes that match the URL, call the appropriate data-fetching functio ...
Currently, I am in the process of working on a JSFiddle and find myself a bit puzzled by a certain aspect. Within my project, I have an input box named myTextField which contains a random paragraph. Additionally, there is a button that triggers my change f ...
I am faced with a challenge where I have multiple image tags nested within a div that has the class google-image-layout. Each image is equipped with various data attributes, including: data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" da ...
I am encountering an issue with a specific part of my program and although I have identified the problem, I am unable to find a solution on my own. Therefore, I am reaching out for your assistance. It seems like the problem does not lie within the serialp ...
Is it possible to add a CSS class in AngularJs based on the row index's presence in an integer array ( $scope.AssociateCandidatesIndex) using filters? Any suggestions on how to accomplish this? <tr ng-show="true" class="{{ $index}}"> < ...
I've set up a form using Get Response (the email client) and I'm attempting to implement ajax in order to display a custom success or failure message upon submission. The code seems to be functioning correctly. However, as soon as I connect the a ...
How can I dynamically update text inside a span based on matching classes and attributes without hardcoding them all? An ideal solution would involve a JavaScript function that searches for matches between span classes and select field options, updating t ...
I'm struggling to display detailed information for each country separately. Whenever I try to loop through the data, all the contents end up getting merged into a single cell. What can I do to achieve the desired result? https://i.stack.imgur.com/dZS ...
<html> <head> <script type="text/javascript"> var oauth = chrome.extension.getBackgroundPage().oauth; </script> <style type="text/css"> #note { display:none; } </style> <script src="Task.js" type="text/javascript"> ...
How can I eliminate the row color changing behavior in AgGrid tables when a row is selected and hovered over using React? Currently, a default dark gray color is applied when I hover over certain elements of a selected row, which is not desired in my imple ...
I'm trying to make the page scroll to a specific position when a button is clicked. The code I currently have works fine on browsers like Chrome and IE, but doesn't seem to work on any mobile browser. Below is the code snippet I am using: $("#p ...