How to add number to current CSS width with jQuery

Question

I'm working on a meter that goes up or down depending on decisions you make.

I'm doing this by changing the width percentage of the CSS with jQuery.

Currently I can set it to an arbitrary percent, but I want to add or subtract a percentage from the current value.

How would I do this?

My code:

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

My HTML:

<div id="fanHappiness">

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

<div id="meter">

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

</div>

Thanks.

UPDATE:

Using this code I've gotten it too work, but it only subtracts or adds from the original number, so if I add 25 to the original 50, then subtract 25, I don't get 50, I get 25. Maybe storing the number in a variable after retrieving it from the CSS would help.

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

@technophobia I think he already has shown us what he has done. And question is valid. — afzalex
– afzalex, Commented Apr 29, 2015 at 18:14
@technophobia right above the HTML is the jQuery I currently use to set the CSS width / text, I didn't include the button press function because it wasn't really important to the question, I've tried adding a + symbol in a few different spots but obviously that didn't work, so I'm here asking for help. — npav42
– npav42, Commented Apr 29, 2015 at 18:17

Forklift · Accepted Answer · 2015-04-29 18:38:49Z

1

This should do the trick:

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

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

JsFiddle: https://jsfiddle.net/dnyseaen/1/

answered Apr 29, 2015 at 18:38

Forklift

9699 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Forklift Over a year ago

Please note that there is no buffer logic in that demo, so it will allow over 100%. You'll want to add some logic there.

Worldgorger · Accepted Answer · 2015-04-29 18:15:47Z

1

$("#meter").css("width") will return the percentage; therefore, you could split the returned value based on the "/" and then increment/decrement the isolated number. Once that is done, you can update the css and text. Let me know if this is not clear, and/or you need some code to visualize.

answered Apr 29, 2015 at 18:15

Worldgorger

716 bronze badges

2 Comments

npav42 Over a year ago

Thanks for your answer, if you could show some code that would be great, but I'll take what you said and see if I can figure it out.

Worldgorger Over a year ago

jsfiddle.net/t6o3oazy This should get you on the right track. Note how I write to the console so you can see how the value is extracted. Manipulate this value as you want, then update the css with jQuery such as $("#meter").css("width", newValue); Hope this helps

Collectives™ on Stack Overflow

How to add number to current CSS width with jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related