Animation Preview

Welcome. To see the sample code run, click Run Pen. To Re-preview, click the Rerun button in lower right of the console.

 

Working Calculator with Bootstrap Carousel

This took time to assemble. Improvements were added to the form, adding styling consistency and improving usability.

Buttons and fields are larger and consistient now with Bootstrap added. For form accessibility, I included tabindex, accesskey, fieldset and legend into the form code. For access key use, you just hit Alt + C to jump to the field. Placeholders indicate the types of content. I improved the error messages.

See the Pen Soss Hinge Calculator with Bootstrap Carousel by Greg Miller (@shrinkray) on CodePen.

Door Width — Updated

See the Pen Soss Door Width by Greg Miller (@shrinkray) on CodePen.

All new ruler position and arrow action.

Door Thickness — Updated

See the Pen GSAP DoorMeasures_depth1 by Greg Miller (@shrinkray) on CodePen.

A red mark shows the area to measure. This includes a popout bubble showing edge and measurement.

Door Height — Updated

See the Pen Soss Door Height by Greg Miller (@shrinkray) on CodePen.

An eggagerated ruler is used to measure door height. An arrow with a yoyo function playfully bounces to show vertical measurement. Added endless loop and adjusted position of arrow endpoints.

Weight with Scales

See the Pen Soss Door Weight by Greg Miller (@shrinkray) on CodePen.

The idea was to provide a realistic method for weighing doors. I know that garage door guys weigh doors with bathroom scales, so weighing these doors would fit the task. The digital screen is enhanced to draw attention to weight. In the example, the number may be set to a realistic value. It has to be a whole number, (no decimals). If you have a number you want to try, let me know.

Customer Preview Page. ©2019, Shrinkray Interactive, LLC.