How can the issue of the background fill option covering multiple loading bars be resolved?

I am currently relying on Google Translator, so there may be errors in the translation.

The issue I am facing is that when I add a parameter with the "fillColor: '#f4f5f9'", the wheel covers one of the elements of Multiple Bars.

I have modified the Multiple Bars from 4 to 2 based on the following page: https://github.com/pguso/jquery-plugin-circliful

The same problem persists even in the original script. Here is a demo of the original script: https://jsfiddle.net/0c8qaqaj/41/

Below are images illustrating the current situation and what I aim to achieve.

 <div class="row">
       <div class="col-lg-2">
           <div id="test-circle6">
               <div id="textInner">
                   <div>3h 20'</div>
                   <div>2h</div>
               </div>
           </div>
           <div id="test-circle7">
               <div id="textInner">
                   <div>4h 35'</div>
                   <div>3h 20'</div>
               </div>
           </div>          
       </div>
   </div>
<script>
   $( document ).ready(function() { // 6,32 5,38 2,34

       $("#test-circle6").circliful({
           animation: 1,
           animationStep: 5,
           foregroundBorderWidth: 10,
           backgroundBorderWidth: 20,
           textSize: 28,
           textStyle: 'font-size: 12px;',
           textColor: '#666',
           multiPercentage: 1,
           percentages: [
               {'percent': 32, 'color': '#e94e25'},
               {'percent': 20, 'color': '#878786'}
           ],
           multiPercentageLegend: 1,
           replacePercentageByText: '',
           backgroundColor: 'none',
           fillColor: 'none',
           icon: 'none',
           iconPosition: 'middle'
       });

       $("#test-circle7").circliful({
           animation: 1,
           animationStep: 5,
           foregroundBorderWidth: 10,
           backgroundBorderWidth: 20,
           textSize: 28,
           textStyle: 'font-size: 12px;',
           textColor: '#666',
           multiPercentage: 1,
           percentages: [
               {'percent': 43, 'color': '#e94e25'},
               {'percent': 32, 'color': '#878786'}
           ],
           multiPercentageLegend: 1,
           replacePercentageByText: '',
           backgroundColor: 'none',
           fillColor: '#f4f5f9',
           icon: 'none',
           iconPosition: 'middle'
       });     

   });
</script>

I have attempted to resolve this issue but have been unable to do so. Any hints or assistance in resolving this would be greatly appreciated.

Thank you and best regards.

Answer №1

Upon reviewing the code, it appears that the fill color function is recursively adding circles with color. To address this, a simple solution is to hide all fillColor circles except for the first one using jQuery.

To achieve this, simply add the following code snippet at the end of the jQuery document selector:

  $("[fill='red']").slice(1).css("display", "none");

Remember to replace 'red' with the actual fillColor value

For a demonstration, you can check out the following link: https://jsfiddle.net/52z0paw1/

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

Unable to retrieve JSON data from the remote URL

I have been attempting to retrieve information from but unfortunately, I am not receiving any data in return. Despite this, I can see the data in my response tab using Google Chrome. My attempts include running it on both a webserver and locally for test ...

Smartphone screen cluttered with overlapping paragraphs

I am encountering a paragraph overlap issue while using a bootstrap template, specifically on smartphones like iPhone 6 with Safari. Interestingly, the problem does not appear when testing on a browser by shrinking the window size to the minimum. On the ph ...

Breaking up and Substituting text within Angular 8's HTML structure

When I retrieve data from a REST api, I need to split the name parameter at '2330' and insert a line break. For example, if the name is: ABCD 2330 This is My Name, I want the output on my screen to appear as: ABCD 2330 This is My Name // this par ...

Make sure to always select the alternative option in ajax

