getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2019
getButterfly

How to make an iframe responsive using jQuery

Stubborn iframes can be tamed using a simple jQuery trick and a couple of code tweaks. First of all, the iframe shouldn’t have any height or scrolling attributes. Second, there shouldn’t be any styling associated with height or content overflow. Third, use the code below to tame the iframe.

$(document).ready(function() {
    var calcHeight = function() {
        $('#frameId').height($(window).height());
    }

    calcHeight();

    $(window).resize(function() {
        calcHeight();
    }).load(function() {
        calcHeight();
    });
});

Enjoy!

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Monday, September 25, 2017 in Blog

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.


Privacy Policy