LED METER FUNCTIONALITY
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.
Components:
- Image (for led meter)
- Form List/Menu
- JavaScript function
- Event Handler
Construction:
- Design Graphic Level Meter
- Develop a form list with values 0-20
- Attach an onChange event handler to run a JavaScript function
- Allow JavaScript function to change CSS style rules either on the image or the box that contains the image
- Define CSS styles to position the image absolutely within the box that contains the image and to the bottom (this resolves an issue where the image opens downward rather than upward)
Factors: body css javascript
Value |
Type |
Location |
Relationship |
attack |
[name][id] |
body |
led_meter |
led_meter |
[image] |
body |
adjustMeter() function |
ledbox |
[id] |
body |
#ledbox |
adjustMeter() |
JavaScript function |
head |
Attack, led_meter |
Method:
- Select a value inside the form list box
- The Led Bar increases or decreases its height proportionate to the value chosen.
Process:
- User clicks on form input
- onChange event handler passes the value of the selection as a parameter to a JavaScript function
- The function uses the form's value to change the style property of the image's parent element.
- The image reflects the change in its height.
Formula:
element.style.height=(obj.value*2)+'px'
The image in this example is 40 pixels high
The value range in the form list is between 0-20
The factor of multiplication is determined by the formula x(pixels high) divided by 20(value range)