I am trying to create a condition where if the value of id=type_investor is either 1 or 6, an email should be sent using a different controller. Here is my complete code: function (isConfirm) { if (!isConfirm) return; $.ajax({ ...

Using PHP to validate a read-only textbox

I am trying to implement validation on a Datepicker that is set to readonly, but I am facing issues with my current code. Can someone please assist me? Below is the JavaScript code used for error trapping: <script type="text/javascript"> $(func ...

What methods can be used to determine if a session is still active? Are there specific techniques that are effective for verifying session status?

After my initial experience with Web Design, I realized that the way I handled sessions wasn't efficient due to time constraints. I need advice on how to properly handle sessions in web development. In my previous project, I used PHP embedded within H ...

What is the best way to update the current route in Angular 2 programmatically?

In my Angular 2 application, I am facing an issue with the navigation flow between the home component and the nav panel component. When a user clicks on the logout button in the nav panel, the current URL is correctly shown as "/login" in the console log. ...

Utilize JQuery to identify and select every parent element, then retrieve the height of the first child element and adjust the height of the

Recently, I developed a PHP script that pulls news and case posts from a database. The HTML structure used for displaying these posts is as follows: <a href='/post/placeholder'> <div class='col nopadding col12-12 counter'> ...

ReactJS not updating when multiple checkboxes are selected

Struggling to resolve an issue with this component. I encounter an error when trying to select multiple items using checkboxes. Oddly enough, another one of my components with the same code has no error. Please take a look at my code below, any help is gre ...

Displaying an iframe in Internet Explorer

My current setup involves a button that triggers the loading and printing of a report within an "invisible" iframe enclosed in a div. This process allows users to print the report from a different page without any visual disruption or changing pages, aside ...

What are the steps to retrieve information from your personal server using Astro?

I have successfully set up a NodeJS server using Express and Astro for the frontend, with SSR configured through the Astro adapter for NodeJS. My current challenge is fetching data from the backend, and I am unsure of the correct approach to do so. Below ...

Is there a way to modify the color scheme of my webpage while utilizing Bootstrap?

As I delve into programming with Bootstrap, I encountered an issue while attempting to change the background color of my body. Even though I used the following CSS code: body { background-color: #eba; width: 100%; height: 100%; } The color change ...

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table

I need to enable users to edit information in a table. One cell in the table contains text. Here is an excerpt from the table: <table class="table table-striped table-hover" id="table_id"> <thead> <tr> <th>Event</th& ...

Tips for displaying javascript code containing variables in the executeScript method

I'm currently working on a selenium script that involves executing JavaScript code using the executeScript method. I've run into an issue when it comes to handling single (') and double quotes (") while passing variables. Not Working: js.e ...

What is the way to activate Dynamic ng-model from a controller?

I am implementing a loop in my HTML code where each iteration dynamically creates a model. Here is an example of how the loop looks: <tr ng-repeat="item in voucherItems"> <td><input type="text" ng-model="this['id-' + $index ...

The API is providing data, but it's being returned within an ambiguous object. What could be causing this confusion?

Utilizing https and async for simultaneous calls to retrieve two objects, then storing them in an array. The call is structured as follows: if (req.user.isPremium == false) { // Free user - Single report let website = req.body.website0; let builtWit ...

Plugin for turning text into "leet speak" using jQuery and Javascript

Recently, I've been on the hunt for a 1337 translator that I can seamlessly integrate into a jQuery plugin. While I believe I'm making progress, I can't shake off the feeling that something's amiss. My gut tells me that what I currently ...

A guide on implementing lazy loading for components and templates

I have successfully implemented lazy loading for components and templates individually, but I am struggling to combine the two. Here's an example of how I lazy load a component: // In my main.js file const router = new VueRouter({ routes: [ ...

A guide to filling an irregular shape (such as a star) based on a percentage using CSS in a React project

I am currently working on developing a React component that showcases a rating percentage using a star icon with two different shades. For example, if the input rating is 79%, I want to display a star with 79% of it in gold color and the remaining 21% in ...

PHP: the images uploaded are not located within the designated folder

Having trouble uploading multiple images to a folder and saving them in the database? The images are not moving to the folder, even though the code works on localhost. Here is the code snippet: var abc = 0; // Declaring and defining global incremen ...