Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Question

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Currently, I am facing a challenge in dynamically adjusting the width value for a <div> element serving as a coloured bar within an HTML template used for PDF generation. While I can successfully set other values using something like {{my_value}}, applying a similar approach to style attributes does not yield the desired outcome.

My attempts have included using width: {{my_value}}% and assigning a class to the div with a specified width i.e.

.divClass { "width": {{my_value}} }

The HTML template snippet is shown below:

<!-- Dynamically update width based on {{my_value}} -->
<div style="width: 45% !important;">
<!-- Dynamic percentage displayed inside and beside -->
<div style="padding-left:8px;">{{my_value}}%</div>
</div>

Within the JavaScript file, we have the following code segment:

// Retrieve the value from POST request
var val1 = req.body.val1;

//substitute the value in the template
templateHtml = templateHtml.replace('{{my_value}}', val1);

In essence, if the POST val1 = 20%, my goal is to ensure that the coloured bar <div> reflects only 20% of its total width while also displaying the corresponding percentage. However, at present, although I can display the percentage on the bar, it ends up filling the entire width with color instead.

html css node.js express

Answer 1

Answer №1

If the server response includes a percentage value, let's say percentage, you can adjust the size using JavaScript like this:

To change the size of a <div> element in a JS file, use:

document.getElementById("myDiv").style.width = '50px';

Here is a simple example:

document.getElementById("updateLoadBar").onclick = function() {
    updateLoadingBar()
};

function updateLoadingBar() {
    // Get input value
    // Assuming you retrieve the value from your template as follows:
    // width = {{ percentage }};
    var width = document.getElementById("input-number").value;
    // Set darkBlue width
    document.getElementById("myBar").style.width = width + '%';

    // Preventing text overlap
    if (width >= 5) {
        // set text
        document.getElementById("text").textContent = width + "%";
    }
}

.myButton {
  border-radius: 5px;
}

#myProgress {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: lightblue;
}

#myBar {
  width: 1%;
  height: 100%;
  background-color: darkblue;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Select a number between 0 and 100:
<input id="input-number" type="number">
<input id="updateLoadBar" type="button" value="Update load bar" class="myButton">


<div id="myProgress">
  <div id="myBar">
    <div id="text">
    </div>
  </div>
</div>

You can explore ready-to-use examples on pure JS or bootstrap documentation if you are utilizing bootstrap in your project. Hopefully, this information is beneficial.

Answer 2

If the server response includes a percentage value, let's say percentage, you can adjust the size using JavaScript like this:

To change the size of a <div> element in a JS file, use:

document.getElementById("myDiv").style.width = '50px';

Here is a simple example:

document.getElementById("updateLoadBar").onclick = function() {
    updateLoadingBar()
};

function updateLoadingBar() {
    // Get input value
    // Assuming you retrieve the value from your template as follows:
    // width = {{ percentage }};
    var width = document.getElementById("input-number").value;
    // Set darkBlue width
    document.getElementById("myBar").style.width = width + '%';

    // Preventing text overlap
    if (width >= 5) {
        // set text
        document.getElementById("text").textContent = width + "%";
    }
}

.myButton {
  border-radius: 5px;
}

#myProgress {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: lightblue;
}

#myBar {
  width: 1%;
  height: 100%;
  background-color: darkblue;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Select a number between 0 and 100:
<input id="input-number" type="number">
<input id="updateLoadBar" type="button" value="Update load bar" class="myButton">


<div id="myProgress">
  <div id="myBar">
    <div id="text">
    </div>
  </div>
</div>

You can explore ready-to-use examples on pure JS or bootstrap documentation if you are utilizing bootstrap in your project. Hopefully, this information is beneficial.

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Answer №1

Similar questions

When I try to call jQuery's getScript function, the callback does not execute as expected within

Angular Recursive Bootstrap Breadcrumb Guide

In my app.post request in node.js and express, the body object is nowhere to be found

Unable to require less after installing it using npm in a Node.js environment

Are you searching for a stylish tabbed navigation menu design?

What is the best way to use a button to hide specific divs upon clicking?

Creating unit tests for linked functions in Node.js using Jest

The output when evaluating the xpath query "html/body/div/text()[1]" shows as [object Text], indicating there may be an issue with accessing the element's text using Selenium

Anchor positioning within Firefox Mobile (for Android)

Using an HTML element to pass a variable into a replace function

Having trouble generating an HTML table from JSON data using JavaScript

Vertical text frozen at the top of a table

Execute functions during jquery's .animate() operation

The request to remove the product from the server at URL http://localhost:8000/product/[object%20Object] encountered an internal server

firefox compatibility issues with jquery ajax

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Issues with playing Html 5 video arise when making an ajax call

Comparison between Static HTML controls and Razor HTML helpers.Static HTML controls are

Is it possible to transfer an image from the client to the NodeJS server and store it locally within the server itself?

Create a div element containing a captivating background image that automatically scales to fit any browser window