Adjustable Bootstrap Progress Bar - Modify element width on the fly

I have encountered an issue with my progress bars on the webpage. The static HTML version works perfectly fine, but the dynamically created one using jQuery seems to be instantly at 100% without any delay in progression.

To illustrate the problem better, here is a snippet of the code: https://jsfiddle.net/gezgind/DTcHh/7133/

HTML:

<div class="container">
    <div id="reportbars">
        <div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">
            <div class="progress-bar" id="tracking" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">
                <span style="visibility:hidden">xxxx</span>
            </div>
      </div>
      <button id="report_start" type="button" class="btn btn-default">Start</button>
</div>

JavaScript:

 $("#report_start").click(function(){
    $("#reportbars").append(
        '<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">' +
        '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">' +
        '<span style="visibility:hidden">Tracking 950.325</span>' +
        '</div></div>'
    );
    $("#tracking").css("width","100%");
    $("#tracking1").css("width","100%");
});

Any suggestions on how to address this issue would be greatly appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Take a look at this...

check out the new code snippet

Your JavaScript code needs a little tweaking. It's currently performing all tasks in one go. Try breaking it down as follows:

JS Code:

    /* Latest compiled and minified JavaScript included as External Resource */

$("#report_start").click(function(){


    $("#reportbars").append('<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">'+
                            '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">'+
                                '<span style="visibility:hidden">Laufendes Tracking 950.325</span>'+
                            '</div></div>');





    $("#tracking").css("width","100%");
    setTimeout(function(){$("#tracking1").css("width","100%");},10)
});

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

The imported `theme` as `theme` was not visible in the file './theme'. The only possible export in the file is `default`

Encountering an error while attempting to export the theme from the index.js file. Below is the snippet of code present in the index.js file. import { createTheme } from "@mui/material"; import shadows from "./shadows"; import typograph ...

javascriptreactjsmaterial-uithemes

Transition within Bootstrap navbar is not as smooth as desired

My bootstrap navbar HTML code is as follows: <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(50, 50, 50)"> <button class="navbar-toggler" type="button" data-toggle="col ...

htmlcssbootstrap-4

Executing a code inside a jQuery modal element

I am utilizing a jquery plugin called jQuery Image Scale to automatically resize individual images on my website. Below is a simple example: // HTML: <div class='parent_container'> <img src='image.jpg' class=&apos ...

jqueryhtmlcss

What distinguishes loading angular dependencies and what method is optimal for module sharing?

Can you explain the distinction between these two methods of loading modules? angular.module('CoreApp', ['...','...','...','...']); //parent module angular.module('MainApp1', ['CoreApp' ...

javascriptangularjsmodulebowermultiple-domains

An obstacle prevents the code injection process in the Chrome extension when a button is pressed

My basic chrome extension is not functioning correctly. More specifically, I am encountering an issue where the alert box does not appear when I click on the button in the popup. Here are the contents of my manifest.json file: {"manifest_version": 2, "n ...

javascripthtmlgoogle-chrome-extension

Is it necessary to reset the variable following an ajax request?

There are two ajax functions in my code: $("body").on("click", ".follow", function() { var followingId = $(this).data("following"); var followData = {"following_id" : followingId} $(this).addClass('disabled'); $.ajax({ ur ...

jqueryajaxjson

What is the best way to incorporate CDN into my webpack build process?

I have developed a module with the following code: export default () => console.log('hello my_module~!') The configuration in the webpack.config.js file looks like this: module.exports = { // ... output: { // ... library: 'he ...

javascriptnode.jsnpmwebpack

The error message UnhandledPromiseRejectionWarning is triggered due to a TypeError stating that the function authenticate is

Currently, I am attempting to incorporate basic authentication into my API project using Knex, Express, and MySQL. Here are the functions I have implemented: const users = [{ id:1, username:'selia', password:'fullservice'}] functio ...

javascriptnode.jsasync-awaitauthorizationknex.js

How to properly center and align the width of a figcaption element within an image placed in a figure element

I've been struggling for two days now trying to fix an issue with the alignment of images and captions on my Django application. In my app, users can upload images, and I'm using figure and figcaption tags to display the image with a caption. Ho ...

cssdjangohtmlwidthcenter

Ajax encountering 404 error in ASP MVC3 website

When testing this Ajax code on my local machine, it works perfectly. However, once we deploy it to a DEV server, we encounter a 404 error. The website is built on ASP MVC3 and interacts with a SQL database without any issues elsewhere. I am new to Ajax and ...

ajaxasp.net-mvc-3jqueryiis

Extension for Chrome browser

I am new to creating Chrome extensions and I am attempting to build one that will display the IDs of all elements with a specific class name on a website in the popup window. I would like to know if there is a better way to tackle this issue. Thank you for ...

javascriptgoogle-chromegoogle-chrome-extension

Ensure all columns have the same height as the shortest column

While many solutions exist on Stack Overflow for making columns equal height based on the largest content, I am specifically interested in making all columns equal height based on the smallest column. https://i.sstatic.net/Xlcyh.png In this scenario, my ...

csstwitter-bootstrapbootstrap-4css-multicolumn-layout

Build a Docker container for a project that requires utilizing yarn link for dependencies

While working on my NextJS project, I made the decision to utilize yarn as my package manager and utilized yarn link for import aliases/absolute imports. This feature of yarn is quite handy and is recommended for managing aliases within a project. However, ...

javascriptreactjsdockernext.jsyarnpkg

How can I implement a single-column search feature in a GridView using Javascript in ASP.NET?

I found a Google function for client-side searching in a grid using a textbox Here is the function: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function searchFunction(phrase, ...

javascriptc#asp.netgridview

Failure occurs when attempting to send an object with an empty array using jQuery ajax

Looking to use jQuery Ajax PUT to send an object with an empty array `{value: {tags: []}}` to a Node.js express server, encountering the issue where `req.body.value` is undefined in the express `app.put()` handler. While suspecting jQuery as the culprit af ...

jquerynode.jsajaxexpress

Node.js/Firebase function to delete an item from a JSON object and update the existing items

I'm currently facing a challenge with updating a JSON file in Firebase after deleting an item using the .delete() function. Here is the original JSON data before deletion: "data": [ { "position": "3", ...

javascriptnode.jsjson

Difficulty in accessing JSON data with Node.js

Encountering difficulties with retrieving JSON data from a JSON file, I am faced with the following error message: "NetworkError: 404 Not Found - http://localhost:8000/channels.json" Below is the code snippet used to fetch JSON data in my HTML file: ...

javascriptjsonnode.jsexpress

Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar: #main_bar { background: url(../images/logo.jpg) 99% 50% no-repeat; background-size: auto 80%; } The original size of logo.jpg is 220x266px The toolbar has a fixed height of 46px Therefore, the background image appears t ...

androidcssresizebackground-image

Integrating image transitions into JavaScript

Could you provide guidance on how to create buttons from the three images within the "fadein" div in order to navigate directly to a specific jpeg? Currently, the three jpgs are displayed in a continuous loop. Thank you. ...

javascriptcssimagehtml

The parent's height dynamically adjusts based on the height of its visible children using only CSS

I am dealing with the following structure: <div class="body"> <div class="wrapper"> <div class="dialog"> <div class="content-0"></div> <div class="content-1&quo ...

javascripthtmlcss