"Enhancing CSS width using jQuery: A concise guide to increasing the current width with

I have a project involving a meter that changes based on decision outcomes.

To achieve this, I am adjusting the width percentage using jQuery and CSS.

Currently, I can set it to a specific percent, but I need help in adding or subtracting a percentage from the current value.

Any suggestions on how to do this?

This is my code snippet:

        $("#meter").css("width", "40%");
        $(".fan-percent").text("40%");

Here's my HTML setup:

<div id="fanHappiness">

<h4 class="white">Fan Happiness:</h4>

<div id="meter">

    <h4 class="white fan-percent">50%</h4>

</div>

Thank you for any assistance.

UPDATE:

While the following code somewhat works, it only adjusts the number relative to the original value. For instance, adding 25 then subtracting 25 from the original 50 results in 25 instead of 50. Storing the value in a variable after retrieving it from the CSS might resolve this issue.

        $("#meter").width($("#meter").width() + 25);
        $(".fan-percent").text($(".fan-percent").width() + 25 + "%");
jqueryhtmlcsspercentage

Answer №1

Here is a simple solution for your problem:

$(document).ready(function () {
    var percentage = "40%";  
    $("#meter").css("width", percentage);
    $(".fan-percent").text(percentage);
});

function increaseHappiness(){
    var currentPercentage = $("#meter")[0].style.width.slice(0, -1);
    newPercentage = +currentPercentage + 10;
    $("#meter").css("width", newPercentage + "%");
    $(".fan-percent").text(newPercentage + "%");
}

Check out the code in action on JsFiddle: https://jsfiddle.net/dnyseaen/1/

Answer №2

If you use $("#meter").css("width"), it will give you the percentage value. To make changes, you can split this value using "/", then adjust the isolated number as needed. After that, update both the css and text accordingly. If you require further clarification or would like to see a code example, feel free to reach out.

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

Retrieve the initial div from a separate webpage utilizing either jquery or php

Is it possible to load only the first div on a page into a different page? For example, let's say we have this code on "list.php": <div class="message_details"> Some Content 1 </div> <div class="message_details"> Some Content 2 < ...

phpjquery

Achieving a sticky scrollbar effect in CSS/JavaScript for scrolling within nested divs

I am trying to create a table with vertical scrolling for the entire table content. Additionally, I need two columns within the table to be scrollable horizontally, but the horizontal scrollbars disappear when the vertical scrollbar is present. How can I k ...

javascripthtmlcssscrollbar

Using Jquery to create a loop upon clicking

I'm currently implementing Jquery functionality to submit a form. My goal is to iterate through the form once the user clicks on the submit button in order to retrieve the selected option from various select fields that have been dynamically generated ...

jqueryloopsforeach

After resolving a quirky syntax error in my ejs code, I can't help but ponder what caused the issue in the first place

For my personal web development project, I've been working on a blog webpage to enhance my skills. However, I encountered an unusual syntax error while modifying the code to display different navigation bars for logged in and logged out users. Here&ap ...

htmlnode.jssyntax-errorejs

Alignment of images in a grid layout using Bootstrap 4

I am currently working on constructing an image grid with Bootstrap 4. The grid is contained within the class "showcase." In the first row, there are two landscape photos, and in the second row, there are three portrait photos. My challenge is to align the ...

htmlcsstwitter-bootstrapimagebootstrap-4

Issue encountered with jQuery nested hover events and the removeClass() function being triggered on mouseleave

I have a nested list structure that I am working with: <ul class="menu-wrapper"> <li> <a href="#">Menu item</a> <ul class="sub-menu"> <li> < ...

htmljquerycsshovernested-lists

What steps should I take to fix this JavaScript code?

I've been experimenting with JavaScript and trying to hide the image and button. However, every time I run the command, the footer keeps moving to the top of the page. How can I fix this issue? I've attempted various solutions, such as using posi ...

javascriptjquery

The PowerShell script has misplaced the HTML formatting

