Creating a dynamic progress bar with jQuery that randomly adjusts the width of an

I'm struggling to figure out what I'm doing incorrectly. My goal is to set the width of an image to a random value between 0 and 100%. Can someone help me identify my mistake?

function updateProgressBar() {

    $("body").append("<div class='main_div'></div>");

    var numberOfBars = Math.floor(Math.random() * 10) + 1;

    for(var i = 0; i < numberOfBars; i++){

        $(".main_div").append("<div class='statusbar'></div>");
        $(".statusbar:nth-child(" + numberOfBars + ")").append("<img src='project_status.gif'>");

        var randomWidth = Math.floor(Math.random() * 100) + 1;
        $(".statusbar:nth-child(" + numberOfBars + ") img").css({ "width": randomWidth + "%" });

    }

}

Answer №1

Your Math.floor() function contains errors, the correct format should be:

Math.floor((Math.random() * 10) + 1));

The +1 should be included within the Math.floor brackets.

If you're interested, I've created a random-size progress bar before, you can check it out here: http://jsfiddle.net/cu22W/10/

Answer №2

The problem lies in this particular statement:

$(".statusbar:nth-child(" + x + ") img").css({ "width", "(" + c +")%" });

You may want to familiarize yourself with the JQuery .css() function : http://api.jquery.com/css/

When using the .css() function with { } brackets, the syntax mirrors that of CSS itself.

Therefore, for your statement, the correct format would be :

.css({ width : c +"%" })

Alternatively, if you prefer to keep it as is, simply remove the { } brackets :

.css( "width", c +"%")

It is also unnecessary to enclose c in ()

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

Tips for managing the react-bootstrap carousel using personalized buttons

In order to have control over carousel slides using custom buttons, I managed to achieve this with reference to this Example. Below is the code implementation: import React, { useState } from "react"; import { Carousel, Button, Container, Row } ...

I am attempting to retrieve information from a collection of objects

$(function () { var data = $('#userInfo').text(); var first_name = data.EmployeeFirstName; alert(first_name); alert(data); }); The data variable holds the following information: {"EmployeeID":"123456789","EmployeeLastName":"Ja ...

Ways to create a border button with a matching width to the text above using CSS

Is it possible to style a border button in CSS so that the width matches the text above? I am trying to achieve a clean look for the navigation selected text, where the border-bottom aligns with the text above. Here is an example of what I have attempted ...

Bringing in a selection of functions as an object using ES6 imports

functions.js export const setA = () => {...} export const setB = () => {...} export const setC = () => {...} component.js import {setA, setB, setC} from 'functions' export class componentOne extends React.Component { constructor(p ...

Troubleshooting jPlayer Preload Problem

Currently, I am utilizing HTML5 jPlayer to play audios through a recursive method. While everything is functioning smoothly and the audio is playing, there seems to be a delay when loading the new audio. To eliminate this delay between audios, I aim to pr ...

Create responsive div elements within a container

I am working on a layout that consists of an outer div with 5 inner divs nested within it. ------------------------------------ | <div title> | | <div value><div unit> | | <d ...

Activate the jQuery UI datepicker with a trigger

Within my code, I have a span element that displays a date in the format mm/dd/yyyy. <span class="editableDateTxt">06/10/2014</span> My goal is to have an inline editable date popup or utilize jQuery UI's datepicker when this span elemen ...

Creating unique image control buttons for each image within a div using a combination of CSS and JavaScript

How can I create image control buttons, such as close, resize, and rotate, for each individual image when hovering over it? Each image is contained within a draggable div. I want to display an image control button next to each image. This button should on ...

Styling with CSS or using tables: What should you choose?

Is there a way to replicate the frame=void functionality in CSS, or will I need to manually add frame=void to each table I create in the future? <table border=1 rules=all frame=void> I attempted to search for a solution online, but unfortunately, m ...

Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg") https://i.stack.imgur.com/8WKgv.png Below is the code snippet in questi ...

Issue: The ReCAPTCHA placeholder element needs to be clear of any content

Currently, I have integrated recaptcha into my Laravel application. My goal is to use jQuery to verify the response of the recaptcha upon form submission and alert the user if they haven't validated the captcha. Unfortunately, I am unable to prevent ...

Learn the steps to update PHP headers on a specific website using AJAX

contactfrm.php <?php // Server side validation $name = $_POST['name']; $surname = $_POST['surname']; $bsubject = $_POST['subject']; $email= $_POST['email']; $message= $_POST['message']; $to = " ...

Use jQuery to submit a form only after confirming its validity using ajax

I've come across an interesting challenge in a form I'm working on. There's one field that requires server-side validation, so I need to capture the submission, send an AJAX request with the field data, check the result, and either allow the ...

Activate dark mode automatically in material-ui

According to the official documentation: The documentation mentions that a dark mode theme will be automatically generated and reflected in the UI, but I am encountering issues with it. Dependencies: "@emotion/styled": "^11.0.0", ...

Particles are not appearing when using the Three.js shader material

Hey there, I've been working on a simple scene with a grid of particles in the shape of a cube. Check it out here: https://codepen.io/sungaila/pen/qqVXKM The issue I'm facing is that when using a ShaderMaterial, the particles don't seem to ...

Tips for avoiding errors when determining the length of a child node in Firebase within a vue.js application by utilizing the "Object.keys" function

Let's envision a Vue.js application where the data structure stored in firebase looks something like this: item: { name: itemName, childOne: { subChildA: true, subChildB: true }, childTwo: { subChildA: true, subChildB: true ...

When transitioning from a webGL-rendered page to a standard HTML page via ajax, the GPU utilization hovers consistently at 70%

I've been working on a website that utilizes three.js for the homepage and webgl for animation. Interestingly, the Google Chrome task manager shows that GPU usage on a Mac ranges from 50-70%, while on Windows it's only around 10%. My issue arise ...

Is it possible to change XML using Ajax technology?

Is it possible to update a value in an XML file using JavaScript/Ajax? I've managed to access the XML file with Ajax and utilize its values in my script. Now, I want to send any updates made by the script back to the XML file on the server using Ajax ...

What is the best way to change a variable in an AngularJS view?

My Request In my application, I have implemented 3 views, each with its own controller. The first view is the home screen, and from there the user can navigate to view 2 by clicking on a div element. On view 2, the user can then move to view 3 by clicking ...

Issue with STS 4.7: CSS Autocomplete feature not functioning properly in Spring Boot project

Currently working on a web application using Spring Boot and Thymeleaf as the template engine. I've stored all my CSS files in the "resource/static/css" directory. However, when attempting to edit an HTML file, STS does not provide suggestions for CSS ...