How can I calculate a value from a number in a Webflow CMS collection, divide it by a fixed number, and use the resulting percentage as the width of a div for each item in the collection? Is there a way to do this without using CSS calc() or jQuery?
TL;DR
- Ensure the CMS Collection has a numeric field for calculations and optionally a reference field for varying fixed numbers.
- Bind the numeric field to a hidden text element in a Collection List Item.
- Create a progress bar with a div element, absolutely positioned within a relatively positioned parent.
- Use a dummy div with a custom attribute,
data-value, bound to the numeric field via Dynamic Embed. - Apply Webflow Interactions to adjust the progress bar's width based on the percentage value extracted from
data-value.
Calculating a percentage value from a CMS item and using it as a width in Webflow can be challenging without using CSS calc() or jQuery, but you can achieve this with some creative workarounds.
1. Structure Your CMS Collection
- Make sure your CMS Collection has a numeric field that you want to use for calculation.
- Add a reference field or similar to specify the fixed number you want to divide by, if it might vary for different contexts.
2. Use Webflow's Designer and Interactions
- Bind the numeric field to a text element within a Collection List Item. This will allow you to use it as a Plain Text element.
- Hide the text element using Webflow’s styles so it’s not visible on the published site.
3. Create a Custom Progress Bar
- Add a div element inside the Collection List Item to serve as your progress bar.
- Set this progress bar div to have an absolute position within its parent container, which should be relatively positioned.
4. Leverage Webflow’s CMS Logic and Custom Attributes
- Create a dummy div or element in the Collection List Item and give it a unique custom attribute, such as
data-value. - Bind this
data-valueto the CMS item’s numeric field using Webflow’s Dynamic Embed feature.
5. Apply Conditional Styling Using Custom Attributes
- Use Webflow Interactions to read the
data-valueand apply styling to the width of your progress bar div. - Define a range of interactions to change the width based on extracted percentage value.
Summary
To manipulate element widths based on CMS values in Webflow, you can leverage Webflow CMS fields, dynamic binding, and interactions. Combine these features to use CMS data creatively without directly writing custom CSS or JavaScript. This method allows you to simulate percentage-based width changes by using Webflow's no-code environment and dynamic capabilities.
