How can jQuery and Webflow.js scripts be accessed from custom embeds or external JavaScripts in Webflow?
TL;DR
- Ensure jQuery and Webflow.js are automatically included by Webflow.
- Use
$(document).ready()to ensure jQuery and the DOM are loaded before executing custom code. - Use
Webflow.push()to run custom code after Webflow.js components like interactions are initialized.
To access jQuery and Webflow.js scripts from custom embeds or external JavaScripts in Webflow, follow these steps to ensure these libraries are loaded and ready for use.
1. Include jQuery in Your Project
- Webflow automatically includes jQuery in all projects. No additional action is required to load it separately.
- Ensure your custom code waits until jQuery is fully loaded before executing any functions.
2. Access jQuery in Custom Scripts
- Use the document ready function to ensure jQuery is available when your custom script starts running:
- Example:
$(document).ready(function() { / Your code here / });
3. Use Webflow.js in Custom Code
- Webflow.js is automatically included and initialized in published sites.
- To ensure your custom code accesses Webflow interactions properly, run your functions after Webflow.js has loaded.
4. Wait for Document’s Ready State
- Utilize
$(document).ready()to make sure that both jQuery and Webflow.js are ready and that the DOM is fully loaded.
5. Timing Your Custom Functions With Webflow
- If specific Webflow interactions or components need to be ready (like animations or sliders), use the Webflow.push() method.
- This ensures your code runs after Webflow’s components are initialized.
- Example:
Webflow.push(function() { / Your custom code / });
Summary
Using jQuery and Webflow.js in Webflow is straightforward since both are included by default. Ensure to use the document ready event for jQuery and the Webflow.push() method for Webflow.js functionalities to guarantee the libraries are fully loaded before your scripts run.
