It is impossible to perform both actions at the same time

Is it possible to create a progress bar using data attributes in JQuery? Unfortunately, performing both actions simultaneously seems to be an issue.

<div class="progressbar">
    <div class="progressvalue" data-percent="50"></div>
</div>

.progressbar {
    background: #9696A0;
    height: 20px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: relative;
    z-index: 3;
}
.progressvalue {
    background: #4650C8;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    z-index: -1;
    border-radius: 10px;
}

$('.progressvalue').each(function() {
    var $this = $(this);
    $this.css('width', $this.data('percent') + '%');
    $this.parent().text('tournament progress: ' + $this.data('percent') + '%');
});

The current result is as shown above in the code snippet, but ideally it should be different.

Any suggestions on how to achieve the desired outcome?

javascriptjqueryhtmlcss

Answer №1

You've encountered two problems. But worry not, here's a solution that will work like a charm. https://jsfiddle.net/usyL2vcw/1/

The first issue lies in your usage of this instead of $this. The second issue involves the inability to modify the text within a div element with children (technically possible, but it overrides the children). The trick is to make use of a neighboring span element instead.

<div class="progressbar">
    <div class="progressvalue" data-percent="50"></div>
    <span></span>
</div>

$('.progressvalue').each(function() {
    var $this = $(this);
    $this.css('width', $this.data('percent') + '%');
    $this.siblings().text('tournament progress: ' + $this.data('percent') + '%');
});

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

Restrict the quantity of items retrieved from an AJAX response

An AJAX call has returned a response consisting of a list of <a> elements: <a href="/1/">One</a> <a href="/2/">Two</a> <a href="/3/">Three</a> I am looking to select only the first n a elements from this response ...

javascriptjqueryajax

Issues encountered while trying to open and close a div using jQuery

.box-one { border: 0.1em solid #ccc; } .dropdown-info { display: none; } <div class="box-one"> <div class="header"> <h3 class="text-center">Sample Header</h3> </div> <div class="dropdown-info"> <p ...

javascriptjquery

Automatically showcase images from a directory upon webpage loading

Is there a way to modify my code so that the images from the first directory are displayed on the page when it loads, instead of waiting for a menu option to be clicked? The page looks empty until a menu option is selected, and I would like the images to s ...

javascriptjqueryhtmlcss

"Exploring the World of Android WebView with JavaScript

My app has a minimum API of 16, and I need to run some javascript on a web view. However, when I try to use mWebView.evaluateJavascript("(function()...)"); I receive a compile error indicating that this feature is only available in API 19 and higher. Ho ...

javajavascriptandroidwebview

What is the process for making an XHR request to a server located remotely

Do you think the code below is sufficient for XHRing a remote server? I tried putting the full server URL in the open method of the XHR object, but it didn't work. I'm not sure if something else needs to be added. <script type="text/javascrip ...

javascriptajaxxmlhttprequest

My router-outlet is malfunctioning when trying to display my component

I am currently diving into learning Angular 2 in order to revamp my personal website. However, I've encountered an issue where my application fails to load the component when I navigate to the appropriate route by clicking on the navigation bar. Insi ...

javascriptangulartypescriptnpm

Is there a way to retrieve the file path of the file that is imported using an alias in Vite (Vue3)?

Hello! I have a few inquiries. Is it feasible to obtain the file path of the file utilizing an alias for import in Vite (Vue3)? Setup Here's the directory structure I'm using, purely for illustrative purposes: src/ module_a/ some_ ...

javascriptvue.jsimportvite

Is there a way to modify the log() function to handle multiple arguments?

Recently, I've been utilizing this logger in node.js: // Found on stackoverflow: https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color function logC(text) { console.log('\x1b[36m%s\x1b[0m', text); ...

javascriptnode.jsdebuggingconsole.log

Enhance security in AngularJS by enabling data sharing between controllers and implementing callback functions for authentication

Currently, I am engaged in building an Angular front-end application, aiming to keep things simple without relying on tools like breeze or restangular while still maintaining code integrity. However, I have noticed that my code tends to become overly compl ...

javascriptangularjs

Issue with Angular.forEach loop malfunctioning

Here is the code for my custom filter that includes a parameter called viewbookoption, which is a dropdown value. Depending on the selected value from the dropdown, the data will be displayed in a grid. I have used a forEach loop in this filter, but it see ...

javascriptangularjs

Modify an array by incorporating values from another array that have a matching property

I have two arrays that look like this let array1 = [{ 'id': 1, 'name': 'A' }, { 'id': 2, 'name': 'B' }, { 'id': 3, 'name': ' ...

javascriptarraystypescript

Adjusting firebugx.js for compatibility with Internet Explorer Developer Tools

The firebugx.js file (viewable at http://getfirebug.com/firebug/firebugx.js) is designed to detect the installation of Firebug by checking both !window.console and !console.firebug. However, this method does not account for the native console object in the ...

javascriptinternet-explorerfirebug

Insert metadata tag into the head element of the parent iframe

I am looking to insert a meta tag element into the head element of an Iframe parent. I attempted window.parent.$('head').append('sometext'); This method worked when the source file and iframe file were in the same folder, however it d ...

javascriptjqueryhtmliframe

The functionality of Material Autocomplete is not compatible with InputProps

I am experiencing an issue with customizing the border of my TextField within my Autocomplete component. When I include the InputProps prop, the Autocomplete stops rendering Chips <Autocomplete multiple freeSolo options={options} render ...

javascriptreactjsautocompletematerial-uitextfield

Tips for manipulating specific URL redirection to an alternative URL within a NuxtJs application

Take this scenario, where the inputted URL is: http://localhost:3000/course-details The desired outcome should be a redirection to http://localhost:3000/courses I recall there being a method for achieving this, but it slips my mind at the moment. ...

javascriptvue.jsnuxt.js

Unable to use jQuery to delete class from an element

Here is the markup I am working with: <div class="row"> <img src="image.png" class="download-image regular-image" /> <div class="options"> <p>download</p> </div> <img src="image.png" class="download-image r ...

javascriptjqueryhtml

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

cssvue.jsbuttonmodal-dialog

difficulty encountered when attempting to input multiple values into a single text field

There are four boxes containing values. When clicking on a box, the value should appear in a text field separated by commas if multiple boxes are selected. <li><a href="javascript:void(0)" onclick="check_stalls('A-14')" id="A-14">A-1 ...

javascriptajax

What is the correct way to integrate a new component into my JHipster + Angular project while ensuring that the routerlink functions properly?

After creating a new application on JHipster, I wanted to add a FAQ page to my web portal. However, the default CRUD components generated by JHipster made it look more like an admin/user view table. I needed to make the FAQ page accessible to visitors with ...

javascriptangularjhipster

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

cssangularprimengng-deep