DiggThis

JavaScript Dynamic Scaling - Led Bar Test

Click here to view the technical documentation.

The purpose of this exercise is to proportionately change the height property of an image proportionate to the user-selected value chosen in the form menu.

Method:

  1. Select a value inside the form list box
  2. The Led Bar increases or decreases its height proportionate to the value chosen.


meter




Process:

  1. User clicks on form input
  2. onChange event handler passes the value of the selection as a parameter to a JavaScript function
  3. The function uses the form's value to change the style property of the image's parent element.
  4. The image reflects the change in its height.

Use:

The intended use for this function is to visually show attributes (in our example from 1 to 20) in the led bar and to allow those values to dynamically change upon user selection. The selection method can be automated to receive inputs from a server-side database.

 

The aim is to introduce a graphic level meter, with a 1 pixel high led bar for an attribute score of 1 and a 20 pixel high bar for an attribute score of 20.  This can be achieved via CSS only with dynamic changes to the box height, or this can be achieved via the use of 20 graphics for each attribute point up to 20. The idea is to visually reflect values in a led bar display.