How to Fire a jQuery Function When the Page is Loaded and Resized

Written by: Jacob Lett (Jake)
Updated: October 1st, 2020

When building responsive websites you often want to run a script when the page loads. But when you resize the window the layout breaks. You can use the on method to run your code if the page loads or has been resized.

// run on page load and when the window is resized
$(window).on("load resize",function(e){
    console.log("adjust layout");
    $('.page-header').matchHeight(".target");
});

Source

About the Author

Jacob Lett (Jake) is the founder of Bootstrap Creative, a B2B marketing consultancy specializing in manufacturers and industrial companies. A HubSpot-certified CMS developer, SEO, Answer Engine Optimization (AEO), and RevOps professional, he helps B2B companies improve their websites, search visibility, HubSpot systems, and Google Ads campaigns to generate more qualified leads and RFQs. With over a decade of hands-on experience, he acts as a direct partner for companies seeking measurable ROI from their marketing investment.