​

​

Are you using Webflow localization? We've received several requests to provide better support for it, so we're working on an update. I just finished writing the code. We need to do some testing before releasing the update early next week.

Community library scripts

⏯️ Pause/Reset Video Embed on Click
​Stops all iframe videos by resetting their source on '.close-video' button click. From Corey Moen.

⏰ Progress Bar Timer​
JavaScript code to dynamically update a progress bar based on time between two dates. From Digipop.

💗 Expand text on click​
Toggle visibility of text sections with "Read More" buttons using JavaScript. From arrr_morgan.

​

Javascript 101: Greenhouse API

We've used the following really useful script from Ben Parker several times. The code dynamically fetches job data from a Greenhouse API and displays it on a webpage.

First, take a look at the code here: https://slater.app/community_library/greenhouse-43bbc514-8155-4df6-9fb0-61b8efe41639.​
Now, let's break down the code.

1. Global Object (domElements)
   • This object holds references to important DOM elements (e.g., the main container, loading indicator, job filter dropdown).
2. Fetch Data Function (fetchData)
   • This function retrieves data from a given URL and returns it in JSON format. It handles errors if the data cannot be fetched.
3. Filter Jobs (jobFilter.onchange)
   • When the user changes the filter dropdown, this code shows or hides job sections based on the selected filter value.
4. Initialize Job Data (initJob Function)
   • Displays a loading indicator.
   • Fetches department data from the API.
   • Creates sections for departments with jobs, adds them to the page, and populates the filter dropdown.
5. Write Job Listings (writeJobs Function)
   • Fetches job data for each department.
   • Updates the page with job listings under the correct department sections.
   • Hides the loading indicator and displays the main content once all jobs are loaded.

How It Works

1. Page Load: initJob is called to start the process.
2. Data Fetching: Departments and jobs are fetched from the API.
3. DOM Updates: Sections and job listings are dynamically created and added to the page.
4. User Interaction: The filter dropdown lets users choose which job sections to view.

You may not need this code now, but we've found Greenhouse to be a very common tool that our clients use. So, maybe in the future. See if you can follow how the code works. We'll discuss topics found in this script in future emails.

​

Your projects, supported by Slater

Slater served up Ben's Greenhouse script on iconiqcapital.com.

​

Happy coding!

🤙 the Slater Team

​

If Slater helps you create better websites, please support the team behind it.