jquery ready and resize function doesn't work

Question

Hello I had this problem which for some reason only occurs when I upload it to my website server the problem is I need a group of images to be the same size as another group of divs and I need this function to load on ready and resize but the function will only work when I resize the document/window rather than ready/load, when I need it to do both.

$(document).ready(function(){


$(window).on('resize ready', function(){

        var heightval = $('#main-contentp1').height();
        $("#fom-desc").height(heightval);
        var heightvalb = $('#moodboard-box-ca').height();
        $("#vmt-pic-sec").height(heightvalb);
        var heightvalc = $('#view-blog-seca').height();
        $(".vmt-pic-sec").height(heightvalc);

    });

});

Answer 1

Well you are adding the ready event listener inside $(document).ready() which runs only after the document is ready. so the ready won't be fired.

try this:

$(document).ready(function(){
myFunction();
$(window).on('resize', myFunction);
});

function myFunction(){
 var heightval = $('#main-contentp1').height();
    $("#fom-desc").height(heightval);
    var heightvalb = $('#moodboard-box-ca').height();
    $("#vmt-pic-sec").height(heightvalb);
    var heightvalc = $('#view-blog-seca').height();
    $(".vmt-pic-sec").height(heightvalc);
}

Answer 2

document.onready = whatToDoOnResizeOrLoad;
window.onresize = whatToDoOnResizeOrLoad;

function whatToDoOnResizeOrLoad(){

        var heightval = $('#main-contentp1').height();
        $("#fom-desc").height(heightval);
        var heightvalb = $('#moodboard-box-ca').height();
        $("#vmt-pic-sec").height(heightvalb);
        var heightvalc = $('#view-blog-seca').height();
        $(".vmt-pic-sec").height(heightvalc);

    });