Segmented ProgressBar

Segmented ProgressBar no desc

by Berker Yüceer

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!-- Options -->
<div>
  <!-- Maximum -->
  <label>Maximum ProgressBar Value</label>
  <input id="max" type="text" value="20" />
</div>
<div>
  <!-- Initial Value -->
  <label>Initial Value</label>
  <input id="val" type="text" value="0" />
</div>
<div>
  <!-- Width -->
  <label>ProgressBar Width</label>
  <input id="width" type="text" value="300" />
</div>
<div>
  <!-- Height -->
  <label>ProgressBar Height</label>
  <input id="height" type="text" value="30" />
</div>
<div>
  <!-- Multiply -->
  <label>Segmented ProgressBar</label>
  <input id="seg" type="text" value="20" />
</div>
<!-- Create ProgressBar by given options -->
<div>
  <input type="button" value="Create" />
</div>
<!-- ProgressBar Container -->
<div class="progressContainer"></div>
<!-- Action Buttons -->
<div>
  <input type="button" value="Start" />
  <input type="button" value="Stop" />
  <input type="button" value="Reset" />
</div>

CSS

div {
  margin:10px 10px 0px 10px;
  height:24px;
}
div.progressContainer {
  clear:both;
  display:block;
}
label {
  float:left;
  width:200px;
  display:block;
}
input {
  float:left;
  width:100px;
  text-align:center;
  display:inline;
}
input[type=button] {
  margin-right:1.5px;
}

JavaScript

var i; // Define a global counter
var tmr; // Define timer
// Create Function
function create() {
  var max = parseInt($("input#max").val(), 10),
    val = parseInt($("input#val").val(), 10),
    seg = parseInt($("input#seg").val(), 10),
    width = parseInt($("input#width").val(), 10),
    height = parseInt($("input#height").val(), 10);
  $(".progressContainer").empty().height(height + 1).width(width + 1);
  // Get size for each progressbar
  var size = max / seg;
  // Get width for each progressbar
  // -2 for left/right borders of progressbars
  // -1 for margin-right
  // = -3px each of their width to fit exact location
  width = (width / seg) - 3;
  for (i = 0; i < seg; i++) {
    // Create segmented progressbars
    $(".progressContainer").append(
      '<div class="progress' + i + '"></div>');
    // Add their size
    $(".progress" + i).progressbar({
      max: size,
      value: 0
    }).css({
      margin: '0 1px 0 0',
      width: width,
      height: height,
      float: 'left'
    });
  }
  // Get initial value
  var init = val;
  if (init < size) {
    // if smaller than size
    // than only 1 bar gonna get filled
    $(".progress0").progressbar({ value: init });
  } else if (init > size) {
    // else calgulate how many bars
    // gonna be effected
    var bars = Math.floor(init / size);
    for (i = 0; i < bars; i++) {
      init = Math.abs(init - size);
      $(".progress" + i).progressbar({ value: size });
    }
    // fill the value left to the last bar
    $(".progress" + i).progressbar({ value: init });
  }
  // Now get the hell out of here!
}
function inc() {
  // Define required values
  var max = parseInt($("input#max").val(), 10),
    seg = parseInt($("input#seg").val(), 10),
    val = parseInt($("input#val").val(), 10);
  // Get size for each progressbar
  var size = max / seg;
  // Get initial value
  var init = val;
  var next = val + 1;
  // If progress is at max then reset it
  if (init >= max) {
    init = 0;
    next = 0;
    for...