If statement works on resize, not ready?

Question

I am trying to accomplish two things:

1. The main content div will be dynamically sized to fit the exact height of the window. I accomplish that goal with this function:

   $(document).on( 'ready', function() {
       panelsResize();
       $(window).on( 'resize', panelsResize );
   });
   
   function panelsResize() {
       var screenHeight = $(window).height();
       var screenWidth = $(window).width();        
       if (screenWidth > 768) {
           $( ".panels" ).css( "height", screenHeight );
       }
   };
   

The class .panels is applied to the main content area.

This works swell.

2. I am trying to fill the .panels with the images in.large. These images need to retain aspect ratio while being scalable. I have based my code on this answer.

This works, but not on ready. I have to resize the screen, dropping below the media query that switches the display for .large to none. When I resize to the higher media query, switching display to block, the functionality works perfect.

Any ideas?

Here's the function (and markup):

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

    function bgResize(){
        $( '.large' ).each(function() {

        var th = $(window).height(),//box height
            tw = $(window).width(),//box width
            im = $(this).children('img'),//image
            ih = im.height(),//inital image height
            iw = im.width();//initial image width

        if  ( iw < tw ) {
            im.css( { "width" : "100%", "height" : "auto" } );
        } 
        else if ( ih < th ) {
            im.css( { "height" : "100%", "width" : "auto" } );
        }

        var nh = im.height(),//new image height
            nw = im.width(),//new image width
            hd = (nh-th)/2,//half dif img/box height
            wd = (nw-tw)/2;//half dif img/box width

        if (nh<nw) {
            im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
        } else {
            im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
        }

    });
};

This is the HTML:

    <ul id="homePanels">
        <li id="cat1" class="panels">
            <div class="large">
                <img src="#" alt="" />
            </div>
            <div class="small">
                <img src="#" alt="" />
            </div>
        </li>
    </ul>

The CSS:

#homePanels {
    list-style: none;
    margin:0;
    padding:0;
    overflow: hidden;
}

.large {
    width:100%;
    height:100%;
}

@media (min-width: 768px) { 
    .large{display: block;}
    .small{display:none}
}

@media (max-width: 768px) {
    .small {display:block;}
    .large {display:none;}
}

Answer 1

You just need to change

$(document).on( 'ready', function()

for

$(document).ready( function() 

Answer 2

i think it will work if you use jQuery ready() function.

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

Answer 3

Thanks! I made the change to the ready event.

I realized that using the image's width and height were causing the issue, since I was grabbing, basically, two 0s. So, since I knew the aspect ratio of the images, I used that to scale the images on screen resize.

    var screenHeight = $(window).height(),
        screenWidth = $(window).width(),
        aspectRatio = 0.57066014669927,
        screenAspectRatio = screenHeight / screenWidth;

    if ( screenAspectRatio < aspectRatio ){
        $("img").css({"width" : "100%" , "height" : "auto"});
    } else if ( screenAspectRatio > aspectRatio ){
        $("img").css({"width" : "auto" , "height" : "100%"});
    }

But it's solved now. Thanks for your help!