Javascript progress bar doesn't work

Question

I'd really love to have that progress bar (click me to see bar code) on my site, but when I add it, it doesn't work.

Original files:

HTML:

<div class="progress-wrap progress" data-progress-percent="25">
  <div class="progress-bar progress"></div>
</div>

CSS:

.progress {
  width: 100%;
  height: 50px;
}
.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
  .progress-bar {
    background: #ddd;
    left: 0;
    position: absolute;
    top: 0;
  }
}

JS:

// on page load...
    moveProgressBar();
    // on browser resize...
    $(window).resize(function() {
        moveProgressBar();
    });

    // SIGNATURE PROGRESS
    function moveProgressBar() {
      console.log("moveProgressBar");
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        var getProgressWrapWidth = $('.progress-wrap').width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 2500;

        // on page load, animate percentage bar to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar').stop().animate({
            left: progressTotal
        }, animationLength);
    }

I have put these lines into my html file just to link these files:

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src='bar.js'></script>

I don't know am I doing anything wrong or the code is broken?

Please help! Mieciu

I haven't edited JS or CSS file, I've just put links to these files into my HTML file, but it doesn't work. — user4398853
– user4398853, Commented Dec 28, 2014 at 0:53

user2570380 · Accepted Answer · 2014-12-28 01:09:29Z

1

The working example that you provided uses SCSS and not CSS. In CSS, class declarations cannot be nested. If you take out the .progress-bar declaration from .progress-wrap, it works.

http://jsfiddle.net/dvqfzfkk/1/

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 2500;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
}

.progress {
  width: 100%;
  height: 50px;
}
.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="25">
  <div class="progress-bar progress"></div>
</div>

answered Dec 28, 2014 at 1:09

user2570380

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

2 Comments

user4398853 Over a year ago

I have no idea what am I doing wrong. Code is working on jsfiddle, but not on my website. :(

user4398853 Over a year ago

Something strange is happening. It's frozen, but starts when I press F12. Really strange... Chrome doesn't see any errors, Firefox's given me this: "Use of inputEncoding is deprecated."

Collectives™ on Stack Overflow

Javascript progress bar doesn't work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related