How To Create Javascript/html5 Spinner List With Images?

Objective: Create a Javascript/HTML5 spinner list using images (not text) so user may enter weight and height. (example images/assets are below). Environment/Application: Using Cor

Solution 1:

This might give you some an idea of how it is possible to implement a spinner. Tested with Opera, Firefox and Chrome for Android.

varNUM_HEIGHT = 55;
varY_OFFSET = 50;
varSPINNER_HEIGHT = 150;

var targetPosition = 0;
var currentPosition = 0;
var deltaY = 0;

functiontargetReached() {
  deltaY = 0;
  currentPosition = targetPosition;
  document.getElementById("value").innerHTML = "Value: " + currentPosition;
}

functionmove() {
  var yPosition = -currentPosition * NUM_HEIGHT + deltaY + Y_OFFSET;
  document.getElementById("number").style.backgroundPosition = "0px " + yPosition + "px";

  if (targetPosition > currentPosition) {
    if (deltaY > -NUM_HEIGHT) {
      deltaY = deltaY - 5;
      setTimeout(move, 10);
    } else {
      targetReached();
    }
  } elseif (targetPosition < currentPosition) {
    if (deltaY < NUM_HEIGHT) {
      deltaY = deltaY + 5;
      setTimeout(move, 10);
    } else {
      targetReached();
    }
  }
}
move();




functiongetClickPosition(e) {
  // Click position handling.// xPosition and yPosition are relative to element bounds.// Source: http://www.kirupa.com/html5/getting_mouse_click_position.htmvar parentPosition = getPosition(e.currentTarget);
  var xPosition = e.clientX - parentPosition.x;
  var yPosition = e.clientY - parentPosition.y;

  if (yPosition > SPINNER_HEIGHT / 2 && currentPosition != 10) {
    targetPosition = currentPosition + 1;
  } elseif (yPosition < SPINNER_HEIGHT / 2 && currentPosition != 0) {
    targetPosition = currentPosition - 1;
  }
  move();
}

functiongetPosition(element) {
  // Helper function// Source: http://www.kirupa.com/html5/getting_mouse_click_position.htmvar xPosition = 0;
  var yPosition = 0;
  while (element) {
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

// document.getElementById("number").addEventListener("click", getClickPosition, false);document.getElementById("number").addEventListener("mousedown", getClickPosition, false);

#spinner {
  background: url(http://i.stack.imgur.com/0Fc85m.png);
  background-size: 100%100%;
  background-repeat: no-repeat;
  height: 150px;
  width: 300px;
}
#number {
  background: url(http://i.stack.imgur.com/c0ufam.png);
  background-repeat: no-repeat;
  background-size: 100%600px;
  height: 150px;
  width: 50px;
  margin-left: 20px;
}

<divid="spinner"><divid="number"></div></div><br /><divid="value">Value: 0</div>