I'm currently working on a project that involves creating a bottle that gradually fills up with blue color based on the slider input. I'm seeking guidance on how to tackle this design challenge. Any advice or suggestions would be greatly appreciated.
To create a visual representation of a percentage range, you can overlay two images - one showing an empty bottle and the other filled. Here is a simple example to achieve this:
Using JavaScript:
let from = document.querySelector('#from'),
to = document.querySelector('#to'),
filling = document.querySelector('.filling');
[from, to].forEach(input =>{
input.addEventListener('keyup', () => {
filling.style.top = from.value + '%';
filling.style.height = (to.value - from.value) + '%';
});
});.bottle {
position: relative;
width: 50px;
height: 125px;
border: 1px solid #ccc;
background: #fefefe;
}
.filling {
position: absolute;
width: 100%;
background: blue;
top: 15%;
height: 50%;
}from: <input id="from" value="15" />% - to: <input id="to" value="75" />
<br /><br />
<div class="bottle">
<div class="filling"></div>
</div>Alternatively, instead of calculating the filling, you can calculate the empty parts for a different approach. Here's another example:
let emptyTop = document.querySelector('.top'),
emptyBottom = document.querySelector('.bottom');
document.querySelector('#from').addEventListener('keyup', e => {
emptyTop.style.height = e.target.value + '%';
});
document.querySelector('#to').addEventListener('keyup', e => {
emptyBottom.style.height = (100 - e.target.value) + '%';
});.bottle {
position: relative;
width: 50px;
height: 125px;
border: 1px solid #ccc;
background: blue;
}
.top, .bottom {
position: absolute;
width: 100%;
background: #fff;
}
.top {
top: 0;
height: 15%;
}
.bottom {
bottom: 0;
height: 25%;
}from: <input id="from" value="15" />% - to: <input id="to" value="75" />
<br /><br />
<div class="bottle">
<div class="top"></div>
<div class="bottom"></div>
</div>I have a scenario where I am using an ng-if directive to hide an element until a specific condition is met. Despite the condition being met in my controller, the element does not seem to be in the DOM when I try to locate it with a jQuery selector. It seem ...
a.navigation:link {color: white; text-decoration: none; padding: 20px 20px 20px 20px; border: 0.5px solid white; border-radius: 70px 70px;} a.navigation:visited {color: lightgreen; padding: 20px 20px 0px 20px; border: 0.5px solid li ...
I am working on an accordion feature that contains nested expansion panels, and my goal is to maintain the expanded or not expanded status of each row even after data reloading. While researching the documentation for material accordion, I came across the ...
I am struggling to implement ajax for adding a div to display an error message. Despite my efforts, I keep receiving null as the error message instead of the expected value. The occurrence of null is traced back to <?php echo json_encode($_SESSION[&ap ...
I'm experimenting with amCharts to generate the following: https://i.sstatic.net/LWAQr.png Currently, I'm facing some challenges: The y-axis labels are not disappearing. I attempted to use theYAxis.disabled = true; as mentioned in the documen ...
The code in the comment block is not functioning properly when placed inside an if statement. It seems that the issue may be related to its position before a return statement, so I am looking for a way to ensure it completes running before the return is c ...
My current project involves using jQuery's .toggleClass() function to implement a favorite button within multiple <div> elements, each containing an <a> element and an <i> element. I am toggling between two Font Awesome icons by swit ...
Below is the code I have written: body { padding-top: 20px; text-align: center; background-color:black; } h1 { display: inline-block; background: white; } h1 { font-size: 30px } p { background: yellow; } .container { display: flex; ...
Great job everyone! I've developed a project using Node.js which includes the following schema structure: const debt = new Schema({ name: { type: String, required: true, }, medicine: [{ data: { type: Schema.Types.ObjectId, ...
I'm looking to enhance my HTML form by retrieving the user's IP address and country when they submit the form. How can I achieve this in a way that hides the information from the user? Are there any specific elements or code additions I need to ...
As part of an educational project, I am developing a login-registration system using HTML, CSS, and PHP. The system will include various HTML text boxes and elements. My goal is to change the border color of a textbox to green when I input something into ...
Currently, I am using a basic Javascript for multiple uploads that does not allow file re-ordering. My goal is to incorporate a drag and drop feature for pictures so that their new positions can be saved on the server. The challenge lies in the fact that I ...
I am currently in the process of building a website using Bootstrap 3.1.1. The body tag is set with a min-width of 800px. The information that I want to showcase must be presented in a grid format, specifically resembling the layout of a parking lot. Dis ...
Could you please demonstrate how to control the speed of a ball using buttons for speeding up and slowing down? I have tried implementing the code but it does not seem to be working correctly. this.speedUpButton = this.add.sprite(230, 530, 'down- ...
My autoUpload is currently set to false because I prefer uploading the images manually to my backend. To achieve this, I need the file object first. In the onSubmitted event callbacks, I am attempting to pass the image's ID to the getFile method to re ...
As I develop a custom eslint plugin, I am intricately analyzing every MemberExpression to gather important data. Once all the expressions have been processed, I want to present a summary based on this data. Is there a specific event in eslint, such as "a ...
I am trying to obtain an access token using my refresh token in JavaScript. Here is the code snippet I am using: $.ajax({ type: "POST", contentType: "application/x-www-form-urlencoded", url: "https://accounts.google ...
Currently, I am in the process of developing a JavaScript code that aims to filter JSON data based on a specific condition. Yesterday, I had posted a question seeking guidance on this matter How to filter data from a json response. However, since I had not ...
While using create-react-app, I have noticed that absolute imports work in some files but not in others. Directory Layout . +-- tsconfig.js +-- package.json +-- src | +-- components | | +-- ui | | | +-- Button | | | | +-- Button.tsx | ...
Currently, I am working with Django and have encountered a situation where I need to hide an 'add' button in the html file from users starting at Friday 1pm until Sunday. The condition is specified below, but I am unable to use parentheses within ...