CODEWITHSUNDEEP
jquery
public9nf
public9nf

Reputation: 1399

Call event when document is ready and document is resized

I use the following script to get the padding-top of a div. The div get's his padding-top from an hero-image height. The actuall script works great when the size is loaded but when i resize the browser window the padding top is not calculated again. 

jQuery(document).ready(function($) {
    /***** CONTENT-WRAPPER PADDING FRONTPAGE *****/
    var $banner = $(".front header img");
    $banner.on('load', function(){
        var bannerHeight = $(this).height();
        console.log(bannerHeight);
        $("#content-wrapper").css("padding-top", bannerHeight)
    });
})

Upvotes: 0

Views: 40

Answers (2)

Ayush
Ayush

Reputation: 42440

The resize() event will fire every time the window is resized. Attach your handler to both events: onReady and resize:

function calcPaddingTop() {
    // your logic here
}

jQuery(document).ready(calcPaddingTop);
jQuery(window).resize(calcPaddingTop);

Upvotes: 0

JC Hernández
JC Hernández

Reputation: 807

Try this:

jQuery( window ).resize(function() {
  var bannerHeight = $(".front header img").height();
  console.log(bannerHeight);
  $("#content-wrapper").css("padding-top", bannerHeight)
});

Upvotes: 1

Related Questions