Change width on click using Jquery

Question

I have a bootstrap progress bar that changes the current progress when the width attribute is changed. I want to change this width attribute and add 10% when the user toggles it on and decrease 10% when the user toggles it off.

Here is my code:

<div class="progress progress-danger progress-striped active"> 
       <div class="bar" style="width:30%"></div>
</div>

<a id="updateit">Click to change the progress</a>

$(function(){
  $("#updateit").toggle(function(){
     $('.bar').css("width", + '10%');
  });
});

Thanks in advance! :)

VVV · Accepted Answer · 2012-10-18 00:24:05Z

2

Here's a working fiddle

You can't add percentages (I believe), so I converted it using the width of.progress.

0.1 = 10%

$(function(){
  $("#updateit").toggle(
   function(){
     $('.bar').css("width", '+=' + (0.1 * $('.progress').width()));
     return false;
  },
  function(){
     $('.bar').css("width", '-=' + (0.1 * $('.progress').width()));
     return false;
  });
});

answered Oct 18, 2012 at 0:24

VVV

7,6133 gold badges37 silver badges56 bronze badges

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

Comments

Pablo · Accepted Answer · 2012-10-18 00:55:01Z

1

The example on the other answer is ok but .bar will finally have a fixed value in pixels. You can try this if you still want to set the value in % (if, in case the parent changed its width, .bar would also change for % values):

$(function(){
    var $bar = $(".bar");
    $("#updateit").toggle(function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) +10 + '%');
    },
    function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');
    });
});

answered Oct 18, 2012 at 0:55

Pablo

3803 silver badges13 bronze badges

Comments

DACrosby · Accepted Answer · 2012-10-18 00:37:01Z

I noticed a couple things with your code.

First, make sure you have an href on your anchor. It's proper HTML even if it isn't used (add return false; to your JavaScript to make it not follow the link). My browser didn't recognize the link at all because it didn't have an href.

Next, you want users to click the link and then it toggles the width, right? You'll need the click() event then.

After that, here's what I came up with:

jQuery

var isOn = true;
$(function(){
   $("#updateit").click(function(){
      console.log(isOn);
      if ( isOn ){
          isOn = false;
          $('.bar').css("width", '10%');
      } else {
          isOn = true;
          $('.bar').css("width", '20%');
      }
      return false;
  });
});

HTML

<div class="progress progress-danger progress-striped active"> 
       <div class="bar"></div>
</div>

<a href="#" id="updateit">Click to change the progress</a>

CSS (used to show the .bar for testing and to set the initial width)

.bar{
    width:20%;
    height:20px;
    background:#600;
}

The jsFiddle

Collectives™ on Stack Overflow

Change width on click using Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related