Develop a dynamic progress bar using jQuery

I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet:

*'width' : width - seems to be causing issues for me

//vote percentage
$('.vote-percent').each(function() {
  var percentValue = $(this).find('.percent-num').text();
  $(this).find('.percent-bar').attr('data-percentage', percentValue);
  var width = $(this).find('.percent-bar').attr('data-percentage');
  $(this).find('.percent-bar').css({
    'width': width
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vote-percent flx justify-items-r">
  <span class="percent-num">65%</span>
  <div class="percent-bar"></div>
</div>

<div class="vote-percent flx justify-items-r">
  <span class="percent-num">25%</span>
  <div class="percent-bar"></div>
</div>
<div class="vote-percent flx justify-items-r">
  <span class="percent-num">10%</span>
  <div class="percent-bar"></div>
</div>

htmljquerycss

Answer №1

I have streamlined your code by removing some unnecessary steps and added a simple styling to make the bars visible.

$('.vote-percent').each(function(){
    var percentValue = $(this).find('.percent-num').text();
    $(this).find('.percent-bar').css('width', percentValue);
});
.percent-bar {
    background-color: red;
    height: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vote-percent flx justify-items-r">
    <span class="percent-num">65%</span>
    <div class="percent-bar"></div>
</div>
<div class="vote-percent flx justify-items-r">
    <span class="percent-num">25%</span>
    <div class="percent-bar"></div>
</div>
<div class="vote-percent flx justify-items-r">
    <span class="percent-num">10%</span>
    <div class="percent-bar"></div>
</div>

Answer №2

Instead of reading from the HTML text directly, it is recommended to utilize the data attribute for data retrieval.

// Displaying vote percentages
$('.vote-percent').each(function() {
  var width = $(this).data('percentage');
  $(this).find('.percent-num').text(width);
  $(this).find('.percent-bar').css({ width });
});
.percent-bar {
  background: #3c3f50;
  height: 30px;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vote-percent flx justify-items-r" data-percentage="65%">
  <span class="percent-num"></span>
  <div class="percent-bar"></div>
</div>

<div class="vote-percent flx justify-items-r" data-percentage="25%">
  <span class="percent-num"></span>
  <div class="percent-bar"></div>
</div>
<div class="vote-percent flx justify-items-r" data-percentage="10%">
  <span class="percent-num"></span>
  <div class="percent-bar"></div>
</div>

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

Ways to compel links to open in Internet Explorer

In one of my chatbot messages, I have included a link to a web app that is only compatible with Internet Explorer. My chatbot runs on Google Chrome, so when the user clicks on the link, it opens in a new Chrome tab instead of in IE, where it should open f ...

htmlinternet-explorer

`Python automation for seamless HTTP browsing and HTML document generation`

My weekly routine at work involves printing out Account analysis and Account Positions for more than 50 accounts every Monday. I have to navigate through the page, select "account analysis", input the account name, format the page for printing, print the o ...

javascriptpythonhtmlautomation

Tips for accurately placing the iOS audio player in the footer section

In my web page, I have created a simple footer that shows the currently playing track title and includes an HTML audio player. The layout looks great on desktop browsers and Android devices, but on iOS, the player is positioned far below the footer. To ad ...

htmlioscsshtml5-audio

Determine if an Android application has been installed using JavaScript or jQuery

I'm working on an Android app that is also accessible via a web browser. I want to add a banner prompting users to install the Android application if they haven't already. How can I use JavaScript or jQuery to detect if the user has the app insta ...

javascriptandroidjquery

Obtaining the XML element containing a designated attribute name

Greetings and thank you in advance, I have a question regarding the AJAX return and parsing of XML information. While I am successfully returning a request, I am fetching all the XML nodes with the tag ngPropertyName. However, I wish to retrieve only the ...

jqueryajaxxmlmobile

How can I trigger the execution of textarea HTML code with an onClick event using JavaScript?

When my fingers are lifted from the keyboard, some code will be automatically executed. I want to trigger this function when I click a button (onclick) instead of using onkeyup. <div id="result"></div> <textarea ...

javascripthtmlcss

Trigger a function upon clicking a DOM element in Vue.js

My goal is to trigger a function whenever I click on elements in the DOM that have a specific class. Despite my efforts, the functionality doesn't seem to work, and no errors are being reported. Here's the relevant code: methods: { ...

javascripthtmlvue.jsvuejs2vue-component

What is the method for retrieving the data from an XMLHttpRequest response?

Is there a way to use jQuery to query the result of an XMLHttpRequest? For example, let's say I have this code snippet: $.get('somepage.htm', function(data) { console.log($("div.abc").text()); }); The issue is that $("div.abc").text() i ...

javascriptjquery

Use React to insert a leading zero next to a number in the input field if the number is greater than 10

I have scoured the web and consulted resources like this one but haven't found a solution that addresses my specific issue with adding padding to input numbers. My goal is to automatically add a leading zero whenever the number inside an input field i ...

javascripthtmlreactjs

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

htmlcssp5.js

Determining the width of an element in Chrome using jQuery

Before adding an element to the body, I require its width. The code below functions correctly in Firefox, however it does not work properly in Google Chrome. <style> .testDiv { width:150px; height:100px; } </style> <script> var di ...

javascriptjquerygoogle-chromefirefox

Google has not detected any hreflang return tag

My website has encountered indexing errors on Google Search Console. According to the reports, many pages are showing an alternate version in a different language without the "return tag". This "return tag" is believed to be the pointer back to the origina ...

htmlseogoogle-searchcanonical-linkhreflang

How can I display a popup window when a validation event occurs?

Having trouble finding a suitable solution for my problem. Our MVC 3 application includes a form with Data Annotations for validation. The Email field has a RemoteAttribute to check for uniqueness. Here's what needs to be implemented: If the Email ...

jqueryajaxasp.net-mvc-3validationdata-annotations

Transforming vanilla JavaScript into jQuery

Is there a more efficient way to write this code using jQuery? It's functioning properly in Firefox but not in Safari or Chrome without any error messages, making it difficult for me to troubleshoot. Any suggestions or insights would be greatly appre ...

javascriptjquery

Combining various types of data into a single dataframe

I have been attempting to extract information from the following website: My ultimate objective is to create a dataframe containing the data from the table, and also add a new column that includes the players' index. For instance, for the top player, ...

pythonhtmlweb-scrapingbeautifulsoup

Manipulating Classes with jQuery: Adding and Removing

I am in need of a specific script that can dynamically add the number 2 to the end of a class within a div element with the ID of .sideboxtopleft when a link with the ID of posts is clicked. <script> $(".posts").click(function () { if ($(& ...

jquery

The wells are surpassing the line

I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...

csstwitter-bootstraptwitter-bootstrap-rails

Using ReactJS and Ruby on Rails to implement an AJAX delete request

There is a component named Items residing inside a parent component called ItemsContainer. A click on a button within the Items component triggers an Ajax function to delete that specific Item. However, I am encountering a 500 error message at the moment ...

javascriptjqueryruby-on-railsajaxreactjs

Is it possible to update the text within a button when hovering over it in Angular?

I'm looking to update the text displayed inside a button when hovering over it, similar to the examples in these images. I have already implemented the active state, but now I just need to change the text content. <button type="submit" ...

htmlcssangulartypescriptfrontend

Creating a nested function and utilizing the return statement in JavaScript

I am facing an issue with my custom function that contains an ajax call. I need to retrieve a variable from the ajax function within my custom function, but I'm unable to do so. Why is this happening? Possible solution 1: <script> function ...

javascriptjqueryajax