I don’t have a ton of experience, so I can really only try to point you in the right direction. JavaScript can be a bear to wrestle with sometimes.
Do you know if your site uses jQuery? If not, I’d suggest checking it out, as it can make a lot of JavaScript functionality easier and more understandable to write:
https://api.jquery.com
Also, where to place this JavaScript is going to depend on the framework used to build your site - is it an application or is it just a static site? Are you primarily responsible for maintaining it?
Just to try these things out, you should be safe to write your script inside a
<script js>
</script>
tag at the bottom of your HTML file. In most web application frameworks, this is not the ideal place to put your JavaScript, but it will work to load it into your user’s browser.
You can use this simple jQuery statement to tell the browser to begin running your JavaScripts when the page finishes loading:
<script js>
$(function() {
<< your scripts here >>
});
</script>
Then you can write JavaScript functions (using jQuery API when it suits) to do what you need done dynamically on the page.
You may be able to do something with the setInterval() function and a function that refreshes your <iframe> and hits the Airtable API for data to use for resizing the <iframe>:
https://www.w3schools.com/js/js_timing.asp
Or you may want to try to make it easier on yourself and use a button to trigger a refresh of the <iframe> and retrieval of new data from Airtable to use for resizing the <iframe> with event handlers:
https://www.w3schools.com/js/js_events.asp
Either way, you need to accomplish 2 things with your scripts -
- Refresh the content of the
<iframe> - the link that feeds it needs to be “hit” again to fetch the current state of the Airtable View it is displaying
- Hit the Airtable API to fetch the number of records in that view to use for resizing the
<iframe>; you’ll need to fetch the data, then have some function to convert the number of records to a display size for your frame, then apply that sizing by targeting your <iframe> and modifying its height="" property
That may be about as far as I can advise - I’m pretty new to web development. If you are new to JavaScript, you may be in for a bit of a ride here :slightly_smiling_face: Have fun!