I am a beginner in scripting and I have two questions. I wrote a .ps1 script to identify devices with less than 10% free space: Get-Content "C:\temp\servers.txt" | Sort | ForEach { $computer = $_ $disks = @(Get-WmiObject Win32_LogicalDisk -Com ...

htmlpowershell

Why do my checkboxes refuse to respond separately?

I am currently experiencing an issue with the checkboxes in my JavaScript game. They do not respond to individual clicks as expected. Each time I log the output, I receive index 0 regardless of which box I click on. The checkboxes seem unresponsive but the ...

javascripthtmlcssmaterialize

Module fails to load in the proper sequence

As a .NET developer who is relatively new to modern client-side web applications, I am currently working on developing an Angular2 charting application using Chart.js. The modules are being loaded with SystemJS. Below is the content of my systemjs.config. ...

javascriptjquerytwitter-bootstrapangularsystemjs

Is it possible for Bootstrap 5 to extract data from an excel sheet and showcase it in an HTML table?

I have been scouring the depths of the internet with no success in finding a straightforward solution. I recently put together an HTML page that makes use of Bootstrap tables. Currently, my table contents are hardcoded directly into the HTML. I received a ...

htmlexcelbootstrap-4

The function replaceState() from history.js continuously adds new hashes to the URL

Currently, I am using Safari 5.1.5 on my Mac computer. The URL that I am visiting is: www.mysite.com When I click on a specific group, the following code is executed: History.replaceState(null, null, 'groups/' + group_id + '/'); For ...

jqueryhistory.js

What is the best way to execute a randomly chosen function in JavaScript?

I need help running a random function, but I'm struggling to get it right. Here's what I have so far: <script> function randomFrom(array) { return array[Math.floor(Math.random() * array.length)]; } function randomchords(){ randomFrom ...

javascriptjquery

"Return to previous page" feature

I am having difficulty figuring out how to implement the "go back" function for the page. For instance, I have pages A, B, C, and D. The possible switching between pages is as follows: A -> (B <-> C) -> A or D -> (B <-> C) -> D (w ...

javascripthtmlbrowser

Modify a webpage using jQuery within a single HTML document

I have a HTML document consisting of 5 pages with a navigation bar. In order to trigger a refresh on one specific page, I am using the following code: $("#page3").on("pagecreate", function(e) {}); Although it works initially, I am looking for a way to up ...

androidjqueryhtmljquery-mobile

Swap out a web link for an embedded iframe

Currently working on updating internal links: <div class="activityinstance"> <a href="http://website.com/hvp/view.php?id=515512">activity</a> </div> The goal is to convert them into: <div class="activityinstance"> ...

javascriptjqueryhtmliframe

What is the best way to maintain the original font color even after hovering over it?

Hello everyone, I'm having trouble maintaining the white color on hover. When I move the cursor to the next element inside the hover element, the font color changes. I've tried various methods to keep the desired color but nothing seems to work. ...

htmlcsscss-selectors

JavaScript (Automatic) for a full-screen webpage display

I'm having trouble creating a webpage and setting it to fullscreen mode. Here's the JavaScript code I have: var elem = document.getElementById("fulscreen"); var fs = document.getElementById("body"); elem.onclick = function() { req = fs.webk ...

javascripthtmlfullscreen

The identity becomes blurred once information is transmitted to a modal

I'm having an issue with a recipe table that belongs to a specific user. When the pencil icon on each row is clicked, a modal should display, showing the recipe details and allowing the user to edit and save the updated version. However, I've enc ...

javascriptphpjqueryajaxpdo

Utilizing MVC4 & IClientValidatable: Streamlining server side validation with automatic AJAX requests

Looking to implement custom client-side validation in MVC4 and have it working well with standard attributes. For example, in the model: public class UploadedFiles { [StringLength(255, ErrorMessage = "Path is too long.")] [Required(ErrorMessage = ...

jqueryajaxasp.net-mvc-4validation