CODEWITHSUNDEEP
csstwitter-bootstrapjquery
user1163073
user1163073

Reputation: 317

Change width on click using Jquery

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! :)

Upvotes: 4

Views: 8822

Answers (3)

Pablo
Pablo

Reputation: 380

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 + '%');
    });
});

Upvotes: 1

DACrosby
DACrosby

Reputation: 11450

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

Upvotes: 0

VVV
VVV

Reputation: 7593

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;
  });
});

Upvotes: 2

Related Questions