The Role of Filling in a Process

Question

The Role of Filling in a Process

I am looking to create a rectangle that fills up gradually every day, increasing by 1% each time. This is the basic concept.

My main struggle is figuring out how to fill it up. I need the rectangle to increase by 1% of its width each day. So essentially, I only need to change the background color of 1/100th of the rectangle's width.

For instance, if my rectangle has a width of 100px, I would like to update the background of just the first 1px. It's similar to a battery indicator... Any ideas on how to achieve this? I prefer using HTML or CSS, but I'm open to JavaScript/jQuery solutions as well.

Thank you.

javascript jquery html css

Answer 1

Answer №1

I created a simple jQuery code that accomplishes the task you described. I inserted a div with a width of 0px inside another div with a width of 100px, and then used JavaScript to dynamically adjust the width of the first div based on the second one. Below is the code snippet:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  console.log($("#firstDiv"));
  $("#secondDiv").css("width", parseInt($("#firstDiv").css("width")) / 2 + "px");
})
</script>
</head>
<body>

<div id="firstDiv" style="border: 1px solid red; width: 100px; height: 100px;">
  <div id="secondDiv" style="background-color: blue; width: 0px; height: 100px"></div>
</div>

</body>
</html>

Answer 2

I created a simple jQuery code that accomplishes the task you described. I inserted a div with a width of 0px inside another div with a width of 100px, and then used JavaScript to dynamically adjust the width of the first div based on the second one. Below is the code snippet:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  console.log($("#firstDiv"));
  $("#secondDiv").css("width", parseInt($("#firstDiv").css("width")) / 2 + "px");
})
</script>
</head>
<body>

<div id="firstDiv" style="border: 1px solid red; width: 100px; height: 100px;">
  <div id="secondDiv" style="background-color: blue; width: 0px; height: 100px"></div>
</div>

</body>
</html>

The Role of Filling in a Process

Answer №1

Similar questions

Creating dynamic input fields in JavaScript by using class-based methods

Retrieve a key based on a selected value from a PHP array using jQuery

What could be causing this Ajax request to come back with an error?

Simple request results in an error

Unable to dynamically change the value of the submit button using angular.js

Sending data to a React Dialog component using the OnClick event

What is the best way to vertically align a pseudo element image using CSS?

The Node.js express seems to be unable to fetch the css and js files

Is the background element rather than its input being focused upon when clicking in the link tool's dialog within ContentTools?

express-validator, no validation errors have been found so far

A stateless component in React must always return a valid React element or null

Unlocking the power of keys in manipulating JSONP objects

Using JQuery to Update Text, Link, and Icon in a Bootstrap Button Group

Selecting content loaded via Ajax using jQuery

CakePHP includes built-in jQuery pagination and sorting functionality

Console is displaying an error message stating that the $http.post function is returning

Why won't my div tag show conditionally with AngularJS ng-show?

Utilizing DataTables and Ajax call to refresh table data with Json response

The ReactJS Material Table Tree mode experiences delays when new row data is introduced

I'm encountering an issue where the this.props object is undefined even though I've passed actions to mapDispatchToProps. What could