Webflow sync, pageviews & more.
NEW
Answers

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?

Yes, you can achieve this using custom code and the power of Webflow Interactions.

Here's a step-by-step guide on how you can calculate the value, divide it by a fixed number, and use the resulting percentage as the width of a div for each item in a Webflow CMS collection:

1. First, make sure you have a number field in your CMS collection that holds the value you need to calculate.

2. In your Webflow project, create a Collection List to display the items from your CMS collection.

3. Add a Div Block inside the Collection List, which will represent each item.

4. Give the Div Block a class name for easier targeting. For example, let's call it "item-container".

5. Next, go to the Project Settings in Webflow and navigate to the Custom Code tab.

6. Paste the following JavaScript code inside the Footer Code section:

```javascript

```

7. Save your project and publish it.

Now, when your page loads, the JavaScript code will run and perform the necessary calculations for each item in your CMS collection. It will extract the value from the custom data attribute (e.g., `data-value`) that you need to calculate. Then, it divides that value by the fixed number (in this case, 100) and calculates the resulting percentage. Finally, it sets the width of each item container using the calculated percentage.

By leveraging Webflow's Collection List and custom code, you can dynamically adjust the width of each item in your CMS collection based on your custom calculations without relying on CSS calc() or jQuery.

Rate this answer

Other Webflow Questions