Width of the progress bar

My goal is to dynamically set the width of my progress bar based on a calculated percentage. As a beginner, I admit that my code may not be optimal:

JQuery

$(document).ready(function() {
var width=(1/5*100);
$('#progress_bar').css('width','=width + "%"');
});

HTML

<div id="progress_bar" style="height:1em; background:red; display:block;"></div>

I would greatly appreciate some help from anyone who has a moment to spare in getting this code to work correctly and pointing out any mistakes for me to learn from.

http://jsfiddle.net/SyxAM/

jquerycsswidthvar

Answer №1

It is not acceptable to use the string: 

'=width + "%"' as a CSS parameter value.</p>

<p>A better approach would be to use:</p>

<pre><code> $('#progress_bar').css('width', width + "%");

Answer №2

Here is the solution to your issue:

let progress = 20;

$('#progress_bar').css('width', progress + "%");

​

Answer №3

The way you added the variable was incorrect. The correct method is shown below:

$(document).ready(function() {
var width=(1/5*100);
$('#progress_bar').css('width', width + "%");
});

For a working example, please visit http://example.com

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

material-icons appear differently when letter-spacing is applied in iOS browsers

To display levels using star icons from angular material, I wanted the stars to be shown next to each other. I attempted to achieve this by applying letter-spacing: -0.25rem;, but unfortunately it did not render correctly on iOS platforms (resulting in s ...

cssiosangularicons

Modifying the color of a header through clicking on a specific anchor link

My goal is to create a fixed side nav bar on my webpage with an unordered list that links down the page using anchors. In addition, I want to dynamically change the color of an h2 element based on which item in the fixed nav bar is clicked on. For instan ...

javascriptjquerycolorshtml-lists

Incapable of stacking one canvas on top of another

I'm new to javascript and looking for help with positioning a canvas element behind another. The code I have may be a bit messy, so any assistance is greatly appreciated. My goal is to have the canvas named "myCanvas" appear behind "coinAnimation". Th ...

javascripthtmlcsscanvas

What is the code for a basic JavaScript timer that counts down?

Looking to implement a countdown timer that starts at 30 seconds when the function is executed and counts down to 0. No need for milliseconds. Any suggestions on how to code this? ...

jquerytimercountersetintervalclearinterval

What could be causing the sporadic functionality of my jQuery image resizing code?

Seeking help for an issue I am facing with my jQuery code. I have been trying to scale a group of images proportionally within an image carousel using jCarousel Lite plugin. However, the resizing code seems to work randomly and I can't figure out why. ...

javascriptjquerycssjcarousellite

Vulnerability Alert: Manipulating Links using JQuery (DOM-based)

Recently, a Link manipulation (DOM-based) issue was uncovered using BURP suite regarding /jquery-3.3.1.js The flaw is found in the following code snippet: // Anchor tag for parsing the document origin originAnchor = document.createElement( "a" ); origi ...

jquery

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

javascripthtmlcssvue.js

"Does anyone know of a specific jQuery function that allows for mapping a collection, where the `end`

I have a query that searches for specific elements within a selected area: $(some_selector_here).find("ul li.active a span") I am looking for a function that can loop through this collection of elements and provide access to the complete stack of base el ...

javascriptjquery

Create a randomly generated value in a JSON format

{ "description": "AppName", "name": "appName", "partnerProfile": { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19090b1969c90989ddf929e9c">[email protected]</a>", "firstName": "John", ...

javascriptjqueryhtmljsonrandom

Tips on displaying two columns as a single column on mobile devices

Bootstrap 3 table is described as: <style> /* Overriding Bootstrap style to ensure description text wraps into multiple rows on mobile */ .details-propertyvalue { white-space:normal !important; } </style> <table class="table table-hove ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

What steps can be taken to fix the error message 'Uncaught TypeError: (...) is not a function'?

I have already checked a similar question on stackoverflow, but it does not address the specific issue I am facing with the error. My goal is to ensure that both scripts, embed.js (plugin) and more-content-arrow.js (custom script), work correctly on the p ...

javascriptjqueryerror-handlingtypeerrorgetscript

Introduction to utilizing the features of HTML5 tag attributes and HTML5+CSS form validation within Struts2 tag elements

We currently have a heavy reliance on struts2 in our application. One of the challenges we are facing is to eliminate all default struts2 validation and implement HTML5 with CSS validation instead. For example, when working with a struts2 form: <s:for ...

csshtmlvalidationstruts2

Border extends across two separate rows

Let me illustrate my issue with a specific example where I am utilizing a single column with a rowspan: <table border="1" style="width:300px"> <tr> <td rowspan="2">Family</td> <td id="jill">Jill</td> <td>Smi ...

htmlcss

Creating an array of options for a jQuery plugin by parsing and populating

I am currently in the process of developing my very first jQuery plugin. The main function of this plugin involves taking JSON data and loading it into a table. Although most of the logic has been implemented successfully, I am facing challenges when it co ...

javascriptjqueryjson

The <ul> tag is not receiving the correct styles and is not displaying properly

I have successfully integrated an input control and button into my table within the Angular 7 application. When a user inputs text in the control and clicks the add button, the text is appended to the <ul> list. However, the layout of the <ul> ...

htmlcss

Is there a way to eliminate the pop-up window background in MUI?

Is there a way to get rid of the white pop-up background in MUI's default CSS? <Dialog open={open} onClose={() => { setOpen(false); }} > <DialogContent> <h1>Do you really ...

javascriptcssreactjsmaterial-ui

Ensuring Consistent Vertical Spacing for CSS-Animated Bootstrap 5 Navbar Toggler Buttons in All Browsers

After watching a tutorial on implementing a custom Navbar toggler button in Bootstrap 5, I decided to try it out myself. However, I encountered an issue with the spacing between the three bars that make up the toggler button - the spacing looked different ...

htmlcsscss-animationsnavbarbootstrap-5

How can we focus href on a <div> using CMS in PHP?

I am currently in the process of learning PHP and simultaneously tackling a redesign of a custom CMS. The CMS is written in PHP, and I have already revamped the default menu using CSS to incorporate a side slide effect. However, my next challenge is to en ...

phpjqueryhtmlhreftarget

Tips for extracting the image URL from my JSON string

I am in possession of a json file that includes URLs for images, and I have come across something that seems to be a URL, which is encoded as: iVBORw0KGgoAAAANSUhEUgAAADYAAAAzCAMAAADrVgtcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6m ...

javascriptjqueryjsonencryption

Ways to transfer a PHP variable to Ajax

Is there a way to display the title variable in an AJAX request using PHP and jQuery? PHP <?php $title = "Test-1"; ?> Ajax $(".btn").click(function () { if ($(".main-input-box").val().length > 0) { $(".btn").load("results ...

phpjqueryajax